@helpwave/hightide 0.10.2 → 0.11.0

package/dist/index.mjs

@@ -19828,17 +19828,95 @@ var TableHeader = ({ isSticky = false }) => {
   ] });
 };
 
-// src/components/layout/table/TableDisplay.tsx
+// src/components/layout/table/VirtualizedTableBody.tsx
+import { useEffect as useEffect46, useRef as useRef37, useState as useState36 } from "react";
+import { flexRender as flexRender4 } from "@tanstack/react-table";
+import { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual";
+import clsx33 from "clsx";
 import { jsx as jsx83, jsxs as jsxs52 } from "react/jsx-runtime";
+var VirtualizedTableBody = ({
+  estimateRowHeight = 48,
+  overscan = 8,
+  scroll = "window"
+}) => {
+  const { table, onRowClick } = useTableStateWithoutSizingContext();
+  const { containerRef } = useTableContainerContext();
+  const rows = table.getRowModel().rows;
+  const bodyRef = useRef37(null);
+  const [isMounted, setIsMounted] = useState36(false);
+  const [scrollMargin, setScrollMargin] = useState36(0);
+  useEffect46(() => setIsMounted(true), []);
+  useEffect46(() => {
+    if (scroll !== "window") return;
+    const element = bodyRef.current;
+    if (!element || typeof window === "undefined") return;
+    const measure = () => {
+      const next = element.getBoundingClientRect().top + window.scrollY;
+      setScrollMargin((prev) => Math.abs(prev - next) < 1 ? prev : next);
+    };
+    measure();
+    const resizeObserver = new ResizeObserver(measure);
+    resizeObserver.observe(element);
+    window.addEventListener("resize", measure);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [scroll]);
+  const common = {
+    count: rows.length,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    getItemKey: (index) => rows[index]?.id ?? index
+  };
+  const windowVirtualizer = useWindowVirtualizer({ ...common, scrollMargin });
+  const containerVirtualizer = useVirtualizer({ ...common, getScrollElement: () => containerRef.current });
+  const virtualizer = scroll === "window" ? windowVirtualizer : containerVirtualizer;
+  const offset = scroll === "window" ? scrollMargin : 0;
+  const renderRow = (row, key, measured, dataIndex) => /* @__PURE__ */ jsx83(
+    "tr",
+    {
+      "data-index": dataIndex,
+      ref: measured ? virtualizer.measureElement : void 0,
+      onClick: () => onRowClick?.(row, table),
+      "data-clickable": PropsUtil.dataAttributes.bool(!!onRowClick),
+      "data-name": "table-body-row",
+      className: clsx33(BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original)),
+      children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx83("td", { "data-name": "table-body-cell", className: clsx33(cell.column.columnDef.meta?.className), children: flexRender4(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+    },
+    key
+  );
+  if (!isMounted) {
+    return /* @__PURE__ */ jsx83("tbody", { ref: bodyRef, children: rows.map((row) => renderRow(row, row.id, false)) });
+  }
+  const items = virtualizer.getVirtualItems();
+  const total = virtualizer.getTotalSize();
+  const paddingTop = items.length ? items[0].start - offset : 0;
+  const paddingBottom = items.length ? total - (items[items.length - 1].end - offset) : 0;
+  const columnCount = Math.max(1, table.getVisibleLeafColumns().length);
+  return /* @__PURE__ */ jsxs52("tbody", { ref: bodyRef, children: [
+    paddingTop > 0 && /* @__PURE__ */ jsx83("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx83("td", { colSpan: columnCount, style: { height: paddingTop, padding: 0, border: 0 } }) }),
+    items.map((virtualRow) => {
+      const row = rows[virtualRow.index];
+      if (!row) return null;
+      return renderRow(row, virtualRow.key, true, virtualRow.index);
+    }),
+    paddingBottom > 0 && /* @__PURE__ */ jsx83("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx83("td", { colSpan: columnCount, style: { height: paddingBottom, padding: 0, border: 0 } }) })
+  ] });
+};
+
+// src/components/layout/table/TableDisplay.tsx
+import { jsx as jsx84, jsxs as jsxs53 } from "react/jsx-runtime";
 var TableDisplay = ({
   children,
   containerProps,
   tableHeaderProps,
+  virtualized = false,
   ...props
 }) => {
   const { table } = useTableStateContext();
   const { containerRef } = useTableContainerContext();
-  return /* @__PURE__ */ jsx83("div", { ...containerProps, ref: containerRef, "data-name": containerProps?.["data-name"] ?? "table-container", children: /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsx84("div", { ...containerProps, ref: containerRef, "data-name": containerProps?.["data-name"] ?? "table-container", children: /* @__PURE__ */ jsxs53(
     "table",
     {
       ...props,
@@ -19849,19 +19927,19 @@ var TableDisplay = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx83(TableHeader, { ...tableHeaderProps }),
-        /* @__PURE__ */ jsx83(TableBody, {})
+        /* @__PURE__ */ jsx84(TableHeader, { ...tableHeaderProps }),
+        virtualized ? /* @__PURE__ */ jsx84(VirtualizedTableBody, { ...typeof virtualized === "object" ? virtualized : {} }) : /* @__PURE__ */ jsx84(TableBody, {})
       ]
     }
   ) });
 };
 
 // src/components/layout/table/TablePagination.tsx
-import clsx33 from "clsx";
-import { jsx as jsx84, jsxs as jsxs53 } from "react/jsx-runtime";
+import clsx34 from "clsx";
+import { jsx as jsx85, jsxs as jsxs54 } from "react/jsx-runtime";
 var TablePaginationMenu = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     Pagination,
     {
       ...props,
@@ -19881,27 +19959,27 @@ var TablePageSizeSelect = ({
 }) => {
   const { table } = useTableStateWithoutSizingContext();
   const currentPageSize = table.getState().pagination.pageSize;
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     Select,
     {
       ...props,
       value: currentPageSize.toString(),
       onValueChange: (value) => table.setPageSize(Number(value)),
-      children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx84(SelectOption, { value: size.toString(), label: size.toString() }, size))
+      children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx85(SelectOption, { value: size.toString(), label: size.toString() }, size))
     }
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ jsxs53("div", { ...props, className: clsx33("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
-    /* @__PURE__ */ jsx84(TablePaginationMenu, {}),
-    /* @__PURE__ */ jsx84(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ jsx84(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
+  return /* @__PURE__ */ jsxs54("div", { ...props, className: clsx34("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
+    /* @__PURE__ */ jsx85(TablePaginationMenu, {}),
+    /* @__PURE__ */ jsx85(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ jsx85(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
   ] });
 };
 
 // src/components/user-interaction/Checkbox.tsx
 import { Check as Check5, Minus as Minus2 } from "lucide-react";
 import { useCallback as useCallback37 } from "react";
-import { jsx as jsx85, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs55 } from "react/jsx-runtime";
 var Checkbox = ({
   value: controlledValue,
   initialValue = false,
@@ -19927,7 +20005,7 @@ var Checkbox = ({
     onValueChange: onChangeWrapper,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs55(
     "div",
     {
       ...props,
@@ -19954,8 +20032,8 @@ var Checkbox = ({
       ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
       "data-name": props["data-name"] ?? "checkbox",
       children: [
-        /* @__PURE__ */ jsx85(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx85(Minus2, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ jsx85(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx85(Check5, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) })
+        /* @__PURE__ */ jsx86(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx86(Minus2, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx86(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx86(Check5, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) })
       ]
     }
   );
@@ -19963,7 +20041,7 @@ var Checkbox = ({
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
 import { useCallback as useCallback38, useMemo as useMemo37 } from "react";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var TableWithSelectionProvider = ({
   children,
   state,
@@ -19979,7 +20057,7 @@ var TableWithSelectionProvider = ({
     {
       id: selectionRowId,
       header: ({ table }) => {
-        return /* @__PURE__ */ jsx86(
+        return /* @__PURE__ */ jsx87(
           Checkbox,
           {
             value: table.getIsAllRowsSelected(),
@@ -19992,7 +20070,7 @@ var TableWithSelectionProvider = ({
         );
       },
       cell: ({ row }) => {
-        return /* @__PURE__ */ jsx86(
+        return /* @__PURE__ */ jsx87(
           Checkbox,
           {
             disabled: !row.getCanSelect(),
@@ -20014,15 +20092,15 @@ var TableWithSelectionProvider = ({
     },
     ...props.columns ?? []
   ], [selectionRowId, props.columns, translation]);
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx87(
     TableProvider,
     {
       ...props,
       fillerRowCell: useCallback38((columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx86(Checkbox, { value: false, disabled: true });
+          return /* @__PURE__ */ jsx87(Checkbox, { value: false, disabled: true });
         }
-        return fillerRowCell?.(columnId, table) ?? /* @__PURE__ */ jsx86(FillerCell, {});
+        return fillerRowCell?.(columnId, table) ?? /* @__PURE__ */ jsx87(FillerCell, {});
       }, [fillerRowCell, selectionRowId]),
       columns: columnDef,
       initialState: {
@@ -20048,14 +20126,14 @@ var TableWithSelectionProvider = ({
 };
 
 // src/components/layout/table/Table.tsx
-import clsx34 from "clsx";
-import { jsx as jsx87, jsxs as jsxs55 } from "react/jsx-runtime";
+import clsx35 from "clsx";
+import { jsx as jsx88, jsxs as jsxs56 } from "react/jsx-runtime";
 var Table = ({ children, table, paginationOptions, displayProps, header, footer, ...props }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ jsx87("div", { ...props, className: clsx34("flex-col-3", props.className), children: /* @__PURE__ */ jsxs55(TableProvider, { ...table, children: [
+  return /* @__PURE__ */ jsx88("div", { ...props, className: clsx35("flex-col-3", props.className), children: /* @__PURE__ */ jsxs56(TableProvider, { ...table, children: [
     header,
-    /* @__PURE__ */ jsx87(TableDisplay, { ...displayProps, children }),
-    /* @__PURE__ */ jsx87(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ jsx87(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
+    /* @__PURE__ */ jsx88(TableDisplay, { ...displayProps, children }),
+    /* @__PURE__ */ jsx88(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ jsx88(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
     footer
   ] }) });
 };
@@ -20069,17 +20147,17 @@ var TableWithSelection = ({
   ...props
 }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ jsx87("div", { ...props, className: clsx34("flex-col-3", props.className), children: /* @__PURE__ */ jsxs55(TableWithSelectionProvider, { ...table, children: [
+  return /* @__PURE__ */ jsx88("div", { ...props, className: clsx35("flex-col-3", props.className), children: /* @__PURE__ */ jsxs56(TableWithSelectionProvider, { ...table, children: [
     header,
-    /* @__PURE__ */ jsx87(TableDisplay, { ...displayProps, children }),
-    /* @__PURE__ */ jsx87(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ jsx87(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
+    /* @__PURE__ */ jsx88(TableDisplay, { ...displayProps, children }),
+    /* @__PURE__ */ jsx88(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ jsx88(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
     footer
   ] }) });
 };
 
 // src/components/layout/table/TableColumn.tsx
-import { memo as memo2, useEffect as useEffect46, useMemo as useMemo38, useState as useState36 } from "react";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { memo as memo2, useEffect as useEffect47, useMemo as useMemo38, useState as useState37 } from "react";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var TableColumnComponent = ({
   filterType,
   ...props
@@ -20090,11 +20168,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] = useState36({
+  const [column] = useState37({
     ...props,
     filterFn
   });
-  useEffect46(() => {
+  useEffect47(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -20110,17 +20188,17 @@ var TableColumnFactory = () => memo2(
 );
 var TableColumn = (props) => {
   const TableColumnComponent2 = useMemo38(() => TableColumnFactory(), []);
-  return /* @__PURE__ */ jsx88(TableColumnComponent2, { ...props });
+  return /* @__PURE__ */ jsx89(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-import { useMemo as useMemo39, useRef as useRef37, useId as useId21 } from "react";
+import { useMemo as useMemo39, useRef as useRef38, useId as useId21 } from "react";
 import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight5, Eye, EyeOff, Pin, PinOff, Columns3Cog } from "lucide-react";
-import { Fragment as Fragment10, jsx as jsx89, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx90, jsxs as jsxs57 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = useRef37(null);
+  const containerRef = useRef38(null);
   const generatedId = useId21();
   const ids = useMemo39(() => ({
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
@@ -20247,7 +20325,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
     }
     return columnId;
   };
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs57(
     PopUp,
     {
       ...props,
@@ -20263,11 +20341,11 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
       "aria-describedby": ids.label,
       className: "flex-col-1 p-2 items-start min-w-72",
       children: [
-        /* @__PURE__ */ jsxs56("div", { className: "flex-col-1", children: [
-          /* @__PURE__ */ jsx89("span", { id: ids.label, className: "typography-title-md font-semibold", children: translation("columnPicker") }),
-          /* @__PURE__ */ jsx89("span", { className: "text-description typography-label-sm mb-2", children: translation("columnPickerDescription") })
+        /* @__PURE__ */ jsxs57("div", { className: "flex-col-1", children: [
+          /* @__PURE__ */ jsx90("span", { id: ids.label, className: "typography-title-md font-semibold", children: translation("columnPicker") }),
+          /* @__PURE__ */ jsx90("span", { className: "text-description typography-label-sm mb-2", children: translation("columnPickerDescription") })
         ] }),
-        /* @__PURE__ */ jsx89("div", { className: "flex-col-1 overflow-y-auto w-full", children: columns.map((column, index) => {
+        /* @__PURE__ */ jsx90("div", { className: "flex-col-1 overflow-y-auto w-full", children: columns.map((column, index) => {
           const columnId = column.id;
           const isVisible = column.getIsVisible();
           const pinState = column.getIsPinned();
@@ -20278,9 +20356,9 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
           const nextIsPinned = nextColumn?.getCanPin() && !!nextColumn.getIsPinned();
           const canMoveUp = index > 0 && !isPinned && !prevIsPinned;
           const canMoveDown = index < columns.length - 1 && !isPinned && !nextIsPinned;
-          return /* @__PURE__ */ jsxs56("div", { className: "flex-row-2 items-center justify-between gap-2 w-full", children: [
-            /* @__PURE__ */ jsx89("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ jsxs56(Fragment10, { children: [
-              /* @__PURE__ */ jsx89(
+          return /* @__PURE__ */ jsxs57("div", { className: "flex-row-2 items-center justify-between gap-2 w-full", children: [
+            /* @__PURE__ */ jsx90("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ jsxs57(Fragment10, { children: [
+              /* @__PURE__ */ jsx90(
                 IconButton,
                 {
                   tooltip: translation("pinToLeft"),
@@ -20289,10 +20367,10 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   coloringStyle: "text",
                   disabled: pinState === "left",
                   onClick: () => pinColumn(columnId, "left"),
-                  children: /* @__PURE__ */ jsx89(ChevronLeft5, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx90(ChevronLeft5, { className: "size-4" })
                 }
               ),
-              /* @__PURE__ */ jsx89(
+              /* @__PURE__ */ jsx90(
                 IconButton,
                 {
                   tooltip: translation("pinToRight"),
@@ -20301,11 +20379,11 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   coloringStyle: "text",
                   disabled: pinState === "right",
                   onClick: () => pinColumn(columnId, "right"),
-                  children: /* @__PURE__ */ jsx89(ChevronRight5, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx90(ChevronRight5, { className: "size-4" })
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs56(Fragment10, { children: [
-              /* @__PURE__ */ jsx89(
+            ] }) : /* @__PURE__ */ jsxs57(Fragment10, { children: [
+              /* @__PURE__ */ jsx90(
                 IconButton,
                 {
                   tooltip: translation("increaseSortingPriority"),
@@ -20314,10 +20392,10 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   coloringStyle: "text",
                   disabled: !canMoveUp,
                   onClick: () => moveColumn(columnId, "up"),
-                  children: /* @__PURE__ */ jsx89(ChevronUp3, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx90(ChevronUp3, { className: "size-4" })
                 }
               ),
-              /* @__PURE__ */ jsx89(
+              /* @__PURE__ */ jsx90(
                 IconButton,
                 {
                   tooltip: translation("decreaseSortingPriority"),
@@ -20326,13 +20404,13 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   coloringStyle: "text",
                   disabled: !canMoveDown,
                   onClick: () => moveColumn(columnId, "down"),
-                  children: /* @__PURE__ */ jsx89(ChevronDown5, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx90(ChevronDown5, { className: "size-4" })
                 }
               )
             ] }) }),
-            /* @__PURE__ */ jsx89("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
-            /* @__PURE__ */ jsxs56(Fragment10, { children: [
-              /* @__PURE__ */ jsx89(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ jsx89(
+            /* @__PURE__ */ jsx90("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
+            /* @__PURE__ */ jsxs57(Fragment10, { children: [
+              /* @__PURE__ */ jsx90(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ jsx90(
                 IconButton,
                 {
                   tooltip: translation("changeVisibility"),
@@ -20342,10 +20420,10 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   disabled: !column.getCanHide(),
                   onClick: () => toggleColumnVisibility(columnId),
                   "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
-                  children: isVisible ? /* @__PURE__ */ jsx89(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx89(EyeOff, { className: "size-4" })
+                  children: isVisible ? /* @__PURE__ */ jsx90(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx90(EyeOff, { className: "size-4" })
                 }
               ) }),
-              /* @__PURE__ */ jsx89(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ jsx89(
+              /* @__PURE__ */ jsx90(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ jsx90(
                 IconButton,
                 {
                   tooltip: translation("changePinning"),
@@ -20361,7 +20439,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                     }
                   },
                   "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
-                  children: !isPinned ? /* @__PURE__ */ jsx89(PinOff, { className: "size-4" }) : /* @__PURE__ */ jsx89(Pin, { className: "size-4" })
+                  children: !isPinned ? /* @__PURE__ */ jsx90(PinOff, { className: "size-4" }) : /* @__PURE__ */ jsx90(Pin, { className: "size-4" })
                 }
               ) })
             ] })
@@ -20373,18 +20451,18 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
 };
 var TableColumnSwitcher = ({ buttonProps, ...props }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs56(PopUpRoot, { children: [
-    /* @__PURE__ */ jsx89(PopUpOpener, { children: ({ props: props2 }) => /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsxs57(PopUpRoot, { children: [
+    /* @__PURE__ */ jsx90(PopUpOpener, { children: ({ props: props2 }) => /* @__PURE__ */ jsx90(
       IconButton,
       {
         ...props2,
         color: "neutral",
         tooltip: translation("changeColumnDisplay"),
         ...buttonProps,
-        children: /* @__PURE__ */ jsx89(Columns3Cog, { className: "size-5" })
+        children: /* @__PURE__ */ jsx90(Columns3Cog, { className: "size-5" })
       }
     ) }),
-    /* @__PURE__ */ jsx89(TableColumnSwitcherPopUp, { ...props })
+    /* @__PURE__ */ jsx90(TableColumnSwitcherPopUp, { ...props })
   ] });
 };
 
@@ -20392,7 +20470,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 import { forwardRef as forwardRef27 } from "react";
 
 // src/components/user-interaction/Combobox/ComboboxRoot.tsx
-import { useCallback as useCallback40, useId as useId22, useMemo as useMemo41, useState as useState37 } from "react";
+import { useCallback as useCallback40, useId as useId22, useMemo as useMemo41, useState as useState38 } from "react";
 
 // src/components/user-interaction/Combobox/ComboboxContext.tsx
 import { createContext as createContext17, useContext as useContext19 } from "react";
@@ -20472,16 +20550,16 @@ function useCombobox({
 }
 
 // src/components/user-interaction/Combobox/ComboboxRoot.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 function ComboboxRoot({
   children,
   onItemClick,
   ...hookProps
 }) {
-  const [options, setOptions] = useState37([]);
-  const [listRef, setListRef] = useState37(null);
+  const [options, setOptions] = useState38([]);
+  const [listRef, setListRef] = useState38(null);
   const generatedId = useId22();
-  const [ids, setIds] = useState37({
+  const [ids, setIds] = useState38({
     trigger: `combobox-${generatedId}`,
     listbox: `combobox-${generatedId}-listbox`
   });
@@ -20575,12 +20653,12 @@ function ComboboxRoot({
       search
     ]
   );
-  return /* @__PURE__ */ jsx90(ComboboxContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx91(ComboboxContext.Provider, { value: contextValue, children });
 }
 
 // src/components/user-interaction/Combobox/ComboboxInput.tsx
 import { forwardRef as forwardRef25, useCallback as useCallback41 } from "react";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var ComboboxInput = forwardRef25(
   function ComboboxInput2(props, ref) {
     const translation = useHightideTranslation();
@@ -20618,7 +20696,7 @@ var ComboboxInput = forwardRef25(
       },
       [props, highlightedId, selectOption, highlightNext, highlightPrevious, highlightFirst, highlightLast]
     );
-    return /* @__PURE__ */ jsx91(
+    return /* @__PURE__ */ jsx92(
       Input,
       {
         ...props,
@@ -20638,17 +20716,17 @@ var ComboboxInput = forwardRef25(
 );
 
 // src/components/user-interaction/Combobox/ComboboxList.tsx
-import { forwardRef as forwardRef26, useEffect as useEffect47, useRef as useRef38 } from "react";
-import clsx35 from "clsx";
-import { jsx as jsx92, jsxs as jsxs57 } from "react/jsx-runtime";
+import { forwardRef as forwardRef26, useEffect as useEffect48, useRef as useRef39 } from "react";
+import clsx36 from "clsx";
+import { jsx as jsx93, jsxs as jsxs58 } from "react/jsx-runtime";
 var ComboboxList = forwardRef26(
   function ComboboxList2({ children, ...props }, ref) {
     const translation = useHightideTranslation();
     const context = useComboboxContext();
     const { layout } = context;
     const { registerList } = layout;
-    const innerRef = useRef38(null);
-    useEffect47(() => {
+    const innerRef = useRef39(null);
+    useEffect48(() => {
       return registerList(innerRef);
     }, [registerList]);
     const setRefs = (node) => {
@@ -20657,7 +20735,7 @@ var ComboboxList = forwardRef26(
       else if (ref) ref.current = node;
     };
     const count = context.visibleOptionIds.length;
-    return /* @__PURE__ */ jsxs57(
+    return /* @__PURE__ */ jsxs58(
       "ul",
       {
         ...props,
@@ -20669,7 +20747,7 @@ var ComboboxList = forwardRef26(
         "data-name": "combobox-list",
         children: [
           children,
-          /* @__PURE__ */ jsx92(
+          /* @__PURE__ */ jsx93(
             "li",
             {
               role: "option",
@@ -20678,7 +20756,7 @@ var ComboboxList = forwardRef26(
               "aria-live": "polite",
               "aria-atomic": true,
               "data-name": "combobox-list-status",
-              className: clsx35({ "sr-only": count > 0 }),
+              className: clsx36({ "sr-only": count > 0 }),
               children: translation("nResultsFound", { count })
             }
           )
@@ -20689,7 +20767,7 @@ var ComboboxList = forwardRef26(
 );
 
 // src/components/user-interaction/Combobox/Combobox.tsx
-import { jsx as jsx93, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs59 } from "react/jsx-runtime";
 var Combobox = forwardRef27(function Combobox2({
   children,
   onItemClick,
@@ -20699,7 +20777,7 @@ var Combobox = forwardRef27(function Combobox2({
   inputProps,
   listProps
 }, ref) {
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(
     ComboboxRoot,
     {
       onItemClick,
@@ -20707,17 +20785,17 @@ var Combobox = forwardRef27(function Combobox2({
       onSearchQueryChange,
       initialSearchQuery,
       children: [
-        /* @__PURE__ */ jsx93(ComboboxInput, { ref, ...inputProps }),
-        /* @__PURE__ */ jsx93(ComboboxList, { ...listProps, children })
+        /* @__PURE__ */ jsx94(ComboboxInput, { ref, ...inputProps }),
+        /* @__PURE__ */ jsx94(ComboboxList, { ...listProps, children })
       ]
     }
   );
 });
 
 // src/components/user-interaction/Combobox/ComboboxOption.tsx
-import { forwardRef as forwardRef28, useEffect as useEffect48, useId as useId23, useRef as useRef39 } from "react";
-import clsx36 from "clsx";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { forwardRef as forwardRef28, useEffect as useEffect49, useId as useId23, useRef as useRef40 } from "react";
+import clsx37 from "clsx";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var ComboboxOption = forwardRef28(function ComboboxOption2({
   children,
   value,
@@ -20729,11 +20807,11 @@ var ComboboxOption = forwardRef28(function ComboboxOption2({
 }, ref) {
   const context = useComboboxContext();
   const { registerOption } = context;
-  const itemRef = useRef39(null);
+  const itemRef = useRef40(null);
   const generatedId = useId23();
   const optionId = idProp ?? `combobox-option-${generatedId}`;
   const resolvedDisplay = children ?? label;
-  useEffect48(() => {
+  useEffect49(() => {
     return registerOption({
       id: optionId,
       value,
@@ -20743,14 +20821,14 @@ var ComboboxOption = forwardRef28(function ComboboxOption2({
       ref: itemRef
     });
   }, [optionId, value, label, resolvedDisplay, disabled, registerOption]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (context.highlightedId === optionId) {
       itemRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
     }
   }, [context.highlightedId, optionId]);
   const isVisible = context.visibleOptionIds.includes(optionId);
   const isHighlighted = context.highlightedId === optionId;
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     "li",
     {
       ...restProps,
@@ -20769,7 +20847,7 @@ var ComboboxOption = forwardRef28(function ComboboxOption2({
       "data-highlighted": isHighlighted ? "" : void 0,
       "data-visible": isVisible ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
-      className: clsx36(!isVisible && "hidden", className),
+      className: clsx37(!isVisible && "hidden", className),
       onClick: (event) => {
         if (!disabled) {
           context.selectOption(optionId);
@@ -20789,8 +20867,8 @@ var ComboboxOption = forwardRef28(function ComboboxOption2({
 ComboboxOption.displayName = "ComboboxOption";
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-import { useState as useState38 } from "react";
-import { clsx as clsx37 } from "clsx";
+import { useState as useState39 } from "react";
+import { clsx as clsx38 } from "clsx";
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -20799,7 +20877,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 import { CheckIcon as CheckIcon3, Copy } from "lucide-react";
-import { jsx as jsx95, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -20812,8 +20890,8 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState38(false);
-  return /* @__PURE__ */ jsxs59(
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState39(false);
+  return /* @__PURE__ */ jsxs60(
     TooltipRoot,
     {
       isInitiallyShown,
@@ -20825,11 +20903,11 @@ var CopyToClipboardWrapper = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx95(TooltipTrigger, { children: ({ props: props2, callbackRef, disabled: disabled2 }) => /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx96(TooltipTrigger, { children: ({ props: props2, callbackRef, disabled: disabled2 }) => /* @__PURE__ */ jsx96(
           "div",
           {
             ref: callbackRef,
-            className: clsx37("w-fit hover:cursor-copy", containerClassName),
+            className: clsx38("w-fit hover:cursor-copy", containerClassName),
             ...disabled2 ? void 0 : props2,
             onClick: () => {
               if (disabled2) return;
@@ -20840,17 +20918,17 @@ var CopyToClipboardWrapper = ({
             children
           }
         ) }),
-        /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx96(
           TooltipDisplay,
           {
             alignment,
             isAnimated,
             ...props,
-            children: isShowingConfirmation ? /* @__PURE__ */ jsxs59("div", { className: "flex-row-1", children: [
-              /* @__PURE__ */ jsx95(CheckIcon3, { size: 16, className: "text-positive" }),
+            children: isShowingConfirmation ? /* @__PURE__ */ jsxs60("div", { className: "flex-row-1", children: [
+              /* @__PURE__ */ jsx96(CheckIcon3, { size: 16, className: "text-positive" }),
               translation("copied")
-            ] }) : /* @__PURE__ */ jsxs59("div", { className: "flex-row-1 text-description", children: [
-              /* @__PURE__ */ jsx95(Copy, { size: 16 }),
+            ] }) : /* @__PURE__ */ jsxs60("div", { className: "flex-row-1 text-description", children: [
+              /* @__PURE__ */ jsx96(Copy, { size: 16 }),
               translation("clickToCopy")
             ] })
           }
@@ -20861,18 +20939,18 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback42, useRef as useRef40, useState as useState39 } from "react";
-import clsx38 from "clsx";
-import { Fragment as Fragment11, jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
+import { useCallback as useCallback42, useRef as useRef41, useState as useState40 } from "react";
+import clsx39 from "clsx";
+import { Fragment as Fragment11, jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   isDisabled = false,
   className
-}) => /* @__PURE__ */ jsx96(
+}) => /* @__PURE__ */ jsx97(
   "div",
   {
-    className: clsx38("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: clsx39("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-disabled cursor-not-allowed": isDisabled,
       "text-menu-text hover:bg-primary/20": !isDisabled,
       "cursor-pointer": !!onClick
@@ -20887,17 +20965,17 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = useRef40(null);
-  const [isOpen, setIsOpen] = useState39(false);
+  const triggerRef = useRef41(null);
+  const [isOpen, setIsOpen] = useState40(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
     toggleOpen: () => setIsOpen((prevState) => !prevState),
     disabled
   };
-  return /* @__PURE__ */ jsxs60(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs61(Fragment11, { children: [
     trigger(bag, useCallback42((el) => triggerRef.current = el, [])),
-    /* @__PURE__ */ jsx96(
+    /* @__PURE__ */ jsx97(
       PopUp,
       {
         ...props,
@@ -20918,21 +20996,21 @@ var Menu = ({
 };
 
 // src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef29, useEffect as useEffect49, useImperativeHandle as useImperativeHandle15, useRef as useRef41 } from "react";
+import { forwardRef as forwardRef29, useEffect as useEffect50, useImperativeHandle as useImperativeHandle15, useRef as useRef42 } from "react";
 import { XIcon as XIcon2, Plus as Plus2 } from "lucide-react";
-import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs62 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
   const translation = useHightideTranslation();
   const context = useMultiSelectContext();
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  useEffect49(() => {
+  useEffect50(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = useRef41(null);
+  const innerRef = useRef42(null);
   useImperativeHandle15(ref, () => innerRef.current);
-  useEffect49(() => {
+  useEffect50(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -20941,7 +21019,7 @@ var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayB
   const invalid = context.invalid;
   const hasInteractions = !readOnly && !disabled;
   const selectedOptions = context.selectedIds.map((oid) => context.idToOptionMap[oid]).filter(Boolean);
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs62(
     "div",
     {
       ...props,
@@ -20961,9 +21039,9 @@ var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayB
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
       children: [
-        selectedOptions.map((opt) => /* @__PURE__ */ jsxs61("div", { "data-name": "multi-select-chip-display-chip", children: [
+        selectedOptions.map((opt) => /* @__PURE__ */ jsxs62("div", { "data-name": "multi-select-chip-display-chip", children: [
           opt.display,
-          /* @__PURE__ */ jsx97(
+          /* @__PURE__ */ jsx98(
             IconButton,
             {
               tooltip: translation("remove"),
@@ -20976,11 +21054,11 @@ var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayB
               color: "negative",
               coloringStyle: "text",
               className: "flex-row-0 items-center size-7 p-1",
-              children: /* @__PURE__ */ jsx97(XIcon2, { className: "size-5" })
+              children: /* @__PURE__ */ jsx98(XIcon2, { className: "size-5" })
             }
           )
         ] }, opt.id)),
-        /* @__PURE__ */ jsx97(
+        /* @__PURE__ */ jsx98(
           IconButton,
           {
             id: context.config.ids.trigger,
@@ -21009,7 +21087,7 @@ var MultiSelectChipDisplayButton = forwardRef29(function MultiSelectChipDisplayB
             "aria-expanded": context.isOpen,
             "aria-controls": context.isOpen ? context.config.ids.content : void 0,
             className: "size-9",
-            children: /* @__PURE__ */ jsx97(Plus2, {})
+            children: /* @__PURE__ */ jsx98(Plus2, {})
           }
         )
       ]
@@ -21023,17 +21101,17 @@ var MultiSelectChipDisplay = forwardRef29(
     chipDisplayProps,
     ...props
   }, ref) {
-    return /* @__PURE__ */ jsxs61(MultiSelectRoot, { ...props, children: [
-      /* @__PURE__ */ jsx97(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
-      /* @__PURE__ */ jsx97(MultiSelectContent, { ...contentPanelProps, children })
+    return /* @__PURE__ */ jsxs62(MultiSelectRoot, { ...props, children: [
+      /* @__PURE__ */ jsx98(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
+      /* @__PURE__ */ jsx98(MultiSelectContent, { ...contentPanelProps, children })
     ] });
   }
 );
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback43, useEffect as useEffect50, useState as useState40 } from "react";
-import clsx39 from "clsx";
-import { jsx as jsx98, jsxs as jsxs62 } from "react/jsx-runtime";
+import { useCallback as useCallback43, useEffect as useEffect51, useState as useState41 } from "react";
+import clsx40 from "clsx";
+import { jsx as jsx99, jsxs as jsxs63 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -21052,7 +21130,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState40({
+  }, setAnimation] = useState41({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -21151,7 +21229,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect50(() => {
+  useEffect51(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -21172,7 +21250,7 @@ var ScrollPicker = ({
     }
     return MathUtil.clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx99(
     "div",
     {
       className: "relative overflow-hidden",
@@ -21183,15 +21261,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs62("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx98(
+      children: /* @__PURE__ */ jsxs63("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx99(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ jsx98(
+        /* @__PURE__ */ jsx99(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -21199,10 +21277,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx98(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx99(
               "div",
               {
-                className: clsx39(
+                className: clsx40(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -21230,7 +21308,7 @@ var ScrollPicker = ({
 
 // src/components/user-interaction/Switch.tsx
 import { useCallback as useCallback44 } from "react";
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var Switch = ({
   value: controlledValue,
   initialValue = false,
@@ -21253,7 +21331,7 @@ var Switch = ({
     onValueChange: onChangeWrapper,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx100(
     "div",
     {
       ...props,
@@ -21278,15 +21356,15 @@ var Switch = ({
       "data-name": props["data-name"] ?? "switch",
       "data-active": PropsUtil.dataAttributes.bool(value),
       ...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required }),
-      children: /* @__PURE__ */ jsx99("div", { "data-name": "switch-track", className: "switch-track", children: /* @__PURE__ */ jsx99("div", { "data-name": "switch-thumb", "data-active": PropsUtil.dataAttributes.bool(value), className: "switch-thumb" }) })
+      children: /* @__PURE__ */ jsx100("div", { "data-name": "switch-track", className: "switch-track", children: /* @__PURE__ */ jsx100("div", { "data-name": "switch-thumb", "data-active": PropsUtil.dataAttributes.bool(value), className: "switch-thumb" }) })
     }
   );
 };
 
 // src/components/user-interaction/Textarea.tsx
 import { forwardRef as forwardRef30, useCallback as useCallback45, useId as useId24 } from "react";
-import clsx40 from "clsx";
-import { jsx as jsx100, jsxs as jsxs63 } from "react/jsx-runtime";
+import clsx41 from "clsx";
+import { jsx as jsx101, jsxs as jsxs64 } from "react/jsx-runtime";
 var Textarea = forwardRef30(function Textarea2({
   value: controlledValue,
   initialValue,
@@ -21307,7 +21385,7 @@ var Textarea = forwardRef30(function Textarea2({
     onEditCompleteStable(text);
     clearTimer();
   }, [onEditCompleteStable, clearTimer]);
-  return /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx101(
     "textarea",
     {
       ...props,
@@ -21343,10 +21421,10 @@ var TextareaWithHeadline = ({
 }) => {
   const genId = useId24();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs64(
     "div",
     {
-      className: clsx40(
+      className: clsx41(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -21355,13 +21433,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ jsx100("label", { ...headlineProps, htmlFor: usedId, className: clsx40("typography-lable-md text-label", headlineProps.className), children: headline }),
-        /* @__PURE__ */ jsx100(
+        headline && /* @__PURE__ */ jsx101("label", { ...headlineProps, htmlFor: usedId, className: clsx41("typography-lable-md text-label", headlineProps.className), children: headline }),
+        /* @__PURE__ */ jsx101(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: clsx40(
+            className: clsx41(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             )
@@ -21373,9 +21451,9 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/user-interaction/data/FilterList.tsx
-import { useMemo as useMemo42, useState as useState41 } from "react";
+import { useMemo as useMemo42, useState as useState42 } from "react";
 import { PlusIcon } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx101, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx102, jsxs as jsxs65 } from "react/jsx-runtime";
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
@@ -21385,7 +21463,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     acc[item.id] = item;
     return acc;
   }, {}), [availableItems]);
-  const [editState, setEditState] = useState41(void 0);
+  const [editState, setEditState] = useState42(void 0);
   const valueWithEditState = useMemo42(() => {
     let foundEditValue = false;
     for (const item of value) {
@@ -21399,13 +21477,13 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     }
     return value;
   }, [value, editState]);
-  return /* @__PURE__ */ jsxs64("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
-    /* @__PURE__ */ jsxs64(PopUpRoot, { children: [
-      /* @__PURE__ */ jsx101(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs64(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+  return /* @__PURE__ */ jsxs65("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ jsxs65(PopUpRoot, { children: [
+      /* @__PURE__ */ jsx102(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs65(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addFilter"),
-        /* @__PURE__ */ jsx101(PlusIcon, { className: "size-4" })
+        /* @__PURE__ */ jsx102(PlusIcon, { className: "size-4" })
       ] }) }),
-      /* @__PURE__ */ jsx101(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ jsx101(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsx101(
+      /* @__PURE__ */ jsx102(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ jsx102(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsx102(
         Combobox,
         {
           onItemClick: (id) => {
@@ -21422,7 +21500,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             setEditState(newValue);
             setIsOpen(false);
           },
-          children: inactiveItems.map((item) => /* @__PURE__ */ jsxs64(ComboboxOption, { value: item.id, label: item.label, children: [
+          children: inactiveItems.map((item) => /* @__PURE__ */ jsxs65(ComboboxOption, { value: item.id, label: item.label, children: [
             DataTypeUtils.toIcon(item.dataType),
             item.label
           ] }, item.id))
@@ -21432,7 +21510,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     valueWithEditState.map((columnFilter) => {
       const item = itemRecord[columnFilter.id];
       if (!item) return null;
-      return /* @__PURE__ */ jsxs64(
+      return /* @__PURE__ */ jsxs65(
         PopUpRoot,
         {
           isOpen: editState?.id === columnFilter.id,
@@ -21450,11 +21528,11 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ jsx101(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx101(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs64(Fragment12, { children: [
-              /* @__PURE__ */ jsx101("span", { className: "font-bold", children: item.label }),
+            /* @__PURE__ */ jsx102(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx102(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs65(Fragment12, { children: [
+              /* @__PURE__ */ jsx102("span", { className: "font-bold", children: item.label }),
               filterValueToLabel(columnFilter.value, { tags: item.tags })
             ] }) }) }),
-            /* @__PURE__ */ jsx101(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
+            /* @__PURE__ */ jsx102(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
               value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
               onValueChange: (value2) => setEditState({ ...columnFilter, value: value2 }),
               onRemove: () => {
@@ -21467,7 +21545,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
               name: item.label,
               isOpen,
               onClose: () => setIsOpen(false)
-            }) : /* @__PURE__ */ jsx101(
+            }) : /* @__PURE__ */ jsx102(
               FilterPopUp,
               {
                 name: item.label,
@@ -21496,8 +21574,8 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
 // src/components/user-interaction/data/SortingList.tsx
 import { useMemo as useMemo43 } from "react";
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, PlusIcon as PlusIcon2, TrashIcon as TrashIcon2, XIcon as XIcon3 } from "lucide-react";
-import clsx41 from "clsx";
-import { jsx as jsx102, jsxs as jsxs65 } from "react/jsx-runtime";
+import clsx42 from "clsx";
+import { jsx as jsx103, jsxs as jsxs66 } from "react/jsx-runtime";
 var SortingList = ({ sorting, onSortingChange, availableItems }) => {
   const translation = useHightideTranslation();
   const activeIds = useMemo43(() => sorting.map((item) => item.id), [sorting]);
@@ -21521,13 +21599,13 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
   const removeSort = (columnId) => {
     onSortingChange(sorting.filter((s) => s.id !== columnId));
   };
-  return /* @__PURE__ */ jsxs65("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
-    /* @__PURE__ */ jsxs65(PopUpRoot, { children: [
-      /* @__PURE__ */ jsx102(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs65(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+  return /* @__PURE__ */ jsxs66("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ jsxs66(PopUpRoot, { children: [
+      /* @__PURE__ */ jsx103(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs66(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addSorting"),
-        /* @__PURE__ */ jsx102(PlusIcon2, { className: "size-4" })
+        /* @__PURE__ */ jsx103(PlusIcon2, { className: "size-4" })
       ] }) }),
-      /* @__PURE__ */ jsx102(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ jsx102(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsx102(
+      /* @__PURE__ */ jsx103(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ jsx103(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsx103(
         Combobox,
         {
           onItemClick: (id) => {
@@ -21536,7 +21614,7 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
             onSortingChange([...sorting, { id: item.id, desc: false }]);
             setIsOpen(false);
           },
-          children: inactiveItems.map((item) => /* @__PURE__ */ jsxs65(ComboboxOption, { value: item.id, label: item.label, children: [
+          children: inactiveItems.map((item) => /* @__PURE__ */ jsxs66(ComboboxOption, { value: item.id, label: item.label, children: [
             DataTypeUtils.toIcon(item.dataType),
             item.label
           ] }, item.id))
@@ -21546,21 +21624,21 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
     sorting.map((columnSort) => {
       const item = itemRecord[columnSort.id];
       if (!item) return null;
-      return /* @__PURE__ */ jsxs65(PopUpRoot, { children: [
-        /* @__PURE__ */ jsx102(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs65(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
-          /* @__PURE__ */ jsx102("span", { className: "font-bold", children: item.label }),
-          columnSort.desc ? /* @__PURE__ */ jsx102(ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ jsx102(ArrowUpNarrowWide, { className: "size-5" })
+      return /* @__PURE__ */ jsxs66(PopUpRoot, { children: [
+        /* @__PURE__ */ jsx103(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsxs66(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
+          /* @__PURE__ */ jsx103("span", { className: "font-bold", children: item.label }),
+          columnSort.desc ? /* @__PURE__ */ jsx103(ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ jsx103(ArrowUpNarrowWide, { className: "size-5" })
         ] }) }),
-        /* @__PURE__ */ jsx102(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsxs65(
+        /* @__PURE__ */ jsx103(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ jsxs66(
           PopUp,
           {
-            className: clsx41("flex-col-3 p-3 min-w-64"),
+            className: clsx42("flex-col-3 p-3 min-w-64"),
             onClose: () => setIsOpen(false),
             children: [
-              /* @__PURE__ */ jsxs65("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
-                /* @__PURE__ */ jsx102("span", { className: "typography-title-sm font-semibold", children: item.label }),
-                /* @__PURE__ */ jsxs65("div", { className: "flex-row-0 shrink-0 items-center", children: [
-                  /* @__PURE__ */ jsx102(
+              /* @__PURE__ */ jsxs66("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
+                /* @__PURE__ */ jsx103("span", { className: "typography-title-sm font-semibold", children: item.label }),
+                /* @__PURE__ */ jsxs66("div", { className: "flex-row-0 shrink-0 items-center", children: [
+                  /* @__PURE__ */ jsx103(
                     IconButton,
                     {
                       tooltip: translation("removeFilter"),
@@ -21571,10 +21649,10 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
                       color: "negative",
                       coloringStyle: "text",
                       size: "sm",
-                      children: /* @__PURE__ */ jsx102(TrashIcon2, { className: "size-4" })
+                      children: /* @__PURE__ */ jsx103(TrashIcon2, { className: "size-4" })
                     }
                   ),
-                  /* @__PURE__ */ jsx102(
+                  /* @__PURE__ */ jsx103(
                     IconButton,
                     {
                       tooltip: translation("close"),
@@ -21582,13 +21660,13 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
                       color: "neutral",
                       coloringStyle: "text",
                       size: "sm",
-                      children: /* @__PURE__ */ jsx102(XIcon3, { className: "size-4" })
+                      children: /* @__PURE__ */ jsx103(XIcon3, { className: "size-4" })
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs65("div", { className: "flex-row-1 w-full gap-2", children: [
-                /* @__PURE__ */ jsxs65(
+              /* @__PURE__ */ jsxs66("div", { className: "flex-row-1 w-full gap-2", children: [
+                /* @__PURE__ */ jsxs66(
                   Button,
                   {
                     type: "button",
@@ -21598,12 +21676,12 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
                     size: "md",
                     onClick: () => setSortDirection(columnSort.id, false),
                     children: [
-                      /* @__PURE__ */ jsx102(ArrowUpNarrowWide, { className: "size-4" }),
+                      /* @__PURE__ */ jsx103(ArrowUpNarrowWide, { className: "size-4" }),
                       translation("sortAsc")
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs65(
+                /* @__PURE__ */ jsxs66(
                   Button,
                   {
                     type: "button",
@@ -21613,7 +21691,7 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
                     size: "md",
                     onClick: () => setSortDirection(columnSort.id, true),
                     children: [
-                      /* @__PURE__ */ jsx102(ArrowDownWideNarrow, { className: "size-4" }),
+                      /* @__PURE__ */ jsx103(ArrowDownWideNarrow, { className: "size-4" }),
                       translation("sortDesc")
                     ]
                   }
@@ -21628,7 +21706,7 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
 };
 
 // src/components/user-interaction/date/TimeDisplay.tsx
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var TimeDisplay = ({
   date,
   mode = "daysFromToday",
@@ -21679,13 +21757,13 @@ var TimeDisplay = ({
   } else {
     fullString = `${zonedDate.getDate()}. ${monthToTranslation[zonedDate.getMonth()]} ${zonedDate.getFullYear()}`;
   }
-  return /* @__PURE__ */ jsx103("span", { children: fullString });
+  return /* @__PURE__ */ jsx104("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/FlexibleDateTimeInput.tsx
-import { forwardRef as forwardRef31, useState as useState42 } from "react";
+import { forwardRef as forwardRef31, useState as useState43 } from "react";
 import { ClockFading, ClockPlus } from "lucide-react";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var FlexibleDateTimeInput = forwardRef31(function FlexibleDateTimeInput2({
   defaultMode = "date",
   value: controlledValue,
@@ -21708,7 +21786,7 @@ var FlexibleDateTimeInput = forwardRef31(function FlexibleDateTimeInput2({
   const zoned = (date) => DateUtils.toZonedDate(date, timeZone);
   const unzoned = (date) => DateUtils.fromZonedDate(date, timeZone);
   const hasFixedTime = (date) => DateUtils.sameTime(zoned(date), fixedTime, true, true);
-  const [mode, setMode] = useState42(() => {
+  const [mode, setMode] = useState43(() => {
     if (value && !hasFixedTime(value)) {
       return "dateTime";
     }
@@ -21716,7 +21794,7 @@ var FlexibleDateTimeInput = forwardRef31(function FlexibleDateTimeInput2({
   });
   const toDate = (date) => unzoned(DateUtils.withTime(zoned(date), fixedTime));
   const toDateTime = (date) => hasFixedTime(date) ? unzoned(DateUtils.withTime(zoned(date), zoned(/* @__PURE__ */ new Date()))) : date;
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx105(
     DateTimeInput,
     {
       ...props,
@@ -21729,7 +21807,7 @@ var FlexibleDateTimeInput = forwardRef31(function FlexibleDateTimeInput2({
       },
       actions: [
         ...actions,
-        /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsx105(
           IconButton,
           {
             size: "sm",
@@ -21743,7 +21821,7 @@ var FlexibleDateTimeInput = forwardRef31(function FlexibleDateTimeInput2({
               }
               setMode(nextMode);
             },
-            children: mode === "date" ? /* @__PURE__ */ jsx104(ClockPlus, { className: "size-5" }) : /* @__PURE__ */ jsx104(ClockFading, { className: "size-5" })
+            children: mode === "date" ? /* @__PURE__ */ jsx105(ClockPlus, { className: "size-5" }) : /* @__PURE__ */ jsx105(ClockFading, { className: "size-5" })
           },
           "flexible-date-time-mode"
         )
@@ -21754,9 +21832,9 @@ var FlexibleDateTimeInput = forwardRef31(function FlexibleDateTimeInput2({
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId25 } from "react";
-import { forwardRef as forwardRef32, useState as useState43 } from "react";
-import clsx42 from "clsx";
-import { jsx as jsx105, jsxs as jsxs66 } from "react/jsx-runtime";
+import { forwardRef as forwardRef32, useState as useState44 } from "react";
+import clsx43 from "clsx";
+import { jsx as jsx106, jsxs as jsxs67 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef32(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
@@ -21770,11 +21848,11 @@ var InsideLabelInput = forwardRef32(function InsideLabelInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = useState43(false);
+  const [isFocused, setIsFocused] = useState44(false);
   const generatedId = useId25();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs66("div", { className: clsx42("relative"), children: [
-    /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsxs67("div", { className: clsx43("relative"), children: [
+    /* @__PURE__ */ jsx106(
       Input,
       {
         ...props,
@@ -21791,16 +21869,16 @@ var InsideLabelInput = forwardRef32(function InsideLabelInput2({
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: clsx42("h-14 px-4 pb-2 py-6.5", props.className)
+        className: clsx43("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
-    /* @__PURE__ */ jsx105(
+    /* @__PURE__ */ jsx106(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx42(
+        className: clsx43(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -21814,8 +21892,8 @@ var InsideLabelInput = forwardRef32(function InsideLabelInput2({
 
 // src/components/user-interaction/input/SearchBar.tsx
 import { Search } from "lucide-react";
-import { clsx as clsx43 } from "clsx";
-import { jsx as jsx106, jsxs as jsxs67 } from "react/jsx-runtime";
+import { clsx as clsx44 } from "clsx";
+import { jsx as jsx107, jsxs as jsxs68 } from "react/jsx-runtime";
 var SearchBar = ({
   value: controlledValue,
   initialValue,
@@ -21831,8 +21909,8 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ jsxs67("div", { ...containerProps, className: clsx43("relative", containerProps?.className), children: [
-    /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsxs68("div", { ...containerProps, className: clsx44("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx107(
       Input,
       {
         ...inputProps,
@@ -21840,10 +21918,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: clsx43("pr-10 w-full", inputProps.className)
+        className: clsx44("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ jsx106(
+    /* @__PURE__ */ jsx107(
       IconButton,
       {
         ...searchButtonProps,
@@ -21852,18 +21930,18 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: clsx43("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ jsx106(Search, { className: "w-full h-full" })
+        className: clsx44("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ jsx107(Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef33, useEffect as useEffect51, useImperativeHandle as useImperativeHandle16, useRef as useRef42, useState as useState44 } from "react";
+import { forwardRef as forwardRef33, useEffect as useEffect52, useImperativeHandle as useImperativeHandle16, useRef as useRef43, useState as useState45 } from "react";
 import { Pencil } from "lucide-react";
-import clsx44 from "clsx";
-import { jsx as jsx107, jsxs as jsxs68 } from "react/jsx-runtime";
+import clsx45 from "clsx";
+import { jsx as jsx108, jsxs as jsxs69 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef33(function ToggleableInput2({
   value: controlledValue,
   initialValue,
@@ -21877,16 +21955,16 @@ var ToggleableInput = forwardRef33(function ToggleableInput2({
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = useState44(initialState !== "display");
-  const innerRef = useRef42(null);
+  const [isEditing, setIsEditing] = useState45(initialState !== "display");
+  const innerRef = useRef43(null);
   useImperativeHandle16(forwardedRef, () => innerRef.current);
-  useEffect51(() => {
+  useEffect52(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs68("div", { className: clsx44("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsxs69("div", { className: clsx45("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx108(
       Input,
       {
         ...props,
@@ -21910,9 +21988,9 @@ var ToggleableInput = forwardRef33(function ToggleableInput2({
         "data-name": props["data-name"] ?? "togglable-input"
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs68("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx107("span", { className: clsx44(" truncate"), children: value }),
-      /* @__PURE__ */ jsx107(Pencil, { className: clsx44(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs69("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx108("span", { className: clsx45(" truncate"), children: value }),
+      /* @__PURE__ */ jsx108(Pencil, { className: clsx45(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -21921,9 +21999,9 @@ var ToggleableInput = forwardRef33(function ToggleableInput2({
 import { Check as Check6 } from "lucide-react";
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-import clsx45 from "clsx";
+import clsx46 from "clsx";
 import { AlertTriangle, Trash, X as X4 } from "lucide-react";
-import { Fragment as Fragment13, jsx as jsx108, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx109, jsxs as jsxs70 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   children,
@@ -21942,8 +22020,8 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  const renderActionButtons = () => /* @__PURE__ */ jsxs69(Fragment13, { children: [
-    isClearEnabled && /* @__PURE__ */ jsx108(
+  const renderActionButtons = () => /* @__PURE__ */ jsxs70(Fragment13, { children: [
+    isClearEnabled && /* @__PURE__ */ jsx109(
       IconButton,
       {
         tooltip: translation("clearValue"),
@@ -21952,10 +22030,10 @@ var PropertyBase = ({
         color: "negative",
         coloringStyle: "text",
         size: "sm",
-        children: /* @__PURE__ */ jsx108(X4, { className: "size-force-5" })
+        children: /* @__PURE__ */ jsx109(X4, { className: "size-force-5" })
       }
     ),
-    isRemoveEnabled && /* @__PURE__ */ jsx108(
+    isRemoveEnabled && /* @__PURE__ */ jsx109(
       IconButton,
       {
         tooltip: translation("removeProperty"),
@@ -21963,42 +22041,42 @@ var PropertyBase = ({
         color: "negative",
         coloringStyle: "text",
         size: "sm",
-        children: /* @__PURE__ */ jsx108(Trash, { className: "size-force-5" })
+        children: /* @__PURE__ */ jsx109(Trash, { className: "size-force-5" })
       }
     )
   ] });
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx109(
     "div",
     {
-      className: clsx45("group/property min-w-0 w-full", className),
+      className: clsx46("group/property min-w-0 w-full", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-      children: /* @__PURE__ */ jsxs69("div", { "data-name": "property-inner", children: [
-        /* @__PURE__ */ jsxs69(
+      children: /* @__PURE__ */ jsxs70("div", { "data-name": "property-inner", children: [
+        /* @__PURE__ */ jsxs70(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ jsxs69("div", { className: "flex min-w-0 flex-1 flex-row items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsx108(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs69("div", { className: "flex-row-1 items-center", children: [
-                  /* @__PURE__ */ jsx108("div", { "data-name": "property-title-icon", children: icon }),
-                  /* @__PURE__ */ jsx108("span", { "data-name": "property-title-text", children: name })
+              /* @__PURE__ */ jsxs70("div", { className: "flex min-w-0 flex-1 flex-row items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx109(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs70("div", { className: "flex-row-1 items-center", children: [
+                  /* @__PURE__ */ jsx109("div", { "data-name": "property-title-icon", children: icon }),
+                  /* @__PURE__ */ jsx109("span", { "data-name": "property-title-text", children: name })
                 ] }) }),
-                invalid && /* @__PURE__ */ jsx108(AlertTriangle, { className: "size-force-6 shrink-0" })
+                invalid && /* @__PURE__ */ jsx109(AlertTriangle, { className: "size-force-6 shrink-0" })
               ] }),
-              showActionsContainer && /* @__PURE__ */ jsx108("div", { "data-name": "property-title-actions", children: renderActionButtons() })
+              showActionsContainer && /* @__PURE__ */ jsx109("div", { "data-name": "property-title-actions", children: renderActionButtons() })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs69(
+        /* @__PURE__ */ jsxs70(
           "div",
           {
             "data-name": "property-content",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ jsx108("div", { "data-name": "property-actions", children: renderActionButtons() })
+              showActionsContainer && /* @__PURE__ */ jsx109("div", { "data-name": "property-actions", children: renderActionButtons() })
             ]
           }
         )
@@ -22008,7 +22086,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-import { jsx as jsx109, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs71 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -22017,15 +22095,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx110(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ jsx109(Check6, { size: 24 }),
-      children: () => /* @__PURE__ */ jsxs70("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ jsx109(
+      icon: /* @__PURE__ */ jsx110(Check6, { size: 24 }),
+      children: () => /* @__PURE__ */ jsxs71("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ jsx110(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -22038,7 +22116,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ jsx109(
+        /* @__PURE__ */ jsx110(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -22058,7 +22136,7 @@ var CheckboxProperty = ({
 
 // src/components/user-interaction/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import { jsx as jsx110 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var DateProperty = ({
   name,
   value,
@@ -22075,7 +22153,7 @@ var DateProperty = ({
   ...inputProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111(
     PropertyBase,
     {
       name,
@@ -22089,9 +22167,9 @@ var DateProperty = ({
         onEditComplete?.(null);
       }),
       hasValue,
-      icon: /* @__PURE__ */ jsx110(CalendarDays, { size: 24 }),
+      icon: /* @__PURE__ */ jsx111(CalendarDays, { size: 24 }),
       className,
-      children: ({ invalid }) => /* @__PURE__ */ jsx110(
+      children: ({ invalid }) => /* @__PURE__ */ jsx111(
         DateTimeInput,
         {
           ...inputProps,
@@ -22112,7 +22190,7 @@ var DateProperty = ({
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
   value,
@@ -22121,18 +22199,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx112(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx111(List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx111(
+      icon: /* @__PURE__ */ jsx112(List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx112(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsx111(
+          children: /* @__PURE__ */ jsx112(
             MultiSelectChipDisplay,
             {
               value,
@@ -22159,7 +22237,7 @@ var MultiSelectProperty = ({
 
 // src/components/user-interaction/properties/NumberProperty.tsx
 import { Binary as Binary2 } from "lucide-react";
-import { jsx as jsx112, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs72 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
   onValueChange,
@@ -22171,20 +22249,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx113(
     PropertyBase,
     {
       ...baseProps,
       onValueClear,
       hasValue,
-      icon: /* @__PURE__ */ jsx112(Binary2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsxs71(
+      icon: /* @__PURE__ */ jsx113(Binary2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsxs72(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ jsx112(
+            /* @__PURE__ */ jsx113(
               Input,
               {
                 "data-name": "property-input",
@@ -22212,7 +22290,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx112(
+            suffix && /* @__PURE__ */ jsx113(
               "span",
               {
                 "data-name": "property-suffix",
@@ -22229,7 +22307,7 @@ var NumberProperty = ({
 
 // src/components/user-interaction/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import { jsx as jsx113, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs73 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
   value,
@@ -22238,18 +22316,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx114(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx113(List2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx113(
+      icon: /* @__PURE__ */ jsx114(List2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx114(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsxs72(
+          children: /* @__PURE__ */ jsxs73(
             SelectRoot,
             {
               value,
@@ -22259,7 +22337,7 @@ var SingleSelectProperty = ({
               },
               disabled: props.readOnly,
               children: [
-                /* @__PURE__ */ jsx113(
+                /* @__PURE__ */ jsx114(
                   SelectButton,
                   {
                     className: "flex-row-2 w-full items-center justify-between",
@@ -22267,7 +22345,7 @@ var SingleSelectProperty = ({
                     "data-name": "property-input"
                   }
                 ),
-                /* @__PURE__ */ jsx113(SelectContent, { children })
+                /* @__PURE__ */ jsx114(SelectContent, { children })
               ]
             }
           )
@@ -22279,7 +22357,7 @@ var SingleSelectProperty = ({
 
 // src/components/user-interaction/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import { jsx as jsx114 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 var TextProperty = ({
   value,
   readOnly,
@@ -22289,13 +22367,13 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsx115(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx114(Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx114(
+      icon: /* @__PURE__ */ jsx115(Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx115(
         Textarea,
         {
           "data-name": "property-input",
@@ -22316,7 +22394,7 @@ var TextProperty = ({
 // src/components/utils/Polymorphic.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx115 } from "react/jsx-runtime";
+import { jsx as jsx116 } from "react/jsx-runtime";
 var PolymorphicSlot = forwardRef34(function PolymorphicSlot2({
   children,
   asChild,
@@ -22324,20 +22402,20 @@ var PolymorphicSlot = forwardRef34(function PolymorphicSlot2({
   ...props
 }, ref) {
   const Component = asChild ? Slot : defaultComponent;
-  return /* @__PURE__ */ jsx115(Component, { ...props, ref, children });
+  return /* @__PURE__ */ jsx116(Component, { ...props, ref, children });
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect52, useState as useState45 } from "react";
+import { useEffect as useEffect53, useState as useState46 } from "react";
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = useState45(show);
-  const [isTransitioning, setIsTransitioning] = useState45(!isOpen);
+  const [isOpen, setIsOpen] = useState46(show);
+  const [isTransitioning, setIsTransitioning] = useState46(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect52(() => {
+  useEffect53(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -22362,18 +22440,18 @@ function Transition({
 }
 
 // src/global-contexts/HightideProvider.tsx
-import { jsx as jsx116 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ jsx116(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx116(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx116(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ jsx117(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx117(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx117(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect53 } from "react";
+import { useEffect as useEffect54 } from "react";
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -22411,7 +22489,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect53(() => {
+  useEffect54(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -22420,10 +22498,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React5, { useEffect as useEffect54 } from "react";
+import React5, { useEffect as useEffect55 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React5.useState(false);
-  useEffect54(() => {
+  useEffect55(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -22443,11 +22521,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-import { useEffect as useEffect55, useLayoutEffect as useLayoutEffect8, useState as useState46 } from "react";
+import { useEffect as useEffect56, useLayoutEffect as useLayoutEffect8, useState as useState47 } from "react";
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? useLayoutEffect8 : useEffect55;
+var useIsomorphicEffect = isClient ? useLayoutEffect8 : useEffect56;
 var useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState46(false);
+  const [isMounted, setIsMounted] = useState47(false);
   useIsomorphicEffect(() => {
     setIsMounted(true);
     return () => {
@@ -22458,10 +22536,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-import { useEffect as useEffect56, useRef as useRef43 } from "react";
+import { useEffect as useEffect57, useRef as useRef44 } from "react";
 function useHandleRefs(handleRef) {
-  const refs = useRef43([]);
-  useEffect56(() => {
+  const refs = useRef44([]);
+  useEffect57(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -22499,10 +22577,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-import { useEffect as useEffect57, useState as useState47 } from "react";
+import { useEffect as useEffect58, useState as useState48 } from "react";
 var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = useState47(overwriteValue);
-  useEffect57(() => {
+  const [state, setState] = useState48(overwriteValue);
+  useEffect58(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -22520,25 +22598,25 @@ var useRerender = () => {
 };
 
 // src/hooks/useUpdatingDateString.ts
-import { useEffect as useEffect58, useState as useState48 } from "react";
+import { useEffect as useEffect59, useState as useState49 } from "react";
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24HourFormat: is24HourFormatOverride, timeZone: timeZoneOverride, date }) => {
   const { locale: contextLocale, is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useLocale();
   const locale = localeOverride ?? contextLocale;
   const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat ?? true;
   const timeZone = timeZoneOverride ?? contextTimeZone;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = useState48({
+  const [dateAndTimeStrings, setDateAndTimeStrings] = useState49({
     compareDate: date,
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
     relative: DateUtils.formatRelative(date, locale)
   });
-  useEffect58(() => {
+  useEffect59(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale, is24HourFormat, timeZone]);
-  useEffect58(() => {
+  useEffect59(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -23085,6 +23163,7 @@ export {
   Transition,
   UseValidators,
   VerticalDivider,
+  VirtualizedTableBody,
   Visibility,
   YearMonthPicker,
   buildSegmentLayout,