@helpwave/hightide 0.8.7 → 0.8.9

package/dist/index.mjs

@@ -10148,7 +10148,7 @@ var useControlledState = ({
     onValueChangeStable(resolved);
   }, [onValueChangeStable, isControlled]);
   const value = isControlled ? controlledValue : internalValue;
-  return [value, setState];
+  return [value, setState, isControlled];
 };
 
 // src/components/layout/Expandable.tsx
@@ -11038,65 +11038,67 @@ function sortByDomOrder(infos) {
     return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
   });
 }
-function getNextEnabledIdInOrder(sortedInfos, currentActiveId) {
-  const enabled = sortedInfos.filter((t) => !t.disabled);
-  if (enabled.length === 0) return null;
-  const currentIndex = sortedInfos.findIndex((t) => t.id === currentActiveId);
-  const startIndex = currentIndex >= 0 ? (currentIndex + 1) % sortedInfos.length : 0;
-  for (let i = 0; i < sortedInfos.length; i++) {
-    const idx = (startIndex + i) % sortedInfos.length;
-    if (!sortedInfos[idx].disabled) return sortedInfos[idx].id;
-  }
-  return null;
-}
 var TabContext = createContext8(null);
 function useTabContext() {
   const context = useContext8(TabContext);
   if (!context) throw new Error("useTabContext must be used inside a <TabView>");
   return context;
 }
-function TabSwitcher({ children }) {
-  const [state, setState] = useState15({
-    activeId: null,
-    infos: []
+function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange, initialActiveId }) {
+  const [activeId, setActiveId] = useControlledState({
+    value: controlledActiveId,
+    defaultValue: initialActiveId ?? null,
+    onValueChange: onActiveIdChange
   });
+  const [tabInfos, setTabInfos] = useState15([]);
   const [portalState, setPortalState] = useState15(null);
   const subscribe = useCallback13((info) => {
     const id = info.id;
-    setState((prevState) => {
-      const existingIndex = prevState.infos.findIndex((t) => t.id === id);
-      const infos = existingIndex >= 0 ? prevState.infos.map((t, i) => i === existingIndex ? { ...t, ...info } : t) : [...prevState.infos, info];
-      const ordered = sortByDomOrder(infos);
-      const activeIsDisabled = prevState.activeId !== null && infos.some((t) => t.id === prevState.activeId && t.disabled);
-      const activeId = activeIsDisabled ? getNextEnabledIdInOrder(ordered, prevState.activeId) : prevState.activeId ?? (info.disabled ? getNextEnabledIdInOrder(ordered, null) : id);
-      return { activeId, infos: ordered };
+    setTabInfos((prevState) => {
+      const existingIndex = prevState.findIndex((t) => t.id === id);
+      const infos = existingIndex >= 0 ? prevState.map((t, i) => i === existingIndex ? { ...t, ...info } : t) : [...prevState, info];
+      return sortByDomOrder(infos);
     });
     return () => {
-      setState((prevState) => {
-        const infos = prevState.infos.filter((t) => t.id !== id);
-        const activeTab = prevState.activeId !== null ? infos.find((t) => t.id === prevState.activeId) : null;
-        const activeIsUnregisteredOrDisabled = prevState.activeId === id || activeTab?.disabled === true;
-        const nextId = prevState.activeId === id ? getNextEnabledIdInOrder(prevState.infos, id) : getNextEnabledIdInOrder(infos, prevState.activeId);
-        const activeId = activeIsUnregisteredOrDisabled ? nextId : prevState.activeId;
-        return { activeId, infos };
+      setTabInfos((prevState) => {
+        return prevState.filter((t) => t.id !== id);
       });
     };
   }, []);
-  const registerPortal = useCallback13((state2) => {
-    setPortalState(state2);
-  }, []);
-  const setActiveId = useCallback13((activeId) => {
-    setState((prevState) => ({ ...prevState, activeId }));
+  useEffect16(() => {
+    const active = tabInfos.find((value) => value.id === activeId);
+    if (!active || !active.disabled) return;
+    const firstEnabled = tabInfos.find((value) => !value.disabled);
+    if (firstEnabled) {
+      setActiveId(firstEnabled.id);
+    } else {
+      setActiveId(null);
+    }
+  }, [activeId, setActiveId, tabInfos]);
+  const registerPortal = useCallback13((state) => {
+    setPortalState(state);
   }, []);
+  const changeActiveId = useCallback13((activeId2) => {
+    const info = tabInfos.find((value) => value.id === activeId2);
+    if (info && info.disabled) return;
+    setActiveId(activeId2);
+  }, [setActiveId, tabInfos]);
+  const resolvedActiveId = () => {
+    const active = tabInfos.find((value) => value.id === activeId);
+    if (!!active && !active.disabled) return activeId;
+    const firstEnabled = tabInfos.find((value) => !value.disabled);
+    if (firstEnabled) return firstEnabled.id;
+    return tabInfos[0]?.id ?? null;
+  };
   return /* @__PURE__ */ jsx25(
     TabContext.Provider,
     {
       value: {
         tabs: {
-          activeId: state.activeId,
-          setActiveId,
+          activeId: resolvedActiveId(),
+          setActiveId: changeActiveId,
           subscribe,
-          info: state.infos
+          infos: tabInfos
         },
         portal: {
           id: portalState?.id ?? null,
@@ -11110,20 +11112,20 @@ function TabSwitcher({ children }) {
 }
 function TabList({ ...props }) {
   const { tabs } = useTabContext();
-  const { info, activeId, setActiveId: setActive } = tabs;
+  const { infos, activeId, setActiveId: setActive } = tabs;
   const refs = useRef14({});
   const onKeyDown = (e) => {
-    const idx = info.findIndex((tab) => tab.id === activeId);
+    const idx = infos.findIndex((tab) => tab.id === activeId);
     if (idx === -1) return;
     const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
     if (step === 0) return;
     let nextIdx = idx;
-    for (let i = 0; i < info.length; i++) {
-      nextIdx = (nextIdx + step + info.length) % info.length;
-      if (!info[nextIdx].disabled) break;
+    for (let i = 0; i < infos.length; i++) {
+      nextIdx = (nextIdx + step + infos.length) % infos.length;
+      if (!infos[nextIdx].disabled) break;
     }
-    if (info[nextIdx].disabled) return;
-    const nextId = info[nextIdx].id;
+    if (infos[nextIdx].disabled) return;
+    const nextId = infos[nextIdx].id;
     setActive(nextId);
     refs.current[nextId]?.focus();
   };
@@ -11135,8 +11137,8 @@ function TabList({ ...props }) {
       onKeyDown,
       role: "tablist",
       "aria-orientation": "horizontal",
-      style: { "--tab-count": info.length, ...props.style },
-      children: info.map((tabInfo) => {
+      style: { "--tab-count": infos.length, ...props.style },
+      children: infos.map((tabInfo) => {
         const isDisabled = !!tabInfo.disabled;
         const isActive = activeId === tabInfo.id;
         return /* @__PURE__ */ jsx25(
@@ -11153,7 +11155,7 @@ function TabList({ ...props }) {
             role: "tab",
             "aria-selected": isActive,
             "aria-disabled": isDisabled,
-            "aria-controls": activeId,
+            "aria-controls": tabInfo.id,
             tabIndex: isActive && !isDisabled ? 0 : -1,
             children: tabInfo.label
           },
@@ -11183,9 +11185,9 @@ function TabView({ ...props }) {
     }
   );
 }
-function TabPanel({ label, forceMount = false, disabled = false, ...props }) {
+function TabPanel({ label, forceMount = false, disabled = false, initiallyActive = false, ...props }) {
   const { tabs, portal } = useTabContext();
-  const { subscribe, activeId } = tabs;
+  const { subscribe, activeId, setActiveId } = tabs;
   const generatedId = useId6();
   const id = props.id ?? "tab-panel-" + generatedId;
   const labelId = "tab-list-button-" + generatedId;
@@ -11193,6 +11195,15 @@ function TabPanel({ label, forceMount = false, disabled = false, ...props }) {
   useEffect16(() => {
     return subscribe({ id, label, labelId, disabled, ref });
   }, [id, label, labelId, disabled, subscribe]);
+  const [hasAnnouncedIntialliyActive, setHasAnnouncedIntialliyActive] = useState15(false);
+  useEffect16(() => {
+    if (!hasAnnouncedIntialliyActive) {
+      if (initiallyActive) {
+        setActiveId(id);
+      }
+      setHasAnnouncedIntialliyActive(true);
+    }
+  }, [hasAnnouncedIntialliyActive, id, initiallyActive, setActiveId]);
   const isActive = activeId === id;
   const content = /* @__PURE__ */ jsx25(
     "div",
@@ -11932,7 +11943,7 @@ var Input = forwardRef11(function Input2({
   const {
     restartTimer,
     clearTimer
-  } = useDelay({ delay, disabled: !afterDelay });
+  } = useDelay({ delay, disabled: !afterDelay || props.disabled || props.readOnly });
   const innerRef = useRef19(null);
   useImperativeHandle7(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
@@ -14383,10 +14394,10 @@ var TableSortButton = ({
 
 // src/components/layout/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect32, useId as useId15, useMemo as useMemo26, useRef as useRef30, useState as useState30 } from "react";
+import { useEffect as useEffect39, useId as useId15, useMemo as useMemo28, useRef as useRef31, useState as useState34 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef17, useCallback as useCallback25, useEffect as useEffect31, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo24, useRef as useRef29, useState as useState28 } from "react";
+import { forwardRef as forwardRef17, useCallback as useCallback26, useEffect as useEffect38, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo26, useRef as useRef30, useState as useState32 } from "react";
 import { CalendarIcon } from "lucide-react";
 import clsx24 from "clsx";
 
@@ -15174,181 +15185,581 @@ var DateTimePickerDialog = ({
   ] });
 };
 
-// src/components/user-interaction/input/DateTimeInput.tsx
-import { Fragment as Fragment7, jsx as jsx66, jsxs as jsxs36 } from "react/jsx-runtime";
-var DateTimeInput = forwardRef17(function DateTimeInput2({
-  id: inputId,
-  value,
-  initialValue = null,
-  onValueChange,
-  onEditComplete,
-  allowRemove = false,
-  containerProps,
-  mode = "date",
-  pickerProps,
-  outsideClickCloses = true,
-  onDialogOpeningChange,
-  disabled = false,
-  readOnly = false,
-  invalid = false,
-  required = false,
-  ...props
-}, forwardedRef) {
-  const translation = useHightideTranslation();
-  const [isOpen, setIsOpen] = useState28(false);
-  const [state, setState] = useControlledState({
-    value,
-    onValueChange,
-    defaultValue: initialValue
-  });
-  const [dialogValue, setDialogValue] = useState28(state ?? /* @__PURE__ */ new Date());
-  const [dateString, setDateString] = useState28(state ? DateUtils.toInputString(state, mode) : "");
-  useEffect31(() => {
-    setDialogValue(state ?? /* @__PURE__ */ new Date());
-    setDateString(state ? DateUtils.toInputString(state, mode) : "");
-  }, [mode, state]);
-  const changeOpenWrapper = useCallback25((isOpen2) => {
-    onDialogOpeningChange?.(isOpen2);
-    setIsOpen(isOpen2);
-  }, [onDialogOpeningChange]);
-  const generatedId = useId13();
-  const ids = useMemo24(() => ({
-    input: inputId ?? `date-time-input-${generatedId}`,
-    popup: `date-time-input-popup-${generatedId}`,
-    label: `date-time-input-label-${generatedId}`
-  }), [generatedId, inputId]);
-  const innerRef = useRef29(null);
-  useImperativeHandle11(forwardedRef, () => innerRef.current);
+// src/hooks/focus/useFocusGuards.ts
+import { useEffect as useEffect31 } from "react";
+var selectorName = "data-hw-focus-guard";
+function FocusGuard() {
+  const element = document.createElement("div");
+  element.setAttribute(selectorName, "");
+  element.tabIndex = 0;
+  element.style.border = "none";
+  element.style.outline = "none";
+  element.style.boxShadow = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+var FocusGuardsService = class _FocusGuardsService {
+  constructor() {
+    this.count = 0;
+  }
+  static getInstance() {
+    if (!_FocusGuardsService.instance) {
+      _FocusGuardsService.instance = new _FocusGuardsService();
+    }
+    return _FocusGuardsService.instance;
+  }
+  add() {
+    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
+    this.count++;
+  }
+  remove() {
+    if (this.count === 1) {
+      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
+    }
+    this.count--;
+  }
+};
+var useFocusGuards = () => {
   useEffect31(() => {
-    if (readOnly || disabled) {
-      changeOpenWrapper(false);
+    FocusGuardsService.getInstance().add();
+    return () => {
+      FocusGuardsService.getInstance().remove();
+    };
+  }, []);
+};
+
+// src/hooks/focus/useFocusOnceVisible.ts
+import React6, { useEffect as useEffect32 } from "react";
+var useFocusOnceVisible = (ref, disable = false) => {
+  const [hasUsedFocus, setHasUsedFocus] = React6.useState(false);
+  useEffect32(() => {
+    if (disable || hasUsedFocus) {
+      return;
     }
-  }, [changeOpenWrapper, readOnly, disabled]);
-  return /* @__PURE__ */ jsxs36(Fragment7, { children: [
-    /* @__PURE__ */ jsxs36("div", { ...containerProps, className: clsx24("relative w-full", containerProps?.className), children: [
-      /* @__PURE__ */ jsx66(
-        "input",
-        {
-          ...props,
-          ref: innerRef,
-          id: ids.input,
-          value: dateString,
-          onChange: (event) => {
-            const date = event.target.valueAsDate;
-            if (date) {
-              setState(date);
-            } else {
-              setDateString(event.target.value);
-            }
-          },
-          type: mode === "date" ? "date" : mode === "time" ? "time" : "datetime-local",
-          ...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required }),
-          "data-name": props["data-name"] ?? "date-time-input",
-          "data-value": PropsUtil.dataAttributes.bool(!!state || !!dateString),
-          ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)
-        }
-      ),
-      /* @__PURE__ */ jsx66(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx66(
-        IconButton,
-        {
-          tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
-          coloringStyle: "text",
-          color: "neutral",
-          size: "sm",
-          className: "absolute right-1 top-1/2 -translate-y-1/2",
-          disabled,
-          onClick: () => {
-            changeOpenWrapper(true);
-          },
-          "aria-haspopup": "dialog",
-          "aria-expanded": isOpen,
-          "aria-controls": isOpen ? ids.popup : void 0,
-          children: /* @__PURE__ */ jsx66(CalendarIcon, { className: "size-5" })
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx66(
-      PopUp,
-      {
-        id: ids.popup,
-        isOpen,
-        anchor: innerRef,
-        options: {
-          verticalAlignment: "afterEnd",
-          horizontalAlignment: "center",
-          gap: 4
-        },
-        outsideClickOptions: { refs: [innerRef], active: outsideClickCloses },
-        onClose: () => {
-          changeOpenWrapper(false);
-          onEditComplete?.(state);
-        },
-        role: "dialog",
-        "aria-labelledby": ids.label,
-        className: "flex-col-2 p-2",
-        children: /* @__PURE__ */ jsx66(
-          DateTimePickerDialog,
-          {
-            value: dialogValue,
-            allowRemove,
-            onValueChange: setDialogValue,
-            onEditComplete: (value2) => {
-              setState(value2);
-              onEditComplete?.(value2);
-              changeOpenWrapper(false);
-            },
-            pickerProps,
-            mode
-          }
-        )
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !hasUsedFocus) {
+        ref.current?.focus();
+        setHasUsedFocus(hasUsedFocus);
       }
-    )
-  ] });
-});
-
-// src/components/layout/table/TableFilterPopups.tsx
-import { useId as useId14, useMemo as useMemo25, useState as useState29 } from "react";
+    }, {
+      threshold: 0.1
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [disable, hasUsedFocus, ref]);
+};
 
-// src/components/user-interaction/select/MultiSelect.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx67, jsxs as jsxs37 } from "react/jsx-runtime";
-var MultiSelect = forwardRef18(function MultiSelect2({
-  children,
-  contentPanelProps,
-  buttonProps,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs37(MultiSelectRoot, { ...props, children: [
-    /* @__PURE__ */ jsx67(MultiSelectButton, { ref, ...buttonProps }),
-    /* @__PURE__ */ jsx67(MultiSelectContent, { ...contentPanelProps, children })
-  ] });
-});
+// src/hooks/focus/useIsMounted.ts
+import { useEffect as useEffect33, useLayoutEffect as useLayoutEffect7, useState as useState28 } from "react";
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect33;
+var useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState28(false);
+  useIsomorphicEffect(() => {
+    setIsMounted(true);
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+};
 
-// src/components/layout/table/TableFilterPopups.tsx
-import {
-  ArrowRight,
-  ArrowLeft,
-  ChevronRight as ChevronRight4,
-  ChevronLeft as ChevronLeft4,
-  CheckCircle2,
-  XCircle,
-  Equal,
-  EqualNot,
-  TextInitial,
-  SearchCheck,
-  SearchX,
-  CircleDashed,
-  CircleDot
-} from "lucide-react";
+// src/hooks/useHandleRefs.ts
+import { useEffect as useEffect34, useRef as useRef29 } from "react";
+function useHandleRefs(handleRef) {
+  const refs = useRef29([]);
+  useEffect34(() => {
+    refs.current = Object.keys(handleRef?.current ?? {}).map(
+      () => ({ current: null })
+    );
+    const values = Object.values(handleRef?.current ?? {});
+    values.forEach((el, i) => {
+      refs.current[i].current = el;
+    });
+  });
+  return refs.current;
+}
 
-// src/components/user-interaction/Checkbox.tsx
-import { Check as Check2, Minus as Minus2 } from "lucide-react";
-import { useCallback as useCallback26 } from "react";
-import { jsx as jsx68, jsxs as jsxs38 } from "react/jsx-runtime";
-var Checkbox = ({
-  value: controlledValue,
-  initialValue = false,
-  indeterminate,
+// src/hooks/useLogUnstableDependencies.ts
+import React7 from "react";
+function useLogUnstableDependencies(name, value) {
+  const prev = React7.useRef(null);
+  React7.useEffect(() => {
+    if (!prev.current) {
+      prev.current = value;
+      return;
+    }
+    const changes = {};
+    for (const key of Object.keys(value)) {
+      if (prev.current[key] !== value[key]) {
+        changes[key] = {
+          prev: prev.current[key],
+          next: value[key]
+        };
+      }
+    }
+    if (Object.keys(changes).length > 0) {
+      console.info(`[${name}] changed`, changes);
+    }
+    prev.current = value;
+  });
+}
+
+// src/hooks/useOverwritableState.ts
+import { useEffect as useEffect35, useState as useState29 } from "react";
+var useOverwritableState = (overwriteValue, onChange) => {
+  const [state, setState] = useState29(overwriteValue);
+  useEffect35(() => {
+    setState(overwriteValue);
+  }, [overwriteValue]);
+  const onChangeWrapper = (action) => {
+    const resolved = resolveSetState(action, state);
+    setState(resolved);
+    onChange?.(resolved);
+  };
+  return [state, onChangeWrapper];
+};
+
+// src/hooks/useRerender.ts
+import { useReducer as useReducer2 } from "react";
+var useRerender = () => {
+  return useReducer2(() => ({}), {})[1];
+};
+
+// src/hooks/useSearch.ts
+import { useCallback as useCallback25, useEffect as useEffect36, useMemo as useMemo24, useState as useState30 } from "react";
+
+// src/utils/simpleSearch.ts
+var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
+    return search.every((searchValue) => !!mappedSearchKeywords.find((value) => !!value && value.includes(searchValue.toLowerCase().trim())));
+  });
+};
+var MultiSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
+    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
+  });
+};
+var SimpleSearchWithMapping = (search, objects, mapping) => {
+  return MultiSearchWithMapping(search, objects, (value) => [mapping(value)]);
+};
+var SimpleSearch = (search, objects) => {
+  return SimpleSearchWithMapping(search, objects, (value) => value);
+};
+
+// src/hooks/useSearch.ts
+var useSearch = ({
+  list,
+  initialSearch,
+  searchMapping,
+  additionalSearchTags,
+  isSearchInstant = true,
+  sortingFunction,
+  filter,
+  disabled = false
+}) => {
+  const [search, setSearch] = useState30(initialSearch ?? "");
+  const [result, setResult] = useState30(list);
+  const searchTags = useMemo24(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = useCallback25((newSearch) => {
+    const usedSearch = newSearch ?? search;
+    if (newSearch) {
+      setSearch(search);
+    }
+    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
+  }, [searchTags, list, search, searchMapping]);
+  useEffect36(() => {
+    if (isSearchInstant) {
+      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
+    }
+  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
+  const filteredResult = useMemo24(() => {
+    if (!filter) {
+      return result;
+    }
+    return result.filter(filter);
+  }, [result, filter]);
+  const sortedAndFilteredResult = useMemo24(() => {
+    if (!sortingFunction) {
+      return filteredResult;
+    }
+    return filteredResult.sort(sortingFunction);
+  }, [filteredResult, sortingFunction]);
+  const usedResult = useMemo24(() => {
+    if (!disabled) {
+      return sortedAndFilteredResult;
+    }
+    return list;
+  }, [disabled, list, sortedAndFilteredResult]);
+  return {
+    result: usedResult,
+    hasResult: usedResult.length > 0,
+    allItems: list,
+    updateSearch,
+    search,
+    setSearch
+  };
+};
+
+// src/hooks/useUpdatingDateString.ts
+import { useEffect as useEffect37, useState as useState31 } from "react";
+var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
+  const { locale: contextLocale } = useLocale();
+  const locale = localeOverride ?? contextLocale;
+  const [dateAndTimeStrings, setDateAndTimeStrings] = useState31({
+    compareDate: date,
+    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+    relative: DateUtils.formatRelative(date, locale)
+  });
+  useEffect37(() => {
+    setDateAndTimeStrings({
+      compareDate: date,
+      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
+      relative: DateUtils.formatRelative(date, locale)
+    });
+  }, [date, absoluteFormat, locale]);
+  useEffect37(() => {
+    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
+import { useMemo as useMemo25 } from "react";
+var notEmpty = (value) => {
+  if (!value) {
+    return "notEmpty";
+  }
+};
+var boundsValidator = (length, bounds) => {
+  const [min, max] = bounds;
+  if (min !== void 0 && max !== void 0 && (length === void 0 || length < min || length > max)) {
+    return "range";
+  }
+  if (min !== void 0 && (length === void 0 || length < min)) {
+    return "lower";
+  }
+  if (max !== void 0 && length !== void 0 && length > max) {
+    return "upper";
+  }
+  return "none";
+};
+var lengthValidator = (value, bounds) => {
+  const mapping = {
+    range: "outOfRangeString",
+    lower: "tooShort",
+    upper: "tooLong",
+    none: void 0
+  };
+  return mapping[boundsValidator(value?.length, bounds)];
+};
+var selectionValidator = (value, bounds) => {
+  const mapping = {
+    range: "outOfRangeSelectionItems",
+    lower: "tooFewSelectionItems",
+    upper: "tooManySelectionItems",
+    none: void 0
+  };
+  return mapping[boundsValidator(value?.length, bounds)];
+};
+var emailValidator = (value) => {
+  if (!value || !validateEmail(value)) {
+    return "invalidEmail";
+  }
+};
+var UseValidators = {
+  notEmpty,
+  length: lengthValidator,
+  email: emailValidator,
+  selection: selectionValidator
+};
+var useTranslatedValidators = () => {
+  const translation = useHightideTranslation();
+  return useMemo25(() => ({
+    notEmpty: (value) => {
+      const result = notEmpty(value);
+      if (result) {
+        return translation(result);
+      }
+    },
+    length: (value, length) => {
+      const [min, max] = length;
+      const result = lengthValidator(value, length);
+      if (result) {
+        return translation(result, { min, max });
+      }
+    },
+    email: (value) => {
+      const result = emailValidator(value ?? "");
+      if (result) {
+        return translation(result);
+      }
+    },
+    selection: (value, length) => {
+      const [min, max] = length;
+      const result = selectionValidator(value, length);
+      if (result) {
+        return translation(
+          result,
+          { min, max }
+        );
+      }
+    }
+  }), [translation]);
+};
+
+// src/components/user-interaction/input/DateTimeInput.tsx
+import { Fragment as Fragment7, jsx as jsx66, jsxs as jsxs36 } from "react/jsx-runtime";
+var DateTimeInput = forwardRef17(function DateTimeInput2({
+  id: inputId,
+  value,
+  initialValue = null,
+  onValueChange,
+  onEditComplete,
+  allowRemove = false,
+  containerProps,
+  mode = "date",
+  pickerProps,
+  outsideClickCloses = true,
+  onDialogOpeningChange,
+  disabled = false,
+  readOnly = false,
+  invalid = false,
+  required = false,
+  ...props
+}, forwardedRef) {
+  const translation = useHightideTranslation();
+  const [isOpen, setIsOpen] = useState32(false);
+  const [state, setState] = useControlledState({
+    value,
+    onValueChange,
+    defaultValue: initialValue
+  });
+  const [dialogValue, setDialogValue] = useState32(state ?? /* @__PURE__ */ new Date());
+  const [stringInputState, setStringInputState] = useState32({
+    state: state ? DateUtils.toInputString(state, mode) : "",
+    date: void 0
+  });
+  useEffect38(() => {
+    setDialogValue(state ?? /* @__PURE__ */ new Date());
+    setStringInputState({
+      state: state ? DateUtils.toInputString(state, mode) : "",
+      date: void 0
+    });
+  }, [mode, state]);
+  const changeOpenWrapper = useCallback26((isOpen2) => {
+    onDialogOpeningChange?.(isOpen2);
+    setIsOpen(isOpen2);
+  }, [onDialogOpeningChange]);
+  const generatedId = useId13();
+  const ids = useMemo26(() => ({
+    input: inputId ?? `date-time-input-${generatedId}`,
+    popup: `date-time-input-popup-${generatedId}`,
+    label: `date-time-input-label-${generatedId}`
+  }), [generatedId, inputId]);
+  const innerRef = useRef30(null);
+  useImperativeHandle11(forwardedRef, () => innerRef.current);
+  useEffect38(() => {
+    if (readOnly || disabled) {
+      changeOpenWrapper(false);
+    }
+  }, [changeOpenWrapper, readOnly, disabled]);
+  const {
+    restartTimer,
+    clearTimer
+  } = useDelay({ delay: 2e3, disabled: disabled || readOnly });
+  return /* @__PURE__ */ jsxs36(Fragment7, { children: [
+    /* @__PURE__ */ jsxs36("div", { ...containerProps, className: clsx24("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ jsx66(
+        "input",
+        {
+          ...props,
+          ref: innerRef,
+          id: ids.input,
+          value: stringInputState.state,
+          onChange: (event) => {
+            const date = event.target.valueAsDate;
+            if (date) {
+              restartTimer(() => {
+                innerRef.current?.blur();
+                setState(date);
+                onEditComplete?.(date);
+              });
+            } else {
+              clearTimer();
+            }
+            setStringInputState({
+              state: event.target.value,
+              date: event.target.valueAsDate ?? void 0
+            });
+          },
+          onBlur: (event) => {
+            props.onBlur?.(event);
+            clearTimer();
+            if (stringInputState.date) {
+              setState(stringInputState.date);
+              onEditComplete?.(stringInputState.date);
+            } else {
+              if (innerRef.current) {
+                innerRef.current.value = "";
+              }
+              setStringInputState({
+                state: state ? DateUtils.toInputString(state, mode) : "",
+                date: void 0
+              });
+            }
+          },
+          type: mode === "date" ? "date" : mode === "time" ? "time" : "datetime-local",
+          ...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required }),
+          "data-name": props["data-name"] ?? "date-time-input",
+          "data-value": PropsUtil.dataAttributes.bool(!!state || !!stringInputState),
+          ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)
+        }
+      ),
+      /* @__PURE__ */ jsx66(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx66(
+        IconButton,
+        {
+          tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
+          coloringStyle: "text",
+          color: "neutral",
+          size: "sm",
+          className: "absolute right-1 top-1/2 -translate-y-1/2",
+          disabled,
+          onClick: () => {
+            changeOpenWrapper(true);
+          },
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen,
+          "aria-controls": isOpen ? ids.popup : void 0,
+          children: /* @__PURE__ */ jsx66(CalendarIcon, { className: "size-5" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx66(
+      PopUp,
+      {
+        id: ids.popup,
+        isOpen,
+        anchor: innerRef,
+        options: {
+          verticalAlignment: "afterEnd",
+          horizontalAlignment: "center",
+          gap: 4
+        },
+        outsideClickOptions: { refs: [innerRef], active: outsideClickCloses },
+        onClose: () => {
+          changeOpenWrapper(false);
+          onEditComplete?.(state);
+        },
+        role: "dialog",
+        "aria-labelledby": ids.label,
+        className: "flex-col-2 p-2",
+        children: /* @__PURE__ */ jsx66(
+          DateTimePickerDialog,
+          {
+            value: dialogValue,
+            allowRemove,
+            onValueChange: setDialogValue,
+            onEditComplete: (value2) => {
+              setState(value2);
+              onEditComplete?.(value2);
+              changeOpenWrapper(false);
+            },
+            pickerProps,
+            mode
+          }
+        )
+      }
+    )
+  ] });
+});
+
+// src/components/layout/table/TableFilterPopups.tsx
+import { useId as useId14, useMemo as useMemo27, useState as useState33 } from "react";
+
+// src/components/user-interaction/select/MultiSelect.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx67, jsxs as jsxs37 } from "react/jsx-runtime";
+var MultiSelect = forwardRef18(function MultiSelect2({
+  children,
+  contentPanelProps,
+  buttonProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs37(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ jsx67(MultiSelectButton, { ref, ...buttonProps }),
+    /* @__PURE__ */ jsx67(MultiSelectContent, { ...contentPanelProps, children })
+  ] });
+});
+
+// src/components/layout/table/TableFilterPopups.tsx
+import {
+  ArrowRight,
+  ArrowLeft,
+  ChevronRight as ChevronRight4,
+  ChevronLeft as ChevronLeft4,
+  CheckCircle2,
+  XCircle,
+  Equal,
+  EqualNot,
+  TextInitial,
+  SearchCheck,
+  SearchX,
+  CircleDashed,
+  CircleDot
+} from "lucide-react";
+
+// src/components/user-interaction/Checkbox.tsx
+import { Check as Check2, Minus as Minus2 } from "lucide-react";
+import { useCallback as useCallback27 } from "react";
+import { jsx as jsx68, jsxs as jsxs38 } from "react/jsx-runtime";
+var Checkbox = ({
+  value: controlledValue,
+  initialValue = false,
+  indeterminate,
   required = false,
   invalid = false,
   disabled = false,
@@ -15361,7 +15772,7 @@ var Checkbox = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = useCallback26((value2) => {
+  const onChangeWrapper = useCallback27((value2) => {
     onValueChangeStable(value2);
     onEditCompleteStable(value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -15584,7 +15995,7 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "textContains";
   const parameter = filterValue?.parameter ?? {};
   const id = useId14();
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.text,
     ...TableFilterOperator.generic
   ], []);
@@ -15644,7 +16055,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
   const operator = filterValue?.operator ?? "numberBetween";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.number,
     ...TableFilterOperator.generic
   ], []);
@@ -15735,9 +16146,9 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
   };
   const operator = filterValue?.operator ?? "dateBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState29(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState29(null);
-  const availableOperators = useMemo25(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState33(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState33(null);
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.date,
     ...TableFilterOperator.generic
   ], []);
@@ -15860,9 +16271,9 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
   };
   const operator = filterValue?.operator ?? "dateTimeBetween";
   const parameter = filterValue?.parameter ?? {};
-  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState29(null);
-  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState29(null);
-  const availableOperators = useMemo25(() => [
+  const [temporaryMinDateValue, setTemporaryMinDateValue] = useState33(null);
+  const [temporaryMaxDateValue, setTemporaryMaxDateValue] = useState33(null);
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.dateTime,
     ...TableFilterOperator.generic
   ], []);
@@ -15979,7 +16390,7 @@ var DatetimeFilter = ({ filterValue, onFilterValueChange }) => {
 };
 var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "booleanIsTrue";
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.boolean,
     ...TableFilterOperator.generic
   ], []);
@@ -16003,11 +16414,11 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableStateWithoutSizingContext();
   const operator = filterValue?.operator ?? "tagsContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.multiTags,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = useMemo25(() => {
+  const availableTags = useMemo27(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -16054,11 +16465,11 @@ var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const { table } = useTableStateWithoutSizingContext();
   const operator = filterValue?.operator ?? "tagsSingleContains";
   const parameter = filterValue?.parameter ?? {};
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.singleTag,
     ...TableFilterOperator.generic
   ], []);
-  const availableTags = useMemo25(() => {
+  const availableTags = useMemo27(() => {
     const column = table.getColumn(columnId);
     if (!column) return [];
     return column.columnDef.meta?.filterData?.tags ?? [];
@@ -16117,7 +16528,7 @@ var TagsSingleFilter = ({ columnId, filterValue, onFilterValueChange }) => {
 };
 var GenericFilter = ({ filterValue, onFilterValueChange }) => {
   const operator = filterValue?.operator ?? "notUndefined";
-  const availableOperators = useMemo25(() => [
+  const availableOperators = useMemo27(() => [
     ...TableFilterOperator.generic
   ], []);
   return /* @__PURE__ */ jsx69("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ jsx69(
@@ -16166,18 +16577,18 @@ var TableFilterButton = ({
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState30(columnFilterValue);
+  const [filterValue, setFilterValue] = useState34(columnFilterValue);
   const hasFilter = !!filterValue;
-  const anchorRef = useRef30(null);
-  const containerRef = useRef30(null);
-  const [isOpen, setIsOpen] = useState30(false);
+  const anchorRef = useRef31(null);
+  const containerRef = useRef31(null);
+  const [isOpen, setIsOpen] = useState34(false);
   const id = useId15();
-  const ids = useMemo26(() => ({
+  const ids = useMemo28(() => ({
     button: `table-filter-button-${id}`,
     popup: `table-filter-popup-${id}`,
     label: `table-filter-label-${id}`
   }), [id]);
-  useEffect32(() => {
+  useEffect39(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
@@ -16252,11 +16663,11 @@ var TableFilterButton = ({
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { useCallback as useCallback27, useEffect as useEffect33 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect40 } from "react";
 import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs41 } from "react/jsx-runtime";
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
-  const handleResizeMove = useCallback27((e) => {
+  const handleResizeMove = useCallback28((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);
@@ -16272,7 +16683,7 @@ var TableHeader = ({ isSticky = false }) => {
       deltaOffset
     }));
   }, [table]);
-  const handleResizeEnd = useCallback27(() => {
+  const handleResizeEnd = useCallback28(() => {
     if (!table.getState().columnSizingInfo.isResizingColumn) return;
     const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
     table.setColumnSizing((prev) => {
@@ -16290,7 +16701,7 @@ var TableHeader = ({ isSticky = false }) => {
       startSize: null
     });
   }, [table]);
-  useEffect33(() => {
+  useEffect40(() => {
     window.addEventListener("pointermove", handleResizeMove);
     window.addEventListener("pointerup", handleResizeEnd);
     return () => {
@@ -16459,7 +16870,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-import { useCallback as useCallback28, useMemo as useMemo27 } from "react";
+import { useCallback as useCallback29, useMemo as useMemo29 } from "react";
 import { jsx as jsx74 } from "react/jsx-runtime";
 var TableWithSelectionProvider = ({
   children,
@@ -16472,7 +16883,7 @@ var TableWithSelectionProvider = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const columnDef = useMemo27(() => [
+  const columnDef = useMemo29(() => [
     {
       id: selectionRowId,
       header: ({ table }) => {
@@ -16515,7 +16926,7 @@ var TableWithSelectionProvider = ({
     TableProvider,
     {
       ...props,
-      fillerRowCell: useCallback28((columnId, table) => {
+      fillerRowCell: useCallback29((columnId, table) => {
         if (columnId === selectionRowId) {
           return /* @__PURE__ */ jsx74(Checkbox, { value: false, disabled: true });
         }
@@ -16533,7 +16944,7 @@ var TableWithSelectionProvider = ({
         rowSelection,
         ...state
       },
-      onRowClick: useCallback28((row, table) => {
+      onRowClick: useCallback29((row, table) => {
         if (!disableClickRowClickSelection) {
           row.toggleSelected();
         }
@@ -16575,7 +16986,7 @@ var TableWithSelection = ({
 };
 
 // src/components/layout/table/TableColumn.tsx
-import { memo as memo2, useEffect as useEffect34, useMemo as useMemo28, useState as useState31 } from "react";
+import { memo as memo2, useEffect as useEffect41, useMemo as useMemo30, useState as useState35 } from "react";
 import { jsx as jsx76 } from "react/jsx-runtime";
 var TableColumnComponent = ({
   filterType,
@@ -16587,11 +16998,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] = useState31({
+  const [column] = useState35({
     ...props,
     filterFn
   });
-  useEffect34(() => {
+  useEffect41(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -16606,27 +17017,27 @@ var TableColumnFactory = () => memo2(
   }
 );
 var TableColumn = (props) => {
-  const TableColumnComponent2 = useMemo28(() => TableColumnFactory(), []);
+  const TableColumnComponent2 = useMemo30(() => TableColumnFactory(), []);
   return /* @__PURE__ */ jsx76(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-import { useMemo as useMemo29, useRef as useRef31, useId as useId16 } from "react";
+import { useMemo as useMemo31, useRef as useRef32, useId as useId16 } from "react";
 import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, ArrowLeftRightIcon } from "lucide-react";
 import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs45 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = useRef31(null);
+  const containerRef = useRef32(null);
   const generatedId = useId16();
-  const ids = useMemo29(() => ({
+  const ids = useMemo31(() => ({
     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 = useMemo29(() => {
+  const columns = useMemo31(() => {
     const allColumns = table.getAllColumns();
     const leftPinned = [];
     const unpinned = [];
@@ -16884,7 +17295,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 };
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-import { useState as useState32 } from "react";
+import { useState as useState36 } from "react";
 import { clsx as clsx28 } from "clsx";
 
 // src/utils/writeToClipboard.ts
@@ -16907,7 +17318,7 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState32(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState36(false);
   return /* @__PURE__ */ jsxs46(
     TooltipRoot,
     {
@@ -16956,7 +17367,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback29, useRef as useRef32, useState as useState33 } from "react";
+import { useCallback as useCallback30, useRef as useRef33, useState as useState37 } from "react";
 import clsx29 from "clsx";
 import { Fragment as Fragment11, jsx as jsx79, jsxs as jsxs47 } from "react/jsx-runtime";
 var MenuItem = ({
@@ -16982,8 +17393,8 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = useRef32(null);
-  const [isOpen, setIsOpen] = useState33(false);
+  const triggerRef = useRef33(null);
+  const [isOpen, setIsOpen] = useState37(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -16991,7 +17402,7 @@ var Menu = ({
     disabled
   };
   return /* @__PURE__ */ jsxs47(Fragment11, { children: [
-    trigger(bag, useCallback29((el) => triggerRef.current = el, [])),
+    trigger(bag, useCallback30((el) => triggerRef.current = el, [])),
     /* @__PURE__ */ jsx79(
       PopUp,
       {
@@ -17013,7 +17424,7 @@ var Menu = ({
 };
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback30, useEffect as useEffect35, useState as useState34 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect42, useState as useState38 } from "react";
 import clsx30 from "clsx";
 import { jsx as jsx80, jsxs as jsxs48 } from "react/jsx-runtime";
 var up = 1;
@@ -17034,7 +17445,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState34({
+  }, setAnimation] = useState38({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -17050,7 +17461,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = useCallback30((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = useCallback31((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -17060,7 +17471,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = useCallback30((timestamp, startTime) => {
+  const animate = useCallback31((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -17133,7 +17544,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect35(() => {
+  useEffect42(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -17211,7 +17622,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Switch.tsx
-import { useCallback as useCallback31 } from "react";
+import { useCallback as useCallback32 } from "react";
 import { jsx as jsx81 } from "react/jsx-runtime";
 var Switch = ({
   value: controlledValue,
@@ -17226,7 +17637,7 @@ var Switch = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = useCallback31((value2) => {
+  const onChangeWrapper = useCallback32((value2) => {
     onValueChangeStable(!value2);
     onEditCompleteStable(!value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -17266,7 +17677,7 @@ var Switch = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-import { forwardRef as forwardRef19, useCallback as useCallback32, useId as useId17 } from "react";
+import { forwardRef as forwardRef19, useCallback as useCallback33, useId as useId17 } from "react";
 import clsx31 from "clsx";
 import { jsx as jsx82, jsxs as jsxs49 } from "react/jsx-runtime";
 var Textarea = forwardRef19(function Textarea2({
@@ -17285,7 +17696,7 @@ var Textarea = forwardRef19(function Textarea2({
   });
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onEditCompleteWrapper = useCallback32((text) => {
+  const onEditCompleteWrapper = useCallback33((text) => {
     onEditCompleteStable(text);
     clearTimer();
   }, [onEditCompleteStable, clearTimer]);
@@ -17397,7 +17808,7 @@ var TimeDisplay = ({
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId18 } from "react";
-import { forwardRef as forwardRef20, useState as useState35 } from "react";
+import { forwardRef as forwardRef20, useState as useState39 } from "react";
 import clsx32 from "clsx";
 import { jsx as jsx84, jsxs as jsxs50 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef20(function InsideLabelInput2({
@@ -17413,7 +17824,7 @@ var InsideLabelInput = forwardRef20(function InsideLabelInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = useState35(false);
+  const [isFocused, setIsFocused] = useState39(false);
   const generatedId = useId18();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ jsxs50("div", { className: clsx32("relative"), children: [
@@ -17503,7 +17914,7 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect36, useImperativeHandle as useImperativeHandle12, useRef as useRef33, useState as useState36 } from "react";
+import { forwardRef as forwardRef21, useEffect as useEffect43, useImperativeHandle as useImperativeHandle12, useRef as useRef34, useState as useState40 } from "react";
 import { Pencil } from "lucide-react";
 import clsx34 from "clsx";
 import { jsx as jsx86, jsxs as jsxs52 } from "react/jsx-runtime";
@@ -17520,10 +17931,10 @@ var ToggleableInput = forwardRef21(function ToggleableInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = useState36(initialState !== "display");
-  const innerRef = useRef33(null);
+  const [isEditing, setIsEditing] = useState40(initialState !== "display");
+  const innerRef = useRef34(null);
   useImperativeHandle12(forwardedRef, () => innerRef.current);
-  useEffect36(() => {
+  useEffect43(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
@@ -17733,7 +18144,7 @@ var DateProperty = ({
 import { List } from "lucide-react";
 
 // src/components/user-interaction/select/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect37, useImperativeHandle as useImperativeHandle13, useRef as useRef34 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect44, useImperativeHandle as useImperativeHandle13, useRef as useRef35 } from "react";
 import { XIcon as XIcon2, Plus } from "lucide-react";
 import { jsx as jsx90, jsxs as jsxs55 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayButton2({
@@ -17743,7 +18154,7 @@ var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayB
   const translation = useHightideTranslation();
   const { state, trigger, item, ids, setIds } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  useEffect37(() => {
+  useEffect44(() => {
     if (id) {
       setIds((prev) => ({
         ...prev,
@@ -17751,9 +18162,9 @@ var MultiSelectChipDisplayButton = forwardRef22(function MultiSelectChipDisplayB
       }));
     }
   }, [id, setIds]);
-  const innerRef = useRef34(null);
+  const innerRef = useRef35(null);
   useImperativeHandle13(ref, () => innerRef.current);
-  useEffect37(() => {
+  useEffect44(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -17990,463 +18401,97 @@ var SingleSelectProperty = ({
                     className: "flex-row-2 w-full items-center justify-between",
                     hideExpansionIcon: true,
                     "data-name": "property-input"
-                  }
-                ),
-                /* @__PURE__ */ jsx93(SelectContent, { children })
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-};
-
-// src/components/user-interaction/properties/TextProperty.tsx
-import { Text } from "lucide-react";
-import { jsx as jsx94 } from "react/jsx-runtime";
-var TextProperty = ({
-  value,
-  readOnly,
-  onValueChange,
-  onEditComplete,
-  ...baseProps
-}) => {
-  const translation = useHightideTranslation();
-  const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx94(
-    PropertyBase,
-    {
-      ...baseProps,
-      hasValue,
-      icon: /* @__PURE__ */ jsx94(Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx94(
-        Textarea,
-        {
-          "data-name": "property-input",
-          className: "w-full",
-          "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          rows: 5,
-          value: value ?? "",
-          readOnly,
-          placeholder: translation("text"),
-          onValueChange: (value2) => onValueChange?.(value2),
-          onEditComplete: (value2) => onEditComplete?.(value2)
-        }
-      )
-    }
-  );
-};
-
-// src/components/utils/Transition.tsx
-import { useEffect as useEffect38, useState as useState37 } from "react";
-function Transition({
-  children,
-  show,
-  includeAnimation = true
-}) {
-  const [isOpen, setIsOpen] = useState37(show);
-  const [isTransitioning, setIsTransitioning] = useState37(!isOpen);
-  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect38(() => {
-    setIsOpen(show);
-    setIsTransitioning(true);
-  }, [show]);
-  const onAnimationEnd = () => setIsTransitioning(false);
-  const bag = {
-    isOpen,
-    isTransitioning,
-    isUsingReducedMotion,
-    data: {
-      "data-open": isOpen && !isTransitioning ? "" : void 0,
-      "data-opening": isOpen && isTransitioning ? "" : void 0,
-      "data-closing": !isOpen && isTransitioning ? "" : void 0,
-      "data-closed": !isOpen && !isTransitioning ? "" : void 0
-    },
-    handlers: {
-      onTransitionEnd: () => setIsTransitioning(false),
-      onTransitionCancel: () => setIsTransitioning(false),
-      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
-    }
-  };
-  return BagFunctionUtil.resolve(children, bag);
-}
-
-// src/global-contexts/HightideProvider.tsx
-import { jsx as jsx95 } from "react/jsx-runtime";
-var HightideProvider = ({
-  children,
-  theme,
-  locale,
-  config
-}) => {
-  return /* @__PURE__ */ jsx95(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx95(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx95(HightideConfigProvider, { ...config, children }) }) });
-};
-
-// src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect39 } from "react";
-var selectorName = "data-hw-focus-guard";
-function FocusGuard() {
-  const element = document.createElement("div");
-  element.setAttribute(selectorName, "");
-  element.tabIndex = 0;
-  element.style.border = "none";
-  element.style.outline = "none";
-  element.style.boxShadow = "none";
-  element.style.opacity = "0";
-  element.style.position = "fixed";
-  element.style.pointerEvents = "none";
-  return element;
-}
-var FocusGuardsService = class _FocusGuardsService {
-  constructor() {
-    this.count = 0;
-  }
-  static getInstance() {
-    if (!_FocusGuardsService.instance) {
-      _FocusGuardsService.instance = new _FocusGuardsService();
-    }
-    return _FocusGuardsService.instance;
-  }
-  add() {
-    const edgeGuards = document.querySelectorAll(`[${selectorName}]`);
-    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? FocusGuard());
-    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? FocusGuard());
-    this.count++;
-  }
-  remove() {
-    if (this.count === 1) {
-      document.querySelectorAll(`[${selectorName}]`).forEach((node) => node.remove());
-    }
-    this.count--;
-  }
-};
-var useFocusGuards = () => {
-  useEffect39(() => {
-    FocusGuardsService.getInstance().add();
-    return () => {
-      FocusGuardsService.getInstance().remove();
-    };
-  }, []);
-};
-
-// src/hooks/focus/useFocusOnceVisible.ts
-import React6, { useEffect as useEffect40 } from "react";
-var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = React6.useState(false);
-  useEffect40(() => {
-    if (disable || hasUsedFocus) {
-      return;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting && !hasUsedFocus) {
-        ref.current?.focus();
-        setHasUsedFocus(hasUsedFocus);
-      }
-    }, {
-      threshold: 0.1
-    });
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => observer.disconnect();
-  }, [disable, hasUsedFocus, ref]);
-};
-
-// src/hooks/focus/useIsMounted.ts
-import { useEffect as useEffect41, useLayoutEffect as useLayoutEffect7, useState as useState38 } from "react";
-var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? useLayoutEffect7 : useEffect41;
-var useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState38(false);
-  useIsomorphicEffect(() => {
-    setIsMounted(true);
-    return () => {
-      setIsMounted(false);
-    };
-  }, []);
-  return isMounted;
-};
-
-// src/hooks/useHandleRefs.ts
-import { useEffect as useEffect42, useRef as useRef35 } from "react";
-function useHandleRefs(handleRef) {
-  const refs = useRef35([]);
-  useEffect42(() => {
-    refs.current = Object.keys(handleRef?.current ?? {}).map(
-      () => ({ current: null })
-    );
-    const values = Object.values(handleRef?.current ?? {});
-    values.forEach((el, i) => {
-      refs.current[i].current = el;
-    });
-  });
-  return refs.current;
-}
-
-// src/hooks/useLogUnstableDependencies.ts
-import React7 from "react";
-function useLogUnstableDependencies(name, value) {
-  const prev = React7.useRef(null);
-  React7.useEffect(() => {
-    if (!prev.current) {
-      prev.current = value;
-      return;
-    }
-    const changes = {};
-    for (const key of Object.keys(value)) {
-      if (prev.current[key] !== value[key]) {
-        changes[key] = {
-          prev: prev.current[key],
-          next: value[key]
-        };
-      }
-    }
-    if (Object.keys(changes).length > 0) {
-      console.info(`[${name}] changed`, changes);
-    }
-    prev.current = value;
-  });
-}
-
-// src/hooks/useOverwritableState.ts
-import { useEffect as useEffect43, useState as useState39 } from "react";
-var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = useState39(overwriteValue);
-  useEffect43(() => {
-    setState(overwriteValue);
-  }, [overwriteValue]);
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, state);
-    setState(resolved);
-    onChange?.(resolved);
-  };
-  return [state, onChangeWrapper];
-};
-
-// src/hooks/useRerender.ts
-import { useReducer as useReducer2 } from "react";
-var useRerender = () => {
-  return useReducer2(() => ({}), {})[1];
-};
-
-// src/hooks/useSearch.ts
-import { useCallback as useCallback33, useEffect as useEffect44, useMemo as useMemo30, useState as useState40 } from "react";
-
-// src/utils/simpleSearch.ts
-var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
-  return objects.filter((object) => {
-    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
-    if (!mappedSearchKeywords) {
-      return true;
-    }
-    return search.every((searchValue) => !!mappedSearchKeywords.find((value) => !!value && value.includes(searchValue.toLowerCase().trim())));
-  });
-};
-var MultiSearchWithMapping = (search, objects, mapping) => {
-  return objects.filter((object) => {
-    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
-    if (!mappedSearchKeywords) {
-      return true;
+                  }
+                ),
+                /* @__PURE__ */ jsx93(SelectContent, { children })
+              ]
+            }
+          )
+        }
+      )
     }
-    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
-  });
-};
-var SimpleSearchWithMapping = (search, objects, mapping) => {
-  return MultiSearchWithMapping(search, objects, (value) => [mapping(value)]);
-};
-var SimpleSearch = (search, objects) => {
-  return SimpleSearchWithMapping(search, objects, (value) => value);
+  );
 };
 
-// src/hooks/useSearch.ts
-var useSearch = ({
-  list,
-  initialSearch,
-  searchMapping,
-  additionalSearchTags,
-  isSearchInstant = true,
-  sortingFunction,
-  filter,
-  disabled = false
+// src/components/user-interaction/properties/TextProperty.tsx
+import { Text } from "lucide-react";
+import { jsx as jsx94 } from "react/jsx-runtime";
+var TextProperty = ({
+  value,
+  readOnly,
+  onValueChange,
+  onEditComplete,
+  ...baseProps
 }) => {
-  const [search, setSearch] = useState40(initialSearch ?? "");
-  const [result, setResult] = useState40(list);
-  const searchTags = useMemo30(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = useCallback33((newSearch) => {
-    const usedSearch = newSearch ?? search;
-    if (newSearch) {
-      setSearch(search);
-    }
-    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
-  }, [searchTags, list, search, searchMapping]);
-  useEffect44(() => {
-    if (isSearchInstant) {
-      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
-    }
-  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = useMemo30(() => {
-    if (!filter) {
-      return result;
-    }
-    return result.filter(filter);
-  }, [result, filter]);
-  const sortedAndFilteredResult = useMemo30(() => {
-    if (!sortingFunction) {
-      return filteredResult;
-    }
-    return filteredResult.sort(sortingFunction);
-  }, [filteredResult, sortingFunction]);
-  const usedResult = useMemo30(() => {
-    if (!disabled) {
-      return sortedAndFilteredResult;
+  const translation = useHightideTranslation();
+  const hasValue = value !== void 0;
+  return /* @__PURE__ */ jsx94(
+    PropertyBase,
+    {
+      ...baseProps,
+      hasValue,
+      icon: /* @__PURE__ */ jsx94(Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx94(
+        Textarea,
+        {
+          "data-name": "property-input",
+          className: "w-full",
+          "data-invalid": PropsUtil.dataAttributes.bool(invalid),
+          rows: 5,
+          value: value ?? "",
+          readOnly,
+          placeholder: translation("text"),
+          onValueChange: (value2) => onValueChange?.(value2),
+          onEditComplete: (value2) => onEditComplete?.(value2)
+        }
+      )
     }
-    return list;
-  }, [disabled, list, sortedAndFilteredResult]);
-  return {
-    result: usedResult,
-    hasResult: usedResult.length > 0,
-    allItems: list,
-    updateSearch,
-    search,
-    setSearch
-  };
+  );
 };
 
-// src/hooks/useUpdatingDateString.ts
+// src/components/utils/Transition.tsx
 import { useEffect as useEffect45, useState as useState41 } from "react";
-var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
-  const { locale: contextLocale } = useLocale();
-  const locale = localeOverride ?? contextLocale;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = useState41({
-    compareDate: date,
-    absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-    relative: DateUtils.formatRelative(date, locale)
-  });
-  useEffect45(() => {
-    setDateAndTimeStrings({
-      compareDate: date,
-      absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
-      relative: DateUtils.formatRelative(date, locale)
-    });
-  }, [date, absoluteFormat, locale]);
+function Transition({
+  children,
+  show,
+  includeAnimation = true
+}) {
+  const [isOpen, setIsOpen] = useState41(show);
+  const [isTransitioning, setIsTransitioning] = useState41(!isOpen);
+  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
   useEffect45(() => {
-    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
-import { useMemo as useMemo31 } from "react";
-var notEmpty = (value) => {
-  if (!value) {
-    return "notEmpty";
-  }
-};
-var boundsValidator = (length, bounds) => {
-  const [min, max] = bounds;
-  if (min !== void 0 && max !== void 0 && (length === void 0 || length < min || length > max)) {
-    return "range";
-  }
-  if (min !== void 0 && (length === void 0 || length < min)) {
-    return "lower";
-  }
-  if (max !== void 0 && length !== void 0 && length > max) {
-    return "upper";
-  }
-  return "none";
-};
-var lengthValidator = (value, bounds) => {
-  const mapping = {
-    range: "outOfRangeString",
-    lower: "tooShort",
-    upper: "tooLong",
-    none: void 0
-  };
-  return mapping[boundsValidator(value?.length, bounds)];
-};
-var selectionValidator = (value, bounds) => {
-  const mapping = {
-    range: "outOfRangeSelectionItems",
-    lower: "tooFewSelectionItems",
-    upper: "tooManySelectionItems",
-    none: void 0
-  };
-  return mapping[boundsValidator(value?.length, bounds)];
-};
-var emailValidator = (value) => {
-  if (!value || !validateEmail(value)) {
-    return "invalidEmail";
-  }
-};
-var UseValidators = {
-  notEmpty,
-  length: lengthValidator,
-  email: emailValidator,
-  selection: selectionValidator
-};
-var useTranslatedValidators = () => {
-  const translation = useHightideTranslation();
-  return useMemo31(() => ({
-    notEmpty: (value) => {
-      const result = notEmpty(value);
-      if (result) {
-        return translation(result);
-      }
-    },
-    length: (value, length) => {
-      const [min, max] = length;
-      const result = lengthValidator(value, length);
-      if (result) {
-        return translation(result, { min, max });
-      }
-    },
-    email: (value) => {
-      const result = emailValidator(value ?? "");
-      if (result) {
-        return translation(result);
-      }
+    setIsOpen(show);
+    setIsTransitioning(true);
+  }, [show]);
+  const onAnimationEnd = () => setIsTransitioning(false);
+  const bag = {
+    isOpen,
+    isTransitioning,
+    isUsingReducedMotion,
+    data: {
+      "data-open": isOpen && !isTransitioning ? "" : void 0,
+      "data-opening": isOpen && isTransitioning ? "" : void 0,
+      "data-closing": !isOpen && isTransitioning ? "" : void 0,
+      "data-closed": !isOpen && !isTransitioning ? "" : void 0
     },
-    selection: (value, length) => {
-      const [min, max] = length;
-      const result = selectionValidator(value, length);
-      if (result) {
-        return translation(
-          result,
-          { min, max }
-        );
-      }
+    handlers: {
+      onTransitionEnd: () => setIsTransitioning(false),
+      onTransitionCancel: () => setIsTransitioning(false),
+      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
     }
-  }), [translation]);
+  };
+  return BagFunctionUtil.resolve(children, bag);
+}
+
+// src/global-contexts/HightideProvider.tsx
+import { jsx as jsx95 } from "react/jsx-runtime";
+var HightideProvider = ({
+  children,
+  theme,
+  locale,
+  config
+}) => {
+  return /* @__PURE__ */ jsx95(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx95(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx95(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/utils/builder.ts