@helpwave/hightide 0.8.10 → 0.8.12

package/dist/index.js

@@ -14638,10 +14638,10 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_react82 = require("react");
+var import_react83 = require("react");
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-var import_react78 = require("react");
+var import_react79 = require("react");
 var import_lucide_react16 = require("lucide-react");
 var import_clsx24 = __toESM(require("clsx"));
 
@@ -14655,6 +14655,9 @@ var TimePicker = ({
   onEditComplete,
   is24HourFormat = true,
   minuteIncrement = "5min",
+  secondIncrement = "5s",
+  millisecondIncrement = "100ms",
+  precision = "minute",
   className
 }) => {
   const [value, setValue] = useControlledState({
@@ -14666,22 +14669,58 @@ var TimePicker = ({
   const hourRef = (0, import_react64.useRef)(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
-  let minutes = range(60);
-  switch (minuteIncrement) {
-    case "5min":
-      minutes = minutes.filter((value2) => value2 % 5 === 0);
-      break;
-    case "10min":
-      minutes = minutes.filter((value2) => value2 % 10 === 0);
-      break;
-    case "15min":
-      minutes = minutes.filter((value2) => value2 % 15 === 0);
-      break;
-    case "30min":
-      minutes = minutes.filter((value2) => value2 % 30 === 0);
-      break;
-  }
-  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes()));
+  const minutes = (0, import_react64.useMemo)(() => {
+    const full = range(60);
+    switch (minuteIncrement) {
+      case "5min":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10min":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "15min":
+        return full.filter((value2) => value2 % 15 === 0);
+      case "30min":
+        return full.filter((value2) => value2 % 30 === 0);
+    }
+  }, [minuteIncrement]);
+  const seconds = (0, import_react64.useMemo)(() => {
+    const full = range(60);
+    switch (secondIncrement) {
+      case "1s":
+        return full.filter((value2) => value2 % 1 === 0);
+      case "5s":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10s":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "15s":
+        return full.filter((value2) => value2 % 15 === 0);
+      case "30s":
+        return full.filter((value2) => value2 % 30 === 0);
+    }
+  }, [secondIncrement]);
+  const milliseconds = (0, import_react64.useMemo)(() => {
+    const full = range(1e3);
+    switch (millisecondIncrement) {
+      case "1ms":
+        return full.filter((value2) => value2 % 1 === 0);
+      case "5ms":
+        return full.filter((value2) => value2 % 5 === 0);
+      case "10ms":
+        return full.filter((value2) => value2 % 10 === 0);
+      case "25ms":
+        return full.filter((value2) => value2 % 25 === 0);
+      case "50ms":
+        return full.filter((value2) => value2 % 50 === 0);
+      case "100ms":
+        return full.filter((value2) => value2 % 100 === 0);
+      case "250ms":
+        return full.filter((value2) => value2 % 250 === 0);
+      case "500ms":
+        return full.filter((value2) => value2 % 500 === 0);
+    }
+  }, [millisecondIncrement]);
+  const closestMinute = (0, import_react64.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
+  const closestSecond = (0, import_react64.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
+  const closestMillisecond = (0, import_react64.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
   const hour = value.getHours();
   (0, import_react64.useEffect)(() => {
     minuteRef.current?.scrollIntoView({
@@ -14732,6 +14771,36 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Visibility, { isVisible: precision === "second" || precision === "millisecond", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "time-picker-value-column", children: seconds.map((second) => {
+      const isSelected = second === closestSecond;
+      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        Button,
+        {
+          size: "sm",
+          color: isSelected ? "primary" : "neutral",
+          ref: isSelected ? minuteRef : void 0,
+          onClick: () => onChangeWrapper((newDate) => newDate.setSeconds(second)),
+          className: "min-w-16",
+          children: second.toString().padStart(2, "0")
+        },
+        second + secondIncrement
+      );
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Visibility, { isVisible: precision === "millisecond", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "time-picker-value-column", children: milliseconds.map((millisecond) => {
+      const isSelected = millisecond === closestMillisecond;
+      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        Button,
+        {
+          size: "sm",
+          color: isSelected ? "primary" : "neutral",
+          ref: isSelected ? minuteRef : void 0,
+          onClick: () => onChangeWrapper((newDate) => newDate.setMilliseconds(millisecond)),
+          className: "min-w-16",
+          children: millisecond.toString().padStart(2, "0")
+        },
+        millisecond + millisecondIncrement
+      );
+    }) }) }),
     !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { "data-name": "time-picker-value-column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         Button,
@@ -14902,14 +14971,40 @@ var formatRelative = (date, locale) => {
   if (Math.abs(diffInSeconds) < timesInSeconds.yearImprecise) return rtf.format(Math.round(diffInSeconds / timesInSeconds.monthImprecise), "month");
   return rtf.format(Math.round(diffInSeconds / timesInSeconds.yearImprecise), "year");
 };
-var toInputString = (date, format) => {
+var toInputString = (date, format, precision = "minute", isLocalTime = true) => {
+  const pad = (n, l = 2) => String(n).padStart(l, "0");
+  const parts = isLocalTime ? {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    min: date.getMinutes(),
+    s: date.getSeconds(),
+    ms: date.getMilliseconds()
+  } : {
+    y: date.getUTCFullYear(),
+    m: date.getUTCMonth() + 1,
+    d: date.getUTCDate(),
+    h: date.getUTCHours(),
+    min: date.getUTCMinutes(),
+    s: date.getUTCSeconds(),
+    ms: date.getUTCMilliseconds()
+  };
+  const dateStr = `${pad(parts.y, 4)}-${pad(parts.m)}-${pad(parts.d)}`;
+  let timeStr = `${pad(parts.h)}:${pad(parts.min)}`;
+  if (precision === "second" || precision === "millisecond") {
+    timeStr += `:${pad(parts.s)}`;
+  }
+  if (precision === "millisecond") {
+    timeStr += `.${pad(parts.ms, 3)}`;
+  }
   switch (format) {
     case "date":
-      return date.toISOString().split("T")[0];
+      return dateStr;
     case "time":
-      return date.toISOString().split("T")[1].split("Z")[0];
+      return timeStr;
     case "dateTime":
-      return date.toISOString().split("Z")[0];
+      return `${dateStr}T${timeStr}`;
   }
 };
 var DateUtils = {
@@ -15026,7 +15121,8 @@ var DayPicker = ({
               date.getDate(),
               value.getHours(),
               value.getMinutes(),
-              value.getSeconds()
+              value.getSeconds(),
+              value.getMilliseconds()
             );
             setValue(newDate);
             onEditComplete?.(newDate);
@@ -15300,6 +15396,9 @@ var DateTimePicker = ({
   is24HourFormat,
   minuteIncrement,
   weekStart,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   onValueChange,
   onEditComplete,
   timePickerProps,
@@ -15337,6 +15436,9 @@ var DateTimePicker = ({
         ...timePickerProps,
         is24HourFormat,
         minuteIncrement,
+        secondIncrement,
+        millisecondIncrement,
+        precision,
         value,
         onValueChange: setValue,
         onEditComplete
@@ -15350,6 +15452,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
+var import_react68 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var DateTimePickerDialog = ({
   initialValue = null,
@@ -15359,6 +15462,15 @@ var DateTimePickerDialog = ({
   onEditComplete,
   mode = "date",
   pickerProps,
+  start,
+  end,
+  weekStart,
+  markToday,
+  is24HourFormat,
+  minuteIncrement,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   labelId,
   label
 }) => {
@@ -15368,6 +15480,10 @@ var DateTimePickerDialog = ({
     onValueChange,
     defaultValue: initialValue
   });
+  const [pickerState, setPickerState] = (0, import_react68.useState)(state ?? /* @__PURE__ */ new Date());
+  (0, import_react68.useEffect)(() => {
+    setPickerState(state ?? /* @__PURE__ */ new Date());
+  }, [state]);
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       "span",
@@ -15382,13 +15498,22 @@ var DateTimePickerDialog = ({
       {
         ...pickerProps,
         mode,
-        value: state,
-        onValueChange: setState,
-        onEditComplete: setState
+        value: pickerState,
+        onValueChange: setPickerState,
+        onEditComplete: setPickerState,
+        start,
+        end,
+        weekStart,
+        markToday,
+        is24HourFormat,
+        minuteIncrement,
+        secondIncrement,
+        millisecondIncrement,
+        precision
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex-row-2 justify-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: allowRemove && !!initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: allowRemove && !!state, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         Button,
         {
           size: "md",
@@ -15401,14 +15526,14 @@ var DateTimePickerDialog = ({
           children: translation("clear")
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: !initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: !state, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         Button,
         {
           size: "md",
           color: "neutral",
           onClick: () => {
-            setState(initialValue);
-            onEditComplete?.(initialValue);
+            setState(state);
+            onEditComplete?.(state);
           },
           className: "min-w-26",
           children: translation("cancel")
@@ -15419,7 +15544,7 @@ var DateTimePickerDialog = ({
         {
           size: "md",
           onClick: () => {
-            onEditComplete?.(state);
+            onEditComplete?.(pickerState);
           },
           className: "min-w-26",
           children: translation("done")
@@ -15430,7 +15555,7 @@ var DateTimePickerDialog = ({
 };
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react68 = require("react");
+var import_react69 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -15468,7 +15593,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -15477,10 +15602,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react69 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react69.default.useState(false);
-  (0, import_react69.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react70.default.useState(false);
+  (0, import_react70.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -15500,11 +15625,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-var import_react70 = require("react");
+var import_react71 = require("react");
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? import_react70.useLayoutEffect : import_react70.useEffect;
+var useIsomorphicEffect = isClient ? import_react71.useLayoutEffect : import_react71.useEffect;
 var useIsMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react70.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react71.useState)(false);
   useIsomorphicEffect(() => {
     setIsMounted(true);
     return () => {
@@ -15515,10 +15640,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-var import_react71 = require("react");
+var import_react72 = require("react");
 function useHandleRefs(handleRef) {
-  const refs = (0, import_react71.useRef)([]);
-  (0, import_react71.useEffect)(() => {
+  const refs = (0, import_react72.useRef)([]);
+  (0, import_react72.useEffect)(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -15531,10 +15656,10 @@ function useHandleRefs(handleRef) {
 }
 
 // src/hooks/useLogUnstableDependencies.ts
-var import_react72 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 function useLogUnstableDependencies(name, value) {
-  const prev = import_react72.default.useRef(null);
-  import_react72.default.useEffect(() => {
+  const prev = import_react73.default.useRef(null);
+  import_react73.default.useEffect(() => {
     if (!prev.current) {
       prev.current = value;
       return;
@@ -15556,10 +15681,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-var import_react73 = require("react");
+var import_react74 = require("react");
 var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = (0, import_react73.useState)(overwriteValue);
-  (0, import_react73.useEffect)(() => {
+  const [state, setState] = (0, import_react74.useState)(overwriteValue);
+  (0, import_react74.useEffect)(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -15571,13 +15696,13 @@ var useOverwritableState = (overwriteValue, onChange) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react74 = require("react");
+var import_react75 = require("react");
 var useRerender = () => {
-  return (0, import_react74.useReducer)(() => ({}), {})[1];
+  return (0, import_react75.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useSearch.ts
-var import_react75 = require("react");
+var import_react76 = require("react");
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -15616,34 +15741,34 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = (0, import_react75.useState)(initialSearch ?? "");
-  const [result, setResult] = (0, import_react75.useState)(list);
-  const searchTags = (0, import_react75.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = (0, import_react75.useCallback)((newSearch) => {
+  const [search, setSearch] = (0, import_react76.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react76.useState)(list);
+  const searchTags = (0, import_react76.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react76.useCallback)((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = (0, import_react75.useMemo)(() => {
+  const filteredResult = (0, import_react76.useMemo)(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = (0, import_react75.useMemo)(() => {
+  const sortedAndFilteredResult = (0, import_react76.useMemo)(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = (0, import_react75.useMemo)(() => {
+  const usedResult = (0, import_react76.useMemo)(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -15660,23 +15785,23 @@ var useSearch = ({
 };
 
 // src/hooks/useUpdatingDateString.ts
-var import_react76 = require("react");
+var import_react77 = require("react");
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
   const { locale: contextLocale } = useLocale();
   const locale = localeOverride ?? contextLocale;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react76.useState)({
+  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react77.useState)({
     compareDate: date,
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
     relative: DateUtils.formatRelative(date, locale)
   });
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -15712,7 +15837,7 @@ var validateEmail = (email) => {
 };
 
 // src/hooks/useValidators.ts
-var import_react77 = require("react");
+var import_react78 = require("react");
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -15762,7 +15887,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return (0, import_react77.useMemo)(() => ({
+  return (0, import_react78.useMemo)(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -15797,7 +15922,7 @@ var useTranslatedValidators = () => {
 
 // src/components/user-interaction/input/DateTimeInput.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
-var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
+var DateTimeInput = (0, import_react79.forwardRef)(function DateTimeInput2({
   id: inputId,
   value,
   initialValue = null,
@@ -15809,6 +15934,15 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
   pickerProps,
   outsideClickCloses = true,
   onDialogOpeningChange,
+  start,
+  end,
+  weekStart,
+  markToday,
+  is24HourFormat,
+  minuteIncrement,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
   disabled = false,
   readOnly = false,
   invalid = false,
@@ -15816,37 +15950,37 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
   ...props
 }, forwardedRef) {
   const translation = useHightideTranslation();
-  const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react79.useState)(false);
   const [state, setState] = useControlledState({
     value,
     onValueChange,
     defaultValue: initialValue
   });
-  const [dialogValue, setDialogValue] = (0, import_react78.useState)(state ?? /* @__PURE__ */ new Date());
-  const [stringInputState, setStringInputState] = (0, import_react78.useState)({
-    state: state ? DateUtils.toInputString(state, mode) : "",
+  const [dialogValue, setDialogValue] = (0, import_react79.useState)(state);
+  const [stringInputState, setStringInputState] = (0, import_react79.useState)({
+    state: state ? DateUtils.toInputString(state, mode, precision) : "",
     date: void 0
   });
-  (0, import_react78.useEffect)(() => {
-    setDialogValue(state ?? /* @__PURE__ */ new Date());
+  (0, import_react79.useEffect)(() => {
+    setDialogValue(state);
     setStringInputState({
       state: state ? DateUtils.toInputString(state, mode) : "",
       date: void 0
     });
   }, [mode, state]);
-  const changeOpenWrapper = (0, import_react78.useCallback)((isOpen2) => {
+  const changeOpenWrapper = (0, import_react79.useCallback)((isOpen2) => {
     onDialogOpeningChange?.(isOpen2);
     setIsOpen(isOpen2);
   }, [onDialogOpeningChange]);
-  const generatedId = (0, import_react78.useId)();
-  const ids = (0, import_react78.useMemo)(() => ({
+  const generatedId = (0, import_react79.useId)();
+  const ids = (0, import_react79.useMemo)(() => ({
     input: inputId ?? `date-time-input-${generatedId}`,
     popup: `date-time-input-popup-${generatedId}`,
     label: `date-time-input-label-${generatedId}`
   }), [generatedId, inputId]);
-  const innerRef = (0, import_react78.useRef)(null);
-  (0, import_react78.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react78.useEffect)(() => {
+  const innerRef = (0, import_react79.useRef)(null);
+  (0, import_react79.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react79.useEffect)(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
     }
@@ -15865,8 +15999,9 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
           id: ids.input,
           value: stringInputState.state,
           onChange: (event) => {
-            const date = event.target.valueAsDate;
-            if (date) {
+            const date = new Date(event.target.value ?? "");
+            const isValid = !isNaN(date.getTime());
+            if (isValid) {
               restartTimer(() => {
                 innerRef.current?.blur();
                 setState(date);
@@ -15877,7 +16012,7 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
             }
             setStringInputState({
               state: event.target.value,
-              date: event.target.valueAsDate ?? void 0
+              date: isValid ? date : void 0
             });
           },
           onBlur: (event) => {
@@ -15953,7 +16088,16 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
               changeOpenWrapper(false);
             },
             pickerProps,
-            mode
+            mode,
+            start,
+            end,
+            weekStart,
+            markToday,
+            is24HourFormat,
+            minuteIncrement,
+            secondIncrement,
+            millisecondIncrement,
+            precision
           }
         )
       }
@@ -15962,12 +16106,12 @@ var DateTimeInput = (0, import_react78.forwardRef)(function DateTimeInput2({
 });
 
 // src/components/layout/table/TableFilterPopups.tsx
-var import_react81 = require("react");
+var import_react82 = require("react");
 
 // src/components/user-interaction/select/MultiSelect.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react79.forwardRef)(function MultiSelect2({
+var MultiSelect = (0, import_react80.forwardRef)(function MultiSelect2({
   children,
   contentPanelProps,
   buttonProps,
@@ -15984,7 +16128,7 @@ var import_lucide_react18 = require("lucide-react");
 
 // src/components/user-interaction/Checkbox.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_react80 = require("react");
+var import_react81 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var Checkbox = ({
   value: controlledValue,
@@ -16002,7 +16146,7 @@ var Checkbox = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react80.useCallback)((value2) => {
+  const onChangeWrapper = (0, import_react81.useCallback)((value2) => {
     onValueChangeStable(value2);
     onEditCompleteStable(value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -16224,8 +16368,8 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
   const operator = filterValue?.operator ?? "textContains";
   const parameter = filterValue?.parameter ?? {};
-  const id = (0, import_react81.useId)();
-  const availableOperators = (0, import_react81.useMemo)(() => [
+  const id = (0, import_react82.useId)();
+  const availableOperators = (0, import_react82.useMemo)(() => [
     ...TableFilterOperator.text,
     ...TableFilterOperator.generic
   ], []);
@@ -16285,7 +16429,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
   const operator = filterValue?.operator ?? "numberBetween";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = (0, import_react81.useMemo)(() => [
+  const availableOperators = (0, import_react82.useMemo)(() => [
     ...TableFilterOperator.number,
     ...TableFilterOperator.generic
   ], []);
@@ -16368,7 +16512,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
 };
 var DateFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
-  const id = (0, import_react81.useId)();
+  const id = (0, import_react82.useId)();
   const ids = {
     startDate: `date-filter-start-date-${id}`,
     endDate: `date-filter-end-date-${id}`,
@@ -16376,9 +16520,9 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
   };
   const operator = filterValue?.operator ?? "dateBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react81.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react81.useState)(null);
-  const availableOperators = (0, import_react81.useMemo)(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react82.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react82.useState)(null);
+  const availableOperators = (0, import_react82.useMemo)(() => [
     ...TableFilterOperator.date,
     ...TableFilterOperator.generic
   ], []);
@@ -16493,7 +16637,7 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
 };
 var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
-  const id = (0, import_react81.useId)();
+  const id = (0, import_react82.useId)();
   const ids = {
     startDate: `datetime-filter-start-date-${id}`,
     endDate: `datetime-filter-end-date-${id}`,
@@ -16501,9 +16645,9 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
   };
   const operator = filterValue?.operator ?? "dateTimeBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react81.useState)(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react81.useState)(null);
-  const availableOperators = (0, import_react81.useMemo)(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react82.useState)(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react82.useState)(null);
+  const availableOperators = (0, import_react82.useMemo)(() => [
     ...TableFilterOperator.dateTime,
     ...TableFilterOperator.generic
   ], []);
@@ -16620,7 +16764,7 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
 };
 var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "booleanIsTrue";
-  const availableOperators = (0, import_react81.useMemo)(() => [
+  const availableOperators = (0, import_react82.useMemo)(() => [
     ...TableFilterOperator.boolean,
     ...TableFilterOperator.generic
   ], []);
@@ -16644,11 +16788,11 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableStateWithoutSizingContext();
   const operator = filterValue?.operator ?? "tagsContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = (0, import_react81.useMemo)(() => [
+  const availableOperators = (0, import_react82.useMemo)(() => [
     ...TableFilterOperator.multiTags,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = (0, import_react81.useMemo)(() => {
+  const availableTags = (0, import_react82.useMemo)(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -16695,11 +16839,11 @@ var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableStateWithoutSizingContext();
   const operator = filterValue?.operator ?? "tagsSingleContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = (0, import_react81.useMemo)(() => [
+  const availableOperators = (0, import_react82.useMemo)(() => [
     ...TableFilterOperator.singleTag,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = (0, import_react81.useMemo)(() => {
+  const availableTags = (0, import_react82.useMemo)(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -16758,7 +16902,7 @@ var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
 };
 var GenericFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "notUndefined";
-  const availableOperators = (0, import_react81.useMemo)(() => [
+  const availableOperators = (0, import_react82.useMemo)(() => [
     ...TableFilterOperator.generic
   ], []);
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
@@ -16807,18 +16951,18 @@ var TableFilterButton = ({
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react82.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react83.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = (0, import_react82.useRef)(null);
-  const containerRef = (0, import_react82.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react82.useState)(false);
-  const id = (0, import_react82.useId)();
-  const ids = (0, import_react82.useMemo)(() => ({
+  const anchorRef = (0, import_react83.useRef)(null);
+  const containerRef = (0, import_react83.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react83.useState)(false);
+  const id = (0, import_react83.useId)();
+  const ids = (0, import_react83.useMemo)(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -16893,11 +17037,11 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
-  const handleResizeMove = (0, import_react83.useCallback)((e) => {
+  const handleResizeMove = (0, import_react84.useCallback)((e) => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
     const deltaOffset = currentX - (table.getState().columnSizingInfo.startOffset ?? 0);
@@ -16913,7 +17057,7 @@ var TableHeader = ({ isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = (0, import_react83.useCallback)(() => {
+  const handleResizeEnd = (0, import_react84.useCallback)(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -16931,7 +17075,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  (0, import_react83.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -17100,7 +17244,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var TableWithSelectionProvider = ({
   children,
@@ -17113,7 +17257,7 @@ var TableWithSelectionProvider = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const columnDef = (0, import_react84.useMemo)(() => [
+  const columnDef = (0, import_react85.useMemo)(() => [
     {
       id: selectionRowId,
       header: ({ table }) => {
@@ -17156,7 +17300,7 @@ var TableWithSelectionProvider = ({
     TableProvider,
     {
       ...props,
-      fillerRowCell: (0, import_react84.useCallback)((columnId, table) => {
+      fillerRowCell: (0, import_react85.useCallback)((columnId, table) => {
         if (columnId === selectionRowId) {
           return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Checkbox, { value: false, disabled: true });
         }
@@ -17174,7 +17318,7 @@ var TableWithSelectionProvider = ({
         rowSelection,
         ...state
       },
-      onRowClick: (0, import_react84.useCallback)((row, table) => {
+      onRowClick: (0, import_react85.useCallback)((row, table) => {
         if (!disableClickRowClickSelection) {
           row.toggleSelected();
         }
@@ -17216,7 +17360,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var TableColumnComponent = ({
   filterType,
@@ -17228,11 +17372,11 @@ var TableColumnComponent = ({
     "TableColumn: For filterType === multiTags or singleTag, filterData.tags must be set.",
     (filterType === "multiTags" || filterType === "singleTag") && props.meta?.filterData?.tags === void 0
   );
-  const [column] = (0, import_react85.useState)({
+  const [column] = (0, import_react86.useState)({
     ...props,
     filterFn
   });
-  (0, import_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -17240,34 +17384,34 @@ var TableColumnComponent = ({
   }, [registerColumn, column]);
   return null;
 };
-var TableColumnFactory = () => (0, import_react85.memo)(
+var TableColumnFactory = () => (0, import_react86.memo)(
   TableColumnComponent,
   (prevProps, nextProps) => {
     return prevProps.filterType === nextProps.filterType && prevProps.id === nextProps.id && prevProps["accessorKey"] === nextProps["accessorKey"] && prevProps.enableColumnFilter === nextProps.enableColumnFilter && prevProps.enableGlobalFilter === nextProps.enableGlobalFilter && prevProps.enableGrouping === nextProps.enableGrouping && prevProps.enableHiding === nextProps.enableHiding && prevProps.enablePinning === nextProps.enablePinning && prevProps.enableResizing === nextProps.enableResizing && prevProps.enableSorting === nextProps.enableSorting && prevProps.meta === nextProps.meta, prevProps.cell === nextProps.cell;
   }
 );
 var TableColumn = (props) => {
-  const TableColumnComponent2 = (0, import_react85.useMemo)(() => TableColumnFactory(), []);
+  const TableColumnComponent2 = (0, import_react86.useMemo)(() => TableColumnFactory(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_lucide_react20 = require("lucide-react");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = (0, import_react86.useRef)(null);
-  const generatedId = (0, import_react86.useId)();
-  const ids = (0, import_react86.useMemo)(() => ({
+  const containerRef = (0, import_react87.useRef)(null);
+  const generatedId = (0, import_react87.useId)();
+  const ids = (0, import_react87.useMemo)(() => ({
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
   }), [generatedId, props.id]);
   const tableState = table.getState();
   const columnOrder = tableState.columnOrder;
   const columnPinning = tableState.columnPinning;
-  const columns = (0, import_react86.useMemo)(() => {
+  const columns = (0, import_react87.useMemo)(() => {
     const allColumns = table.getAllColumns();
     const leftPinned = [];
     const unpinned = [];
@@ -17525,7 +17669,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 };
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_clsx28 = require("clsx");
 
 // src/utils/writeToClipboard.ts
@@ -17548,7 +17692,7 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react87.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react88.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
     TooltipRoot,
     {
@@ -17597,7 +17741,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-var import_react88 = require("react");
+var import_react89 = require("react");
 var import_clsx29 = __toESM(require("clsx"));
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var MenuItem = ({
@@ -17623,8 +17767,8 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = (0, import_react88.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react88.useState)(false);
+  const triggerRef = (0, import_react89.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react89.useState)(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -17632,7 +17776,7 @@ var Menu = ({
     disabled
   };
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-    trigger(bag, (0, import_react88.useCallback)((el) => triggerRef.current = el, [])),
+    trigger(bag, (0, import_react89.useCallback)((el) => triggerRef.current = el, [])),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       PopUp,
       {
@@ -17654,7 +17798,7 @@ var Menu = ({
 };
 
 // src/components/user-interaction/ScrollPicker.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 var import_clsx30 = __toESM(require("clsx"));
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var up = 1;
@@ -17675,7 +17819,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react89.useState)({
+  }, setAnimation] = (0, import_react90.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -17691,7 +17835,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react89.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react90.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -17701,7 +17845,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react89.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react90.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -17774,7 +17918,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -17852,7 +17996,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Switch.tsx
-var import_react90 = require("react");
+var import_react91 = require("react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var Switch = ({
   value: controlledValue,
@@ -17867,7 +18011,7 @@ var Switch = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react90.useCallback)((value2) => {
+  const onChangeWrapper = (0, import_react91.useCallback)((value2) => {
     onValueChangeStable(!value2);
     onEditCompleteStable(!value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -17907,10 +18051,10 @@ var Switch = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-var import_react91 = require("react");
+var import_react92 = require("react");
 var import_clsx31 = __toESM(require("clsx"));
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var Textarea = (0, import_react91.forwardRef)(function Textarea2({
+var Textarea = (0, import_react92.forwardRef)(function Textarea2({
   value: controlledValue,
   initialValue,
   invalid = false,
@@ -17926,7 +18070,7 @@ var Textarea = (0, import_react91.forwardRef)(function Textarea2({
   });
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onEditCompleteWrapper = (0, import_react91.useCallback)((text) => {
+  const onEditCompleteWrapper = (0, import_react92.useCallback)((text) => {
     onEditCompleteStable(text);
     clearTimer();
   }, [onEditCompleteStable, clearTimer]);
@@ -17964,7 +18108,7 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = (0, import_react91.useId)();
+  const genId = (0, import_react92.useId)();
   const usedId = id ?? genId;
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "div",
@@ -18037,11 +18181,11 @@ var TimeDisplay = ({
 };
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
-var import_react92 = require("react");
 var import_react93 = require("react");
+var import_react94 = require("react");
 var import_clsx32 = __toESM(require("clsx"));
 var import_jsx_runtime84 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react93.forwardRef)(function InsideLabelInput2({
+var InsideLabelInput = (0, import_react94.forwardRef)(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
   initialValue,
@@ -18054,8 +18198,8 @@ var InsideLabelInput = (0, import_react93.forwardRef)(function InsideLabelInput2
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = (0, import_react93.useState)(false);
-  const generatedId = (0, import_react92.useId)();
+  const [isFocused, setIsFocused] = (0, import_react94.useState)(false);
+  const generatedId = (0, import_react93.useId)();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: (0, import_clsx32.default)("relative"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
@@ -18144,11 +18288,11 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-var import_react94 = require("react");
+var import_react95 = require("react");
 var import_lucide_react23 = require("lucide-react");
 var import_clsx34 = __toESM(require("clsx"));
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react94.forwardRef)(function ToggleableInput2({
+var ToggleableInput = (0, import_react95.forwardRef)(function ToggleableInput2({
   value: controlledValue,
   initialValue,
   onValueChange,
@@ -18161,10 +18305,10 @@ var ToggleableInput = (0, import_react94.forwardRef)(function ToggleableInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = (0, import_react94.useState)(initialState !== "display");
-  const innerRef = (0, import_react94.useRef)(null);
-  (0, import_react94.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react94.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react95.useState)(initialState !== "display");
+  const innerRef = (0, import_react95.useRef)(null);
+  (0, import_react95.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react95.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
@@ -18374,17 +18518,17 @@ var DateProperty = ({
 var import_lucide_react28 = require("lucide-react");
 
 // src/components/user-interaction/select/MultiSelectChipDisplay.tsx
-var import_react95 = require("react");
+var import_react96 = require("react");
 var import_lucide_react27 = require("lucide-react");
 var import_jsx_runtime90 = require("react/jsx-runtime");
-var MultiSelectChipDisplayButton = (0, import_react95.forwardRef)(function MultiSelectChipDisplayButton2({
+var MultiSelectChipDisplayButton = (0, import_react96.forwardRef)(function MultiSelectChipDisplayButton2({
   id,
   ...props
 }, ref) {
   const translation = useHightideTranslation();
   const { state, trigger, item, ids, setIds } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  (0, import_react95.useEffect)(() => {
+  (0, import_react96.useEffect)(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -18392,9 +18536,9 @@ var MultiSelectChipDisplayButton = (0, import_react95.forwardRef)(function Multi
       }));
     }
   }, [id, setIds]);
-  const innerRef = (0, import_react95.useRef)(null);
-  (0, import_react95.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react95.useEffect)(() => {
+  const innerRef = (0, import_react96.useRef)(null);
+  (0, import_react96.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react96.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -18466,7 +18610,7 @@ var MultiSelectChipDisplayButton = (0, import_react95.forwardRef)(function Multi
     }
   );
 });
-var MultiSelectChipDisplay = (0, import_react95.forwardRef)(function MultiSelectChipDisplay2({
+var MultiSelectChipDisplay = (0, import_react96.forwardRef)(function MultiSelectChipDisplay2({
   children,
   contentPanelProps,
   chipDisplayProps,
@@ -18680,16 +18824,16 @@ var TextProperty = ({
 };
 
 // src/components/utils/Transition.tsx
-var import_react96 = require("react");
+var import_react97 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react96.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react96.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react97.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react97.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react96.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);