@helpwave/hightide 0.8.1 → 0.8.2

package/dist/index.js

@@ -6967,9 +6967,7 @@ __export(index_exports, {
   VerticalDivider: () => VerticalDivider,
   Visibility: () => Visibility,
   YearMonthPicker: () => YearMonthPicker,
-  addDuration: () => addDuration,
   builder: () => builder,
-  changeDuration: () => changeDuration,
   closestMatch: () => closestMatch,
   createLoopingList: () => createLoopingList,
   createLoopingListWithIndex: () => createLoopingListWithIndex,
@@ -6982,21 +6980,15 @@ __export(index_exports, {
   filterTags: () => filterTags,
   filterTagsSingle: () => filterTagsSingle,
   filterText: () => filterText,
-  formatDate: () => formatDate,
-  formatDateTime: () => formatDateTime,
-  getBetweenDuration: () => getBetweenDuration,
   getNeighbours: () => getNeighbours,
-  getWeeksForCalenderMonth: () => getWeeksForCalenderMonth,
   hightideTranslation: () => hightideTranslation,
   hightideTranslationLocales: () => hightideTranslationLocales,
-  isInTimeSpan: () => isInTimeSpan,
   isTableFilterCategory: () => isTableFilterCategory,
   match: () => match,
   mergeProps: () => mergeProps,
   noop: () => noop,
   range: () => range,
   resolveSetState: () => resolveSetState,
-  subtractDuration: () => subtractDuration,
   toSizeVars: () => toSizeVars,
   useAnchoredPosition: () => useAnchoredPosition,
   useControlledState: () => useControlledState,
@@ -7042,6 +7034,7 @@ __export(index_exports, {
   useTooltip: () => useTooltip,
   useTransitionState: () => useTransitionState,
   useTranslatedValidators: () => useTranslatedValidators,
+  useUpdatingDateTime: () => useUpdatingDateTime,
   useWindowResizeObserver: () => useWindowResizeObserver,
   validateEmail: () => validateEmail,
   writeToClipboard: () => writeToClipboard
@@ -14578,7 +14571,7 @@ var TableBody = import_react63.default.memo(function TableBodyVisual() {
 
 // src/components/layout/table/TableHeader.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_clsx26 = __toESM(require("clsx"));
+var import_clsx25 = __toESM(require("clsx"));
 
 // src/components/layout/table/TableSortButton.tsx
 var import_lucide_react14 = require("lucide-react");
@@ -14636,179 +14629,6 @@ var import_react72 = require("react");
 // src/components/user-interaction/input/DateTimeInput.tsx
 var import_react68 = require("react");
 var import_lucide_react16 = require("lucide-react");
-var import_clsx25 = __toESM(require("clsx"));
-
-// src/utils/date.ts
-var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
-var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
-var formatDate = (date) => {
-  const year = date.getFullYear().toString().padStart(4, "0");
-  const month = (date.getMonth() + 1).toString().padStart(2, "0");
-  const day = date.getDate().toString().padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};
-var formatDateTime = (date) => {
-  const dateString = formatDate(date);
-  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0");
-  return `${dateString}T${hours}:${minutes}`;
-};
-var changeDuration = (date, duration, isAdding) => {
-  const {
-    years = 0,
-    months = 0,
-    days = 0,
-    hours = 0,
-    minutes = 0,
-    seconds = 0,
-    milliseconds = 0
-  } = duration;
-  if (years < 0) {
-    console.error(`Range error years must be greater than 0: received ${years}`);
-    return new Date(date);
-  }
-  if (months < 0 || months > 11) {
-    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
-    return new Date(date);
-  }
-  if (days < 0) {
-    console.error(`Range error days must be greater than 0: received ${days}`);
-    return new Date(date);
-  }
-  if (hours < 0 || hours > 23) {
-    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
-    return new Date(date);
-  }
-  if (minutes < 0 || minutes > 59) {
-    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
-    return new Date(date);
-  }
-  if (seconds < 0 || seconds > 59) {
-    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
-    return new Date(date);
-  }
-  if (milliseconds < 0) {
-    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
-    return new Date(date);
-  }
-  const multiplier = isAdding ? 1 : -1;
-  const newDate = new Date(date);
-  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
-  newDate.setMonth(newDate.getMonth() + multiplier * months);
-  newDate.setDate(newDate.getDate() + multiplier * days);
-  newDate.setHours(newDate.getHours() + multiplier * hours);
-  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
-  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
-  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
-  return newDate;
-};
-var addDuration = (date, duration) => {
-  return changeDuration(date, duration, true);
-};
-var subtractDuration = (date, duration) => {
-  return changeDuration(date, duration, false);
-};
-var getBetweenDuration = (startDate, endDate) => {
-  const durationInMilliseconds = endDate.getTime() - startDate.getTime();
-  const millisecondsInSecond = 1e3;
-  const millisecondsInMinute = 60 * millisecondsInSecond;
-  const millisecondsInHour = 60 * millisecondsInMinute;
-  const millisecondsInDay = 24 * millisecondsInHour;
-  const millisecondsInMonth = 30 * millisecondsInDay;
-  const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay));
-  const months = Math.floor(durationInMilliseconds / millisecondsInMonth);
-  const days = Math.floor(durationInMilliseconds / millisecondsInDay);
-  const hours = Math.floor(durationInMilliseconds % millisecondsInDay / millisecondsInHour);
-  const seconds = Math.floor(durationInMilliseconds % millisecondsInHour / millisecondsInSecond);
-  const milliseconds = durationInMilliseconds % millisecondsInSecond;
-  return {
-    years,
-    months,
-    days,
-    hours,
-    seconds,
-    milliseconds
-  };
-};
-var isInTimeSpan = (value, startDate, endDate) => {
-  if (startDate && endDate) {
-    console.assert(startDate <= endDate);
-    return startDate <= value && value <= endDate;
-  } else if (startDate) {
-    return startDate <= value;
-  } else if (endDate) {
-    return endDate >= value;
-  } else {
-    return true;
-  }
-};
-var equalDate = (date1, date2) => {
-  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
-};
-var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
-  const month = date.getMonth();
-  const year = date.getFullYear();
-  const dayList = [];
-  let currentDate = new Date(year, month, 1);
-  const weekStartIndex = weekDayList.indexOf(weekStart);
-  while (currentDate.getDay() !== weekStartIndex) {
-    currentDate = subtractDuration(currentDate, { days: 1 });
-  }
-  while (dayList.length < 7 * weeks) {
-    const date2 = new Date(currentDate);
-    date2.setHours(date2.getHours(), date2.getMinutes());
-    dayList.push(date2);
-    currentDate = addDuration(currentDate, { days: 1 });
-  }
-  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/user-interaction/date/DateTimePicker.tsx
 var import_clsx24 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/TimePicker.tsx
@@ -14926,6 +14746,173 @@ var TimePicker = ({
 // src/components/user-interaction/date/DatePicker.tsx
 var import_react67 = require("react");
 var import_lucide_react15 = require("lucide-react");
+
+// src/utils/date.ts
+var timesInSeconds = {
+  second: 1,
+  minute: 60,
+  hour: 3600,
+  day: 86400,
+  week: 604800,
+  monthImprecise: 2629800,
+  // 30.4375 days
+  yearImprecise: 31557600
+  // 365.25 days
+};
+var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+var changeDuration = (date, duration, isAdding) => {
+  const {
+    years = 0,
+    months = 0,
+    days = 0,
+    hours = 0,
+    minutes = 0,
+    seconds = 0,
+    milliseconds = 0
+  } = duration;
+  if (years < 0) {
+    console.error(`Range error years must be greater than 0: received ${years}`);
+    return new Date(date);
+  }
+  if (months < 0 || months > 11) {
+    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
+    return new Date(date);
+  }
+  if (days < 0) {
+    console.error(`Range error days must be greater than 0: received ${days}`);
+    return new Date(date);
+  }
+  if (hours < 0 || hours > 23) {
+    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
+    return new Date(date);
+  }
+  if (minutes < 0 || minutes > 59) {
+    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
+    return new Date(date);
+  }
+  if (seconds < 0 || seconds > 59) {
+    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
+    return new Date(date);
+  }
+  if (milliseconds < 0) {
+    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
+    return new Date(date);
+  }
+  const multiplier = isAdding ? 1 : -1;
+  const newDate = new Date(date);
+  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
+  newDate.setMonth(newDate.getMonth() + multiplier * months);
+  newDate.setDate(newDate.getDate() + multiplier * days);
+  newDate.setHours(newDate.getHours() + multiplier * hours);
+  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
+  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
+  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
+  return newDate;
+};
+var addDuration = (date, duration) => {
+  return changeDuration(date, duration, true);
+};
+var subtractDuration = (date, duration) => {
+  return changeDuration(date, duration, false);
+};
+var between = (value, startDate, endDate) => {
+  if (startDate && endDate) {
+    console.assert(startDate <= endDate);
+    return startDate <= value && value <= endDate;
+  } else if (startDate) {
+    return startDate <= value;
+  } else if (endDate) {
+    return endDate >= value;
+  } else {
+    return true;
+  }
+};
+var equalDate = (date1, date2) => {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var weeksForCalenderMonth = (date, weekStart, weeks = 6) => {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const dayList = [];
+  let currentDate = new Date(year, month, 1);
+  const weekStartIndex = weekDayList.indexOf(weekStart);
+  while (currentDate.getDay() !== weekStartIndex) {
+    currentDate = subtractDuration(currentDate, { days: 1 });
+  }
+  while (dayList.length < 7 * weeks) {
+    const date2 = new Date(currentDate);
+    date2.setHours(date2.getHours(), date2.getMinutes());
+    dayList.push(date2);
+    currentDate = addDuration(currentDate, { days: 1 });
+  }
+  return equalSizeGroups(dayList, 7);
+};
+var formatAbsolute = (date, locale, format) => {
+  let options;
+  switch (format) {
+    case "date":
+      options = {
+        year: "2-digit",
+        month: "2-digit",
+        day: "2-digit"
+      };
+      break;
+    case "time":
+      options = {
+        hour: "2-digit",
+        minute: "2-digit"
+      };
+      break;
+    case "dateTime":
+      options = {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit"
+      };
+      break;
+  }
+  return new Intl.DateTimeFormat(locale, options).format(date);
+};
+var formatRelative = (date, locale) => {
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const now = /* @__PURE__ */ new Date();
+  const diffInSeconds = (date.getTime() - now.getTime()) / 1e3;
+  if (Math.abs(diffInSeconds) < timesInSeconds.minute) return rtf.format(Math.round(diffInSeconds), "second");
+  if (Math.abs(diffInSeconds) < timesInSeconds.hour) return rtf.format(Math.round(diffInSeconds / timesInSeconds.minute), "minute");
+  if (Math.abs(diffInSeconds) < timesInSeconds.day) return rtf.format(Math.round(diffInSeconds / timesInSeconds.hour), "hour");
+  if (Math.abs(diffInSeconds) < timesInSeconds.week) return rtf.format(Math.round(diffInSeconds / timesInSeconds.day), "day");
+  if (Math.abs(diffInSeconds) < timesInSeconds.monthImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.week), "week");
+  if (Math.abs(diffInSeconds) < timesInSeconds.monthImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
+  return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "year");
+};
+var toInputString = (date, format) => {
+  switch (format) {
+    case "date":
+      return date.toISOString().split("T")[0];
+    case "time":
+      return date.toISOString().split("T")[1].split("Z")[0];
+    case "dateTime":
+      return date.toISOString();
+  }
+};
+var DateUtils = {
+  monthsList,
+  weekDayList,
+  equalDate,
+  formatAbsolute,
+  formatRelative,
+  addDuration,
+  subtractDuration,
+  between,
+  weeksForCalenderMonth,
+  timesInSeconds,
+  toInputString
+};
+
+// src/components/user-interaction/date/DatePicker.tsx
 var import_clsx23 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/DayPicker.tsx
@@ -14957,7 +14944,7 @@ var DayPicker = ({
     defaultValue: initialDisplayedMonth ?? value
   });
   const month = displayedMonth.getMonth();
-  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
+  const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
   const selectedButtonRef = (0, import_react65.useRef)(null);
   const isValueInDisplayedWeeks = (0, import_react65.useMemo)(
     () => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
@@ -14986,7 +14973,7 @@ var DayPicker = ({
   }, [start, end]);
   const navigateTo = (0, import_react65.useCallback)((candidate) => {
     const clamped = clampToRange(candidate);
-    if (!isInTimeSpan(clamped, start, end)) return;
+    if (!DateUtils.between(clamped, start, end)) return;
     setValue(clamped);
     onEditComplete?.(clamped);
     if (clamped.getMonth() !== displayedMonth.getMonth() || clamped.getFullYear() !== displayedMonth.getFullYear()) {
@@ -14996,10 +14983,10 @@ var DayPicker = ({
   const onKeyDown = (0, import_react65.useCallback)(
     (event) => {
       PropsUtil.aria.navigate({
-        left: () => focusTargetDate && navigateTo(subtractDuration(focusTargetDate, { days: 1 })),
-        right: () => focusTargetDate && navigateTo(addDuration(focusTargetDate, { days: 1 })),
-        up: () => focusTargetDate && navigateTo(subtractDuration(focusTargetDate, { days: 7 })),
-        down: () => focusTargetDate && navigateTo(addDuration(focusTargetDate, { days: 7 }))
+        left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
+        right: () => focusTargetDate && navigateTo(DateUtils.addDuration(focusTargetDate, { days: 1 })),
+        up: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 7 })),
+        down: () => focusTargetDate && navigateTo(DateUtils.addDuration(focusTargetDate, { days: 7 }))
       })(event);
     },
     [focusTargetDate, navigateTo]
@@ -15011,7 +14998,7 @@ var DayPicker = ({
       const isFocused = !!focusTargetDate && DateUtils.equalDate(focusTargetDate, date);
       const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
-      const isDayValid = isInTimeSpan(date, start, end);
+      const isDayValid = DateUtils.between(date, start, end);
       return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         "div",
         {
@@ -15105,8 +15092,8 @@ var YearRow = (0, import_react66.memo)(function YearRow2({
     }
   );
 });
-var defaultStart = subtractDuration(/* @__PURE__ */ new Date(), { years: 100 });
-var defaultEnd = addDuration(/* @__PURE__ */ new Date(), { years: 100 });
+var defaultStart = DateUtils.subtractDuration(/* @__PURE__ */ new Date(), { years: 100 });
+var defaultEnd = DateUtils.addDuration(/* @__PURE__ */ new Date(), { years: 100 });
 var YearMonthPicker = ({
   value: controlledValue,
   initialValue = /* @__PURE__ */ new Date(),
@@ -15232,9 +15219,9 @@ var DatePicker = ({
           {
             tooltip: translation("time.previousMonth"),
             size: "sm",
-            disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
+            disabled: !DateUtils.between(DateUtils.subtractDuration(displayedMonth, { months: 1 }), start, end),
             onClick: () => {
-              setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
+              setDisplayedMonth(DateUtils.subtractDuration(displayedMonth, { months: 1 }));
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react15.ArrowUp, { size: 20 })
           }
@@ -15244,9 +15231,9 @@ var DatePicker = ({
           {
             tooltip: translation("time.nextMonth"),
             size: "sm",
-            disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
+            disabled: !DateUtils.between(DateUtils.addDuration(displayedMonth, { months: 1 }), start, end),
             onClick: () => {
-              setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
+              setDisplayedMonth(DateUtils.addDuration(displayedMonth, { months: 1 }));
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react15.ArrowDown, { size: 20 })
           }
@@ -15336,7 +15323,6 @@ var DateTimePicker = ({
         ...timePickerProps,
         is24HourFormat,
         minuteIncrement,
-        className: (0, import_clsx24.default)({ "justify-between": mode === "time" }),
         value,
         onValueChange: setValue,
         onEditComplete
@@ -15432,9 +15418,9 @@ var DateTimePickerDialog = ({
 // src/components/user-interaction/input/DateTimeInput.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var DateTimeInput = (0, import_react68.forwardRef)(function DateTimeInput2({
+  id: inputId,
   value,
   initialValue = null,
-  placeholder,
   onValueChange,
   onEditComplete,
   allowRemove = false,
@@ -15450,7 +15436,6 @@ var DateTimeInput = (0, import_react68.forwardRef)(function DateTimeInput2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const { locale } = useLocale();
   const [isOpen, setIsOpen] = (0, import_react68.useState)(false);
   const [state, setState] = useControlledState({
     value,
@@ -15458,19 +15443,21 @@ var DateTimeInput = (0, import_react68.forwardRef)(function DateTimeInput2({
     defaultValue: initialValue
   });
   const [dialogValue, setDialogValue] = (0, import_react68.useState)(state ?? /* @__PURE__ */ new Date());
+  const [dateString, setDateString] = (0, import_react68.useState)(state ? DateUtils.toInputString(state, mode) : "");
   (0, import_react68.useEffect)(() => {
     setDialogValue(state ?? /* @__PURE__ */ new Date());
-  }, [state]);
+    setDateString(state ? DateUtils.toInputString(state, mode) : "");
+  }, [mode, state]);
   const changeOpenWrapper = (0, import_react68.useCallback)((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
-  const id = (0, import_react68.useId)();
+  const generatedId = (0, import_react68.useId)();
   const ids = (0, import_react68.useMemo)(() => ({
-    input: `date-time-input-${id}`,
-    popup: `date-time-input-popup-${id}`,
-    label: `date-time-input-label-${id}`
-  }), [id]);
+    input: inputId ?? `date-time-input-${generatedId}`,
+    popup: `date-time-input-popup-${generatedId}`,
+    label: `date-time-input-label-${generatedId}`
+  }), [generatedId, inputId]);
   const innerRef = (0, import_react68.useRef)(null);
   (0, import_react68.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react68.useEffect)(() => {
@@ -15478,30 +15465,28 @@ var DateTimeInput = (0, import_react68.forwardRef)(function DateTimeInput2({
       changeOpenWrapper(false);
     }
   }, [changeOpenWrapper, readOnly, disabled]);
-  const clickHandler = PropsUtil.aria.click(() => changeOpenWrapper(true));
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...containerProps, className: (0, import_clsx25.default)("relative w-full", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...containerProps, className: (0, import_clsx24.default)("relative w-full", containerProps?.className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-        "div",
+        "input",
         {
           ...props,
           ref: innerRef,
           id: ids.input,
-          onClick: (event) => {
-            clickHandler.onClick();
-            props.onClick?.(event);
+          value: dateString,
+          onChange: (event) => {
+            const date = event.target.valueAsDate;
+            if (date) {
+              setState(date);
+            } else {
+              setDateString(event.target.value);
+            }
           },
-          onKeyDown: clickHandler.onKeyDown,
+          type: mode === "date" ? "date" : mode === "time" ? "time" : "datetime-local",
           ...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required }),
-          "data-value": PropsUtil.dataAttributes.bool(!!state),
-          ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props),
-          tabIndex: 0,
-          role: "combobox",
-          "aria-haspopup": "dialog",
-          "aria-expanded": isOpen,
-          "aria-controls": isOpen ? ids.popup : void 0,
           "data-name": props["data-name"] ?? "date-time-input",
-          children: state ? DateUtils.formatAbsolute(state, locale, mode === "dateTime") : placeholder ?? translation("clickToSelect")
+          "data-value": PropsUtil.dataAttributes.bool(!!state || !!dateString),
+          ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -15969,6 +15954,12 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
 };
 var DateFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
+  const id = (0, import_react71.useId)();
+  const ids = {
+    startDate: `date-filter-start-date-${id}`,
+    endDate: `date-filter-end-date-${id}`,
+    compareDate: `date-filter-compare-date-${id}`
+  };
   const operator = filterValue?.operator ?? "dateBetween";
   const parameter = filterValue?.parameter ?? {};
   const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react71.useState)(null);
@@ -15996,11 +15987,12 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
     ),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         DateTimeInput,
         {
+          id: ids.startDate,
           value: temporaryMinDateValue ?? parameter.min ?? null,
-          placeholder: translation("startDate"),
           onValueChange: (value) => setTemporaryMinDateValue(value),
           onEditComplete: (value) => {
             if (value && parameter.max && value > parameter.max) {
@@ -16029,11 +16021,12 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
           className: "min-w-64"
         }
       ),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         DateTimeInput,
         {
+          id: ids.endDate,
           value: temporaryMaxDateValue ?? parameter.max ?? null,
-          placeholder: translation("endDate"),
           onValueChange: (value) => setTemporaryMaxDateValue(value),
           onEditComplete: (value) => {
             if (value && parameter.min && value < parameter.min) {
@@ -16062,27 +16055,36 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-      DateTimeInput,
-      {
-        value: parameter.compareDate ?? null,
-        placeholder: translation("date"),
-        onValueChange: (compareDate) => {
-          onFilterValueChange({
-            operator,
-            parameter: { compareDate }
-          });
-        },
-        allowRemove: true,
-        outsideClickCloses: false,
-        className: "min-w-64"
-      }
-    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        DateTimeInput,
+        {
+          id: ids.compareDate,
+          value: parameter.compareDate ?? null,
+          onValueChange: (compareDate) => {
+            onFilterValueChange({
+              operator,
+              parameter: { compareDate }
+            });
+          },
+          allowRemove: true,
+          outsideClickCloses: false,
+          className: "min-w-64"
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
+  const id = (0, import_react71.useId)();
+  const ids = {
+    startDate: `datetime-filter-start-date-${id}`,
+    endDate: `datetime-filter-end-date-${id}`,
+    compareDate: `datetime-filter-compare-date-${id}`
+  };
   const operator = filterValue?.operator ?? "dateTimeBetween";
   const parameter = filterValue?.parameter ?? {};
   const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react71.useState)(null);
@@ -16110,12 +16112,13 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
     ),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("label", { htmlFor: ids.startDate, className: "typography-label-md", children: translation("startDate") }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         DateTimeInput,
         {
+          id: ids.startDate,
           mode: "dateTime",
           value: temporaryMinDateValue ?? parameter.min ?? null,
-          placeholder: translation("startDate"),
           onValueChange: (value) => setTemporaryMinDateValue(value),
           onEditComplete: (value) => {
             if (value && parameter.max && value > parameter.max) {
@@ -16144,12 +16147,13 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
           className: "min-w-64"
         }
       ),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("label", { htmlFor: ids.endDate, className: "typography-label-md", children: translation("endDate") }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         DateTimeInput,
         {
+          id: ids.endDate,
           mode: "dateTime",
           value: temporaryMaxDateValue ?? parameter.max ?? null,
-          placeholder: translation("endDate"),
           onValueChange: (value) => setTemporaryMaxDateValue(value),
           onEditComplete: (value) => {
             if (value && parameter.min && value < parameter.min) {
@@ -16178,22 +16182,25 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-      DateTimeInput,
-      {
-        value: parameter.compareDatetime ?? null,
-        placeholder: translation("date"),
-        onValueChange: (compareDatetime) => {
-          onFilterValueChange({
-            operator,
-            parameter: { compareDatetime }
-          });
-        },
-        allowRemove: true,
-        outsideClickCloses: false,
-        className: "min-w-64"
-      }
-    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("label", { htmlFor: ids.compareDate, className: "typography-label-md", children: translation("date") }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        DateTimeInput,
+        {
+          id: ids.compareDate,
+          value: parameter.compareDatetime ?? null,
+          onValueChange: (compareDatetime) => {
+            onFilterValueChange({
+              operator,
+              parameter: { compareDatetime }
+            });
+          },
+          allowRemove: true,
+          outsideClickCloses: false,
+          className: "min-w-64"
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
@@ -16530,14 +16537,14 @@ var TableHeader = ({ isSticky = false }) => {
       },
       header.id
     )) }) }, headerGroup.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("tr", { "data-name": "table-header-row", className: (0, import_clsx26.default)(table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("tr", { "data-name": "table-header-row", className: (0, import_clsx25.default)(table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
       return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
         "th",
         {
           colSpan: header.colSpan,
           "data-sticky": isSticky ? "" : void 0,
           "data-name": "table-header-cell",
-          className: (0, import_clsx26.default)("group/table-header-cell", header.column.columnDef.meta?.className),
+          className: (0, import_clsx25.default)("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex-row-1 items-center", children: [
               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
@@ -16637,7 +16644,7 @@ var TableDisplay = ({
 };
 
 // src/components/layout/table/TablePagination.tsx
-var import_clsx27 = __toESM(require("clsx"));
+var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var TablePaginationMenu = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
@@ -16672,7 +16679,7 @@ var TablePageSizeSelect = ({
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ...props, className: (0, import_clsx27.default)("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ...props, className: (0, import_clsx26.default)("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TablePaginationMenu, {}),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
   ] });
@@ -16765,11 +16772,11 @@ var TableWithSelectionProvider = ({
 };
 
 // src/components/layout/table/Table.tsx
-var import_clsx28 = __toESM(require("clsx"));
+var import_clsx27 = __toESM(require("clsx"));
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var Table = ({ children, table, paginationOptions, displayProps, header, footer, ...props }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ...props, className: (0, import_clsx28.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(TableProvider, { ...table, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ...props, className: (0, import_clsx27.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(TableProvider, { ...table, children: [
     header,
     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TableDisplay, { ...displayProps, children }),
     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
@@ -16786,7 +16793,7 @@ var TableWithSelection = ({
   ...props
 }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ...props, className: (0, import_clsx28.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(TableWithSelectionProvider, { ...table, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ...props, className: (0, import_clsx27.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(TableWithSelectionProvider, { ...table, children: [
     header,
     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TableDisplay, { ...displayProps, children }),
     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
@@ -17105,7 +17112,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 var import_react77 = require("react");
-var import_clsx29 = require("clsx");
+var import_clsx28 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -17144,7 +17151,7 @@ var CopyToClipboardWrapper = ({
           "div",
           {
             ref: callbackRef,
-            className: (0, import_clsx29.clsx)("w-fit hover:cursor-copy", containerClassName),
+            className: (0, import_clsx28.clsx)("w-fit hover:cursor-copy", containerClassName),
             ...disabled2 ? void 0 : props2,
             onClick: () => {
               if (disabled2) return;
@@ -17177,7 +17184,7 @@ var CopyToClipboardWrapper = ({
 
 // src/components/user-interaction/Menu.tsx
 var import_react78 = require("react");
-var import_clsx30 = __toESM(require("clsx"));
+var import_clsx29 = __toESM(require("clsx"));
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
@@ -17187,7 +17194,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
   "div",
   {
-    className: (0, import_clsx30.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: (0, import_clsx29.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-disabled cursor-not-allowed": isDisabled,
       "text-menu-text hover:bg-primary/20": !isDisabled,
       "cursor-pointer": !!onClick
@@ -17234,7 +17241,7 @@ var Menu = ({
 
 // src/components/user-interaction/ScrollPicker.tsx
 var import_react79 = require("react");
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx30 = __toESM(require("clsx"));
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
@@ -17404,7 +17411,7 @@ var ScrollPicker = ({
             children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
               "div",
               {
-                className: (0, import_clsx31.default)(
+                className: (0, import_clsx30.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -17487,7 +17494,7 @@ var Switch = ({
 
 // src/components/user-interaction/Textarea.tsx
 var import_react81 = require("react");
-var import_clsx32 = __toESM(require("clsx"));
+var import_clsx31 = __toESM(require("clsx"));
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var Textarea = (0, import_react81.forwardRef)(function Textarea2({
   value: controlledValue,
@@ -17548,7 +17555,7 @@ var TextareaWithHeadline = ({
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "div",
     {
-      className: (0, import_clsx32.default)(
+      className: (0, import_clsx31.default)(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -17557,13 +17564,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx32.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
+        headline && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx31.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
         /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: (0, import_clsx32.default)(
+            className: (0, import_clsx31.default)(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             )
@@ -17618,7 +17625,7 @@ var TimeDisplay = ({
 // src/components/user-interaction/input/InsideLabelInput.tsx
 var import_react82 = require("react");
 var import_react83 = require("react");
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx32 = __toESM(require("clsx"));
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var InsideLabelInput = (0, import_react83.forwardRef)(function InsideLabelInput2({
   id: customId,
@@ -17636,7 +17643,7 @@ var InsideLabelInput = (0, import_react83.forwardRef)(function InsideLabelInput2
   const [isFocused, setIsFocused] = (0, import_react83.useState)(false);
   const generatedId = (0, import_react82.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: (0, import_clsx33.default)("relative"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: (0, import_clsx32.default)("relative"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       Input,
       {
@@ -17654,7 +17661,7 @@ var InsideLabelInput = (0, import_react83.forwardRef)(function InsideLabelInput2
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: (0, import_clsx33.default)("h-14 px-4 pb-2 py-6.5", props.className)
+        className: (0, import_clsx32.default)("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
@@ -17663,7 +17670,7 @@ var InsideLabelInput = (0, import_react83.forwardRef)(function InsideLabelInput2
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx33.default)(
+        className: (0, import_clsx32.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",
@@ -17677,7 +17684,7 @@ var InsideLabelInput = (0, import_react83.forwardRef)(function InsideLabelInput2
 
 // src/components/user-interaction/input/SearchBar.tsx
 var import_lucide_react22 = require("lucide-react");
-var import_clsx34 = require("clsx");
+var import_clsx33 = require("clsx");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var SearchBar = ({
   value: controlledValue,
@@ -17694,7 +17701,7 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...containerProps, className: (0, import_clsx34.clsx)("relative", containerProps?.className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...containerProps, className: (0, import_clsx33.clsx)("relative", containerProps?.className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       Input,
       {
@@ -17703,7 +17710,7 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: (0, import_clsx34.clsx)("pr-10 w-full", inputProps.className)
+        className: (0, import_clsx33.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
@@ -17715,7 +17722,7 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: (0, import_clsx34.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        className: (0, import_clsx33.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
         children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react22.Search, { className: "w-full h-full" })
       }
     )
@@ -17725,7 +17732,7 @@ var SearchBar = ({
 // src/components/user-interaction/input/ToggleableInput.tsx
 var import_react84 = require("react");
 var import_lucide_react23 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var ToggleableInput = (0, import_react84.forwardRef)(function ToggleableInput2({
   value: controlledValue,
@@ -17748,7 +17755,7 @@ var ToggleableInput = (0, import_react84.forwardRef)(function ToggleableInput2({
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_clsx35.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_clsx34.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       Input,
       {
@@ -17774,8 +17781,8 @@ var ToggleableInput = (0, import_react84.forwardRef)(function ToggleableInput2({
       }
     ),
     !isEditing && /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsx)("span", { className: (0, import_clsx35.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react23.Pencil, { className: (0, import_clsx35.default)(`size-force-4`, { "text-transparent": isEditing }) })
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: (0, import_clsx34.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react23.Pencil, { className: (0, import_clsx34.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -17784,7 +17791,7 @@ var ToggleableInput = (0, import_react84.forwardRef)(function ToggleableInput2({
 var import_lucide_react25 = require("lucide-react");
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-var import_clsx36 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 var import_lucide_react24 = require("lucide-react");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var PropertyBase = ({
@@ -17808,7 +17815,7 @@ var PropertyBase = ({
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
     "div",
     {
-      className: (0, import_clsx36.default)("group/property", className),
+      className: (0, import_clsx35.default)("group/property", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
@@ -18533,13 +18540,60 @@ var useSearch = ({
   };
 };
 
+// src/hooks/useUpdatingDateStrings.ts
+var import_react95 = require("react");
+var useUpdatingDateTime = ({ absoluteFormat, localeOverride, date }) => {
+  const { locale: contextLocale } = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react95.useState)({
+    compareDate: date,
+    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+    relative: DateUtils.formatRelative(date, locale)
+  });
+  (0, import_react95.useEffect)(() => {
+    setDateAndTimeStrings({
+      compareDate: date,
+      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+      relative: DateUtils.formatRelative(date, locale)
+    });
+  }, [date, absoluteFormat, locale]);
+  (0, import_react95.useEffect)(() => {
+    let timeoutId;
+    const startTimer = () => {
+      const now = /* @__PURE__ */ new Date();
+      const diff = Math.abs((date.getTime() - now.getTime()) / 1e3);
+      let delayInSeconds;
+      if (diff < DateUtils.timesInSeconds.minute) {
+        delayInSeconds = DateUtils.timesInSeconds.second;
+      } else if (diff < DateUtils.timesInSeconds.hour) {
+        delayInSeconds = DateUtils.timesInSeconds.minute;
+      } else {
+        delayInSeconds = DateUtils.timesInSeconds.hour;
+      }
+      timeoutId = setInterval(() => {
+        setDateAndTimeStrings({
+          compareDate: date,
+          absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+          relative: DateUtils.formatRelative(date, locale)
+        });
+      }, delayInSeconds * 1e3 / 2);
+    };
+    startTimer();
+    return () => clearInterval(timeoutId);
+  }, [absoluteFormat, date, locale]);
+  return {
+    absolute: dateAndTimeStrings.absolute,
+    relative: dateAndTimeStrings.relative
+  };
+};
+
 // src/utils/emailValidation.ts
 var validateEmail = (email) => {
   return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email);
 };
 
 // src/hooks/useValidators.ts
-var import_react95 = require("react");
+var import_react96 = require("react");
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -18589,7 +18643,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return (0, import_react95.useMemo)(() => ({
+  return (0, import_react96.useMemo)(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -19028,9 +19082,7 @@ var PromiseUtils = {
   VerticalDivider,
   Visibility,
   YearMonthPicker,
-  addDuration,
   builder,
-  changeDuration,
   closestMatch,
   createLoopingList,
   createLoopingListWithIndex,
@@ -19043,21 +19095,15 @@ var PromiseUtils = {
   filterTags,
   filterTagsSingle,
   filterText,
-  formatDate,
-  formatDateTime,
-  getBetweenDuration,
   getNeighbours,
-  getWeeksForCalenderMonth,
   hightideTranslation,
   hightideTranslationLocales,
-  isInTimeSpan,
   isTableFilterCategory,
   match,
   mergeProps,
   noop,
   range,
   resolveSetState,
-  subtractDuration,
   toSizeVars,
   useAnchoredPosition,
   useControlledState,
@@ -19103,6 +19149,7 @@ var PromiseUtils = {
   useTooltip,
   useTransitionState,
   useTranslatedValidators,
+  useUpdatingDateTime,
   useWindowResizeObserver,
   validateEmail,
   writeToClipboard