@helpwave/hightide 0.6.6 → 0.6.7

package/dist/index.js

@@ -6380,13 +6380,15 @@ __export(index_exports, {
   TabPanel: () => TabPanel,
   TabSwitcher: () => TabSwitcher,
   TabView: () => TabView,
+  Table: () => Table,
   TableBody: () => TableBody,
-  TableBodyContext: () => TableBodyContext,
   TableCell: () => TableCell,
   TableColumn: () => TableColumn,
   TableColumnDefinitionContext: () => TableColumnDefinitionContext,
-  TableColumnPicker: () => TableColumnPicker,
+  TableColumnSwitcher: () => TableColumnSwitcher,
+  TableColumnSwitcherPopUp: () => TableColumnSwitcherPopUp,
   TableContainerContext: () => TableContainerContext,
+  TableDataContext: () => TableDataContext,
   TableDisplay: () => TableDisplay,
   TableFilter: () => TableFilter,
   TableFilterButton: () => TableFilterButton,
@@ -6394,10 +6396,12 @@ __export(index_exports, {
   TableFilterOperator: () => TableFilterOperator,
   TableHeader: () => TableHeader,
   TableHeaderContext: () => TableHeaderContext,
-  TablePageSizeController: () => TablePageSizeController,
+  TablePageSizeSelect: () => TablePageSizeSelect,
   TablePagination: () => TablePagination,
+  TablePaginationMenu: () => TablePaginationMenu,
   TableProvider: () => TableProvider,
   TableSortButton: () => TableSortButton,
+  TableWithSelection: () => TableWithSelection,
   TableWithSelectionProvider: () => TableWithSelectionProvider,
   TagIcon: () => TagIcon,
   TagsFilter: () => TagsFilter,
@@ -6478,9 +6482,9 @@ __export(index_exports, {
   useSearch: () => useSearch,
   useSelectContext: () => useSelectContext,
   useTabContext: () => useTabContext,
-  useTableBodyContext: () => useTableBodyContext,
   useTableColumnDefinitionContext: () => useTableColumnDefinitionContext,
   useTableContainerContext: () => useTableContainerContext,
+  useTableDataContext: () => useTableDataContext,
   useTableHeaderContext: () => useTableHeaderContext,
   useTheme: () => useTheme,
   useTransitionState: () => useTransitionState,
@@ -7903,86 +7907,136 @@ function calculatePosition({
   anchorRect,
   options
 }) {
-  const { verticalAlignment, horizontalAlignment, gap, screenPadding } = options;
-  const windowWidth = windowRect.width;
-  const windowHeight = windowRect.height;
-  const maxWidth = windowWidth - 2 * screenPadding;
-  const maxHeight = windowHeight - 2 * screenPadding;
-  const width = Math.min(containerRect.width, maxWidth);
-  const height = Math.min(containerRect.height, maxHeight);
-  const anchorCenterX = anchorRect.left + anchorRect.width / 2;
-  const anchorCenterY = anchorRect.top + anchorRect.height / 2;
-  let left;
-  let top;
-  let translateXPercent;
-  let translateYPercent;
-  switch (horizontalAlignment) {
-    case "beforeStart":
-      left = anchorRect.left;
-      translateXPercent = -100;
-      break;
-    case "afterStart":
-      left = anchorRect.left;
-      translateXPercent = 0;
-      break;
-    case "center":
-      left = anchorCenterX;
-      translateXPercent = -50;
-      break;
-    case "beforeEnd":
-      left = anchorRect.right;
-      translateXPercent = -100;
-      break;
-    case "afterEnd":
-      left = anchorRect.right;
-      translateXPercent = 0;
-      break;
-  }
-  switch (verticalAlignment) {
-    case "beforeStart":
-      top = anchorRect.top;
-      translateYPercent = -100;
-      break;
-    case "afterStart":
-      top = anchorRect.top;
-      translateYPercent = 0;
-      break;
-    case "center":
-      top = anchorCenterY;
-      translateYPercent = -50;
-      break;
-    case "beforeEnd":
-      top = anchorRect.bottom;
-      translateYPercent = -100;
-      break;
-    case "afterEnd":
-      top = anchorRect.bottom;
-      translateYPercent = 0;
-      break;
-  }
-  if (gap !== 0) {
-    if (horizontalAlignment === "afterEnd") {
-      left += gap;
-    } else if (horizontalAlignment === "beforeStart") {
-      left -= gap;
+  const { verticalAlignment, horizontalAlignment, gap, screenPadding, avoidOverlap } = options;
+  const calculateBasicPosition = (hAlign, vAlign) => {
+    const windowWidth = windowRect.width;
+    const windowHeight = windowRect.height;
+    const maxWidth = windowWidth - 2 * screenPadding;
+    const maxHeight = windowHeight - 2 * screenPadding;
+    const width = Math.min(containerRect.width, maxWidth);
+    const height = Math.min(containerRect.height, maxHeight);
+    const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+    const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+    let left;
+    let top;
+    let translateXPercent;
+    let translateYPercent;
+    switch (hAlign) {
+      case "beforeStart":
+        left = anchorRect.left;
+        translateXPercent = -100;
+        break;
+      case "afterStart":
+        left = anchorRect.left;
+        translateXPercent = 0;
+        break;
+      case "center":
+        left = anchorCenterX;
+        translateXPercent = -50;
+        break;
+      case "beforeEnd":
+        left = anchorRect.right;
+        translateXPercent = -100;
+        break;
+      case "afterEnd":
+        left = anchorRect.right;
+        translateXPercent = 0;
+        break;
+    }
+    switch (vAlign) {
+      case "beforeStart":
+        top = anchorRect.top;
+        translateYPercent = -100;
+        break;
+      case "afterStart":
+        top = anchorRect.top;
+        translateYPercent = 0;
+        break;
+      case "center":
+        top = anchorCenterY;
+        translateYPercent = -50;
+        break;
+      case "beforeEnd":
+        top = anchorRect.bottom;
+        translateYPercent = -100;
+        break;
+      case "afterEnd":
+        top = anchorRect.bottom;
+        translateYPercent = 0;
+        break;
+    }
+    if (gap !== 0) {
+      if (hAlign === "afterEnd") {
+        left += gap;
+      } else if (hAlign === "beforeStart") {
+        left -= gap;
+      }
+      if (vAlign === "afterEnd") {
+        top += gap;
+      } else if (vAlign === "beforeStart") {
+        top -= gap;
+      }
     }
-    if (verticalAlignment === "afterEnd") {
-      top += gap;
-    } else if (verticalAlignment === "beforeStart") {
-      top -= gap;
+    const targetLeft = left + width * translateXPercent / 100;
+    const targetTop = top + height * translateYPercent / 100;
+    const clampedLeft = MathUtil.clamp(targetLeft, [screenPadding, windowWidth - screenPadding - width]);
+    const clampedTop = MathUtil.clamp(targetTop, [screenPadding, windowHeight - screenPadding - height]);
+    return {
+      left,
+      top,
+      clampedLeft,
+      clampedTop,
+      width,
+      height,
+      maxWidth,
+      maxHeight
+    };
+  };
+  const calculateOverlap = (left, top, width, height) => {
+    const floatingRect = {
+      left,
+      top,
+      right: left + width,
+      bottom: top + height
+    };
+    const overlapLeft = Math.max(floatingRect.left, anchorRect.left);
+    const overlapTop = Math.max(floatingRect.top, anchorRect.top);
+    const overlapRight = Math.min(floatingRect.right, anchorRect.right);
+    const overlapBottom = Math.min(floatingRect.bottom, anchorRect.bottom);
+    const overlapWidth = Math.max(0, overlapRight - overlapLeft);
+    const overlapHeight = Math.max(0, overlapBottom - overlapTop);
+    return overlapWidth * overlapHeight;
+  };
+  const originalPos = calculateBasicPosition(horizontalAlignment, verticalAlignment);
+  let bestPosition = originalPos;
+  if (avoidOverlap && (horizontalAlignment === "beforeStart" || horizontalAlignment === "afterEnd" || verticalAlignment === "beforeStart" || verticalAlignment === "afterEnd")) {
+    let bestOverlap = calculateOverlap(originalPos.clampedLeft, originalPos.clampedTop, originalPos.width, originalPos.height);
+    let altHorizontalAlignment = horizontalAlignment;
+    let altVerticalAlignment = verticalAlignment;
+    if (horizontalAlignment === "beforeStart") {
+      altHorizontalAlignment = "afterEnd";
+    } else if (horizontalAlignment === "afterEnd") {
+      altHorizontalAlignment = "beforeStart";
+    }
+    if (verticalAlignment === "beforeStart") {
+      altVerticalAlignment = "afterEnd";
+    } else if (verticalAlignment === "afterEnd") {
+      altVerticalAlignment = "beforeStart";
+    }
+    const altPos = calculateBasicPosition(altHorizontalAlignment, altVerticalAlignment);
+    const altOverlap = calculateOverlap(altPos.clampedLeft, altPos.clampedTop, altPos.width, altPos.height);
+    if (altOverlap < bestOverlap) {
+      bestPosition = altPos;
+      bestOverlap = altOverlap;
     }
   }
-  const targetLeft = left + width * translateXPercent / 100;
-  const targetTop = top + height * translateYPercent / 100;
-  const clampedLeft = MathUtil.clamp(targetLeft, [screenPadding, windowWidth - screenPadding - width]);
-  const clampedTop = MathUtil.clamp(targetTop, [screenPadding, windowHeight - screenPadding - height]);
-  const adjustedTranslateX = (clampedLeft - left) / width * 100;
-  const adjustedTranslateY = (clampedTop - top) / height * 100;
+  const adjustedTranslateX = (bestPosition.clampedLeft - bestPosition.left) / bestPosition.width * 100;
+  const adjustedTranslateY = (bestPosition.clampedTop - bestPosition.top) / bestPosition.height * 100;
   return {
-    left,
-    top,
-    maxWidth,
-    maxHeight,
+    left: bestPosition.left,
+    top: bestPosition.top,
+    maxWidth: bestPosition.maxWidth,
+    maxHeight: bestPosition.maxHeight,
     transform: `translate(${adjustedTranslateX}%, ${adjustedTranslateY}%)`,
     transformOrigin: "top left"
   };
@@ -7996,6 +8050,7 @@ function useAnchoredPosition({
   pollingInterval = 100,
   verticalAlignment = "afterEnd",
   horizontalAlignment = "afterStart",
+  avoidOverlap = false,
   screenPadding = 16,
   gap = 4
 }) {
@@ -8004,8 +8059,9 @@ function useAnchoredPosition({
     horizontalAlignment,
     verticalAlignment,
     screenPadding,
-    gap
-  }), [horizontalAlignment, verticalAlignment, screenPadding, gap]);
+    gap,
+    avoidOverlap
+  }), [horizontalAlignment, verticalAlignment, screenPadding, gap, avoidOverlap]);
   const calculate2 = (0, import_react8.useCallback)(() => {
     const containerRect = containerRef.current?.getBoundingClientRect();
     if (!containerRect) {
@@ -8202,6 +8258,7 @@ var hightideTranslation = {
     "cancel": `Abbrechen`,
     "carousel": `Karussell`,
     "change": `\xC4ndern`,
+    "changeColumnDisplay": `Spaltenanzeige \xE4ndern`,
     "chooseLanguage": `W\xE4hle deine bevorzugte Sprache`,
     "chooseSlide": `W\xE4hle die angezeigte Slide aus`,
     "chooseTheme": `W\xE4hle dein bevorzugtes Farbschema.`,
@@ -8241,6 +8298,7 @@ var hightideTranslation = {
     "filterNonWhitespace": `Nicht leer`,
     "filterNotUndefined": `Definiert`,
     "filterUndefined": `Undefiniert`,
+    "first": `Erste`,
     "goodToSeeYou": `Sch\xF6n dich zu sehen`,
     "greaterThan": `Gr\xF6\xDFer als`,
     "greaterThanOrEqual": `Gr\xF6\xDFer oder gleich`,
@@ -8251,6 +8309,7 @@ var hightideTranslation = {
     "isFalse": `Ist falsch`,
     "isTrue": `Ist wahr`,
     "language": `Sprache`,
+    "last": `Letzte`,
     "less": `Weniger`,
     "lessThan": `Kleiner als`,
     "lessThanOrEqual": `Kleiner oder gleich`,
@@ -8496,6 +8555,7 @@ var hightideTranslation = {
     "cancel": `Cancel`,
     "carousel": `Carousel`,
     "change": `Change`,
+    "changeColumnDisplay": `Change column display`,
     "chooseLanguage": `Choose your language`,
     "chooseSlide": `Choose slide to display`,
     "chooseTheme": `Choose your preferred color theme.`,
@@ -8535,6 +8595,7 @@ var hightideTranslation = {
     "filterNonWhitespace": `Non-whitespace`,
     "filterNotUndefined": `Defined`,
     "filterUndefined": `Undefined`,
+    "first": `First`,
     "goodToSeeYou": `Good to see you`,
     "greaterThan": `Greater than`,
     "greaterThanOrEqual": `Greater than or equal`,
@@ -8545,6 +8606,7 @@ var hightideTranslation = {
     "isFalse": `Is false`,
     "isTrue": `Is true`,
     "language": `Language`,
+    "last": `Last`,
     "less": `Less`,
     "lessThan": `Less than`,
     "lessThanOrEqual": `Less than or equal`,
@@ -8799,7 +8861,8 @@ var import_react11 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var defaultConfig = {
   tooltip: {
-    appearDelay: 400
+    appearDelay: 0,
+    isAnimated: false
   },
   theme: {
     initialTheme: "light"
@@ -9663,9 +9726,9 @@ var useTransitionState = ({
   const hasAnimation = (0, import_react17.useRef)(false);
   const [timeout] = (0, import_react17.useState)(initialTimeout);
   (0, import_react17.useEffect)(() => {
-    if (isOpen && state !== "opened") {
+    if (isOpen && (state !== "opened" && state !== "opening")) {
       dispatch("open");
-    } else if (!isOpen && state !== "closed") {
+    } else if (!isOpen && (state !== "closed" && state !== "closing")) {
       dispatch("close");
     }
   }, [isOpen, state]);
@@ -9697,6 +9760,8 @@ var useTransitionState = ({
         });
       } else {
         dispatch("finished");
+        hasAnimation.current = false;
+        clearTimeout(timer.current);
       }
     }
   }, [ref, state]);
@@ -12530,9 +12595,128 @@ var Navigation = ({ ...props }) => {
 
 // src/components/layout/navigation/Pagination.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_clsx21 = __toESM(require("clsx"));
+var import_clsx22 = __toESM(require("clsx"));
+var import_react52 = require("react");
+
+// src/components/user-interaction/Tooltip.tsx
 var import_react49 = require("react");
+var import_react50 = require("react");
+var import_react51 = require("react");
+var import_clsx21 = require("clsx");
 var import_jsx_runtime49 = require("react/jsx-runtime");
+var Tooltip = ({
+  tooltip,
+  children,
+  appearDelay: appearOverwrite,
+  isAnimated: isAnimatedOverwrite,
+  tooltipClassName,
+  containerClassName,
+  position = "bottom",
+  disabled = false
+}) => {
+  const id = (0, import_react50.useId)();
+  const [open, setOpen] = (0, import_react51.useState)(false);
+  const timeoutRef = (0, import_react51.useRef)(void 0);
+  const { config } = useHightideConfig();
+  const appearDelay = (0, import_react51.useMemo)(
+    () => appearOverwrite ?? config.tooltip.appearDelay,
+    [appearOverwrite, config.tooltip.appearDelay]
+  );
+  const isAnimated = (0, import_react51.useMemo)(
+    () => isAnimatedOverwrite ?? config.tooltip.isAnimated,
+    [isAnimatedOverwrite, config.tooltip.isAnimated]
+  );
+  const anchor = (0, import_react51.useRef)(null);
+  const container = (0, import_react51.useRef)(null);
+  const isActive = !disabled && open;
+  const { isVisible, transitionState } = useTransitionState(
+    (0, import_react51.useMemo)(() => ({ isOpen: isActive, ref: container }), [isActive])
+  );
+  const verticalAlignment = (0, import_react51.useMemo)(
+    () => position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center",
+    [position]
+  );
+  const horizontalAlignment = (0, import_react51.useMemo)(
+    () => position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
+    [position]
+  );
+  const { zIndex } = useOverlayRegistry({ isActive });
+  const openWithDelay = (0, import_react51.useCallback)(() => {
+    if (timeoutRef.current || open) return;
+    if (appearDelay < 0) {
+      setOpen(true);
+      return;
+    }
+    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = void 0;
+      setOpen(true);
+    }, appearDelay);
+  }, [appearDelay, open]);
+  const close3 = (0, import_react51.useCallback)(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = void 0;
+    }
+    setOpen(false);
+  }, []);
+  (0, import_react49.useEffect)(() => {
+    if (!open) return;
+    const closeOnBlur = () => close3();
+    const closeOnScroll = () => close3();
+    window.addEventListener("blur", closeOnBlur);
+    window.addEventListener("scroll", closeOnScroll, true);
+    return () => {
+      window.removeEventListener("blur", closeOnBlur);
+      window.removeEventListener("scroll", closeOnScroll, true);
+    };
+  }, [open, close3]);
+  (0, import_react49.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = void 0;
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    "div",
+    {
+      ref: anchor,
+      className: (0, import_clsx21.clsx)("relative inline-block", containerClassName),
+      "aria-describedby": isVisible ? id : void 0,
+      onPointerEnter: openWithDelay,
+      onPointerLeave: close3,
+      onPointerCancel: close3,
+      onFocus: openWithDelay,
+      onBlur: close3,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Visibility, { isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          AnchoredFloatingContainer,
+          {
+            ref: container,
+            id,
+            anchor,
+            options: {
+              verticalAlignment,
+              horizontalAlignment,
+              avoidOverlap: true
+            },
+            "data-state": transitionState,
+            "data-animated": isAnimated ? "" : void 0,
+            role: "tooltip",
+            className: (0, import_clsx21.clsx)("tooltip", tooltipClassName),
+            style: { zIndex, position: "fixed" },
+            children: tooltip
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
+// src/components/layout/navigation/Pagination.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -12541,11 +12725,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = (0, import_react49.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react52.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -12555,8 +12739,8 @@ var Pagination = ({
   const changePage = (page) => {
     onPageIndexChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: (0, import_clsx21.default)("flex-row-1", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: (0, import_clsx22.default)("flex-row-1", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tooltip, { tooltip: translation("first"), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Button,
       {
         layout: "icon",
@@ -12564,10 +12748,10 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(0),
         disabled: onFirstPage || noPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react11.ChevronFirst, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react11.ChevronFirst, {})
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tooltip, { tooltip: translation("previous"), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Button,
       {
         layout: "icon",
@@ -12575,15 +12759,15 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageIndex - 1),
         disabled: onFirstPage || noPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react11.ChevronLeft, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react11.ChevronLeft, {})
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Input,
         {
           value,
-          className: (0, import_clsx21.default)(
+          className: (0, import_clsx22.default)(
             "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -12603,8 +12787,8 @@ var Pagination = ({
           editCompleteOptions: { delay: 800 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "select-none w-10", children: translation("of") }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "span",
         {
           className: "flex-row-2 w-24 items-center justify-center select-none h-10 bg-input-background text-input-text rounded-md font-bold",
@@ -12612,7 +12796,7 @@ var Pagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tooltip, { tooltip: translation("next"), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Button,
       {
         layout: "icon",
@@ -12620,10 +12804,10 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageIndex + 1),
         disabled: onLastPage || noPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react11.ChevronRight, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react11.ChevronRight, {})
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tooltip, { tooltip: translation("last"), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Button,
       {
         layout: "icon",
@@ -12631,16 +12815,16 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageCount - 1),
         disabled: onLastPage || noPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react11.ChevronLast, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react11.ChevronLast, {})
       }
-    )
+    ) })
   ] });
 };
 
 // src/components/layout/navigation/StepperBar.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_clsx22 = __toESM(require("clsx"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_clsx23 = __toESM(require("clsx"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
   seenSteps: /* @__PURE__ */ new Set([0])
@@ -12662,12 +12846,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
-      className: (0, import_clsx22.default)("flex-row-2 justify-between", className),
+      className: (0, import_clsx23.default)("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           Button,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -12676,18 +12860,18 @@ var StepperBar = ({
             },
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react12.ChevronLeft, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.ChevronLeft, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx22.default)(
+              className: (0, import_clsx23.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -12703,7 +12887,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           Button,
           {
             onClick: () => update(currentStep + 1),
@@ -12711,18 +12895,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react12.ChevronRight, { size: 14 })
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           Button,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react12.Check, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -12733,7 +12917,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useOverwritableState(state, onChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     StepperBar,
     {
       ...props,
@@ -12744,17 +12928,17 @@ var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
 };
 
 // src/components/layout/popup/PopUpOpener.tsx
-var import_react50 = require("react");
+var import_react53 = require("react");
 function PopUpOpener({ children }) {
   const context = usePopUpContext();
-  const ref = (0, import_react50.useRef)(null);
-  (0, import_react50.useEffect)(() => {
+  const ref = (0, import_react53.useRef)(null);
+  (0, import_react53.useEffect)(() => {
     context.setTriggerRef(ref);
     return () => {
       context.setTriggerRef(null);
     };
   }, []);
-  const bag = (0, import_react50.useMemo)(() => ({
+  const bag = (0, import_react53.useMemo)(() => ({
     open: () => context.setIsOpen(true),
     close: () => context.setIsOpen(false),
     toggleOpen: () => context.setIsOpen((prev) => !prev),
@@ -12772,8 +12956,8 @@ function PopUpOpener({ children }) {
 }
 
 // src/components/layout/popup/PopUpRoot.tsx
-var import_react51 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react54 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function PopUpRoot({
   children,
   isOpen: controlledIsOpen,
@@ -12782,17 +12966,17 @@ function PopUpRoot({
   popUpId: popUpIdOverwrite,
   triggerId: triggerIdOverwrite
 }) {
-  const generatedPopUpId = (0, import_react51.useId)();
-  const generatedTriggerId = (0, import_react51.useId)();
+  const generatedPopUpId = (0, import_react54.useId)();
+  const generatedTriggerId = (0, import_react54.useId)();
   const [isOpen, setIsOpen] = useControlledState({
     value: controlledIsOpen,
     onValueChange: onIsOpenChange,
     defaultValue: initialIsOpen
   });
-  const [triggerRef, setTriggerRef] = (0, import_react51.useState)(null);
-  const popUpId = (0, import_react51.useMemo)(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
-  const triggerId = (0, import_react51.useMemo)(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
-  const contextValue = (0, import_react51.useMemo)(() => ({
+  const [triggerRef, setTriggerRef] = (0, import_react54.useState)(null);
+  const popUpId = (0, import_react54.useMemo)(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
+  const triggerId = (0, import_react54.useMemo)(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
+  const contextValue = (0, import_react54.useMemo)(() => ({
     isOpen,
     setIsOpen,
     popUpId,
@@ -12800,525 +12984,589 @@ function PopUpRoot({
     triggerRef,
     setTriggerRef
   }), [isOpen, setIsOpen, popUpId, triggerId, triggerRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopUpContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopUpContext.Provider, { value: contextValue, children });
 }
 
 // src/components/layout/table/FillerCell.tsx
+var import_clsx24 = __toESM(require("clsx"));
 var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var FillerCell = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
       ...props,
-      "data-name": PropsUtil.dataAttributes.name("table-filler-cell"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react13.Minus, { className: "max-w-4 max-h-4" })
+      className: (0, import_clsx24.default)("table-filler-cell", props.className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react13.Minus, { className: "max-w-4 max-h-4" })
     }
   );
 };
 
-// src/components/layout/table/TableBody.tsx
-var import_react_table = require("@tanstack/react-table");
-var import_react53 = __toESM(require("react"));
+// src/components/layout/table/TableProvider.tsx
+var import_react57 = require("react");
+
+// src/components/layout/table/columnSizeUtil.ts
+var calculate = ({
+  previousSizing,
+  newSizing,
+  columnIds,
+  target,
+  minWidthsPerColumn,
+  maxWidthsPerColumn
+}) => {
+  if (columnIds.length === 0) {
+    return {};
+  }
+  const deltas = {};
+  const removedColumns = Object.keys(newSizing).filter((columnId) => !columnIds.includes(columnId));
+  for (const columnId of removedColumns) {
+    delete newSizing[columnId];
+  }
+  for (const columnId of columnIds) {
+    if (!newSizing[columnId]) {
+      newSizing[columnId] = 0;
+      continue;
+    }
+    const delta = (newSizing[columnId] ?? 0) - (previousSizing[columnId] ?? 0);
+    if (delta !== 0) {
+      deltas[columnId] = delta;
+    }
+  }
+  const minWidth = Object.values(minWidthsPerColumn).reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+  const maxWidth = maxWidthsPerColumn ? Object.values(maxWidthsPerColumn).reduce((previousValue, currentValue) => previousValue + currentValue, 0) : Infinity;
+  if (minWidth > maxWidth) {
+    throw new Error("Min width is greater than max width");
+  }
+  const hasTargetWidth = target?.width !== void 0;
+  const result = {
+    ...newSizing
+  };
+  for (const columnId of columnIds) {
+    result[columnId] = MathUtil.clamp(result[columnId], [minWidthsPerColumn[columnId], maxWidthsPerColumn?.[columnId] ?? Infinity]);
+  }
+  if (!hasTargetWidth) {
+    return result;
+  }
+  let targetWidth = target?.width ?? -1;
+  if (hasTargetWidth) {
+    switch (target?.behaviour) {
+      case "equalOrHigher":
+        targetWidth = Math.max(target.width, minWidth);
+        break;
+    }
+  }
+  const resultWidth = Object.values(result).reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+  if (resultWidth == targetWidth) {
+    return result;
+  } else if (resultWidth < targetWidth) {
+    const widthToGive = targetWidth - resultWidth;
+    const lastColumnId = columnIds[columnIds.length - 1];
+    result[lastColumnId] += widthToGive;
+    return result;
+  } else {
+    const widthToTake = resultWidth - targetWidth;
+    const lastColumnId = columnIds[columnIds.length - 1];
+    const isLastColumnChanging = Object.keys(deltas).find((columnId) => columnId === lastColumnId) !== void 0;
+    if (isLastColumnChanging) {
+      return result;
+    } else {
+      result[lastColumnId] -= Math.max(widthToTake, minWidthsPerColumn[lastColumnId]);
+      return result;
+    }
+  }
+};
+var toSizeVars = (sizing) => {
+  return Object.entries(sizing).reduce((previousValue, [columnId, size]) => {
+    return {
+      ...previousValue,
+      [`--header-${columnId}-size`]: size
+    };
+  }, {});
+};
+var ColumnSizeUtil = {
+  calculate,
+  toSizeVars
+};
 
 // src/components/layout/table/TableContext.tsx
-var import_react52 = require("react");
-var TableBodyContext = (0, import_react52.createContext)(null);
-var useTableBodyContext = () => {
-  const context = (0, import_react52.useContext)(TableBodyContext);
-  if (!context) throw new Error("useTableBodyContext must be used within a <TableBodyContext.Provider> like <TableBody>");
+var import_react55 = require("react");
+var TableDataContext = (0, import_react55.createContext)(null);
+var useTableDataContext = () => {
+  const context = (0, import_react55.useContext)(TableDataContext);
+  if (!context) throw new Error("useTableDataContext must be used within a <TableDataContext.Provider> like <TableData>");
   return context;
 };
-var TableColumnDefinitionContext = (0, import_react52.createContext)(null);
+var TableColumnDefinitionContext = (0, import_react55.createContext)(null);
 var useTableColumnDefinitionContext = () => {
-  const context = (0, import_react52.useContext)(TableColumnDefinitionContext);
+  const context = (0, import_react55.useContext)(TableColumnDefinitionContext);
   if (!context) throw new Error("useTableColumnDefinitionContext must be used within a <TableColumnDefinitionContext.Provider> like <TableColumnDefinition>");
   return context;
 };
-var TableHeaderContext = (0, import_react52.createContext)(null);
+var TableHeaderContext = (0, import_react55.createContext)(null);
 var useTableHeaderContext = () => {
-  const context = (0, import_react52.useContext)(TableHeaderContext);
+  const context = (0, import_react55.useContext)(TableHeaderContext);
   if (!context) throw new Error("useTableHeaderContext must be used within a <TableHeaderContext.Provider> like <TableHeader>");
   return context;
 };
-var TableContainerContext = (0, import_react52.createContext)(null);
+var TableContainerContext = (0, import_react55.createContext)(null);
 var useTableContainerContext = () => {
-  const context = (0, import_react52.useContext)(TableContainerContext);
+  const context = (0, import_react55.useContext)(TableContainerContext);
   if (!context) throw new Error("useTableContainerContext must be used within a <TableContainerContext.Provider> like <TableContainer>");
   return context;
 };
 
-// src/components/layout/table/TableBody.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var TableBodyVisual = import_react53.default.memo(function TableBodyVisual2() {
-  const { table, onRowClick, isUsingFillerRows, fillerRow, pagination } = useTableBodyContext();
-  const columns = table.getAllColumns();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("tbody", { children: [
-    table.getRowModel().rows.map((row) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        "tr",
-        {
-          onClick: () => onRowClick?.(row, table),
-          "data-name": "table-body-row",
-          className: BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original),
-          children: row.getVisibleCells().map((cell) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("td", { "data-name": "table-body-cell", children: (0, import_react_table.flexRender)(
-              cell.column.columnDef.cell,
-              cell.getContext()
-            ) }, cell.id);
-          })
-        },
-        row.id
-      );
-    }),
-    isUsingFillerRows && range(pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tr", { "data-name": "table-body-filler-row", children: columns.map((column) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("td", { "data-name": "table-body-filler-cell", children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FillerCell, {}) }, column.id);
-      }) }, "filler-row-" + index);
-    })
-  ] });
-});
-var TableBody = TableBodyVisual;
-
-// src/components/layout/table/TableCell.tsx
-var import_clsx23 = require("clsx");
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var TableCell = ({
-  children,
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: (0, import_clsx23.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
-};
-
-// src/components/layout/table/TableColumn.tsx
-var import_react54 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var TableColumnComponent = ({
-  filterType,
-  ...props
-}) => {
-  const { registerColumn } = useTableColumnDefinitionContext();
-  const filterFn = filterType ?? props.filterFn;
-  useLogOnce(
-    "TableColumn: For filterType === tags, filterData.tags must be set.",
-    filterType === "tags" && props.meta?.filterData?.tags === void 0
-  );
-  const [column] = (0, import_react54.useState)({
-    ...props,
-    filterFn
-  });
-  (0, import_react54.useEffect)(() => {
-    const unsubscribe = registerColumn(column);
-    return () => {
-      unsubscribe();
-    };
-  }, [registerColumn, column]);
-  return null;
+// src/components/layout/table/TableFilter.ts
+var TableFilterOperator = {
+  text: ["textEquals", "textNotEquals", "textNotWhitespace", "textContains", "textNotContains", "textStartsWith", "textEndsWith"],
+  number: ["numberEquals", "numberNotEquals", "numberGreaterThan", "numberGreaterThanOrEqual", "numberLessThan", "numberLessThanOrEqual", "numberBetween", "numberNotBetween"],
+  date: ["dateEquals", "dateNotEquals", "dateGreaterThan", "dateGreaterThanOrEqual", "dateLessThan", "dateLessThanOrEqual", "dateBetween", "dateNotBetween"],
+  boolean: ["booleanIsTrue", "booleanIsFalse"],
+  tags: ["tagsEquals", "tagsNotEquals", "tagsContains", "tagsNotContains"],
+  generic: ["undefined", "notUndefined"]
 };
-var TableColumnFactory = () => (0, import_react54.memo)(
-  TableColumnComponent,
-  (prevProps, nextProps) => {
-    return prevProps.filterType === nextProps.filterType && prevProps.id === nextProps.id && prevProps["accessorKey"] === nextProps["accessorKey"] && prevProps.enableColumnFilter === nextProps.enableColumnFilter && prevProps.enableGlobalFilter === nextProps.enableGlobalFilter && prevProps.enableGrouping === nextProps.enableGrouping && prevProps.enableHiding === nextProps.enableHiding && prevProps.enablePinning === nextProps.enablePinning && prevProps.enableResizing === nextProps.enableResizing && prevProps.enableSorting === nextProps.enableSorting && prevProps.meta === nextProps.meta;
+function isTableFilterCategory(value) {
+  return typeof value === "string" && value in TableFilterOperator;
+}
+var textFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  const parameter = filterValue.parameter;
+  const operator = filterValue.operator;
+  if (operator === "textNotWhitespace") {
+    return value?.toString().trim().length > 0;
+  }
+  const searchText = (parameter.searchText ?? "").toLowerCase();
+  const cellText = value?.toString().toLowerCase() ?? "";
+  switch (operator) {
+    case "textEquals":
+      return cellText === searchText;
+    case "textNotEquals":
+      return cellText !== searchText;
+    case "textContains":
+      return cellText.includes(searchText);
+    case "textNotContains":
+      return !cellText.includes(searchText);
+    case "textStartsWith":
+      return cellText.startsWith(searchText);
+    case "textEndsWith":
+      return cellText.endsWith(searchText);
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    default:
+      return false;
   }
-);
-var TableColumn = (props) => {
-  const TableColumnComponent2 = (0, import_react54.useMemo)(() => TableColumnFactory(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TableColumnComponent2, { ...props });
 };
-
-// src/components/layout/table/TableColumnPicker.tsx
-var import_react55 = require("react");
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var TableColumnPicker = ({ ...props }) => {
-  const { table } = useTableBodyContext();
-  const translation = useHightideTranslation();
-  const containerRef = (0, import_react55.useRef)(null);
-  const generatedId = (0, import_react55.useId)();
-  const ids = (0, import_react55.useMemo)(() => ({
-    popup: props.id ?? `table-column-picker-popup-${generatedId}`,
-    label: `table-column-picker-label-${generatedId}`
-  }), [generatedId, props.id]);
-  const tableState = table.getState();
-  const columnOrder = tableState.columnOrder;
-  const columnPinning = tableState.columnPinning;
-  const columns = (0, import_react55.useMemo)(() => {
-    const allColumns = table.getAllColumns();
-    const leftPinned = [];
-    const unpinned = [];
-    const rightPinned = [];
-    const columnMap = new Map(allColumns.map((col) => [col.id, col]));
-    const processColumns = (columnIds, targetArray) => {
-      for (const columnId of columnIds) {
-        const column = columnMap.get(columnId);
-        if (column) {
-          targetArray.push(column);
-          columnMap.delete(columnId);
-        }
-      }
-    };
-    if (columnOrder.length > 0) {
-      const leftPinnedIds = columnPinning?.left ?? [];
-      const rightPinnedIds = columnPinning?.right ?? [];
-      processColumns(leftPinnedIds, leftPinned);
-      processColumns(rightPinnedIds, rightPinned);
-      for (const columnId of columnOrder) {
-        if (!leftPinnedIds.includes(columnId) && !rightPinnedIds.includes(columnId)) {
-          const column = columnMap.get(columnId);
-          if (column) {
-            unpinned.push(column);
-            columnMap.delete(columnId);
-          }
-        }
-      }
-      for (const column of columnMap.values()) {
-        const pinState = column.getIsPinned();
-        if (pinState === "left") {
-          leftPinned.push(column);
-        } else if (pinState === "right") {
-          rightPinned.push(column);
-        } else {
-          unpinned.push(column);
-        }
-      }
-    } else {
-      for (const column of allColumns) {
-        const pinState = column.getIsPinned();
-        if (pinState === "left") {
-          leftPinned.push(column);
-        } else if (pinState === "right") {
-          rightPinned.push(column);
-        } else {
-          unpinned.push(column);
-        }
-      }
+var numberFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  const parameter = filterValue.parameter;
+  const operator = filterValue.operator;
+  switch (operator) {
+    case "numberEquals":
+      return value === parameter.compareValue;
+    case "numberNotEquals":
+      return value !== parameter.compareValue;
+    case "numberGreaterThan":
+      return value > (parameter.compareValue ?? 0);
+    case "numberGreaterThanOrEqual":
+      return value >= (parameter.compareValue ?? 0);
+    case "numberLessThan":
+      return value < (parameter.compareValue ?? 0);
+    case "numberLessThanOrEqual":
+      return value <= (parameter.compareValue ?? 0);
+    case "numberBetween":
+      return value >= (parameter.min ?? -Infinity) && value <= (parameter.max ?? Infinity);
+    case "numberNotBetween":
+      return value < (parameter.min ?? -Infinity) || value > (parameter.max ?? Infinity);
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    default:
+      return false;
+  }
+};
+var dateFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  const parameter = filterValue.parameter;
+  const operator = filterValue.operator;
+  const parseDate = (dateValue) => {
+    if (!dateValue) return null;
+    if (dateValue instanceof Date) return dateValue;
+    if (typeof dateValue === "string" || typeof dateValue === "number") {
+      const parsed = new Date(dateValue);
+      return isNaN(parsed.getTime()) ? null : parsed;
     }
-    return [...leftPinned, ...unpinned, ...rightPinned];
-  }, [table, columnOrder, columnPinning]);
-  const moveColumn = (columnId, direction) => {
-    const currentColumns = columns.map((col) => col.id);
-    const currentIndex = currentColumns.indexOf(columnId);
-    if (currentIndex === -1) return;
-    const column = table.getColumn(columnId);
-    if (!column) return;
-    const isPinned = column.getIsPinned();
-    if (isPinned) return;
-    const newIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
-    if (newIndex < 0 || newIndex >= currentColumns.length) return;
-    const targetColumn = table.getColumn(currentColumns[newIndex]);
-    if (!targetColumn) return;
-    const targetIsPinned = targetColumn.getIsPinned();
-    if (targetIsPinned !== isPinned) return;
-    const newOrder = [...currentColumns];
-    const temp = newOrder[currentIndex];
-    newOrder[currentIndex] = newOrder[newIndex];
-    newOrder[newIndex] = temp;
-    table.setColumnOrder(newOrder);
-  };
-  const toggleColumnVisibility = (columnId) => {
-    const column = table.getColumn(columnId);
-    column?.toggleVisibility();
+    return null;
   };
-  const pinColumn = (columnId, side) => {
-    const column = table.getColumn(columnId);
-    if (!column || !column.getCanPin()) return;
-    column.pin(side);
+  const normalizeToDateOnly = (date2) => {
+    const normalized = new Date(date2);
+    normalized.setHours(0, 0, 0, 0);
+    return normalized;
   };
-  const unpinColumn = (columnId) => {
-    const column = table.getColumn(columnId);
-    if (!column || !column.getCanPin()) return;
-    const pinState = column.getIsPinned();
-    if (!pinState) return;
-    column.pin(false);
-    const currentOrder = table.getState().columnOrder;
-    const unpinnedColumns = currentOrder.filter((id) => {
-      const col = table.getColumn(id);
-      return col && !col.getIsPinned();
-    });
-    if (pinState === "left") {
-      const newOrder = [columnId, ...unpinnedColumns];
-      table.setColumnOrder(newOrder);
-    } else if (pinState === "right") {
-      const newOrder = [...unpinnedColumns, columnId];
-      table.setColumnOrder(newOrder);
+  const date = parseDate(value);
+  if (!date && !TableFilterOperator.generic.some((o) => o === operator)) return false;
+  const normalizedDate = date ? normalizeToDateOnly(date) : null;
+  switch (operator) {
+    case "dateEquals": {
+      const filterDate = parseDate(parameter.compareDate);
+      if (!filterDate || !normalizedDate) return false;
+      return normalizedDate.getTime() === normalizeToDateOnly(filterDate).getTime();
     }
-  };
-  const getColumnHeader = (columnId) => {
-    const column = table.getColumn(columnId);
-    const header = column?.columnDef.header;
-    if (typeof header === "string") {
-      return header;
+    case "dateNotEquals": {
+      const filterDate = parseDate(parameter.compareDate);
+      if (!filterDate || !normalizedDate) return false;
+      return normalizedDate.getTime() !== normalizeToDateOnly(filterDate).getTime();
     }
-    if (typeof header === "function") {
-      return columnId;
+    case "dateGreaterThan": {
+      const filterDate = parseDate(parameter.compareDate);
+      if (!filterDate || !normalizedDate) return false;
+      return normalizedDate > normalizeToDateOnly(filterDate);
     }
-    return columnId;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-    PopUp,
-    {
-      ...props,
-      ref: containerRef,
-      id: ids.popup,
-      options: {
-        verticalAlignment: "afterEnd",
-        horizontalAlignment: "center",
-        ...props.options
-      },
-      role: "dialog",
-      "aria-labelledby": ids.label,
-      "aria-describedby": ids.label,
-      className: "flex-col-1 p-2 items-start min-w-72",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex-col-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { id: ids.label, className: "typography-title-md font-semibold", children: translation("columnPicker") }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-description typography-label-sm mb-2", children: translation("columnPickerDescription") })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("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();
-          const isPinned = column.getCanPin() && !!pinState;
-          const prevColumn = index > 0 ? columns[index - 1] : null;
-          const nextColumn = index < columns.length - 1 ? columns[index + 1] : null;
-          const prevIsPinned = prevColumn?.getCanPin() && !!prevColumn.getIsPinned();
-          const nextIsPinned = nextColumn?.getCanPin() && !!nextColumn.getIsPinned();
-          const canMoveUp = index > 0 && !isPinned && !prevIsPinned;
-          const canMoveDown = index < columns.length - 1 && !isPinned && !nextIsPinned;
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex-row-2 items-center justify-between gap-2 w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                Button,
-                {
-                  layout: "icon",
-                  size: "sm",
-                  color: "neutral",
-                  coloringStyle: "text",
-                  disabled: pinState === "left",
-                  onClick: () => pinColumn(columnId, "left"),
-                  "aria-label": translation("pinLeft"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.ChevronLeft, { className: "size-4" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                Button,
-                {
-                  layout: "icon",
-                  size: "sm",
-                  color: "neutral",
-                  coloringStyle: "text",
-                  disabled: pinState === "right",
-                  onClick: () => pinColumn(columnId, "right"),
-                  "aria-label": translation("pinRight"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.ChevronRight, { className: "size-4" })
-                }
-              )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                Button,
-                {
-                  layout: "icon",
-                  size: "sm",
-                  color: "neutral",
-                  coloringStyle: "text",
-                  disabled: !canMoveUp,
-                  onClick: () => moveColumn(columnId, "up"),
-                  "aria-label": translation("moveUp"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.ChevronUp, { className: "size-4" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                Button,
-                {
-                  layout: "icon",
-                  size: "sm",
-                  color: "neutral",
-                  coloringStyle: "text",
-                  disabled: !canMoveDown,
-                  onClick: () => moveColumn(columnId, "down"),
-                  "aria-label": translation("moveDown"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.ChevronDown, { className: "size-4" })
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                Button,
-                {
-                  layout: "icon",
-                  size: "sm",
-                  color: "neutral",
-                  coloringStyle: "text",
-                  disabled: !column.getCanHide(),
-                  onClick: () => toggleColumnVisibility(columnId),
-                  "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
-                  children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.Eye, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.EyeOff, { className: "size-4" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                Button,
-                {
-                  layout: "icon",
-                  size: "sm",
-                  color: "neutral",
-                  coloringStyle: "text",
-                  disabled: !column.getCanPin(),
-                  onClick: () => {
-                    if (isPinned) {
-                      unpinColumn(columnId);
-                    } else {
-                      pinColumn(columnId, "left");
-                    }
-                  },
-                  "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
-                  children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.PinOff, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.Pin, { className: "size-4" })
-                }
-              )
-            ] })
-          ] }, columnId);
-        }) })
-      ]
+    case "dateGreaterThanOrEqual": {
+      const filterDate = parseDate(parameter.compareDate);
+      if (!filterDate || !normalizedDate) return false;
+      return normalizedDate >= normalizeToDateOnly(filterDate);
     }
-  );
+    case "dateLessThan": {
+      const filterDate = parseDate(parameter.compareDate);
+      if (!filterDate || !normalizedDate) return false;
+      return normalizedDate < normalizeToDateOnly(filterDate);
+    }
+    case "dateLessThanOrEqual": {
+      const filterDate = parseDate(parameter.compareDate);
+      if (!filterDate || !normalizedDate) return false;
+      return normalizedDate <= normalizeToDateOnly(filterDate);
+    }
+    case "dateBetween": {
+      const minDate = parseDate(parameter.min);
+      const maxDate = parseDate(parameter.max);
+      if (!minDate || !maxDate || !normalizedDate) return false;
+      return normalizedDate >= normalizeToDateOnly(minDate) && normalizedDate <= normalizeToDateOnly(maxDate);
+    }
+    case "dateNotBetween": {
+      const minDate = parseDate(parameter.min);
+      const maxDate = parseDate(parameter.max);
+      if (!minDate || !maxDate || !normalizedDate) return false;
+      return normalizedDate < normalizeToDateOnly(minDate) || normalizedDate > normalizeToDateOnly(maxDate);
+    }
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    default:
+      return false;
+  }
+};
+var booleanFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  const operator = filterValue.operator;
+  switch (operator) {
+    case "booleanIsTrue":
+      return value === true;
+    case "booleanIsFalse":
+      return value === false;
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    default:
+      return false;
+  }
+};
+var tagsFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  const parameter = filterValue.parameter;
+  const operator = filterValue.operator;
+  switch (operator) {
+    case "tagsEquals": {
+      if (!Array.isArray(value) || !Array.isArray(parameter.searchTags)) return false;
+      if (value.length !== parameter.searchTags.length) return false;
+      const valueSet = new Set(value);
+      const searchTagsSet = new Set(parameter.searchTags);
+      if (valueSet.size !== searchTagsSet.size) return false;
+      return Array.from(valueSet).every((tag) => searchTagsSet.has(tag));
+    }
+    case "tagsNotEquals": {
+      if (!Array.isArray(value) || !Array.isArray(parameter.searchTags)) return true;
+      if (value.length !== parameter.searchTags.length) return true;
+      const valueSet = new Set(value);
+      const searchTagsSet = new Set(parameter.searchTags);
+      if (valueSet.size !== searchTagsSet.size) return true;
+      return !Array.from(valueSet).every((tag) => searchTagsSet.has(tag));
+    }
+    case "tagsContains": {
+      if (!Array.isArray(value) || !Array.isArray(parameter.searchTags)) return false;
+      return parameter.searchTags.every((tag) => value.includes(tag));
+    }
+    case "tagsNotContains": {
+      if (!Array.isArray(value) || !Array.isArray(parameter.searchTags)) return true;
+      return !parameter.searchTags.every((tag) => value.includes(tag));
+    }
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    default:
+      return false;
+  }
+};
+var genericFilter = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  const operator = filterValue.operator;
+  switch (operator) {
+    case "undefined":
+      return value === void 0 || value === null;
+    case "notUndefined":
+      return value !== void 0 && value !== null;
+    default:
+      return false;
+  }
+};
+var TableFilter = {
+  text: textFilter,
+  number: numberFilter,
+  date: dateFilter,
+  boolean: booleanFilter,
+  tags: tagsFilter,
+  generic: genericFilter
 };
 
-// src/components/layout/table/TableHeader.tsx
-var import_react_table2 = require("@tanstack/react-table");
-var import_clsx30 = __toESM(require("clsx"));
-
-// src/components/layout/table/TableSortButton.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_clsx25 = __toESM(require("clsx"));
+// src/components/layout/table/TableProvider.tsx
+var import_react_table = require("@tanstack/react-table");
 
-// src/components/user-interaction/Tooltip.tsx
+// src/hooks/useResizeCallbackWrapper.ts
 var import_react56 = require("react");
-var import_react57 = require("react");
-var import_react58 = require("react");
-var import_clsx24 = require("clsx");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var Tooltip = ({
-  tooltip,
-  children,
-  appearDelay: appearOverwrite,
-  tooltipClassName,
-  containerClassName,
-  position = "bottom",
-  disabled = false
-}) => {
-  const id = (0, import_react57.useId)();
-  const [open, setOpen] = (0, import_react58.useState)(false);
-  const timeoutRef = (0, import_react58.useRef)(void 0);
-  const { config } = useHightideConfig();
-  const appearDelay = (0, import_react58.useMemo)(
-    () => appearOverwrite ?? config.tooltip.appearDelay,
-    [appearOverwrite, config.tooltip.appearDelay]
-  );
-  const anchor = (0, import_react58.useRef)(null);
-  const container = (0, import_react58.useRef)(null);
-  const triangle = (0, import_react58.useRef)(null);
-  const isActive = !disabled && open;
-  const { isVisible, transitionState } = useTransitionState(
-    (0, import_react58.useMemo)(() => ({ isOpen: isActive, ref: triangle }), [isActive])
-  );
-  const verticalAlignment = (0, import_react58.useMemo)(
-    () => position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center",
-    [position]
-  );
-  const horizontalAlignment = (0, import_react58.useMemo)(
-    () => position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
-    [position]
-  );
-  const { zIndex } = useOverlayRegistry({ isActive });
-  const openWithDelay = (0, import_react58.useCallback)(() => {
-    if (timeoutRef.current || open) return;
-    timeoutRef.current = setTimeout(() => {
-      timeoutRef.current = void 0;
-      setOpen(true);
-    }, appearDelay);
-  }, [appearDelay, open]);
-  const close3 = (0, import_react58.useCallback)(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = void 0;
-    }
-    setOpen(false);
-  }, []);
+var useResizeCallbackWrapper = (callback) => {
   (0, import_react56.useEffect)(() => {
-    if (!open) return;
-    const closeOnBlur = () => close3();
-    const closeOnScroll = () => close3();
-    window.addEventListener("blur", closeOnBlur);
-    window.addEventListener("scroll", closeOnScroll, true);
+    window.addEventListener("resize", callback);
     return () => {
-      window.removeEventListener("blur", closeOnBlur);
-      window.removeEventListener("scroll", closeOnScroll, true);
+      window.removeEventListener("resize", callback);
     };
-  }, [open, close3]);
-  (0, import_react56.useEffect)(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = void 0;
-      }
+  }, [callback]);
+};
+
+// src/components/layout/table/TableCell.tsx
+var import_clsx25 = require("clsx");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var TableCell = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: (0, import_clsx25.clsx)("table-default-cell", className), children });
+};
+
+// src/components/layout/table/TableProvider.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var TableProvider = ({
+  data,
+  isUsingFillerRows = true,
+  fillerRow,
+  initialState,
+  onRowClick,
+  defaultColumn: defaultColumnOverwrite,
+  state,
+  columns: columnsProp,
+  children,
+  ...tableOptions
+}) => {
+  const [registeredColumns, setRegisteredColumns] = (0, import_react57.useState)([]);
+  const containerRef = (0, import_react57.useRef)(null);
+  const registerColumn = (0, import_react57.useCallback)((column) => {
+    setRegisteredColumns((prev) => {
+      return [...prev, column];
+    });
+    return () => {
+      setRegisteredColumns((prev) => {
+        return prev.filter((value) => value.id !== column.id);
+      });
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-    "div",
-    {
-      ref: anchor,
-      className: (0, import_clsx24.clsx)("relative inline-block", containerClassName),
-      "aria-describedby": isVisible ? id : void 0,
-      onPointerEnter: openWithDelay,
-      onPointerLeave: close3,
-      onPointerCancel: close3,
-      onFocus: openWithDelay,
-      onBlur: close3,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Portal, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            AnchoredFloatingContainer,
-            {
-              ref: triangle,
-              anchor,
-              options: {
-                verticalAlignment,
-                horizontalAlignment,
-                gap: 0
-              },
-              "data-name": "tooltip-triangle",
-              "data-state": transitionState,
-              "data-position": position,
-              style: { zIndex, position: "fixed" }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            AnchoredFloatingContainer,
-            {
-              ref: container,
-              id,
-              anchor,
-              options: {
-                verticalAlignment,
-                horizontalAlignment
-              },
-              "data-name": PropsUtil.dataAttributes.name("tooltip"),
-              "data-state": transitionState,
-              role: "tooltip",
-              className: tooltipClassName,
-              style: { zIndex, position: "fixed" },
-              children: tooltip
-            }
-          )
-        ] }) })
-      ]
+  const columns = (0, import_react57.useMemo)(() => {
+    const contextColumns = Array.from(registeredColumns.values());
+    if (columnsProp) {
+      return [...contextColumns, ...columnsProp];
     }
-  );
+    return contextColumns;
+  }, [columnsProp, registeredColumns]);
+  const defaultColumn = (0, import_react57.useMemo)(() => {
+    return {
+      minSize: 60,
+      maxSize: 800,
+      cell: ({ cell }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TableCell, { children: String(cell.getValue()) });
+      },
+      enableResizing: true,
+      enablePinning: true,
+      ...defaultColumnOverwrite
+    };
+  }, [defaultColumnOverwrite]);
+  const [columnSizing, setColumnSizing] = (0, import_react57.useState)(columns.reduce((previousValue, currentValue) => {
+    return {
+      ...previousValue,
+      [currentValue.id]: currentValue.size ?? defaultColumn.size ?? currentValue.minSize ?? defaultColumn.minSize
+    };
+  }, {}));
+  const [columnOrder, setColumnOrder] = (0, import_react57.useState)(state?.columnOrder ?? initialState?.columnOrder ?? []);
+  (0, import_react57.useEffect)(() => {
+    setColumnOrder((prev) => {
+      const columnIds = columns.map((column) => column.id);
+      const newColumnIds = columnIds.filter((columnId) => !prev.includes(columnId));
+      const withoutRemovedColumns = prev.filter((columnId) => !columnIds.includes(columnId));
+      return [...withoutRemovedColumns, ...newColumnIds];
+    });
+  }, [columns]);
+  const adjustColumnSizes = (0, import_react57.useCallback)((previousSizing, newSizing) => {
+    return ColumnSizeUtil.calculate({
+      previousSizing,
+      newSizing,
+      minWidthsPerColumn: columns.reduce((previousValue, currentValue) => {
+        return {
+          ...previousValue,
+          [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
+        };
+      }, {}),
+      maxWidthsPerColumn: columns.reduce((previousValue, currentValue) => {
+        return {
+          ...previousValue,
+          [currentValue.id]: currentValue.maxSize ?? defaultColumn.maxSize
+        };
+      }, {}),
+      columnIds: columns.map((column) => column.id),
+      target: {
+        width: Math.floor(containerRef.current?.getBoundingClientRect().width ?? 0),
+        behaviour: "equalOrHigher"
+      }
+    });
+  }, [columns, defaultColumn.maxSize, defaultColumn.minSize]);
+  (0, import_react57.useEffect)(() => {
+    setColumnSizing((prev) => adjustColumnSizes(prev, prev));
+  }, [adjustColumnSizes, columns, defaultColumn.maxSize, defaultColumn.minSize]);
+  useResizeCallbackWrapper((0, import_react57.useCallback)(() => {
+    setColumnSizing((prev) => adjustColumnSizes(prev, prev));
+  }, [adjustColumnSizes]));
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
+    getPaginationRowModel: (0, import_react_table.getPaginationRowModel)(),
+    initialState,
+    defaultColumn,
+    columns,
+    state: {
+      ...state,
+      columnSizing,
+      columnOrder
+    },
+    filterFns: {
+      ...tableOptions?.filterFns,
+      text: TableFilter.text,
+      number: TableFilter.number,
+      date: TableFilter.date,
+      boolean: TableFilter.boolean,
+      tags: TableFilter.tags,
+      generic: TableFilter.generic
+    },
+    onColumnSizingChange: (updaterOrValue) => {
+      setColumnSizing((previous) => {
+        const newSizing = typeof updaterOrValue === "function" ? updaterOrValue(previous) : updaterOrValue;
+        return adjustColumnSizes(previous, newSizing);
+      });
+    },
+    onColumnOrderChange: (updaterOrValue) => {
+      setColumnOrder(updaterOrValue);
+      if (tableOptions.onColumnOrderChange) {
+        tableOptions.onColumnOrderChange(updaterOrValue);
+      }
+    },
+    autoResetPageIndex: false,
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+    ...tableOptions
+  });
+  const columnSizeVars = (0, import_react57.useMemo)(() => {
+    return ColumnSizeUtil.toSizeVars(columnSizing);
+  }, [columnSizing]);
+  const pagination = table.getState().pagination;
+  const rowSelection = table.getState().rowSelection;
+  const rows = table.getRowModel().rows;
+  const columnFilters = table.getState().columnFilters;
+  const columnVisibility = table.getState().columnVisibility;
+  const columnPinning = table.getState().columnPinning;
+  const columnSorting = table.getState().sorting;
+  const tableDataContextValue = (0, import_react57.useMemo)(() => ({
+    table,
+    columns,
+    data,
+    pagination,
+    rowSelection,
+    isUsingFillerRows,
+    fillerRow,
+    onRowClick,
+    rows,
+    columnOrder,
+    columnFilters,
+    columnVisibility,
+    columnPinning,
+    columnSorting
+  }), [table, data, pagination, rowSelection, isUsingFillerRows, fillerRow, onRowClick, columns, rows, columnOrder, columnFilters, columnVisibility, columnPinning, columnSorting]);
+  const tableColumnDefinitionContextValue = (0, import_react57.useMemo)(() => ({
+    table,
+    registerColumn
+  }), [table, registerColumn]);
+  const tableHeaderContextValue = (0, import_react57.useMemo)(() => ({
+    table,
+    sizeVars: columnSizeVars
+  }), [table, columnSizeVars]);
+  const tableContainerContextValue = (0, import_react57.useMemo)(() => ({
+    table,
+    containerRef
+  }), [table, containerRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TableDataContext.Provider, { value: tableDataContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TableColumnDefinitionContext.Provider, { value: tableColumnDefinitionContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TableHeaderContext.Provider, { value: tableHeaderContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TableContainerContext.Provider, { value: tableContainerContextValue, children }) }) }) });
 };
 
+// src/components/layout/table/TableBody.tsx
+var import_react_table2 = require("@tanstack/react-table");
+var import_react58 = __toESM(require("react"));
+var import_clsx26 = __toESM(require("clsx"));
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var TableBody = import_react58.default.memo(function TableBodyVisual() {
+  const { table, onRowClick, isUsingFillerRows, fillerRow, pagination, rows } = useTableDataContext();
+  const columns = table.getAllColumns();
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("tbody", { children: [
+    rows.map((row) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "tr",
+        {
+          onClick: () => onRowClick?.(row, table),
+          className: (0, import_clsx26.default)("table-body-row", BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original)),
+          children: row.getVisibleCells().map((cell) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("td", { className: (0, import_clsx26.default)("table-body-cell", cell.column.columnDef.meta?.className), children: (0, import_react_table2.flexRender)(
+              cell.column.columnDef.cell,
+              cell.getContext()
+            ) }, cell.id);
+          })
+        },
+        row.id
+      );
+    }),
+    isUsingFillerRows && range(pagination.pageSize - rows.length, { allowEmptyRange: true }).map((row, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("tr", { className: (0, import_clsx26.default)("table-body-filler-row"), children: columns.map((column) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("td", { className: (0, import_clsx26.default)("table-body-filler-cell", column.columnDef.meta?.className), children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FillerCell, {}) }, column.id);
+      }) }, "filler-row-" + index);
+    })
+  ] });
+});
+
+// src/components/layout/table/TableHeader.tsx
+var import_react_table3 = require("@tanstack/react-table");
+var import_clsx32 = __toESM(require("clsx"));
+
 // src/components/layout/table/TableSortButton.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_clsx27 = __toESM(require("clsx"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -13330,28 +13578,28 @@ var TableSortButton = ({
 }) => {
   const translation = useHightideTranslation();
   const { sortingsCount, index } = sortingIndexDisplay;
-  let icon = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react15.ChevronsUpDown, { className: "size-4" });
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react14.ChevronsUpDown, { className: "size-4" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react15.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react15.ChevronDown, { className: "size-4" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react14.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react14.ChevronDown, { className: "size-4" });
   }
   const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     Button,
     {
       layout: hasSortingIndex ? "default" : "icon",
       color,
       size,
-      className: (0, import_clsx25.default)("relative", className),
+      className: (0, import_clsx27.default)("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "div",
           {
-            className: (0, import_clsx25.default)("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
+            className: (0, import_clsx27.default)("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
             children: `${index}.`
           }
         ) }),
@@ -13362,13 +13610,13 @@ var TableSortButton = ({
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-var import_lucide_react19 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 var import_react67 = require("react");
 
 // src/components/user-interaction/input/DateTimeInput.tsx
 var import_react64 = require("react");
-var import_lucide_react17 = require("lucide-react");
-var import_clsx29 = __toESM(require("clsx"));
+var import_lucide_react16 = require("lucide-react");
+var import_clsx31 = __toESM(require("clsx"));
 
 // src/utils/date.ts
 var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
@@ -13541,11 +13789,11 @@ var DateUtils = {
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-var import_clsx28 = __toESM(require("clsx"));
+var import_clsx30 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/TimePicker.tsx
 var import_react59 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var TimePicker = ({
   value = /* @__PURE__ */ new Date(),
   onValueChange,
@@ -13593,10 +13841,10 @@ var TimePicker = ({
     onValueChange?.(newDate);
     onEditComplete?.(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { "data-name": "time-picker-container", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { "data-name": "time-picker-container", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
       const isSelected = hour2 === value.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
         {
           size: "sm",
@@ -13608,9 +13856,9 @@ var TimePicker = ({
         hour2
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
       const isSelected = minute === closestMinute;
-      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
         {
           size: "sm",
@@ -13622,8 +13870,8 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
-    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { "data-name": "time-picker-value-column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { "data-name": "time-picker-value-column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
         {
           size: "sm",
@@ -13632,7 +13880,7 @@ var TimePicker = ({
           children: "AM"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
         {
           size: "sm",
@@ -13650,7 +13898,7 @@ var TimePickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     TimePicker,
     {
       ...props,
@@ -13662,12 +13910,12 @@ var TimePickerUncontrolled = ({
 
 // src/components/user-interaction/date/DatePicker.tsx
 var import_react62 = require("react");
-var import_lucide_react16 = require("lucide-react");
-var import_clsx27 = __toESM(require("clsx"));
+var import_lucide_react15 = require("lucide-react");
+var import_clsx29 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/DayPicker.tsx
 var import_react60 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth,
   value,
@@ -13690,14 +13938,14 @@ var DayPicker = ({
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className, "data-name": "day-picker-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "day-picker-header-item", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className, "data-name": "day-picker-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { "data-name": "day-picker-header-item", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
       const isSelected = !!value && DateUtils.equalDate(value, date);
       const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "button",
         {
           disabled: !isDayValid,
@@ -13731,7 +13979,7 @@ var DayPickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     DayPicker,
     {
       value,
@@ -13743,8 +13991,8 @@ var DayPickerUncontrolled = ({
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
 var import_react61 = require("react");
-var import_clsx26 = __toESM(require("clsx"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_clsx28 = __toESM(require("clsx"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var YearRow = (0, import_react61.memo)(function YearRow2({
   year,
   selectedMonthIndex,
@@ -13762,22 +14010,22 @@ var YearRow = (0, import_react61.memo)(function YearRow2({
     }
   }, [isSelectedYear]);
   const monthGrid = (0, import_react61.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     ExpandableRoot,
     {
       ref: isSelectedYear ? ref : void 0,
       isExpanded,
       onExpandedChange: setIsExpanded,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ExpandableHeader, { className: (0, import_clsx26.default)("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ExpandableContent, { className: "gap-y-1 px-2 expandable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-row-1", children: group.map((month) => {
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ExpandableHeader, { className: (0, import_clsx28.default)("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ExpandableContent, { className: "gap-y-1 px-2 expandable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-1", children: group.map((month) => {
           const monthIndex = DateUtils.monthsList.indexOf(month);
           const currentTimestamp = new Date(year, monthIndex).getTime();
           const isAfterStart = minTimestamp === void 0 || currentTimestamp >= minTimestamp;
           const isBeforeEnd = maxTimestamp === void 0 || currentTimestamp <= maxTimestamp;
           const isValid = isAfterStart && isBeforeEnd;
           const isSelectedMonth = monthIndex === selectedMonthIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Button,
             {
               disabled: !isValid,
@@ -13834,17 +14082,17 @@ var YearMonthPicker = ({
     onValueChange2?.(newDate);
     onEditComplete2?.(newDate);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     InfiniteScroll,
     {
       itemCount: years.length,
-      className: (0, import_clsx26.default)("flex-col-1 h-full select-none", className),
+      className: (0, import_clsx28.default)("flex-col-1 h-full select-none", className),
       initialIndex: years.findIndex((year) => year === value.getFullYear()),
       children: (index) => {
         const year = years[index];
         const isSelectedYear = value.getFullYear() === year;
         const selectedMonthIndex = isSelectedYear ? value.getMonth() : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           YearRow,
           {
             year,
@@ -13866,7 +14114,7 @@ var YearMonthPickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     YearMonthPicker,
     {
       value,
@@ -13877,7 +14125,7 @@ var YearMonthPickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var DatePicker = ({
   value = /* @__PURE__ */ new Date(),
   start,
@@ -13893,25 +14141,25 @@ var DatePicker = ({
   const { locale } = useLocale();
   const [displayedMonth, setDisplayedMonth] = (0, import_react62.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
   const [displayMode, setDisplayMode] = (0, import_react62.useState)(initialDisplay);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: (0, import_clsx27.default)("flex-col-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: (0, import_clsx29.default)("flex-col-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
         Button,
         {
           size: "sm",
           coloringStyle: "text",
-          className: (0, import_clsx27.default)("flex-row-1 items-center cursor-pointer select-none", {
+          className: (0, import_clsx29.default)("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react16.ChevronDown, { size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react15.ChevronDown, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-2 justify-end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           Button,
           {
             size: "sm",
@@ -13922,10 +14170,10 @@ var DatePicker = ({
               onValueChange(newDate);
               setDisplayedMonth(newDate);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react16.Calendar, { className: "size-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react15.Calendar, { className: "size-5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           Button,
           {
             size: "sm",
@@ -13933,10 +14181,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react16.ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react15.ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           Button,
           {
             size: "sm",
@@ -13944,12 +14192,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react16.ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react15.ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -13966,7 +14214,7 @@ var DatePicker = ({
         },
         className: "h-60 max-h-60"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       DayPicker,
       {
         ...dayPickerProps,
@@ -13988,7 +14236,7 @@ var DatePickerUncontrolled = ({
   ...props
 }) => {
   const [date, setDate] = useOverwritableState(value, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     DatePicker,
     {
       ...props,
@@ -13999,7 +14247,7 @@ var DatePickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start,
@@ -14018,7 +14266,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -14034,27 +14282,27 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       TimePicker,
       {
         ...timePickerProps,
         is24HourFormat,
         minuteIncrement,
-        className: (0, import_clsx28.default)({ "justify-between": mode === "time" }),
+        className: (0, import_clsx30.default)({ "justify-between": mode === "time" }),
         value,
         onValueChange,
         onEditComplete
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
     dateDisplay,
     timeDisplay
   ] });
 };
 var DateTimePickerUncontrolled = ({ value: initialValue, onValueChange, ...props }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     DateTimePicker,
     {
       ...props,
@@ -14066,7 +14314,7 @@ var DateTimePickerUncontrolled = ({ value: initialValue, onValueChange, ...props
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
 var import_react63 = require("react");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var DateTimePickerDialog = ({
   defaultValue,
   value,
@@ -14089,8 +14337,8 @@ var DateTimePickerDialog = ({
   const initialValue = (0, import_react63.useMemo)(() => {
     return state;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "span",
       {
         id: labelId,
@@ -14098,7 +14346,7 @@ var DateTimePickerDialog = ({
         children: label ?? translation("sDateTimeSelect", { datetimeMode: mode })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       DateTimePicker,
       {
         ...pickerProps,
@@ -14108,8 +14356,8 @@ var DateTimePickerDialog = ({
         onEditComplete: setState
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex-row-2 justify-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Visibility, { isVisible: allowRemove && !!initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visibility, { isVisible: allowRemove && !!initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         Button,
         {
           size: "md",
@@ -14122,7 +14370,7 @@ var DateTimePickerDialog = ({
           children: translation("clear")
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Visibility, { isVisible: !initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visibility, { isVisible: !initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         Button,
         {
           size: "md",
@@ -14135,7 +14383,7 @@ var DateTimePickerDialog = ({
           children: translation("cancel")
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         Button,
         {
           size: "md",
@@ -14152,7 +14400,7 @@ var DateTimePickerDialog = ({
 };
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
   value,
   defaultValue = null,
@@ -14207,9 +14455,9 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
     }
   }, [changeOpenWrapper, readOnly, disabled]);
   const clickHandler = PropsUtil.aria.click(() => changeOpenWrapper(true));
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...containerProps, ref: innerRef, className: (0, import_clsx29.default)("relative w-full", containerProps?.className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { ...containerProps, ref: innerRef, className: (0, import_clsx31.default)("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "div",
         {
           ...props,
@@ -14226,7 +14474,7 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
           "aria-haspopup": "dialog",
           "aria-expanded": isOpen,
           "aria-controls": isOpen ? ids.popup : void 0,
-          className: (0, import_clsx29.default)(
+          className: (0, import_clsx31.default)(
             "pr-10 w-full flex-row-2 items-center justify-between h-10 px-3 rounded-md input-element",
             "outline-offset-0 outline-primary focus:outline-1 focus:outline-offset-1 focus:border-primary duration-(--animation-duration-in)",
             { "hover:cursor-pointer": !readOnly },
@@ -14235,7 +14483,7 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
           children: state ? DateUtils.formatAbsolute(state, locale, mode === "dateTime") : placeholder ?? translation("clickToSelect")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         Button,
         {
           coloringStyle: "text",
@@ -14251,11 +14499,11 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
           "aria-expanded": isOpen,
           "aria-controls": isOpen ? ids.popup : void 0,
           "aria-label": translation("sDateTimeSelect", { datetimeMode: mode }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react17.CalendarIcon, { className: "size-5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react16.CalendarIcon, { className: "size-5" })
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       PopUp,
       {
         ref: containerRef,
@@ -14275,7 +14523,7 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
         role: "dialog",
         "aria-labelledby": ids.label,
         className: "flex-col-2 p-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           DateTimePickerDialog,
           {
             value: dialogValue,
@@ -14298,235 +14546,18 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
 // src/components/layout/table/TableFilterPopups.tsx
 var import_react66 = require("react");
 
-// src/components/layout/table/TableFilter.ts
-var TableFilterOperator = {
-  text: ["textEquals", "textNotEquals", "textNotWhitespace", "textContains", "textNotContains", "textStartsWith", "textEndsWith"],
-  number: ["numberEquals", "numberNotEquals", "numberGreaterThan", "numberGreaterThanOrEqual", "numberLessThan", "numberLessThanOrEqual", "numberBetween", "numberNotBetween"],
-  date: ["dateEquals", "dateNotEquals", "dateGreaterThan", "dateGreaterThanOrEqual", "dateLessThan", "dateLessThanOrEqual", "dateBetween", "dateNotBetween"],
-  boolean: ["booleanIsTrue", "booleanIsFalse"],
-  tags: ["tagsEquals", "tagsNotEquals", "tagsContains", "tagsNotContains"],
-  generic: ["undefined", "notUndefined"]
-};
-function isTableFilterCategory(value) {
-  return typeof value === "string" && value in TableFilterOperator;
-}
-var textFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
-  const parameter = filterValue.parameter;
-  const operator = filterValue.operator;
-  if (operator === "textNotWhitespace") {
-    return value?.toString().trim().length > 0;
-  }
-  const searchText = (parameter.searchText ?? "").toLowerCase();
-  const cellText = value?.toString().toLowerCase() ?? "";
-  switch (operator) {
-    case "textEquals":
-      return cellText === searchText;
-    case "textNotEquals":
-      return cellText !== searchText;
-    case "textContains":
-      return cellText.includes(searchText);
-    case "textNotContains":
-      return !cellText.includes(searchText);
-    case "textStartsWith":
-      return cellText.startsWith(searchText);
-    case "textEndsWith":
-      return cellText.endsWith(searchText);
-    case "undefined":
-      return value === void 0 || value === null;
-    case "notUndefined":
-      return value !== void 0 && value !== null;
-    default:
-      return false;
-  }
-};
-var numberFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
-  const parameter = filterValue.parameter;
-  const operator = filterValue.operator;
-  switch (operator) {
-    case "numberEquals":
-      return value === parameter.compareValue;
-    case "numberNotEquals":
-      return value !== parameter.compareValue;
-    case "numberGreaterThan":
-      return value > (parameter.compareValue ?? 0);
-    case "numberGreaterThanOrEqual":
-      return value >= (parameter.compareValue ?? 0);
-    case "numberLessThan":
-      return value < (parameter.compareValue ?? 0);
-    case "numberLessThanOrEqual":
-      return value <= (parameter.compareValue ?? 0);
-    case "numberBetween":
-      return value >= (parameter.min ?? -Infinity) && value <= (parameter.max ?? Infinity);
-    case "numberNotBetween":
-      return value < (parameter.min ?? -Infinity) || value > (parameter.max ?? Infinity);
-    case "undefined":
-      return value === void 0 || value === null;
-    case "notUndefined":
-      return value !== void 0 && value !== null;
-    default:
-      return false;
-  }
-};
-var dateFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
-  const parameter = filterValue.parameter;
-  const operator = filterValue.operator;
-  const parseDate = (dateValue) => {
-    if (!dateValue) return null;
-    if (dateValue instanceof Date) return dateValue;
-    if (typeof dateValue === "string" || typeof dateValue === "number") {
-      const parsed = new Date(dateValue);
-      return isNaN(parsed.getTime()) ? null : parsed;
-    }
-    return null;
-  };
-  const normalizeToDateOnly = (date2) => {
-    const normalized = new Date(date2);
-    normalized.setHours(0, 0, 0, 0);
-    return normalized;
-  };
-  const date = parseDate(value);
-  if (!date && !TableFilterOperator.generic.some((o) => o === operator)) return false;
-  const normalizedDate = date ? normalizeToDateOnly(date) : null;
-  switch (operator) {
-    case "dateEquals": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate.getTime() === normalizeToDateOnly(filterDate).getTime();
-    }
-    case "dateNotEquals": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate.getTime() !== normalizeToDateOnly(filterDate).getTime();
-    }
-    case "dateGreaterThan": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate > normalizeToDateOnly(filterDate);
-    }
-    case "dateGreaterThanOrEqual": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate >= normalizeToDateOnly(filterDate);
-    }
-    case "dateLessThan": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate < normalizeToDateOnly(filterDate);
-    }
-    case "dateLessThanOrEqual": {
-      const filterDate = parseDate(parameter.compareDate);
-      if (!filterDate || !normalizedDate) return false;
-      return normalizedDate <= normalizeToDateOnly(filterDate);
-    }
-    case "dateBetween": {
-      const minDate = parseDate(parameter.min);
-      const maxDate = parseDate(parameter.max);
-      if (!minDate || !maxDate || !normalizedDate) return false;
-      return normalizedDate >= normalizeToDateOnly(minDate) && normalizedDate <= normalizeToDateOnly(maxDate);
-    }
-    case "dateNotBetween": {
-      const minDate = parseDate(parameter.min);
-      const maxDate = parseDate(parameter.max);
-      if (!minDate || !maxDate || !normalizedDate) return false;
-      return normalizedDate < normalizeToDateOnly(minDate) || normalizedDate > normalizeToDateOnly(maxDate);
-    }
-    case "undefined":
-      return value === void 0 || value === null;
-    case "notUndefined":
-      return value !== void 0 && value !== null;
-    default:
-      return false;
-  }
-};
-var booleanFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
-  const operator = filterValue.operator;
-  switch (operator) {
-    case "booleanIsTrue":
-      return value === true;
-    case "booleanIsFalse":
-      return value === false;
-    case "undefined":
-      return value === void 0 || value === null;
-    case "notUndefined":
-      return value !== void 0 && value !== null;
-    default:
-      return false;
-  }
-};
-var tagsFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
-  const parameter = filterValue.parameter;
-  const operator = filterValue.operator;
-  switch (operator) {
-    case "tagsEquals": {
-      if (!Array.isArray(value) || !Array.isArray(parameter.searchTags)) return false;
-      if (value.length !== parameter.searchTags.length) return false;
-      const valueSet = new Set(value);
-      const searchTagsSet = new Set(parameter.searchTags);
-      if (valueSet.size !== searchTagsSet.size) return false;
-      return Array.from(valueSet).every((tag) => searchTagsSet.has(tag));
-    }
-    case "tagsNotEquals": {
-      if (!Array.isArray(value) || !Array.isArray(parameter.searchTags)) return true;
-      if (value.length !== parameter.searchTags.length) return true;
-      const valueSet = new Set(value);
-      const searchTagsSet = new Set(parameter.searchTags);
-      if (valueSet.size !== searchTagsSet.size) return true;
-      return !Array.from(valueSet).every((tag) => searchTagsSet.has(tag));
-    }
-    case "tagsContains": {
-      if (!Array.isArray(value) || !Array.isArray(parameter.searchTags)) return false;
-      return parameter.searchTags.every((tag) => value.includes(tag));
-    }
-    case "tagsNotContains": {
-      if (!Array.isArray(value) || !Array.isArray(parameter.searchTags)) return true;
-      return !parameter.searchTags.every((tag) => value.includes(tag));
-    }
-    case "undefined":
-      return value === void 0 || value === null;
-    case "notUndefined":
-      return value !== void 0 && value !== null;
-    default:
-      return false;
-  }
-};
-var genericFilter = (row, columnId, filterValue) => {
-  const value = row.getValue(columnId);
-  const operator = filterValue.operator;
-  switch (operator) {
-    case "undefined":
-      return value === void 0 || value === null;
-    case "notUndefined":
-      return value !== void 0 && value !== null;
-    default:
-      return false;
-  }
-};
-var TableFilter = {
-  text: textFilter,
-  number: numberFilter,
-  date: dateFilter,
-  boolean: booleanFilter,
-  tags: tagsFilter,
-  generic: genericFilter
-};
-
 // src/components/user-interaction/select/MultiSelect.tsx
 var import_react65 = require("react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var MultiSelect = (0, import_react65.forwardRef)(function MultiSelect2({
   children,
   contentPanelProps,
   buttonProps,
   ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(MultiSelectRoot, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MultiSelectButton, { ref, ...buttonProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MultiSelectContent, { ...contentPanelProps, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MultiSelectButton, { ref, ...buttonProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MultiSelectContent, { ...contentPanelProps, children })
   ] });
 });
 var MultiSelectUncontrolled = (0, import_react65.forwardRef)(function MultiSelectUncontrolled2({
@@ -14535,7 +14566,7 @@ var MultiSelectUncontrolled = (0, import_react65.forwardRef)(function MultiSelec
   ...props
 }, ref) {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     MultiSelect,
     {
       ...props,
@@ -14547,120 +14578,120 @@ var MultiSelectUncontrolled = (0, import_react65.forwardRef)(function MultiSelec
 });
 
 // src/components/layout/table/TableFilterPopups.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var getOperatorInfo = (operator) => {
   switch (operator) {
     case "textEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "textNotEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "textNotWhitespace":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.TextInitial, { className: "w-4 h-4" }), translationKey: "filterNonWhitespace" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.TextInitial, { className: "w-4 h-4" }), translationKey: "filterNonWhitespace" };
     case "textContains":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
     case "textNotContains":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
     case "textStartsWith":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ArrowRight, { className: "w-4 h-4" }), translationKey: "startsWith" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ArrowRight, { className: "w-4 h-4" }), translationKey: "startsWith" };
     case "textEndsWith":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ArrowLeft, { className: "w-4 h-4" }), translationKey: "endsWith" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ArrowLeft, { className: "w-4 h-4" }), translationKey: "endsWith" };
     case "numberEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "numberNotEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "numberGreaterThan":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }), translationKey: "greaterThan" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }), translationKey: "greaterThan" };
     case "numberGreaterThanOrEqual":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "greaterThanOrEqual"
       };
     case "numberLessThan":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }), translationKey: "lessThan" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }), translationKey: "lessThan" };
     case "numberLessThanOrEqual":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "lessThanOrEqual"
       };
     case "numberBetween":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "between"
       };
     case "numberNotBetween":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "notBetween"
       };
     case "dateEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "dateNotEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "dateGreaterThan":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }), translationKey: "after" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }), translationKey: "after" };
     case "dateGreaterThanOrEqual":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "onOrAfter"
       };
     case "dateLessThan":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }), translationKey: "before" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }), translationKey: "before" };
     case "dateLessThanOrEqual":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "onOrBefore"
       };
     case "dateBetween":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "between"
       };
     case "dateNotBetween":
       return {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-0 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.ChevronRight, { className: "-ml-1 w-4 h-4" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-0 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.ChevronRight, { className: "-ml-1 w-4 h-4" })
         ] }),
         translationKey: "notBetween"
       };
     case "booleanIsTrue":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.CheckCircle2, { className: "w-4 h-4" }), translationKey: "isTrue" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.CheckCircle2, { className: "w-4 h-4" }), translationKey: "isTrue" };
     case "booleanIsFalse":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.XCircle, { className: "w-4 h-4" }), translationKey: "isFalse" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.XCircle, { className: "w-4 h-4" }), translationKey: "isFalse" };
     case "tagsEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.Equal, { className: "w-4 h-4" }), translationKey: "equals" };
     case "tagsNotEquals":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.EqualNot, { className: "w-4 h-4" }), translationKey: "notEquals" };
     case "tagsContains":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.SearchCheck, { className: "w-4 h-4" }), translationKey: "contains" };
     case "tagsNotContains":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.SearchX, { className: "w-4 h-4" }), translationKey: "notContains" };
     case "undefined":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.CircleDashed, { className: "w-4 h-4" }), translationKey: "filterUndefined" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.CircleDashed, { className: "w-4 h-4" }), translationKey: "filterUndefined" };
     case "notUndefined":
-      return { icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.CircleDot, { className: "w-4 h-4" }), translationKey: "filterNotUndefined" };
+      return { icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react17.CircleDot, { className: "w-4 h-4" }), translationKey: "filterNotUndefined" };
     default:
       return { icon: null, translationKey: "undefined translation" };
   }
@@ -14669,7 +14700,7 @@ var OperatorLabel = ({ operator }) => {
   const translation = useHightideTranslation();
   const { icon, translationKey } = getOperatorInfo(operator);
   const label = typeof translationKey === "string" ? translation(translationKey) : translationKey;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-1 items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-row-1 items-center gap-2", children: [
     icon,
     label
   ] });
@@ -14683,8 +14714,8 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
     ...TableFilterOperator.generic
   ], []);
   const needsParameterInput = !["textNotWhitespace", "undefined", "notUndefined"].includes(operator);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Select,
       {
         value: operator,
@@ -14695,11 +14726,11 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Input,
       {
         value: parameter.searchText ?? "",
@@ -14713,7 +14744,7 @@ var TextFilter = ({ filterValue, onFilterValueChange }) => {
         className: "min-w-64"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-description h-10", children: translation("noParameterRequired") }) })
   ] });
 };
 var NumberFilter = ({ filterValue, onFilterValueChange }) => {
@@ -14726,8 +14757,8 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
   ], []);
   const needsRangeInput = operator === "numberBetween" || operator === "numberNotBetween";
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Select,
       {
         value: operator,
@@ -14738,12 +14769,12 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormFieldLayout, { label: translation("min"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FormFieldLayout, { label: translation("min"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         Input,
         {
           ...ariaAttributes,
@@ -14762,7 +14793,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
           className: "input-indicator-hidden min-w-64"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormFieldLayout, { label: translation("max"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FormFieldLayout, { label: translation("max"), children: ({ ariaAttributes, interactionStates, id }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         Input,
         {
           ...ariaAttributes,
@@ -14782,7 +14813,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Input,
       {
         value: parameter.compareValue?.toString() ?? "",
@@ -14798,7 +14829,7 @@ var NumberFilter = ({ filterValue, onFilterValueChange }) => {
         className: "min-w-64"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var DateFilter = ({ filterValue, onFilterValueChange }) => {
@@ -14813,8 +14844,8 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
   ], []);
   const needsRangeInput = operator === "dateBetween" || operator === "dateNotBetween";
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Select,
       {
         value: operator,
@@ -14825,12 +14856,12 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: needsRangeInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         DateTimeInput,
         {
           value: temporaryMinDateValue ?? parameter.min ?? null,
@@ -14863,7 +14894,7 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
           className: "min-w-64"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         DateTimeInput,
         {
           value: temporaryMaxDateValue ?? parameter.max ?? null,
@@ -14896,7 +14927,7 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsRangeInput && needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       DateTimeInput,
       {
         value: parameter.compareDate ?? null,
@@ -14912,7 +14943,7 @@ var DateFilter = ({ filterValue, onFilterValueChange }) => {
         className: "min-w-64"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
@@ -14921,7 +14952,7 @@ var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
     ...TableFilterOperator.boolean,
     ...TableFilterOperator.generic
   ], []);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     Select,
     {
       value: operator,
@@ -14932,13 +14963,13 @@ var BooleanFilter = ({ filterValue, onFilterValueChange }) => {
         });
       },
       buttonProps: { className: "min-w-64" },
-      children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
+      children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
     }
   ) });
 };
 var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
   const translation = useHightideTranslation();
-  const { table } = useTableBodyContext();
+  const { table } = useTableDataContext();
   const operator = filterValue?.operator ?? "tagsContains";
   const parameter = filterValue?.parameter ?? {};
   const availableOperators = (0, import_react66.useMemo)(() => [
@@ -14954,8 +14985,8 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
     return null;
   }
   const needsParameterInput = operator !== "undefined" && operator !== "notUndefined";
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-2 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex-col-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Select,
       {
         value: operator,
@@ -14966,11 +14997,11 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
+        children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "typography-label-lg font-semibold", children: translation("parameter") }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       MultiSelectUncontrolled,
       {
         value: Array.isArray(parameter.searchTags) ? parameter.searchTags.map((tag) => String(tag)) : [],
@@ -14981,10 +15012,10 @@ var TagsFilter = ({ columnId, filterValue, onFilterValueChange }) => {
           });
         },
         buttonProps: { className: "min-w-64" },
-        children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(MultiSelectOption, { value: tag, children: label }, tag))
+        children: availableTags.map(({ tag, label }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MultiSelectOption, { value: tag, children: label }, tag))
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visibility, { isVisible: !needsParameterInput, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm text-description", children: translation("noParameterRequired") }) })
   ] });
 };
 var GenericFilter = ({ filterValue, onFilterValueChange }) => {
@@ -14992,7 +15023,7 @@ var GenericFilter = ({ filterValue, onFilterValueChange }) => {
   const availableOperators = (0, import_react66.useMemo)(() => [
     ...TableFilterOperator.generic
   ], []);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-col-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     Select,
     {
       value: operator,
@@ -15003,31 +15034,31 @@ var GenericFilter = ({ filterValue, onFilterValueChange }) => {
         });
       },
       buttonProps: { className: "min-w-64" },
-      children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(OperatorLabel, { operator: op }) }, op))
+      children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectOption, { value: op, iconAppearance: "right", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(OperatorLabel, { operator: op }) }, op))
     }
   ) });
 };
 var TableFilterContent = ({ filterType, ...props }) => {
   switch (filterType) {
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TextFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TextFilter, { ...props });
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(NumberFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NumberFilter, { ...props });
     case "date":
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DateFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DateFilter, { ...props });
     case "boolean":
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BooleanFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BooleanFilter, { ...props });
     case "tags":
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TagsFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TagsFilter, { ...props });
     case "generic":
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(GenericFilter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(GenericFilter, { ...props });
     default:
       return null;
   }
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
   column
@@ -15051,8 +15082,8 @@ var TableFilterButton = ({
   if (filterType === "tags" && (!column.columnDef.meta?.filterData?.tags?.length || column.columnDef.meta.filterData.tags.length === 0)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
       Button,
       {
         ref: anchorRef,
@@ -15068,12 +15099,12 @@ var TableFilterButton = ({
         "aria-labelledby": ids.label,
         className: "relative",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react19.FilterIcon, { className: "size-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.FilterIcon, { className: "size-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: hasFilter, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
       PopUp,
       {
         ref: containerRef,
@@ -15089,8 +15120,8 @@ var TableFilterButton = ({
         "aria-labelledby": ids.label,
         className: "flex-col-2 p-2 items-start",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { id: ids.label, className: "typography-label-lg font-semibold", children: translation("filter") }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { id: ids.label, className: "typography-label-lg font-semibold", children: translation("filter") }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             TableFilterContent,
             {
               columnId: column.id,
@@ -15099,12 +15130,12 @@ var TableFilterButton = ({
               onFilterValueChange: setFilterValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-            hasFilter && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { color: "negative", size: "sm", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+            hasFilter && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { color: "negative", size: "sm", onClick: () => {
               column.setFilterValue(void 0);
               setIsOpen(false);
             }, children: translation("remove") }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { size: "sm", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { size: "sm", onClick: () => {
               if (filterValue) {
                 column.setFilterValue(filterValue);
               }
@@ -15119,8 +15150,8 @@ var TableFilterButton = ({
 
 // src/components/layout/table/TableHeader.tsx
 var import_react68 = require("react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var TableHeader = ({ table: tableOverride }) => {
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var TableHeader = ({ table: tableOverride, isSticky = false }) => {
   const { table: tableState } = useTableHeaderContext();
   const table = tableOverride ?? tableState;
   const handleResizeMove = (0, import_react68.useCallback)((e) => {
@@ -15165,8 +15196,8 @@ var TableHeader = ({ table: tableOverride }) => {
       window.removeEventListener("pointerup", handleResizeEnd);
     };
   }, [handleResizeEnd, handleResizeMove, table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "col",
       {
         style: {
@@ -15177,16 +15208,16 @@ var TableHeader = ({ table: tableOverride }) => {
       },
       header.id
     )) }, headerGroup.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("tr", { "data-name": PropsUtil.dataAttributes.name("table-header-row"), className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { className: (0, import_clsx32.default)("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
         "th",
         {
           colSpan: header.colSpan,
-          "data-name": PropsUtil.dataAttributes.name("table-header-cell"),
-          className: (0, import_clsx30.default)("group/table-header-cell", header.column.columnDef.meta?.className),
+          "data-sticky": isSticky ? "" : void 0,
+          className: (0, import_clsx32.default)("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-row-1 items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-1 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                 TableSortButton,
                 {
                   sortDirection: header.column.getIsSorted(),
@@ -15212,19 +15243,19 @@ var TableHeader = ({ table: tableOverride }) => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: header.column.getCanFilter() && isTableFilterCategory(header.column.columnDef.filterFn), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: header.column.getCanFilter() && isTableFilterCategory(header.column.columnDef.filterFn), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                 TableFilterButton,
                 {
                   column: header.column,
                   filterType: header.column.columnDef.filterFn
                 }
               ) }),
-              (0, import_react_table2.flexRender)(
+              (0, import_react_table3.flexRender)(
                 header.column.columnDef.header,
                 header.getContext()
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               "div",
               {
                 onPointerDown: (e) => {
@@ -15255,336 +15286,88 @@ var TableHeader = ({ table: tableOverride }) => {
 };
 
 // src/components/layout/table/TableDisplay.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_clsx33 = __toESM(require("clsx"));
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var TableDisplay = ({
   children,
   containerProps,
+  tableHeaderProps,
   ...props
 }) => {
-  const { table } = useTableBodyContext();
+  const { table } = useTableDataContext();
   const { containerRef } = useTableContainerContext();
   const { sizeVars } = useTableHeaderContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...containerProps, ref: containerRef, "data-name": PropsUtil.dataAttributes.name("table-container"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ...containerProps, ref: containerRef, className: (0, import_clsx33.default)("table-container", containerProps?.className), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "table",
     {
       ...props,
-      "data-name": PropsUtil.dataAttributes.name("table"),
+      className: (0, import_clsx33.default)("table", props.className),
       style: {
         ...sizeVars,
         width: Math.floor(Math.max(table.getTotalSize(), containerRef.current?.offsetWidth ?? table.getTotalSize()))
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TableHeader, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TableBody, {})
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TableHeader, { ...tableHeaderProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TableBody, {})
       ]
-    }
-  ) });
-};
-
-// src/components/layout/table/TablePagination.tsx
-var import_react69 = require("react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var TablePagination = () => {
-  const { table } = useTableBodyContext();
-  (0, import_react69.useEffect)(() => {
-    const { pageIndex } = table.getState().pagination;
-    const pageCount = table.getPageCount();
-    if (pageIndex >= pageCount || pageIndex < 0) {
-      table.setPageIndex(MathUtil.clamp(pageIndex, [0, pageCount - 1]));
-    }
-  }, [table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    Pagination,
-    {
-      pageIndex: table.getState().pagination.pageIndex,
-      pageCount: table.getPageCount(),
-      onPageIndexChanged: (page) => table.setPageIndex(page)
-    }
-  );
-};
-var defaultPageSizeOptions = [10, 25, 50, 100];
-var TablePageSizeController = ({
-  pageSizeOptions = defaultPageSizeOptions,
-  ...props
-}) => {
-  const { table } = useTableBodyContext();
-  const currentPageSize = table.getState().pagination.pageSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    Select,
-    {
-      ...props,
-      value: currentPageSize.toString(),
-      onValueChange: (value) => table.setPageSize(Number(value)),
-      children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SelectOption, { value: size.toString(), children: size }, size))
-    }
-  );
-};
-
-// src/components/layout/table/TableProvider.tsx
-var import_react71 = require("react");
-
-// src/components/layout/table/columnSizeUtil.ts
-var calculate = ({
-  previousSizing,
-  newSizing,
-  columnIds,
-  target,
-  minWidthsPerColumn,
-  maxWidthsPerColumn
-}) => {
-  if (columnIds.length === 0) {
-    return {};
-  }
-  const deltas = {};
-  const removedColumns = Object.keys(newSizing).filter((columnId) => !columnIds.includes(columnId));
-  for (const columnId of removedColumns) {
-    delete newSizing[columnId];
-  }
-  for (const columnId of columnIds) {
-    if (!newSizing[columnId]) {
-      newSizing[columnId] = 0;
-      continue;
-    }
-    const delta = (newSizing[columnId] ?? 0) - (previousSizing[columnId] ?? 0);
-    if (delta !== 0) {
-      deltas[columnId] = delta;
-    }
-  }
-  const minWidth = Object.values(minWidthsPerColumn).reduce((previousValue, currentValue) => previousValue + currentValue, 0);
-  const maxWidth = maxWidthsPerColumn ? Object.values(maxWidthsPerColumn).reduce((previousValue, currentValue) => previousValue + currentValue, 0) : Infinity;
-  if (minWidth > maxWidth) {
-    throw new Error("Min width is greater than max width");
-  }
-  const hasTargetWidth = target?.width !== void 0;
-  const result = {
-    ...newSizing
-  };
-  for (const columnId of columnIds) {
-    result[columnId] = MathUtil.clamp(result[columnId], [minWidthsPerColumn[columnId], maxWidthsPerColumn?.[columnId] ?? Infinity]);
-  }
-  if (!hasTargetWidth) {
-    return result;
-  }
-  let targetWidth = target?.width ?? -1;
-  if (hasTargetWidth) {
-    switch (target?.behaviour) {
-      case "equalOrHigher":
-        targetWidth = Math.max(target.width, minWidth);
-        break;
-    }
-  }
-  const resultWidth = Object.values(result).reduce((previousValue, currentValue) => previousValue + currentValue, 0);
-  if (resultWidth == targetWidth) {
-    return result;
-  } else if (resultWidth < targetWidth) {
-    const widthToGive = targetWidth - resultWidth;
-    const lastColumnId = columnIds[columnIds.length - 1];
-    result[lastColumnId] += widthToGive;
-    return result;
-  } else {
-    const widthToTake = resultWidth - targetWidth;
-    const lastColumnId = columnIds[columnIds.length - 1];
-    const isLastColumnChanging = Object.keys(deltas).find((columnId) => columnId === lastColumnId) !== void 0;
-    if (isLastColumnChanging) {
-      return result;
-    } else {
-      result[lastColumnId] -= Math.max(widthToTake, minWidthsPerColumn[lastColumnId]);
-      return result;
-    }
-  }
-};
-var toSizeVars = (sizing) => {
-  return Object.entries(sizing).reduce((previousValue, [columnId, size]) => {
-    return {
-      ...previousValue,
-      [`--header-${columnId}-size`]: size
-    };
-  }, {});
-};
-var ColumnSizeUtil = {
-  calculate,
-  toSizeVars
-};
-
-// src/components/layout/table/TableProvider.tsx
-var import_react_table3 = require("@tanstack/react-table");
-
-// src/hooks/useResizeCallbackWrapper.ts
-var import_react70 = require("react");
-var useResizeCallbackWrapper = (callback) => {
-  (0, import_react70.useEffect)(() => {
-    window.addEventListener("resize", callback);
-    return () => {
-      window.removeEventListener("resize", callback);
-    };
-  }, [callback]);
-};
-
-// src/components/layout/table/TableProvider.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var TableProvider = ({
-  data,
-  isUsingFillerRows = true,
-  fillerRow,
-  initialState,
-  onRowClick,
-  defaultColumn: defaultColumnOverwrite,
-  state,
-  columns: columnsProp,
-  children,
-  ...tableOptions
-}) => {
-  const [registeredColumns, setRegisteredColumns] = (0, import_react71.useState)([]);
-  const containerRef = (0, import_react71.useRef)(null);
-  const registerColumn = (0, import_react71.useCallback)((column) => {
-    setRegisteredColumns((prev) => {
-      return [...prev, column];
-    });
-    return () => {
-      setRegisteredColumns((prev) => {
-        return prev.filter((value) => value.id !== column.id);
-      });
-    };
-  }, []);
-  const columns = (0, import_react71.useMemo)(() => {
-    const contextColumns = Array.from(registeredColumns.values());
-    if (columnsProp) {
-      return [...contextColumns, ...columnsProp];
-    }
-    return contextColumns;
-  }, [columnsProp, registeredColumns]);
-  const defaultColumn = (0, import_react71.useMemo)(() => {
-    return {
-      minSize: 60,
-      maxSize: 800,
-      cell: ({ cell }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TableCell, { children: String(cell.getValue()) });
-      },
-      enableResizing: true,
-      enablePinning: true,
-      ...defaultColumnOverwrite
-    };
-  }, [defaultColumnOverwrite]);
-  const [columnSizing, setColumnSizing] = (0, import_react71.useState)(columns.reduce((previousValue, currentValue) => {
-    return {
-      ...previousValue,
-      [currentValue.id]: currentValue.size ?? defaultColumn.size ?? currentValue.minSize ?? defaultColumn.minSize
-    };
-  }, {}));
-  const [columnOrder, setColumnOrder] = (0, import_react71.useState)(state?.columnOrder ?? initialState?.columnOrder ?? []);
-  (0, import_react71.useEffect)(() => {
-    setColumnOrder((prev) => {
-      const columnIds = columns.map((column) => column.id);
-      const newColumnIds = columnIds.filter((columnId) => !prev.includes(columnId));
-      const withoutRemovedColumns = prev.filter((columnId) => !columnIds.includes(columnId));
-      return [...withoutRemovedColumns, ...newColumnIds];
-    });
-  }, [columns]);
-  const adjustColumnSizes = (0, import_react71.useCallback)((previousSizing, newSizing) => {
-    return ColumnSizeUtil.calculate({
-      previousSizing,
-      newSizing,
-      minWidthsPerColumn: columns.reduce((previousValue, currentValue) => {
-        return {
-          ...previousValue,
-          [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
-        };
-      }, {}),
-      maxWidthsPerColumn: columns.reduce((previousValue, currentValue) => {
-        return {
-          ...previousValue,
-          [currentValue.id]: currentValue.maxSize ?? defaultColumn.maxSize
-        };
-      }, {}),
-      columnIds: columns.map((column) => column.id),
-      target: {
-        width: Math.floor(containerRef.current?.getBoundingClientRect().width ?? 0),
-        behaviour: "equalOrHigher"
-      }
-    });
-  }, [columns, defaultColumn.maxSize, defaultColumn.minSize]);
-  (0, import_react71.useEffect)(() => {
-    setColumnSizing((prev) => adjustColumnSizes(prev, prev));
-  }, [adjustColumnSizes, columns, defaultColumn.maxSize, defaultColumn.minSize]);
-  useResizeCallbackWrapper((0, import_react71.useCallback)(() => {
-    setColumnSizing((prev) => adjustColumnSizes(prev, prev));
-  }, [adjustColumnSizes]));
-  const table = (0, import_react_table3.useReactTable)({
-    data,
-    getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
-    getFilteredRowModel: (0, import_react_table3.getFilteredRowModel)(),
-    getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
-    getPaginationRowModel: (0, import_react_table3.getPaginationRowModel)(),
-    initialState,
-    defaultColumn,
-    columns,
-    state: {
-      ...state,
-      columnSizing,
-      columnOrder
-    },
-    filterFns: {
-      ...tableOptions?.filterFns,
-      text: TableFilter.text,
-      number: TableFilter.number,
-      date: TableFilter.date,
-      boolean: TableFilter.boolean,
-      tags: TableFilter.tags,
-      generic: TableFilter.generic
-    },
-    onColumnSizingChange: (updaterOrValue) => {
-      setColumnSizing((previous) => {
-        const newSizing = typeof updaterOrValue === "function" ? updaterOrValue(previous) : updaterOrValue;
-        return adjustColumnSizes(previous, newSizing);
-      });
-    },
-    onColumnOrderChange: (updaterOrValue) => {
-      setColumnOrder(updaterOrValue);
-      if (tableOptions.onColumnOrderChange) {
-        tableOptions.onColumnOrderChange(updaterOrValue);
-      }
-    },
-    autoResetPageIndex: false,
-    enableColumnResizing: true,
-    columnResizeMode: "onChange",
-    ...tableOptions
-  });
-  const columnSizeVars = (0, import_react71.useMemo)(() => {
-    return ColumnSizeUtil.toSizeVars(columnSizing);
-  }, [columnSizing]);
-  const pagination = table.getState().pagination;
-  const tableBodyContextValue = (0, import_react71.useMemo)(() => ({
-    table,
-    columns,
-    data,
-    pagination,
-    isUsingFillerRows,
-    fillerRow,
-    onRowClick
-  }), [table, data, pagination, isUsingFillerRows, fillerRow, onRowClick, columns]);
-  const tableColumnDefinitionContextValue = (0, import_react71.useMemo)(() => ({
-    table,
-    registerColumn
-  }), [table, registerColumn]);
-  const tableHeaderContextValue = (0, import_react71.useMemo)(() => ({
-    table,
-    sizeVars: columnSizeVars
-  }), [table, columnSizeVars]);
-  const tableContainerContextValue = (0, import_react71.useMemo)(() => ({
-    table,
-    containerRef
-  }), [table, containerRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TableBodyContext.Provider, { value: tableBodyContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TableColumnDefinitionContext.Provider, { value: tableColumnDefinitionContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TableHeaderContext.Provider, { value: tableHeaderContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TableContainerContext.Provider, { value: tableContainerContextValue, children }) }) }) });
+    }
+  ) });
+};
+
+// src/components/layout/table/TablePagination.tsx
+var import_react69 = require("react");
+var import_clsx34 = __toESM(require("clsx"));
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var TablePaginationMenu = () => {
+  const { table } = useTableDataContext();
+  (0, import_react69.useEffect)(() => {
+    const { pageIndex } = table.getState().pagination;
+    const pageCount = table.getPageCount();
+    if (pageIndex >= pageCount || pageIndex < 0) {
+      table.setPageIndex(MathUtil.clamp(pageIndex, [0, pageCount - 1]));
+    }
+  }, [table]);
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    Pagination,
+    {
+      pageIndex: table.getState().pagination.pageIndex,
+      pageCount: table.getPageCount(),
+      onPageIndexChanged: (page) => table.setPageIndex(page)
+    }
+  );
+};
+var defaultPageSizeOptions = [10, 25, 50, 100];
+var TablePageSizeSelect = ({
+  pageSizeOptions = defaultPageSizeOptions,
+  ...props
+}) => {
+  const { table } = useTableDataContext();
+  const currentPageSize = table.getState().pagination.pageSize;
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    Select,
+    {
+      ...props,
+      value: currentPageSize.toString(),
+      onValueChange: (value) => table.setPageSize(Number(value)),
+      children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectOption, { value: size.toString(), children: size }, size))
+    }
+  );
+};
+var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...props, className: (0, import_clsx34.default)("flex-row-2 items-center justify-center", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TablePaginationMenu, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "absolute left-1/1 top-1/2 -translate-y-1/2 translate-x-4 h-10 min-w-24" } }) })
+  ] }) });
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 
 // src/components/user-interaction/Checkbox.tsx
-var import_lucide_react20 = require("lucide-react");
-var import_react72 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_react70 = require("react");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var Checkbox = ({
   value = false,
   indeterminate = false,
@@ -15598,11 +15381,11 @@ var Checkbox = ({
   alwaysShowCheckIcon = false,
   ...props
 }) => {
-  const onChangeWrapper = (0, import_react72.useCallback)(() => {
+  const onChangeWrapper = (0, import_react70.useCallback)(() => {
     onValueChange?.(!value);
     onEditComplete?.(!value);
   }, [onEditComplete, onValueChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
       ...props,
@@ -15629,122 +15412,444 @@ var Checkbox = ({
       "aria-checked": indeterminate ? "mixed" : value,
       ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react20.Minus, { "data-name": "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react20.Check, { "data-name": "checkbox-indicator", "aria-hidden": true }) })
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react19.Minus, { "data-name": "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react19.Check, { "data-name": "checkbox-indicator", "aria-hidden": true }) })
       ]
     }
-  );
-};
-var CheckboxUncontrolled = ({
-  value: initialValue,
-  onValueChange,
-  ...props
-}) => {
-  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-    Checkbox,
-    {
-      ...props,
-      value,
-      onValueChange: setValue
+  );
+};
+var CheckboxUncontrolled = ({
+  value: initialValue,
+  onValueChange,
+  ...props
+}) => {
+  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    Checkbox,
+    {
+      ...props,
+      value,
+      onValueChange: setValue
+    }
+  );
+};
+
+// src/components/layout/table/TableWithSelectionProvider.tsx
+var import_react71 = require("react");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var TableWithSelectionProvider = ({
+  children,
+  state,
+  fillerRow,
+  rowSelection,
+  disableClickRowClickSelection = false,
+  selectionRowId = "selection",
+  onRowClick,
+  meta,
+  ...props
+}) => {
+  const columnDef = (0, import_react71.useMemo)(() => [
+    {
+      id: selectionRowId,
+      header: ({ table }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          Checkbox,
+          {
+            value: table.getIsAllRowsSelected(),
+            indeterminate: table.getIsSomeRowsSelected(),
+            onValueChange: (value) => {
+              const newValue = !!value;
+              table.toggleAllRowsSelected(newValue);
+            }
+          }
+        );
+      },
+      cell: ({ row }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Checkbox, { disabled: !row.getCanSelect(), value: row.getIsSelected(), onValueChange: row.getToggleSelectedHandler() });
+      },
+      size: 60,
+      minSize: 60,
+      maxSize: 60,
+      enableResizing: false,
+      enableSorting: false,
+      enableHiding: false,
+      enableColumnFilter: false
+    },
+    ...props.columns ?? []
+  ], [selectionRowId, props.columns]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    TableProvider,
+    {
+      ...props,
+      fillerRow: (0, import_react71.useCallback)((columnId, table) => {
+        if (columnId === selectionRowId) {
+          return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Checkbox, { value: false, disabled: true, className: "max-w-6" });
+        }
+        return fillerRow?.(columnId, table) ?? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FillerCell, {});
+      }, [fillerRow, selectionRowId]),
+      columns: columnDef,
+      initialState: {
+        ...props.initialState,
+        columnPinning: {
+          ...props.initialState?.columnPinning,
+          left: [selectionRowId, ...props.initialState?.columnPinning?.left ?? []]
+        }
+      },
+      state: {
+        rowSelection,
+        ...state
+      },
+      onRowClick: (0, import_react71.useCallback)((row, table) => {
+        if (!disableClickRowClickSelection) {
+          row.toggleSelected();
+        }
+        onRowClick?.(row, table);
+      }, [disableClickRowClickSelection, onRowClick]),
+      meta: {
+        ...meta,
+        bodyRowClassName: (0, import_clsx35.default)(
+          { "cursor-pointer": !disableClickRowClickSelection },
+          meta?.bodyRowClassName
+        )
+      },
+      children
+    }
+  );
+};
+
+// src/components/layout/table/Table.tsx
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var Table = ({ children, table, paginationOptions, displayProps, header, footer, ...props }) => {
+  const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...props, className: (0, import_clsx36.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(TableProvider, { ...table, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TableDisplay, { ...displayProps, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
+    footer
+  ] }) });
+};
+var TableWithSelection = ({
+  children,
+  table,
+  paginationOptions,
+  displayProps,
+  header,
+  footer,
+  ...props
+}) => {
+  const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...props, className: (0, import_clsx36.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(TableWithSelectionProvider, { ...table, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TableDisplay, { ...displayProps, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
+    footer
+  ] }) });
+};
+
+// src/components/layout/table/TableColumn.tsx
+var import_react72 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var TableColumnComponent = ({
+  filterType,
+  ...props
+}) => {
+  const { registerColumn } = useTableColumnDefinitionContext();
+  const filterFn = filterType ?? props.filterFn;
+  useLogOnce(
+    "TableColumn: For filterType === tags, filterData.tags must be set.",
+    filterType === "tags" && props.meta?.filterData?.tags === void 0
+  );
+  const [column] = (0, import_react72.useState)({
+    ...props,
+    filterFn
+  });
+  (0, import_react72.useEffect)(() => {
+    const unsubscribe = registerColumn(column);
+    return () => {
+      unsubscribe();
+    };
+  }, [registerColumn, column]);
+  return null;
+};
+var TableColumnFactory = () => (0, import_react72.memo)(
+  TableColumnComponent,
+  (prevProps, nextProps) => {
+    return prevProps.filterType === nextProps.filterType && prevProps.id === nextProps.id && prevProps["accessorKey"] === nextProps["accessorKey"] && prevProps.enableColumnFilter === nextProps.enableColumnFilter && prevProps.enableGlobalFilter === nextProps.enableGlobalFilter && prevProps.enableGrouping === nextProps.enableGrouping && prevProps.enableHiding === nextProps.enableHiding && prevProps.enablePinning === nextProps.enablePinning && prevProps.enableResizing === nextProps.enableResizing && prevProps.enableSorting === nextProps.enableSorting && prevProps.meta === nextProps.meta, prevProps.cell === nextProps.cell;
+  }
+);
+var TableColumn = (props) => {
+  const TableColumnComponent2 = (0, import_react72.useMemo)(() => TableColumnFactory(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TableColumnComponent2, { ...props });
+};
+
+// src/components/layout/table/TableColumnSwitcher.tsx
+var import_react73 = require("react");
+var import_lucide_react20 = require("lucide-react");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var TableColumnSwitcherPopUp = ({ ...props }) => {
+  const { table } = useTableDataContext();
+  const translation = useHightideTranslation();
+  const containerRef = (0, import_react73.useRef)(null);
+  const generatedId = (0, import_react73.useId)();
+  const ids = (0, import_react73.useMemo)(() => ({
+    popup: props.id ?? `table-column-picker-popup-${generatedId}`,
+    label: `table-column-picker-label-${generatedId}`
+  }), [generatedId, props.id]);
+  const tableState = table.getState();
+  const columnOrder = tableState.columnOrder;
+  const columnPinning = tableState.columnPinning;
+  const columns = (0, import_react73.useMemo)(() => {
+    const allColumns = table.getAllColumns();
+    const leftPinned = [];
+    const unpinned = [];
+    const rightPinned = [];
+    const columnMap = new Map(allColumns.map((col) => [col.id, col]));
+    const processColumns = (columnIds, targetArray) => {
+      for (const columnId of columnIds) {
+        const column = columnMap.get(columnId);
+        if (column) {
+          targetArray.push(column);
+          columnMap.delete(columnId);
+        }
+      }
+    };
+    if (columnOrder.length > 0) {
+      const leftPinnedIds = columnPinning?.left ?? [];
+      const rightPinnedIds = columnPinning?.right ?? [];
+      processColumns(leftPinnedIds, leftPinned);
+      processColumns(rightPinnedIds, rightPinned);
+      for (const columnId of columnOrder) {
+        if (!leftPinnedIds.includes(columnId) && !rightPinnedIds.includes(columnId)) {
+          const column = columnMap.get(columnId);
+          if (column) {
+            unpinned.push(column);
+            columnMap.delete(columnId);
+          }
+        }
+      }
+      for (const column of columnMap.values()) {
+        const pinState = column.getIsPinned();
+        if (pinState === "left") {
+          leftPinned.push(column);
+        } else if (pinState === "right") {
+          rightPinned.push(column);
+        } else {
+          unpinned.push(column);
+        }
+      }
+    } else {
+      for (const column of allColumns) {
+        const pinState = column.getIsPinned();
+        if (pinState === "left") {
+          leftPinned.push(column);
+        } else if (pinState === "right") {
+          rightPinned.push(column);
+        } else {
+          unpinned.push(column);
+        }
+      }
+    }
+    return [...leftPinned, ...unpinned, ...rightPinned];
+  }, [table, columnOrder, columnPinning]);
+  const moveColumn = (columnId, direction) => {
+    const currentColumns = columns.map((col) => col.id);
+    const currentIndex = currentColumns.indexOf(columnId);
+    if (currentIndex === -1) return;
+    const column = table.getColumn(columnId);
+    if (!column) return;
+    const isPinned = column.getIsPinned();
+    if (isPinned) return;
+    const newIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
+    if (newIndex < 0 || newIndex >= currentColumns.length) return;
+    const targetColumn = table.getColumn(currentColumns[newIndex]);
+    if (!targetColumn) return;
+    const targetIsPinned = targetColumn.getIsPinned();
+    if (targetIsPinned !== isPinned) return;
+    const newOrder = [...currentColumns];
+    const temp = newOrder[currentIndex];
+    newOrder[currentIndex] = newOrder[newIndex];
+    newOrder[newIndex] = temp;
+    table.setColumnOrder(newOrder);
+  };
+  const toggleColumnVisibility = (columnId) => {
+    const column = table.getColumn(columnId);
+    column?.toggleVisibility();
+  };
+  const pinColumn = (columnId, side) => {
+    const column = table.getColumn(columnId);
+    if (!column || !column.getCanPin()) return;
+    column.pin(side);
+  };
+  const unpinColumn = (columnId) => {
+    const column = table.getColumn(columnId);
+    if (!column || !column.getCanPin()) return;
+    const pinState = column.getIsPinned();
+    if (!pinState) return;
+    column.pin(false);
+    const currentOrder = table.getState().columnOrder;
+    const unpinnedColumns = currentOrder.filter((id) => {
+      const col = table.getColumn(id);
+      return col && !col.getIsPinned();
+    });
+    if (pinState === "left") {
+      const newOrder = [columnId, ...unpinnedColumns];
+      table.setColumnOrder(newOrder);
+    } else if (pinState === "right") {
+      const newOrder = [...unpinnedColumns, columnId];
+      table.setColumnOrder(newOrder);
+    }
+  };
+  const getColumnHeader = (columnId) => {
+    const column = table.getColumn(columnId);
+    const header = column?.columnDef.header;
+    if (typeof header === "string") {
+      return header;
     }
-  );
-};
-
-// src/components/layout/table/TableWithSelectionProvider.tsx
-var import_react73 = require("react");
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var TableWithSelectionProvider = ({
-  children,
-  state,
-  fillerRow,
-  rowSelection,
-  disableClickRowClickSelection = false,
-  selectionRowId = "selection",
-  onRowClick,
-  meta,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-    TableProvider,
+    if (typeof header === "function") {
+      return columnId;
+    }
+    return columnId;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+    PopUp,
     {
       ...props,
-      fillerRow: (0, import_react73.useCallback)((columnId, table) => {
-        if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Checkbox, { value: false, disabled: true, className: "max-w-6" });
-        }
-        return fillerRow?.(columnId, table) ?? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(FillerCell, {});
-      }, [fillerRow, selectionRowId]),
-      initialState: {
-        ...props.initialState,
-        columnPinning: {
-          ...props.initialState?.columnPinning,
-          left: [selectionRowId, ...props.initialState?.columnPinning?.left ?? []]
-        }
-      },
-      state: {
-        rowSelection,
-        ...state
-      },
-      onRowClick: (0, import_react73.useCallback)((row, table) => {
-        if (!disableClickRowClickSelection) {
-          row.toggleSelected();
-        }
-        onRowClick?.(row, table);
-      }, [disableClickRowClickSelection, onRowClick]),
-      meta: {
-        ...meta,
-        bodyRowClassName: (0, import_clsx31.default)(
-          { "cursor-pointer": !disableClickRowClickSelection },
-          meta?.bodyRowClassName
-        )
+      ref: containerRef,
+      id: ids.popup,
+      options: {
+        verticalAlignment: "afterEnd",
+        horizontalAlignment: "center",
+        ...props.options
       },
+      role: "dialog",
+      "aria-labelledby": ids.label,
+      "aria-describedby": ids.label,
+      className: "flex-col-1 p-2 items-start min-w-72",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-          TableColumn,
-          {
-            id: selectionRowId,
-            header: ({ table }) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-col-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { id: ids.label, className: "typography-title-md font-semibold", children: translation("columnPicker") }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-description typography-label-sm mb-2", children: translation("columnPickerDescription") })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("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();
+          const isPinned = column.getCanPin() && !!pinState;
+          const prevColumn = index > 0 ? columns[index - 1] : null;
+          const nextColumn = index < columns.length - 1 ? columns[index + 1] : null;
+          const prevIsPinned = prevColumn?.getCanPin() && !!prevColumn.getIsPinned();
+          const nextIsPinned = nextColumn?.getCanPin() && !!nextColumn.getIsPinned();
+          const canMoveUp = index > 0 && !isPinned && !prevIsPinned;
+          const canMoveDown = index < columns.length - 1 && !isPinned && !nextIsPinned;
+          return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-row-2 items-center justify-between gap-2 w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                Button,
                 {
-                  value: table.getIsAllRowsSelected(),
-                  indeterminate: table.getIsSomeRowsSelected(),
-                  onValueChange: (value) => {
-                    const newValue = !!value;
-                    table.toggleAllRowsSelected(newValue);
-                  }
+                  layout: "icon",
+                  size: "sm",
+                  color: "neutral",
+                  coloringStyle: "text",
+                  disabled: pinState === "left",
+                  onClick: () => pinColumn(columnId, "left"),
+                  "aria-label": translation("pinLeft"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.ChevronLeft, { className: "size-4" })
                 }
-              );
-            },
-            cell: ({ row }) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                Checkbox,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                Button,
                 {
-                  disabled: !row.getCanSelect(),
-                  value: row.getIsSelected(),
-                  onValueChange: row.getToggleSelectedHandler()
+                  layout: "icon",
+                  size: "sm",
+                  color: "neutral",
+                  coloringStyle: "text",
+                  disabled: pinState === "right",
+                  onClick: () => pinColumn(columnId, "right"),
+                  "aria-label": translation("pinRight"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.ChevronRight, { className: "size-4" })
                 }
-              );
-            },
-            size: 60,
-            minSize: 60,
-            maxSize: 60,
-            enableResizing: false,
-            enableSorting: false,
-            enableHiding: false,
-            enableColumnFilter: false
-          }
-        ),
-        children
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                Button,
+                {
+                  layout: "icon",
+                  size: "sm",
+                  color: "neutral",
+                  coloringStyle: "text",
+                  disabled: !canMoveUp,
+                  onClick: () => moveColumn(columnId, "up"),
+                  "aria-label": translation("moveUp"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.ChevronUp, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                Button,
+                {
+                  layout: "icon",
+                  size: "sm",
+                  color: "neutral",
+                  coloringStyle: "text",
+                  disabled: !canMoveDown,
+                  onClick: () => moveColumn(columnId, "down"),
+                  "aria-label": translation("moveDown"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.ChevronDown, { className: "size-4" })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                Button,
+                {
+                  layout: "icon",
+                  size: "sm",
+                  color: "neutral",
+                  coloringStyle: "text",
+                  disabled: !column.getCanHide(),
+                  onClick: () => toggleColumnVisibility(columnId),
+                  "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
+                  children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.Eye, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.EyeOff, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                Button,
+                {
+                  layout: "icon",
+                  size: "sm",
+                  color: "neutral",
+                  coloringStyle: "text",
+                  disabled: !column.getCanPin(),
+                  onClick: () => {
+                    if (isPinned) {
+                      unpinColumn(columnId);
+                    } else {
+                      pinColumn(columnId, "left");
+                    }
+                  },
+                  "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
+                  children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.PinOff, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.Pin, { className: "size-4" })
+                }
+              )
+            ] })
+          ] }, columnId);
+        }) })
       ]
     }
   );
 };
+var TableColumnSwitcher = ({ buttonProps, ...props }) => {
+  const translation = useHightideTranslation();
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(PopUpRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(PopUpOpener, { children: ({ props: props2 }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Tooltip, { tooltip: translation("changeColumnDisplay"), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Button, { ...props2, size: "md", layout: "icon", color: "neutral", coloringStyle: "solid", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react20.ArrowLeftRightIcon, { className: "size-4" }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TableColumnSwitcherPopUp, { ...props })
+  ] });
+};
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 var import_react74 = require("react");
-var import_clsx32 = require("clsx");
+var import_clsx37 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -15753,7 +15858,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 var import_lucide_react21 = require("lucide-react");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -15784,10 +15889,10 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "div",
     {
-      className: (0, import_clsx32.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx37.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -15802,10 +15907,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
           "div",
           {
-            className: (0, import_clsx32.clsx)(
+            className: (0, import_clsx37.clsx)(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -15817,18 +15922,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react21.CheckIcon, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react21.CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react21.Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react21.Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx32.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx37.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -15842,7 +15947,7 @@ var CopyToClipboardWrapper = ({
 
 // src/components/user-interaction/Menu.tsx
 var import_react76 = require("react");
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx38 = __toESM(require("clsx"));
 
 // src/hooks/useHoverState.ts
 var import_react75 = require("react");
@@ -15889,16 +15994,16 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/components/user-interaction/Menu.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
   "div",
   {
-    className: (0, import_clsx33.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: (0, import_clsx38.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-disabled cursor-not-allowed": isDisabled,
       "text-menu-text hover:bg-primary/20": !isDisabled,
       "cursor-pointer": !!onClick
@@ -15922,9 +16027,9 @@ var Menu = ({
     toggleOpen: () => setIsOpen((prevState) => !prevState),
     disabled
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
     trigger(bag, (0, import_react76.useCallback)((el) => triggerRef.current = el, [])),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       PopUp,
       {
         ...props,
@@ -15946,8 +16051,8 @@ var Menu = ({
 
 // src/components/user-interaction/ScrollPicker.tsx
 var import_react77 = require("react");
-var import_clsx34 = __toESM(require("clsx"));
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_clsx39 = __toESM(require("clsx"));
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -16086,7 +16191,7 @@ var ScrollPicker = ({
     }
     return MathUtil.clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -16097,15 +16202,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -16113,10 +16218,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "div",
               {
-                className: (0, import_clsx34.default)(
+                className: (0, import_clsx39.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -16144,8 +16249,8 @@ var ScrollPicker = ({
 
 // src/components/user-interaction/Textarea.tsx
 var import_react78 = require("react");
-var import_clsx35 = __toESM(require("clsx"));
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var Textarea = (0, import_react78.forwardRef)(function Textarea2({
   invalid = false,
   onValueChange,
@@ -16158,7 +16263,7 @@ var Textarea = (0, import_react78.forwardRef)(function Textarea2({
     onEditComplete?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "textarea",
     {
       ...props,
@@ -16188,7 +16293,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     Textarea,
     {
       ...props,
@@ -16208,10 +16313,10 @@ var TextareaWithHeadline = ({
 }) => {
   const genId = (0, import_react78.useId)();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
     "div",
     {
-      className: (0, import_clsx35.default)(
+      className: (0, import_clsx40.default)(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -16220,13 +16325,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx35.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        headline && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx40.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: (0, import_clsx35.default)(
+            className: (0, import_clsx40.default)(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             )
@@ -16238,7 +16343,7 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/user-interaction/date/TimeDisplay.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -16275,14 +16380,14 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { children: fullString });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
 var import_react79 = require("react");
 var import_react80 = require("react");
-var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"));
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var InsideLabelInput = (0, import_react80.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
@@ -16292,13 +16397,13 @@ var InsideLabelInput = (0, import_react80.forwardRef)(function InsideLabelInput2
   const [isFocused, setIsFocused] = (0, import_react80.useState)(false);
   const generatedId = (0, import_react79.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: (0, import_clsx36.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_clsx41.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       Input,
       {
         ...props,
         id,
-        className: (0, import_clsx36.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        className: (0, import_clsx41.default)("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -16311,13 +16416,13 @@ var InsideLabelInput = (0, import_react80.forwardRef)(function InsideLabelInput2
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx36.default)(
+        className: (0, import_clsx41.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -16333,7 +16438,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     InsideLabelInput,
     {
       ...props,
@@ -16345,8 +16450,8 @@ var InsideLabelInputUncontrolled = ({
 
 // src/components/user-interaction/input/SearchBar.tsx
 var import_lucide_react22 = require("lucide-react");
-var import_clsx37 = require("clsx");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_clsx42 = require("clsx");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var SearchBar = ({
   value: initialValue,
   onSearch,
@@ -16357,8 +16462,8 @@ var SearchBar = ({
 }) => {
   const translation = useHightideTranslation();
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { ...containerProps, className: (0, import_clsx37.clsx)("relative", containerProps?.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { ...containerProps, className: (0, import_clsx42.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       InputUncontrolled,
       {
         ...inputProps,
@@ -16366,10 +16471,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: (0, import_clsx37.clsx)("pr-10 w-full", inputProps.className)
+        className: (0, import_clsx42.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       Button,
       {
         ...searchButtonProps,
@@ -16378,8 +16483,8 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: (0, import_clsx37.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react22.Search, { className: "w-full h-full" })
+        className: (0, import_clsx42.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react22.Search, { className: "w-full h-full" })
       }
     )
   ] });
@@ -16388,8 +16493,8 @@ var SearchBar = ({
 // src/components/user-interaction/input/ToggleableInput.tsx
 var import_react81 = require("react");
 var import_lucide_react23 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_clsx43 = __toESM(require("clsx"));
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var ToggleableInput = (0, import_react81.forwardRef)(function ToggleableInput2({
   value,
   initialState = "display",
@@ -16404,8 +16509,8 @@ var ToggleableInput = (0, import_react81.forwardRef)(function ToggleableInput2({
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_clsx38.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_clsx43.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       Input,
       {
         ...props,
@@ -16426,14 +16531,14 @@ var ToggleableInput = (0, import_react81.forwardRef)(function ToggleableInput2({
         },
         "data-name": props["data-name"] ?? "togglable-input",
         "data-isEditing": isEditing ? "" : void 0,
-        className: (0, import_clsx38.default)(`w-full rounded-md`, {
+        className: (0, import_clsx43.default)(`w-full rounded-md`, {
           "text-transparent": !isEditing
         })
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: (0, import_clsx38.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react23.Pencil, { className: (0, import_clsx38.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: (0, import_clsx43.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react23.Pencil, { className: (0, import_clsx43.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -16443,7 +16548,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     ToggleableInput,
     {
       value,
@@ -16458,7 +16563,7 @@ var import_lucide_react25 = require("lucide-react");
 
 // src/components/user-interaction/properties/PropertyBase.tsx
 var import_lucide_react24 = require("lucide-react");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var PropertyBase = ({
   name: name2,
   children,
@@ -16477,29 +16582,29 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "div",
     {
       className: className ? `group/property ${className}` : "group/property",
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
           "div",
           {
             className,
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Tooltip, { tooltip: name2, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { "data-name": "property-title-text", children: name2 })
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Tooltip, { tooltip: name2, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { "data-name": "property-title-text", children: name2 })
               ] }) }),
-              invalid && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react24.AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react24.AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
           "div",
           {
             className,
@@ -16507,8 +16612,8 @@ var PropertyBase = ({
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Tooltip, { tooltip: translation("clearValue"), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Tooltip, { tooltip: translation("clearValue"), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                   Button,
                   {
                     onClick: onValueClear,
@@ -16517,10 +16622,10 @@ var PropertyBase = ({
                     coloringStyle: "text",
                     layout: "icon",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react24.X, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react24.X, { className: "size-force-5" })
                   }
                 ) }),
-                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Tooltip, { tooltip: translation("removeProperty"), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Tooltip, { tooltip: translation("removeProperty"), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                   Button,
                   {
                     onClick: onRemove,
@@ -16528,7 +16633,7 @@ var PropertyBase = ({
                     coloringStyle: "text",
                     layout: "icon",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react24.Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react24.Trash, { className: "size-force-5" })
                   }
                 ) })
               ] })
@@ -16541,7 +16646,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -16550,15 +16655,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react25.Check, { size: 24 }),
-      children: () => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react25.Check, { size: 24 }),
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -16571,7 +16676,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -16591,7 +16696,7 @@ var CheckboxProperty = ({
 
 // src/components/user-interaction/properties/DateProperty.tsx
 var import_lucide_react26 = require("lucide-react");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onValueChange,
@@ -16601,13 +16706,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react26.CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react26.CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         DateTimeInput,
         {
           value,
@@ -16629,7 +16734,7 @@ var import_lucide_react28 = require("lucide-react");
 // src/components/user-interaction/select/MultiSelectChipDisplay.tsx
 var import_react82 = require("react");
 var import_lucide_react27 = require("lucide-react");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var MultiSelectChipDisplayButton = (0, import_react82.forwardRef)(function MultiSelectChipDisplayButton2({
   id,
   ...props
@@ -16652,7 +16757,7 @@ var MultiSelectChipDisplayButton = (0, import_react82.forwardRef)(function Multi
   }, [register, unregister]);
   const disabled = !!props?.disabled || !!state.disabled;
   const invalid = state.invalid;
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
     "div",
     {
       ...props,
@@ -16668,9 +16773,9 @@ var MultiSelectChipDisplayButton = (0, import_react82.forwardRef)(function Multi
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       children: [
-        state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Chip, { className: "gap-x-2", children: [
+        state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Chip, { className: "gap-x-2", children: [
           label,
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             Button,
             {
               onClick: () => {
@@ -16681,11 +16786,11 @@ var MultiSelectChipDisplayButton = (0, import_react82.forwardRef)(function Multi
               coloringStyle: "text",
               layout: "icon",
               className: "flex-row-0 items-center",
-              children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react27.XIcon, { className: "size-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react27.XIcon, { className: "size-5" })
             }
           )
         ] }, value)),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           Button,
           {
             id: ids.trigger,
@@ -16711,7 +16816,7 @@ var MultiSelectChipDisplayButton = (0, import_react82.forwardRef)(function Multi
             "aria-expanded": state.isOpen,
             "aria-controls": state.isOpen ? ids.content : void 0,
             className: "size-9",
-            children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react27.Plus, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react27.Plus, {})
           }
         )
       ]
@@ -16724,9 +16829,9 @@ var MultiSelectChipDisplay = (0, import_react82.forwardRef)(function MultiSelect
   chipDisplayProps,
   ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(MultiSelectRoot, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MultiSelectContent, { ...contentPanelProps, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(MultiSelectContent, { ...contentPanelProps, children })
   ] });
 });
 var MultiSelectChipDisplayUncontrolled = (0, import_react82.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
@@ -16735,7 +16840,7 @@ var MultiSelectChipDisplayUncontrolled = (0, import_react82.forwardRef)(function
   ...props
 }, ref) {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     MultiSelectChipDisplay,
     {
       ...props,
@@ -16747,7 +16852,7 @@ var MultiSelectChipDisplayUncontrolled = (0, import_react82.forwardRef)(function
 });
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
   value,
@@ -16756,18 +16861,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react28.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_lucide_react28.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             MultiSelectChipDisplay,
             {
               value,
@@ -16793,7 +16898,7 @@ var MultiSelectProperty = ({
 
 // src/components/user-interaction/properties/NumberProperty.tsx
 var import_lucide_react29 = require("lucide-react");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
   onRemove,
@@ -16805,20 +16910,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_lucide_react29.Binary, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react29.Binary, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
               Input,
               {
                 className: "w-full pr-8",
@@ -16846,7 +16951,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
               "span",
               {
                 "data-name": "property-suffix",
@@ -16863,7 +16968,7 @@ var NumberProperty = ({
 
 // src/components/user-interaction/properties/SelectProperty.tsx
 var import_lucide_react30 = require("lucide-react");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
   value,
@@ -16872,18 +16977,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react30.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react30.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             Select,
             {
               value,
@@ -16906,7 +17011,7 @@ var SingleSelectProperty = ({
 
 // src/components/user-interaction/properties/TextProperty.tsx
 var import_lucide_react31 = require("lucide-react");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var TextProperty = ({
   value,
   readOnly,
@@ -16917,14 +17022,14 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react31.Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react31.Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         Textarea,
         {
           className: "w-full",
@@ -16989,14 +17094,14 @@ function Transition({
 }
 
 // src/global-contexts/HightideProvider.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
@@ -17119,7 +17224,7 @@ function useLogUnstableDependencies(name2, value) {
       }
     }
     if (Object.keys(changes).length > 0) {
-      console.log(`[${name2}] changed`, changes);
+      console.info(`[${name2}] changed`, changes);
     }
     prev.current = value;
   });
@@ -17665,13 +17770,15 @@ var PromiseUtils = {
   TabPanel,
   TabSwitcher,
   TabView,
+  Table,
   TableBody,
-  TableBodyContext,
   TableCell,
   TableColumn,
   TableColumnDefinitionContext,
-  TableColumnPicker,
+  TableColumnSwitcher,
+  TableColumnSwitcherPopUp,
   TableContainerContext,
+  TableDataContext,
   TableDisplay,
   TableFilter,
   TableFilterButton,
@@ -17679,10 +17786,12 @@ var PromiseUtils = {
   TableFilterOperator,
   TableHeader,
   TableHeaderContext,
-  TablePageSizeController,
+  TablePageSizeSelect,
   TablePagination,
+  TablePaginationMenu,
   TableProvider,
   TableSortButton,
+  TableWithSelection,
   TableWithSelectionProvider,
   TagIcon,
   TagsFilter,
@@ -17763,9 +17872,9 @@ var PromiseUtils = {
   useSearch,
   useSelectContext,
   useTabContext,
-  useTableBodyContext,
   useTableColumnDefinitionContext,
   useTableContainerContext,
+  useTableDataContext,
   useTableHeaderContext,
   useTheme,
   useTransitionState,