@helpwave/hightide 0.4.0 → 0.5.1

package/dist/index.js

@@ -6262,12 +6262,16 @@ __export(index_exports, {
   DatePicker: () => DatePicker,
   DatePickerUncontrolled: () => DatePickerUncontrolled,
   DateProperty: () => DateProperty,
+  DateTimeInput: () => DateTimeInput,
+  DateTimeInputUncontrolled: () => DateTimeInputUncontrolled,
   DateTimePicker: () => DateTimePicker,
+  DateUtils: () => DateUtils,
   DayPicker: () => DayPicker,
   DayPickerUncontrolled: () => DayPickerUncontrolled,
   Dialog: () => Dialog,
   DiscardChangesDialog: () => DiscardChangesDialog,
   DividerInserter: () => DividerInserter,
+  Duration: () => Duration,
   EaseFunctions: () => EaseFunctions,
   ErrorComponent: () => ErrorComponent,
   Expandable: () => Expandable,
@@ -6365,6 +6369,7 @@ __export(index_exports, {
   Transition: () => Transition,
   UseValidators: () => UseValidators,
   VerticalDivider: () => VerticalDivider,
+  Visibility: () => Visibility,
   YearMonthPicker: () => YearMonthPicker,
   YearMonthPickerUncontrolled: () => YearMonthPickerUncontrolled,
   addDuration: () => addDuration,
@@ -6374,19 +6379,16 @@ __export(index_exports, {
   closestMatch: () => closestMatch,
   createLoopingList: () => createLoopingList,
   createLoopingListWithIndex: () => createLoopingListWithIndex,
-  equalDate: () => equalDate,
   equalSizeGroups: () => equalSizeGroups,
   formatDate: () => formatDate,
   formatDateTime: () => formatDateTime,
   getBetweenDuration: () => getBetweenDuration,
-  getDaysInMonth: () => getDaysInMonth,
   getNeighbours: () => getNeighbours,
   getWeeksForCalenderMonth: () => getWeeksForCalenderMonth,
   hightideTranslation: () => hightideTranslation,
   hightideTranslationLocales: () => hightideTranslationLocales,
   isInTimeSpan: () => isInTimeSpan,
   match: () => match,
-  monthsList: () => monthsList,
   noop: () => noop,
   range: () => range,
   resolveSetState: () => resolveSetState,
@@ -6416,7 +6418,6 @@ __export(index_exports, {
   useTranslatedValidators: () => useTranslatedValidators,
   useZIndexRegister: () => useZIndexRegister,
   validateEmail: () => validateEmail,
-  weekDayList: () => weekDayList,
   writeToClipboard: () => writeToClipboard
 });
 module.exports = __toCommonJS(index_exports);
@@ -6674,10 +6675,6 @@ var formatDateTime = (date) => {
   const minutes = date.getMinutes().toString().padStart(2, "0");
   return `${dateString}T${hours}:${minutes}`;
 };
-var getDaysInMonth = (year, month) => {
-  const lastDayOfMonth = new Date(year, month + 1, 0);
-  return lastDayOfMonth.getDate();
-};
 var changeDuration = (date, duration, isAdding) => {
   const {
     years = 0,
@@ -6787,6 +6784,51 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
   }
   return equalSizeGroups(dayList, 7);
 };
+var formatGerman = (date, showTime) => {
+  const d = new Intl.DateTimeFormat("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  }).format(date);
+  if (!showTime) return d;
+  const t = new Intl.DateTimeFormat("de-DE", {
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(date);
+  return `${d} um ${t} Uhr`;
+};
+var formatAbsolute = (date, locale, showTime) => {
+  if (locale === "de-DE") {
+    return formatGerman(date, showTime);
+  }
+  const options = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  };
+  if (showTime) {
+    options.hour = "numeric";
+    options.minute = "numeric";
+  }
+  return new Intl.DateTimeFormat(locale, options).format(date);
+};
+var formatRelative = (date, locale, showTime) => {
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const now = /* @__PURE__ */ new Date();
+  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
+  if (Math.abs(diffInSeconds) < 60) return rtf.format(Math.round(diffInSeconds), "second");
+  if (Math.abs(diffInSeconds) < 3600) return rtf.format(Math.round(diffInSeconds / 60), "minute");
+  if (Math.abs(diffInSeconds) < 86400) return rtf.format(Math.round(diffInSeconds / 3600), "hour");
+  if (Math.abs(diffInSeconds) < 604800) return rtf.format(Math.round(diffInSeconds / 86400), "day");
+  return formatAbsolute(date, locale, showTime);
+};
+var DateUtils = {
+  monthsList,
+  weekDayList,
+  equalDate,
+  formatAbsolute,
+  formatRelative
+};
 
 // src/components/date/DatePicker.tsx
 var import_clsx7 = __toESM(require("clsx"));
@@ -6969,6 +7011,16 @@ var hightideTranslation = {
     "remove": `Entfernen`,
     "required": `Erforderlich`,
     "reset": `Zur\xFCcksetzen`,
+    "rSortingOrderAfter": ({ otherSortings }) => {
+      let _out = "";
+      _out += `Angewendet `;
+      _out += import_internationalization.TranslationGen.resolvePlural(otherSortings, {
+        "=0": `als prim\xE4re Sortierung`,
+        "=1": `nach ${otherSortings} anderen Sortierung`,
+        "other": `nach ${otherSortings} anderen Sortierungen`
+      });
+      return _out;
+    },
     "save": `Speichern`,
     "saved": `Gespeichert`,
     "search": `Suche`,
@@ -7205,6 +7257,16 @@ var hightideTranslation = {
     "remove": `Remove`,
     "required": `Required`,
     "reset": `Reset`,
+    "rSortingOrderAfter": ({ otherSortings }) => {
+      let _out = "";
+      _out += `Applied `;
+      _out += import_internationalization.TranslationGen.resolvePlural(otherSortings, {
+        "=0": `as the first sorting`,
+        "=1": `after ${otherSortings} other sorting`,
+        "other": `after ${otherSortings} other sortings`
+      });
+      return _out;
+    },
     "save": `Save`,
     "saved": `Saved`,
     "search": `Search`,
@@ -7503,6 +7565,7 @@ var Button = (0, import_react4.forwardRef)(function SolidButton({
   startIcon,
   endIcon,
   disabled,
+  allowClickEventPropagation = false,
   className,
   ...restProps
 }, ref) {
@@ -7525,6 +7588,12 @@ var Button = (0, import_react4.forwardRef)(function SolidButton({
         paddingMapping[layout][size],
         className
       ),
+      onClick: (event) => {
+        if (!allowClickEventPropagation) {
+          event.stopPropagation();
+        }
+        restProps?.onClick(event);
+      },
       disabled,
       children: [
         startIcon,
@@ -7553,8 +7622,8 @@ var DayPicker = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("flex-col-1 min-w-[220px] select-none", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
     weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-row-2 text-center", children: week.map((date) => {
-      const isSelected = !!selected && equalDate(selected, date);
-      const isToday = equalDate(/* @__PURE__ */ new Date(), date);
+      const isSelected = !!selected && DateUtils.equalDate(selected, date);
+      const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -7754,8 +7823,9 @@ var YearMonthPicker = ({
         label: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx6.default)({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-row-1", children: monthList.map((month) => {
-          const monthIndex = monthsList.indexOf(month);
+        contentExpandedClassName: "!p-2",
+        children: equalSizeGroups([...DateUtils.monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-row-1", children: monthList.map((month) => {
+          const monthIndex = DateUtils.monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
           const firstOfMonth = new Date(year, monthIndex, 1);
@@ -8054,7 +8124,7 @@ var TimePicker = ({
     transformer(newDate);
     onChange?.(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx8.default)("flex-row-2 w-fit min-w-[150px] select-none overflow-hidden", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx8.default)("flex-row-2 select-none overflow-hidden", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-col-1 h-full overflow-y-auto min-w-16", children: hours.map((hour) => {
       const isSelected = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -10383,7 +10453,9 @@ function CarouselTabs({
           "button",
           {
             id: `${id}-tab-${index}`,
-            ref: (el) => tabRefs.current[index] = el,
+            ref: (el) => {
+              tabRefs.current[index] = el;
+            },
             onClick: () => onChange(index),
             onKeyDown: (e) => handleKeyDown(e, index),
             className: (0, import_clsx19.default)(
@@ -11329,7 +11401,9 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
         "aria-controls": `${t.id}-panel`,
         id: `${t.id}-tab`,
         tabIndex: active === t.id ? 0 : -1,
-        ref: (el) => buttonRefs.current[t.id] = el,
+        ref: (el) => {
+          buttonRefs.current[t.id] = el;
+        },
         onClick: () => setActive(t.id),
         onKeyDown: (e) => onKeyDown(e, t.id),
         className: (0, import_clsx24.default)(
@@ -11468,6 +11542,14 @@ var VerticalDivider = ({
   ) });
 };
 
+// src/components/layout/Visibility.tsx
+function Visibility({ children, isVisible }) {
+  if (isVisible) {
+    return children;
+  }
+  return void 0;
+}
+
 // src/components/loading-states/ErrorComponent.tsx
 var import_lucide_react8 = require("lucide-react");
 var import_clsx26 = __toESM(require("clsx"));
@@ -11649,7 +11731,7 @@ var NavigationItemWithSubItem = ({
   ...options
 }) => {
   const [isOpen, setOpen] = (0, import_react33.useState)(false);
-  const containerRef = (0, import_react33.useRef)();
+  const containerRef = (0, import_react33.useRef)(null);
   const triggerRef = (0, import_react33.useRef)(null);
   const id = (0, import_react33.useId)();
   const style = useFloatingElement({
@@ -12563,8 +12645,8 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-var import_react42 = require("react");
-var import_clsx47 = __toESM(require("clsx"));
+var import_react43 = require("react");
+var import_clsx48 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 
 // src/components/table/TableCell.tsx
@@ -12590,43 +12672,195 @@ var useResizeCallbackWrapper = (callback) => {
 
 // src/components/table/TableSortButton.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_clsx45 = __toESM(require("clsx"));
+var import_clsx46 = __toESM(require("clsx"));
+
+// src/components/user-action/Tooltip.tsx
+var import_react38 = require("react");
+var import_clsx45 = require("clsx");
+var import_react_dom4 = require("react-dom");
 var import_jsx_runtime57 = require("react/jsx-runtime");
+var Tooltip = ({
+  tooltip,
+  children,
+  appearDelay = 400,
+  disappearDelay = 50,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  disabled = false
+}) => {
+  const [state, setState] = (0, import_react38.useState)({
+    isShown: false,
+    timer: null
+  });
+  const { isShown } = state;
+  const anchorRef = (0, import_react38.useRef)(null);
+  const containerRef = (0, import_react38.useRef)(null);
+  const triangleRef = (0, import_react38.useRef)(null);
+  const triangleSize = 0.375;
+  const triangleClasses = {
+    top: `border-t-tooltip-background border-l-transparent border-r-transparent`,
+    bottom: `border-b-tooltip-background border-l-transparent border-r-transparent`,
+    left: `border-l-tooltip-background border-t-transparent border-b-transparent`,
+    right: `border-r-tooltip-background border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: {
+      borderWidth: `${triangleSize}rem ${triangleSize}rem 0 ${triangleSize}rem`,
+      transform: `translate(0,${triangleSize}rem)`
+    },
+    bottom: {
+      borderWidth: `0 ${triangleSize}rem ${triangleSize}rem ${triangleSize}rem`,
+      transform: `translate(0,-${triangleSize}rem)`
+    },
+    left: {
+      borderWidth: `${triangleSize}rem 0 ${triangleSize}rem ${triangleSize}rem`,
+      transform: `translate(${triangleSize}rem,0)`
+    },
+    right: {
+      borderWidth: `${triangleSize}rem ${triangleSize}rem ${triangleSize}rem 0`,
+      transform: `translate(-${triangleSize}rem,0)`
+    }
+  };
+  const isActive = !disabled && isShown;
+  const css = useFloatingElement({
+    active: isActive,
+    anchorRef,
+    containerRef,
+    horizontalAlignment: position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
+    verticalAlignment: position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center"
+  });
+  const cssTriangle = useFloatingElement({
+    active: isActive,
+    anchorRef,
+    containerRef: triangleRef,
+    horizontalAlignment: position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
+    verticalAlignment: position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center"
+  });
+  const zIndex = useZIndexRegister(isActive);
+  const zIndexTriangle = useZIndexRegister(isActive);
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    "div",
+    {
+      ref: anchorRef,
+      className: (0, import_clsx45.clsx)("relative inline-block", containerClassName),
+      onPointerEnter: () => setState((prevState) => {
+        if (prevState.isShown) {
+          return prevState;
+        }
+        return {
+          ...prevState,
+          timer: setTimeout(() => {
+            setState((prevState2) => {
+              clearTimeout(prevState2.timer);
+              return { isShown: true, timer: null };
+            });
+          }, appearDelay)
+        };
+      }),
+      onPointerLeave: () => setState((prevState) => {
+        clearTimeout(prevState.timer);
+        return {
+          ...prevState,
+          timer: setTimeout(() => {
+            setState((prevState2) => {
+              clearTimeout(prevState2.timer);
+              return { isShown: false, timer: null };
+            });
+          }, disappearDelay)
+        };
+      }),
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Visibility, { isVisible: isActive, children: [
+          (0, import_react_dom4.createPortal)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                ref: containerRef,
+                className: (0, import_clsx45.clsx)(
+                  `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded
+           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
+                  tooltipClassName
+                ),
+                style: { ...css, zIndex, animationDelay: appearDelay + "ms" },
+                children: tooltip
+              }
+            ),
+            document.body
+          ),
+          (0, import_react_dom4.createPortal)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                ref: triangleRef,
+                className: (0, import_clsx45.clsx)(`absolute w-0 h-0 opacity-0 animate-tooltip-fade-in`, triangleClasses[position]),
+                style: {
+                  ...cssTriangle,
+                  ...triangleStyle[position],
+                  zIndex: zIndexTriangle,
+                  animationDelay: appearDelay + "ms"
+                }
+              }
+            ),
+            document.body
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/table/TableSortButton.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
   color = "neutral",
   size = "tiny",
   className,
-  ...buttonProps
+  sortingIndexDisplay,
+  ...props
 }) => {
-  let icon = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronsUpDown, { className: "w-full h-full" });
+  const translation = useHightideTranslation();
+  const { sortingsCount, index } = sortingIndexDisplay;
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react20.ChevronsUpDown, { className: "size-4" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronDown, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react20.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react20.ChevronDown, { className: "size-4" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     Button,
     {
-      layout: "icon",
+      layout: hasSortingIndex ? "default" : "icon",
       color,
       size,
-      className: (0, import_clsx45.default)(className),
-      ...buttonProps,
-      children: icon
+      className: (0, import_clsx46.default)("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "div",
+          {
+            className: (0, import_clsx46.default)("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
+            children: `${index}.`
+          }
+        ) }),
+        icon
+      ]
     }
-  );
+  ) });
 };
 
 // src/components/table/TableFilterButton.tsx
 var import_lucide_react21 = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
-var import_react40 = require("react");
-var import_clsx46 = __toESM(require("clsx"));
+var import_react41 = require("react");
+var import_clsx47 = __toESM(require("clsx"));
 
 // src/utils/bagFunctions.ts
 var resolve = (children, bag) => {
@@ -12640,7 +12874,7 @@ var BagFunctionUtil = {
 };
 
 // src/components/user-action/Menu.tsx
-var import_react_dom4 = require("react-dom");
+var import_react_dom5 = require("react-dom");
 
 // src/hooks/usePopoverPosition.ts
 var defaultPopoverPositionOptions = {
@@ -12697,15 +12931,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react38.useState)(false);
-  const [timer, setTimer] = (0, import_react38.useState)();
+  const [isHovered, setIsHovered] = (0, import_react39.useState)(false);
+  const [timer, setTimer] = (0, import_react39.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -12721,14 +12955,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -12741,9 +12975,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -12761,17 +12995,17 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
   "div",
   {
-    className: (0, import_clsx46.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: (0, import_clsx47.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled cursor-not-allowed": isDisabled,
@@ -12801,10 +13035,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = (0, import_react40.useRef)(null);
-  const menuRef = (0, import_react40.useRef)(null);
+  const triggerRef = (0, import_react41.useRef)(null);
+  const menuRef = (0, import_react41.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = (0, import_react40.useState)(true);
+  const [isHidden, setIsHidden] = (0, import_react41.useState)(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -12815,7 +13049,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -12832,20 +13066,20 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (isOpen) {
       setIsHidden(false);
     }
   }, [isOpen]);
   const zIndex = useZIndexRegister(isOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
     trigger(bag, triggerRef),
-    (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    (0, import_react_dom5.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "div",
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: (0, import_clsx46.default)(
+        className: (0, import_clsx47.default)(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
@@ -12870,34 +13104,34 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-var import_react41 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react42 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react41.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react42.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Button,
           {
             layout: "icon",
             color: "neutral",
             size: "tiny",
             onClick: toggleOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react21.FilterIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react21.FilterIcon, { className: "size-4" })
           }
         ),
-        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -12905,9 +13139,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Input,
           {
             value: filterValue ?? "",
@@ -12917,8 +13151,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -12931,8 +13165,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -12946,8 +13180,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -12960,7 +13194,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -12974,12 +13208,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { size: "small", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -12990,7 +13224,7 @@ var TableFilterButton = ({
 };
 
 // src/components/table/Table.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Table = ({
   data,
   fillerRow,
@@ -13004,22 +13238,22 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react42.useRef)(null);
-  const tableRef = (0, import_react42.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react42.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react43.useRef)(null);
+  const tableRef = (0, import_react43.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react43.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react42.useState)();
-  const [pagination, setPagination] = (0, import_react42.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react43.useState)();
+  const [pagination, setPagination] = (0, import_react43.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react42.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react42.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react43.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react43.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13028,7 +13262,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react42.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react43.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13036,12 +13270,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react42.useMemo)(() => {
+  const tableMinWidth = (0, import_react43.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react42.useMemo)(() => {
+  const updateColumnSizes = (0, import_react43.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -13110,7 +13344,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -13158,18 +13392,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react42.useState)(false);
-  (0, import_react42.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react42.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react43.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -13185,7 +13419,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react42.useMemo)(() => {
+  const columnSizeVars = (0, import_react43.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -13195,18 +13429,18 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx47.default)("flex-col-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_clsx47.default)("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { ref, className: (0, import_clsx48.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_clsx48.default)("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       "table",
       {
         ref: tableRef,
-        className: (0, import_clsx47.default)(tableClassName),
+        className: (0, import_clsx48.default)(tableClassName),
         style: {
           ...columnSizeVars,
           width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
         },
         children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "col",
             {
               style: {
@@ -13217,18 +13451,22 @@ var Table = ({
             },
             header.id
           )) }, headerGroup.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
               "th",
               {
                 colSpan: header.colSpan,
-                className: (0, import_clsx47.default)("relative group", header.column.columnDef.meta?.className),
+                className: (0, import_clsx48.default)("relative group", header.column.columnDef.meta?.className),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                    header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                       TableSortButton,
                       {
                         sortDirection: header.column.getIsSorted(),
+                        sortingIndexDisplay: {
+                          index: header.column.getIsSorted() ? header.column.getSortIndex() + 1 : -1,
+                          sortingsCount: table.getState().sorting.length
+                        },
                         onClick: () => {
                           const sorted = header.column.getIsSorted();
                           const isMulti = header.column.getCanMultiSort();
@@ -13247,7 +13485,7 @@ var Table = ({
                         }
                       }
                     ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                       TableFilterButton,
                       {
                         column: header.column,
@@ -13259,7 +13497,7 @@ var Table = ({
                       header.getContext()
                     )
                   ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                  header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                     "div",
                     {
                       onMouseDown: header.getResizeHandler(),
@@ -13278,15 +13516,15 @@ var Table = ({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("tbody", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("tbody", { children: [
             table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "tr",
                 {
                   onClick: () => onRowClick?.(row, table),
                   className: table.options.meta?.bodyRowClassName,
                   children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: (0, import_react_table.flexRender)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("td", { children: (0, import_react_table.flexRender)(
                       cell.column.columnDef.cell,
                       cell.getContext()
                     ) }, cell.id);
@@ -13296,15 +13534,15 @@ var Table = ({
               );
             }),
             range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {}) }, column.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FillerRowElement, {}) }, column.id);
               }) }, "filler-row-" + index);
             })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -13316,7 +13554,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Table,
     {
       ...props,
@@ -13335,12 +13573,12 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react42.useMemo)(() => {
+  const columnsWithSelection = (0, import_react43.useMemo)(() => {
     return [
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             Checkbox,
             {
               checked: table.getIsAllRowsSelected(),
@@ -13353,7 +13591,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -13371,15 +13609,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -13393,7 +13631,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: (0, import_clsx47.default)(
+        bodyRowClassName: (0, import_clsx48.default)(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -13404,8 +13642,8 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-var import_react43 = require("react");
-var import_clsx48 = require("clsx");
+var import_react44 = require("react");
+var import_clsx49 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -13414,7 +13652,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -13424,8 +13662,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingIndication, setIsShowingIndication] = (0, import_react43.useState)(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react43.useState)(false);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react44.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react44.useState)(false);
   const positionClasses = {
     top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
     bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
@@ -13445,10 +13683,10 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     {
-      className: (0, import_clsx48.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx49.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -13463,10 +13701,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
           "div",
           {
-            className: (0, import_clsx48.clsx)(
+            className: (0, import_clsx49.clsx)(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -13478,18 +13716,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react22.Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react22.Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx48.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx49.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -13502,30 +13740,27 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_clsx49 = __toESM(require("clsx"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_clsx50 = __toESM(require("clsx"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   mode = "dateTime",
-  onFinish,
   onChange,
-  onRemove,
   timePickerProps,
   datePickerProps
 }) => {
-  const translation = useHightideTranslation();
   const useDate = mode === "dateTime" || mode === "date";
   const useTime = mode === "dateTime" || mode === "time";
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       DatePicker,
       {
         ...datePickerProps,
-        className: "min-w-80 min-h-71 max-h-71",
+        className: "min-w-80",
         yearMonthPickerProps: { className: "h-full grow" },
         value,
         start,
@@ -13535,39 +13770,26 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx49.default)("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx50.default)({ "justify-between": mode === "time" }),
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-col-2 w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-4", children: [
-      dateDisplay,
-      timeDisplay
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        Button,
-        {
-          size: "medium",
-          onClick: () => onFinish?.(value),
-          children: translation("change")
-        }
-      )
-    ] }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+    dateDisplay,
+    timeDisplay
   ] });
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react44 = require("react");
-var import_clsx50 = __toESM(require("clsx"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react45 = require("react");
+var import_clsx51 = __toESM(require("clsx"));
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -13586,7 +13808,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react44.useState)({
+  }, setAnimation] = (0, import_react45.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -13602,7 +13824,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react44.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react45.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -13612,7 +13834,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react44.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react45.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -13685,7 +13907,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -13706,7 +13928,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -13717,15 +13939,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -13733,10 +13955,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               "div",
               {
-                className: (0, import_clsx50.default)(
+                className: (0, import_clsx51.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -13762,93 +13984,163 @@ var ScrollPicker = ({
   );
 };
 
-// src/components/user-action/Tooltip.tsx
-var import_clsx51 = require("clsx");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var Tooltip = ({
-  tooltip,
-  children,
-  animationDelay = 650,
-  tooltipClassName = "",
-  containerClassName = "",
-  position = "bottom"
+// src/components/user-action/input/DateTimeInput.tsx
+var import_react46 = require("react");
+var import_lucide_react23 = require("lucide-react");
+var import_clsx52 = __toESM(require("clsx"));
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var DateTimeInput = ({
+  date,
+  onValueChange,
+  onEditCompleted,
+  onRemove,
+  containerProps,
+  mode = "date",
+  pickerProps,
+  ...props
 }) => {
-  const { isHovered, handlers } = useHoverState();
-  const positionClasses = {
-    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
-    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
-    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
-    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
-  };
-  const triangleSize = 6;
-  const triangleClasses = {
-    top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,
-    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
-    left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
-    right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`
-  };
-  const triangleStyle = {
-    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
-    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
-    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
-    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
-  };
-  const zIndex = useZIndexRegister(isHovered);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-    "div",
+  const translation = useHightideTranslation();
+  const { locale } = useLocale();
+  const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
+  const containerRef = (0, import_react46.useRef)(null);
+  useOutsideClick([containerRef], () => {
+    setIsOpen(false);
+  });
+  const zIndex = useZIndexRegister(isOpen);
+  const isReadOnly = (0, import_react46.useMemo)(() => props.readOnly || props.disabled, [props.readOnly, props.disabled]);
+  (0, import_react46.useEffect)(() => {
+    if (isReadOnly) {
+      setIsOpen(false);
+    }
+  }, [isReadOnly]);
+  const cleanInputProps = { ...props };
+  delete cleanInputProps["isShowingError"];
+  delete cleanInputProps["setIsShowingError"];
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...containerProps, className: (0, import_clsx52.default)("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        Input,
+        {
+          ...cleanInputProps,
+          placeholder: translation("clickToAdd"),
+          value: date ? DateUtils.formatAbsolute(date, locale, mode === "dateTime") : "",
+          onClick: (event) => {
+            setIsOpen(true);
+            cleanInputProps.onClick?.(event);
+          },
+          readOnly: true,
+          className: (0, import_clsx52.default)(
+            "pr-10 w-full",
+            { "hover:cursor-pointer": !isReadOnly },
+            cleanInputProps.className
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        Button,
+        {
+          coloringStyle: "text",
+          layout: "icon",
+          color: "neutral",
+          size: "small",
+          className: "absolute right-1 top-1/2 -translate-y-1/2",
+          disabled: isReadOnly,
+          onClick: () => setIsOpen((prevState) => !prevState),
+          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react23.CalendarIcon, { className: "size-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "div",
+      {
+        ref: containerRef,
+        className: "absolute left-0 flex-col-3 rounded-lg shadow-xl border bg-surface-variant text-on-surface border-divider p-2",
+        style: { zIndex },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            DateTimePicker,
+            {
+              ...pickerProps,
+              mode,
+              value: date,
+              onChange: (newDate) => {
+                onValueChange(newDate);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: !!onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              Button,
+              {
+                size: "medium",
+                color: "negative",
+                onClick: () => {
+                  onRemove?.();
+                  setIsOpen(false);
+                },
+                children: translation("clear")
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              Button,
+              {
+                size: "medium",
+                onClick: () => {
+                  onEditCompleted?.(date);
+                  setIsOpen(false);
+                },
+                children: translation("change")
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+var DateTimeInputUncontrolled = ({
+  date: initialDate,
+  ...props
+}) => {
+  const [date, setDate] = useOverwritableState((0, import_react46.useMemo)(() => initialDate ?? /* @__PURE__ */ new Date(), [initialDate]));
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    DateTimeInput,
     {
-      className: (0, import_clsx51.clsx)("relative inline-block", containerClassName),
-      ...handlers,
-      children: [
-        children,
-        isHovered && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-          "div",
-          {
-            className: (0, import_clsx51.clsx)(
-              `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
-           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
-              positionClasses[position],
-              tooltipClassName
-            ),
-            style: { zIndex, animationDelay: animationDelay + "ms" },
-            children: [
-              tooltip,
-              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-                "div",
-                {
-                  className: (0, import_clsx51.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
-                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
-                }
-              )
-            ]
-          }
-        )
-      ]
+      ...props,
+      date,
+      onValueChange: (newDate) => {
+        setDate(newDate);
+        props.onValueChange?.(newDate);
+      },
+      onRemove: () => {
+        setDate(/* @__PURE__ */ new Date());
+        props.onRemove?.();
+      }
     }
   );
 };
 
 // src/components/user-action/input/InsideLabelInput.tsx
-var import_react45 = require("react");
-var import_react46 = require("react");
-var import_clsx52 = __toESM(require("clsx"));
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react46.forwardRef)(function InsideLabelInput2({
+var import_react47 = require("react");
+var import_react48 = require("react");
+var import_clsx53 = __toESM(require("clsx"));
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react48.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = (0, import_react46.useState)(false);
-  const generatedId = (0, import_react45.useId)();
+  const [isFocused, setIsFocused] = (0, import_react48.useState)(false);
+  const generatedId = (0, import_react47.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: (0, import_clsx52.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx53.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Input,
       {
         ...props,
         id,
-        className: (0, import_clsx52.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        className: (0, import_clsx53.default)("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -13861,13 +14153,13 @@ var InsideLabelInput = (0, import_react46.forwardRef)(function InsideLabelInput2
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx52.default)(
+        className: (0, import_clsx53.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -13883,7 +14175,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     InsideLabelInput,
     {
       ...props,
@@ -13894,9 +14186,9 @@ var InsideLabelInputUncontrolled = ({
 };
 
 // src/components/user-action/input/SearchBar.tsx
-var import_lucide_react23 = require("lucide-react");
-var import_clsx53 = require("clsx");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_lucide_react24 = require("lucide-react");
+var import_clsx54 = require("clsx");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var SearchBar = ({
   onSearch,
   searchButtonProps,
@@ -13904,16 +14196,16 @@ var SearchBar = ({
   ...inputProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...containerProps, className: (0, import_clsx53.clsx)("relative", containerProps?.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ...containerProps, className: (0, import_clsx54.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       InputUncontrolled,
       {
         ...inputProps,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: (0, import_clsx53.clsx)("pr-10 w-full", inputProps.className)
+        className: (0, import_clsx54.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
-    onSearch && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Button,
       {
         ...searchButtonProps,
@@ -13922,34 +14214,34 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: (event) => onSearch(event),
-        className: (0, import_clsx53.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react23.Search, { className: "w-full h-full" })
+        className: (0, import_clsx54.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-action/input/ToggleableInput.tsx
-var import_react47 = require("react");
-var import_lucide_react24 = require("lucide-react");
-var import_clsx54 = __toESM(require("clsx"));
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react47.forwardRef)(function ToggleableInput2({
+var import_react49 = require("react");
+var import_lucide_react25 = require("lucide-react");
+var import_clsx55 = __toESM(require("clsx"));
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react49.forwardRef)(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = (0, import_react47.useState)(initialState !== "display");
-  const innerRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react47.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react49.useState)(initialState !== "display");
+  const innerRef = (0, import_react49.useRef)(null);
+  (0, import_react49.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react49.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx54.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: (0, import_clsx55.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Input,
       {
         ...props,
@@ -13970,14 +14262,14 @@ var ToggleableInput = (0, import_react47.forwardRef)(function ToggleableInput2({
         },
         "data-name": props["data-name"] ?? "togglable-input",
         "data-isEditing": isEditing ? "" : void 0,
-        className: (0, import_clsx54.default)(`w-full rounded-md`, {
+        className: (0, import_clsx55.default)(`w-full rounded-md`, {
           "text-transparent": !isEditing
         })
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: (0, import_clsx54.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx54.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: (0, import_clsx55.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react25.Pencil, { className: (0, import_clsx55.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -13987,7 +14279,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     ToggleableInput,
     {
       value,
@@ -13998,33 +14290,33 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-var import_react48 = require("react");
-var import_react49 = require("react");
 var import_react50 = require("react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var FocusTrap = (0, import_react50.forwardRef)(function FocusTrap2({
+var import_react51 = require("react");
+var import_react52 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var FocusTrap = (0, import_react52.forwardRef)(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = (0, import_react48.useRef)(null);
-  (0, import_react49.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react50.useRef)(null);
+  (0, import_react51.useImperativeHandle)(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-var import_react51 = require("react");
+var import_react53 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react51.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react51.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react53.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react53.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -14049,7 +14341,7 @@ function Transition({
 }
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react52 = require("react");
+var import_react54 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -14087,7 +14379,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react52.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -14096,10 +14388,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react53 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react53.default.useState(false);
-  (0, import_react53.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react55.default.useState(false);
+  (0, import_react55.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -14119,13 +14411,13 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react54 = require("react");
+var import_react56 = require("react");
 var useRerender = () => {
-  return (0, import_react54.useReducer)(() => ({}), {})[1];
+  return (0, import_react56.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useSearch.ts
-var import_react55 = require("react");
+var import_react57 = require("react");
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -14164,34 +14456,34 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = (0, import_react55.useState)(initialSearch ?? "");
-  const [result, setResult] = (0, import_react55.useState)(list);
-  const searchTags = (0, import_react55.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = (0, import_react55.useCallback)((newSearch) => {
+  const [search, setSearch] = (0, import_react57.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react57.useState)(list);
+  const searchTags = (0, import_react57.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react57.useCallback)((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = (0, import_react55.useMemo)(() => {
+  const filteredResult = (0, import_react57.useMemo)(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = (0, import_react55.useMemo)(() => {
+  const sortedAndFilteredResult = (0, import_react57.useMemo)(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = (0, import_react55.useMemo)(() => {
+  const usedResult = (0, import_react57.useMemo)(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -14301,6 +14593,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) {
@@ -14439,12 +14831,16 @@ var PromiseUtils = {
   DatePicker,
   DatePickerUncontrolled,
   DateProperty,
+  DateTimeInput,
+  DateTimeInputUncontrolled,
   DateTimePicker,
+  DateUtils,
   DayPicker,
   DayPickerUncontrolled,
   Dialog,
   DiscardChangesDialog,
   DividerInserter,
+  Duration,
   EaseFunctions,
   ErrorComponent,
   Expandable,
@@ -14542,6 +14938,7 @@ var PromiseUtils = {
   Transition,
   UseValidators,
   VerticalDivider,
+  Visibility,
   YearMonthPicker,
   YearMonthPickerUncontrolled,
   addDuration,
@@ -14551,19 +14948,16 @@ var PromiseUtils = {
   closestMatch,
   createLoopingList,
   createLoopingListWithIndex,
-  equalDate,
   equalSizeGroups,
   formatDate,
   formatDateTime,
   getBetweenDuration,
-  getDaysInMonth,
   getNeighbours,
   getWeeksForCalenderMonth,
   hightideTranslation,
   hightideTranslationLocales,
   isInTimeSpan,
   match,
-  monthsList,
   noop,
   range,
   resolveSetState,
@@ -14593,7 +14987,6 @@ var PromiseUtils = {
   useTranslatedValidators,
   useZIndexRegister,
   validateEmail,
-  weekDayList,
   writeToClipboard
 });
 //# sourceMappingURL=index.js.map