@upbound/monarch-blocks 0.1.0

package/dist/data-table.js

@@ -0,0 +1,4725 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/data-table/cell-contextual-filter.tsx
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger
+} from "@upbound/monarch-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function CellContextualFilter({
+  filter,
+  globalSearch,
+  cell,
+  onContextCell,
+  onContextSearch,
+  contextualMenuActions = []
+}) {
+  const disabled = !filter && !(globalSearch && onContextSearch);
+  function handleSelect() {
+    if (globalSearch && onContextSearch) {
+      onContextSearch(globalSearch, cell);
+      return;
+    }
+    if (!filter) return;
+    onContextCell(filter, cell);
+  }
+  function renderAction(action) {
+    var _a, _b;
+    const actionDisabled = typeof action.disabled === "function" ? action.disabled(cell) : (_a = action.disabled) != null ? _a : false;
+    if ((_b = action.items) == null ? void 0 : _b.length) {
+      return /* @__PURE__ */ jsxs(ContextMenuSub, { children: [
+        /* @__PURE__ */ jsx(
+          ContextMenuSubTrigger,
+          {
+            disabled: actionDisabled,
+            className: action.className,
+            onClick: (event) => event.stopPropagation(),
+            children: action.label
+          }
+        ),
+        /* @__PURE__ */ jsx(ContextMenuSubContent, { children: action.items.map(renderAction) })
+      ] }, action.id);
+    }
+    let handledClick = false;
+    return /* @__PURE__ */ jsx(
+      ContextMenuItem,
+      {
+        disabled: actionDisabled,
+        onClick: (event) => {
+          var _a2;
+          event.stopPropagation();
+          handledClick = true;
+          (_a2 = action.onSelect) == null ? void 0 : _a2.call(action, cell);
+        },
+        onSelect: () => {
+          var _a2;
+          if (handledClick) {
+            handledClick = false;
+            return;
+          }
+          (_a2 = action.onSelect) == null ? void 0 : _a2.call(action, cell);
+        },
+        children: action.label
+      },
+      action.id
+    );
+  }
+  return /* @__PURE__ */ jsxs(ContextMenuContent, { children: [
+    /* @__PURE__ */ jsx(ContextMenuItem, { disabled, onClick: (event) => event.stopPropagation(), onSelect: handleSelect, children: "Filter by this value" }),
+    contextualMenuActions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
+      contextualMenuActions.map(renderAction)
+    ] })
+  ] });
+}
+
+// src/data-table/column-options.tsx
+import * as React from "react";
+import { flexRender } from "@tanstack/react-table";
+import { Button } from "@upbound/monarch-core";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@upbound/monarch-core";
+import { Icon } from "@upbound/monarch-core";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/data-table/utils.ts
+var TO_EACH_SIDE = 2;
+function normalizeColumnOrdering(columnOrdering, allColumnIds) {
+  const validIds = new Set(allColumnIds);
+  const seenIds = /* @__PURE__ */ new Set();
+  const trackedColumnIds = columnOrdering.filter((columnId) => {
+    if (!validIds.has(columnId) || seenIds.has(columnId)) return false;
+    seenIds.add(columnId);
+    return true;
+  });
+  return [...trackedColumnIds, ...allColumnIds.filter((columnId) => !seenIds.has(columnId))];
+}
+function isSameColumnOrdering(left, right) {
+  return left.length === right.length && left.every((columnId, index) => columnId === right[index]);
+}
+function splitColumnOrderByPinning(fullColumnOrder, getColumnPinning2) {
+  return {
+    leftPinnedColumns: fullColumnOrder.filter((columnId) => getColumnPinning2(columnId) === "left"),
+    unpinnedColumns: fullColumnOrder.filter((columnId) => getColumnPinning2(columnId) === false),
+    rightPinnedColumns: fullColumnOrder.filter((columnId) => getColumnPinning2(columnId) === "right")
+  };
+}
+function mergeUnpinnedColumnOrder(fullColumnOrder, nextUnpinnedOrder, getColumnPinning2) {
+  const nextUnpinnedIterator = nextUnpinnedOrder[Symbol.iterator]();
+  return fullColumnOrder.map(
+    (columnId) => {
+      var _a;
+      return getColumnPinning2(columnId) === false ? (_a = nextUnpinnedIterator.next().value) != null ? _a : columnId : columnId;
+    }
+  );
+}
+function getPaginationInfo(pageIndex, totalRows, pageSize) {
+  const currentPage = pageIndex + 1;
+  const pageCount = Math.ceil(totalRows / pageSize);
+  function getPages() {
+    if (pageCount === 0) return [];
+    if (pageCount === 1) return [1];
+    if (pageCount === 2) return [1, 2];
+    const runStart = Math.max(currentPage - TO_EACH_SIDE, 2);
+    const runEnd = Math.min(currentPage + TO_EACH_SIDE, pageCount - 1);
+    const hasBeginningEllipsis = runStart > 2;
+    const hasEndingEllipsis = currentPage + 3 < pageCount;
+    return [
+      1,
+      ...hasBeginningEllipsis ? [void 0] : [],
+      ...Array.from({ length: runEnd - runStart + 1 }).map((_, i) => i + runStart),
+      ...hasEndingEllipsis ? [void 0] : [],
+      pageCount
+    ];
+  }
+  return {
+    pageCount,
+    visiblePages: getPages(),
+    itemStart: totalRows === 0 ? 0 : pageIndex * pageSize + 1,
+    itemEnd: Math.min(currentPage * pageSize, totalRows)
+  };
+}
+function isFilterOnlyColumn(column) {
+  var _a;
+  return ((_a = column.columnDef.meta) == null ? void 0 : _a.filterOnly) === true;
+}
+function getTableState({
+  error,
+  loading,
+  rowCount
+}) {
+  if (error) return "error";
+  if (loading) return "loading";
+  return rowCount === 0 ? "empty" : "success";
+}
+
+// src/data-table/column-options.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getColumnPinning(column) {
+  var _a;
+  if (!column) return false;
+  return column.getIsPinned() || ((_a = column.columnDef.meta) == null ? void 0 : _a.pinning) || false;
+}
+function ColumnOptionsItem({
+  column,
+  disableColumnOrdering,
+  isDropTarget,
+  onDragStart,
+  onDrop,
+  onDragOver,
+  onDragEnd
+}) {
+  var _a;
+  const [isDraggedOver, setIsDraggedOver] = React.useState(false);
+  const isDraggable = column.getIsPinned() === false && !((_a = column.columnDef.meta) == null ? void 0 : _a.pinning) && !disableColumnOrdering;
+  const canHide = column.getCanHide();
+  const headerContent = React.useMemo(
+    () => flexRender(column.columnDef.header, { column, header: null, table: null }),
+    [column]
+  );
+  const dragProps = {
+    draggable: isDraggable,
+    onDragStart: isDraggable ? onDragStart(column) : void 0,
+    onDrop: isDropTarget ? (e) => {
+      onDrop(column)(e);
+      setIsDraggedOver(false);
+    } : void 0,
+    onDragOver: isDropTarget ? (e) => {
+      onDragOver(e);
+      setIsDraggedOver(true);
+    } : void 0,
+    onDragLeave: isDropTarget ? () => setIsDraggedOver(false) : void 0,
+    onDragEnd: isDraggable ? onDragEnd : void 0,
+    className: cn(
+      "relative flex items-center gap-2",
+      isDraggedOver && "before:bg-primary before:absolute before:inset-x-0 before:top-0 before:h-0.5"
+    )
+  };
+  const itemContent = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    isDraggable && /* @__PURE__ */ jsx2(Icon, { name: "grip-vertical", size: "sm", className: "text-muted-foreground cursor-move" }),
+    /* @__PURE__ */ jsx2("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: headerContent })
+  ] });
+  if (!canHide) {
+    return /* @__PURE__ */ jsx2(DropdownMenuItem, __spreadProps(__spreadValues({}, dragProps), { children: itemContent }));
+  }
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuCheckboxItem,
+    __spreadProps(__spreadValues({
+      checked: column.getIsVisible(),
+      onCheckedChange: () => column.toggleVisibility()
+    }, dragProps), {
+      children: itemContent
+    })
+  );
+}
+function ColumnOptions({
+  columns: rawColumns,
+  columnOrdering,
+  onColumnOrderingChange,
+  disableColumnOrdering
+}) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [isLastDropZoneActive, setIsLastDropZoneActive] = React.useState(false);
+  const columns = React.useMemo(
+    () => rawColumns.filter((col) => {
+      var _a;
+      return !isFilterOnlyColumn(col) && ((_a = col.columnDef.meta) == null ? void 0 : _a.actions) !== true;
+    }),
+    [rawColumns]
+  );
+  const allColumnById = React.useMemo(() => new Map(rawColumns.map((col) => [col.id, col])), [rawColumns]);
+  const columnById = React.useMemo(() => new Map(columns.map((col) => [col.id, col])), [columns]);
+  const fullColumnOrder = React.useMemo(
+    () => normalizeColumnOrdering(
+      columnOrdering,
+      rawColumns.map((col) => col.id)
+    ),
+    [columnOrdering, rawColumns]
+  );
+  const getColumnPinningFor = React.useCallback(
+    (columnId) => getColumnPinning(allColumnById.get(columnId)),
+    [allColumnById]
+  );
+  const { leftPinnedColumns, unpinnedColumns, rightPinnedColumns } = splitColumnOrderByPinning(
+    fullColumnOrder,
+    getColumnPinningFor
+  );
+  function handleDragStart(column) {
+    return (event) => {
+      event.dataTransfer.setData("text/plain", column.id);
+      event.dataTransfer.dropEffect = "move";
+      event.dataTransfer.effectAllowed = "move";
+      setIsDragging(true);
+    };
+  }
+  function handleDrop(targetColumn) {
+    return (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const draggedColumnId = event.dataTransfer.getData("text/plain");
+      const targetColumnId = targetColumn.id;
+      if (!draggedColumnId || !targetColumnId || draggedColumnId === targetColumnId) {
+        setIsDragging(false);
+        return;
+      }
+      const draggedIndex = unpinnedColumns.indexOf(draggedColumnId);
+      if (draggedIndex === -1) {
+        setIsDragging(false);
+        return;
+      }
+      const newOrder = [...unpinnedColumns];
+      const [removed] = newOrder.splice(draggedIndex, 1);
+      const targetIndex = newOrder.indexOf(targetColumnId);
+      if (targetIndex === -1) {
+        setIsDragging(false);
+        return;
+      }
+      newOrder.splice(targetIndex, 0, removed);
+      onColumnOrderingChange(mergeUnpinnedColumnOrder(fullColumnOrder, newOrder, getColumnPinningFor));
+      setIsDragging(false);
+    };
+  }
+  function handleDropAtEnd(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsLastDropZoneActive(false);
+    const draggedColumnId = event.dataTransfer.getData("text/plain");
+    if (!draggedColumnId) {
+      setIsDragging(false);
+      return;
+    }
+    const draggedIndex = unpinnedColumns.indexOf(draggedColumnId);
+    if (draggedIndex === -1) {
+      setIsDragging(false);
+      return;
+    }
+    const newOrder = [...unpinnedColumns];
+    const [removed] = newOrder.splice(draggedIndex, 1);
+    newOrder.push(removed);
+    onColumnOrderingChange(mergeUnpinnedColumnOrder(fullColumnOrder, newOrder, getColumnPinningFor));
+    setIsDragging(false);
+  }
+  function handleDragOver(event) {
+    event.preventDefault();
+  }
+  function handleDragEnd() {
+    setIsDragging(false);
+    setIsLastDropZoneActive(false);
+  }
+  function orderedColumns(ids) {
+    return ids.map((id) => columnById.get(id)).filter((c) => {
+      var _a;
+      return !!c && !((_a = c.getIsGrouped) == null ? void 0 : _a.call(c));
+    });
+  }
+  function canDropOnColumn(column) {
+    var _a;
+    return column.getIsPinned() === false && !((_a = column.columnDef.meta) == null ? void 0 : _a.pinning);
+  }
+  const leftPinned = orderedColumns(leftPinnedColumns);
+  const unpinned = orderedColumns(unpinnedColumns);
+  const rightPinned = orderedColumns(rightPinnedColumns);
+  return /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(Button, { variant: "outline", className: "shrink-0", children: [
+      /* @__PURE__ */ jsx2(Icon, { name: "table-columns", "data-icon": "inline-start" }),
+      "Columns",
+      /* @__PURE__ */ jsx2(Icon, { name: "chevron-down", "data-icon": "inline-end" })
+    ] }) }),
+    /* @__PURE__ */ jsx2(DropdownMenuContent, { className: "w-58 p-0", children: /* @__PURE__ */ jsxs2("div", { className: "p-1", children: [
+      [...leftPinned, ...unpinned].map((column) => /* @__PURE__ */ jsx2(
+        ColumnOptionsItem,
+        {
+          column,
+          disableColumnOrdering,
+          isDropTarget: canDropOnColumn(column),
+          onDragStart: handleDragStart,
+          onDrop: handleDrop,
+          onDragOver: handleDragOver,
+          onDragEnd: handleDragEnd
+        },
+        column.id
+      )),
+      !disableColumnOrdering && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          onDrop: handleDropAtEnd,
+          onDragOver: (e) => {
+            e.preventDefault();
+            setIsLastDropZoneActive(true);
+          },
+          onDragLeave: () => setIsLastDropZoneActive(false),
+          className: cn(
+            "relative w-full transition-colors",
+            isDragging && "h-3",
+            isLastDropZoneActive && "bg-muted before:bg-primary before:absolute before:inset-x-0 before:top-0 before:h-0.5"
+          )
+        }
+      ),
+      rightPinned.map((column) => /* @__PURE__ */ jsx2(
+        ColumnOptionsItem,
+        {
+          column,
+          disableColumnOrdering,
+          isDropTarget: canDropOnColumn(column),
+          onDragStart: handleDragStart,
+          onDrop: handleDrop,
+          onDragOver: handleDragOver,
+          onDragEnd: handleDragEnd
+        },
+        column.id
+      ))
+    ] }) })
+  ] });
+}
+
+// src/data-table/columns.tsx
+import { Button as Button2 } from "@upbound/monarch-core";
+import { DropdownMenu as DropdownMenu2, DropdownMenuContent as DropdownMenuContent2, DropdownMenuItem as DropdownMenuItem2, DropdownMenuTrigger as DropdownMenuTrigger2 } from "@upbound/monarch-core";
+import { Icon as Icon2 } from "@upbound/monarch-core";
+
+// src/relative-time.tsx
+import * as React2 from "react";
+
+// src/hooks/use-mounted.ts
+import { useSyncExternalStore } from "react";
+function subscribe() {
+  return () => {
+  };
+}
+function useMounted() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+// src/relative-time.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function formatRelativeDefault(date, locale) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  if (diffMs < 0) {
+    const abs = Math.abs(diffMs);
+    const mins2 = Math.floor(abs / 6e4);
+    const hrs2 = Math.floor(mins2 / 60);
+    const days2 = Math.floor(hrs2 / 24);
+    if (abs < 6e4) return "just now";
+    if (mins2 < 60) return `in ${mins2} minute${mins2 === 1 ? "" : "s"}`;
+    if (hrs2 < 24) return `in ${hrs2} hour${hrs2 === 1 ? "" : "s"}`;
+    if (days2 < 7) return `in ${days2} day${days2 === 1 ? "" : "s"}`;
+    if (days2 < 30) return `in ${Math.floor(days2 / 7)} week${Math.floor(days2 / 7) === 1 ? "" : "s"}`;
+    return `on ${date.toLocaleDateString(locale, __spreadValues({
+      month: "short",
+      day: "numeric"
+    }, date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}))}`;
+  }
+  const secs = Math.floor(diffMs / 1e3);
+  const mins = Math.floor(secs / 60);
+  const hrs = Math.floor(mins / 60);
+  const days = Math.floor(hrs / 24);
+  if (secs < 60) return "just now";
+  if (mins < 60) return `${mins} minute${mins === 1 ? "" : "s"} ago`;
+  if (hrs < 24) return `${hrs} hour${hrs === 1 ? "" : "s"} ago`;
+  if (days === 1) return "yesterday";
+  if (days < 7) return `${days} days ago`;
+  if (days < 14) return "last week";
+  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+  return `on ${date.toLocaleDateString(locale, __spreadValues({
+    month: "short",
+    day: "numeric"
+  }, date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}))}`;
+}
+function formatRelativeCompact(date, locale) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  if (diffMs < 0) {
+    const abs = Math.abs(diffMs);
+    const mins2 = Math.floor(abs / 6e4);
+    const hrs2 = Math.floor(mins2 / 60);
+    const days2 = Math.floor(hrs2 / 24);
+    if (abs < 6e4) return "just now";
+    if (mins2 < 60) return `in ${mins2}m`;
+    if (hrs2 < 24) return `in ${hrs2}h`;
+    if (days2 < 7) return `in ${days2}d`;
+    if (days2 < 30) return `in ${Math.floor(days2 / 7)}w`;
+    return `on ${date.toLocaleDateString(locale, __spreadValues({
+      month: "short",
+      day: "numeric"
+    }, date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}))}`;
+  }
+  const secs = Math.floor(diffMs / 1e3);
+  const mins = Math.floor(secs / 60);
+  const hrs = Math.floor(mins / 60);
+  const days = Math.floor(hrs / 24);
+  if (secs < 60) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  if (hrs < 24) return `${hrs}h ago`;
+  if (days < 7) return `${days}d ago`;
+  if (days < 30) return `${Math.floor(days / 7)}w ago`;
+  return `on ${date.toLocaleDateString(locale, __spreadValues({
+    month: "short",
+    day: "numeric"
+  }, date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}))}`;
+}
+function formatRelative(date, variant, locale) {
+  return variant === "compact" ? formatRelativeCompact(date, locale) : formatRelativeDefault(date, locale);
+}
+function updateInterval(date) {
+  const diffMs = Math.abs(Date.now() - date.getTime());
+  const diffMin = diffMs / 6e4;
+  if (diffMin < 60) return 6e4;
+  if (diffMin < 1440) return 3e5;
+  return 36e5;
+}
+function absoluteTitle(date, locale) {
+  return date.toLocaleString(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short"
+  });
+}
+function RelativeTime(_a) {
+  var _b = _a, { date, variant = "default", title, className } = _b, props = __objRest(_b, ["date", "variant", "title", "className"]);
+  const d = React2.useMemo(() => new Date(date), [date]);
+  const mounted = useMounted();
+  const locale = mounted ? void 0 : "en-US";
+  const [label, setLabel] = React2.useState(() => formatRelative(d, variant, locale));
+  React2.useEffect(() => {
+    setLabel(formatRelative(d, variant, locale));
+    const schedule = () => {
+      const id2 = window.setInterval(() => {
+        setLabel(formatRelative(d, variant, locale));
+      }, updateInterval(d));
+      return id2;
+    };
+    const id = schedule();
+    return () => window.clearInterval(id);
+  }, [d, variant, locale]);
+  return /* @__PURE__ */ jsx3(
+    "time",
+    __spreadProps(__spreadValues({
+      dateTime: d.toISOString(),
+      title: title != null ? title : absoluteTitle(d, locale),
+      className: cn("tabular-nums", className)
+    }, props), {
+      children: label
+    })
+  );
+}
+
+// src/data-table/columns.tsx
+import { Tooltip, TooltipContent, TooltipTrigger } from "@upbound/monarch-core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function RowActions({
+  align = "end",
+  children,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs3(DropdownMenu2, { children: [
+    /* @__PURE__ */ jsx4(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(Button2, { variant: "ghost", size: "icon-xs", "aria-label": "Row actions", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx4(Icon2, { name: "ellipsis", size: "sm" }) }) }),
+    /* @__PURE__ */ jsx4(DropdownMenuContent2, { align, className: contentClassName, children })
+  ] });
+}
+function RowActionItem({
+  disabled,
+  className,
+  tooltip,
+  children,
+  onClick
+}) {
+  const item = /* @__PURE__ */ jsx4(DropdownMenuItem2, { disabled, className, onClick, children });
+  if (!tooltip) return item;
+  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
+    /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx4("span", { className: "block", children: item }) }),
+    /* @__PURE__ */ jsx4(TooltipContent, { children: tooltip })
+  ] });
+}
+function getActionsColumnDefinition({
+  cell
+}) {
+  return {
+    id: "actions",
+    header: "Actions",
+    size: 80,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    enableSorting: false,
+    enableHiding: false,
+    meta: { pinning: "right", actions: true },
+    cell
+  };
+}
+function ExpandButton({ row }) {
+  if (!row.getCanExpand()) return null;
+  const isExpanded = row.getIsExpanded();
+  return /* @__PURE__ */ jsx4(
+    Button2,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-xs",
+      "aria-label": isExpanded ? "Collapse row" : "Expand row",
+      onClick: (e) => {
+        e.stopPropagation();
+        row.getToggleExpandedHandler()();
+      },
+      children: /* @__PURE__ */ jsx4(Icon2, { name: isExpanded ? "chevron-up" : "chevron-down", size: "sm" })
+    }
+  );
+}
+function getExpandColumnDefinition(options) {
+  var _a;
+  return {
+    id: "expand",
+    header: "",
+    size: 28,
+    minSize: 28,
+    maxSize: 28,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    enableSorting: false,
+    enableHiding: false,
+    meta: { pinning: "right", actions: true },
+    cell: (_a = options == null ? void 0 : options.cell) != null ? _a : (({ row }) => /* @__PURE__ */ jsx4(ExpandButton, { row }))
+  };
+}
+function DataTableValueCell({ content, title, className, href, onClick }) {
+  const baseClassName = cn("text-body truncate", className);
+  if (href) {
+    return /* @__PURE__ */ jsx4("p", { className: baseClassName, children: /* @__PURE__ */ jsx4("a", { href, title, className: "underline hover:no-underline", onClick, children: content }) });
+  }
+  if (title) {
+    return /* @__PURE__ */ jsxs3(Tooltip, { children: [
+      /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            baseClassName,
+            "focus-visible:ring-ring/30 cursor-help underline decoration-dashed underline-offset-2 focus-visible:ring-2"
+          ),
+          onClick,
+          children: content
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(TooltipContent, { side: "bottom", children: title })
+    ] });
+  }
+  return /* @__PURE__ */ jsx4("p", { className: baseClassName, children: content ? /* @__PURE__ */ jsx4("span", { children: content }) : /* @__PURE__ */ jsx4("span", { children: "\u2014" }) });
+}
+function TimestampCell({ timestamp }) {
+  if (!timestamp) return /* @__PURE__ */ jsx4(DataTableValueCell, { content: "\u2014" });
+  return /* @__PURE__ */ jsx4(RelativeTime, { date: timestamp, className: "block" });
+}
+
+// src/data-table/data-table.tsx
+import * as React8 from "react";
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  noop,
+  useReactTable
+} from "@tanstack/react-table";
+
+// src/cel-filter-bar/cel-filter-bar.tsx
+import * as React3 from "react";
+import { Icon as Icon3 } from "@upbound/monarch-core";
+import { Badge } from "@upbound/monarch-core";
+import { Button as Button3 } from "@upbound/monarch-core";
+import { ButtonGroup, ButtonGroupText } from "@upbound/monarch-core";
+import { Calendar } from "@upbound/monarch-core";
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxClearAll,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSelectedChips,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue
+} from "@upbound/monarch-core";
+import { Input } from "@upbound/monarch-core";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@upbound/monarch-core";
+import { Label } from "@upbound/monarch-core";
+import { Popover, PopoverContent, PopoverTrigger } from "@upbound/monarch-core";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@upbound/monarch-core";
+
+// src/hooks/use-cel-filter-editor-state.ts
+import { useCallback as useCallback3, useRef, useState as useState3 } from "react";
+
+// src/lib/cel-filter/constants.ts
+var RELATIVE_DURATION_PRESET_VALUES = [
+  "24h",
+  "168h",
+  "720h"
+];
+var RELATIVE_DURATION_PRESETS = new Set(RELATIVE_DURATION_PRESET_VALUES);
+var MAX_NESTING_DEPTH = 50;
+var MAX_REGEX_LEN = 1e3;
+var ADD_FILTER_POPOVER_SUPPRESS_MS = 500;
+
+// src/hooks/use-cel-filter-editor-state.ts
+function useCelFilterEditorState(initialCommittedIds = []) {
+  const [editingConditionId, setEditingConditionId] = useState3(null);
+  const [committedConditionIds, setCommittedConditionIds] = useState3(() => new Set(initialCommittedIds));
+  const [activeSurface, setActiveSurface] = useState3(null);
+  const suppressCloseUntilRef = useRef(null);
+  const segmentSwitchRef = useRef(false);
+  const isDismissSuppressed = useCallback3((id) => {
+    const entry = suppressCloseUntilRef.current;
+    return entry !== null && entry.id === id && Date.now() < entry.until;
+  }, []);
+  const commitCondition = useCallback3((id) => {
+    setCommittedConditionIds((prev) => {
+      if (prev.has(id)) {
+        return prev;
+      }
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+    setEditingConditionId((current) => current === id ? null : current);
+    setActiveSurface(null);
+    segmentSwitchRef.current = false;
+  }, []);
+  const beginEditing = useCallback3((id, surface = "value") => {
+    setEditingConditionId(id);
+    setActiveSurface(surface);
+  }, []);
+  const openSurface = useCallback3(
+    (id, surface) => {
+      if (editingConditionId !== id) {
+        beginEditing(id, surface);
+        return;
+      }
+      setActiveSurface(surface);
+    },
+    [beginEditing, editingConditionId]
+  );
+  const closeSurface = useCallback3(
+    (id) => {
+      if (editingConditionId === id) {
+        setActiveSurface(null);
+      }
+    },
+    [editingConditionId]
+  );
+  const handlePopoverDismiss = useCallback3(
+    (id) => {
+      if (segmentSwitchRef.current) {
+        segmentSwitchRef.current = false;
+        return;
+      }
+      if (isDismissSuppressed(id)) {
+        return;
+      }
+      suppressCloseUntilRef.current = null;
+      commitCondition(id);
+    },
+    [commitCondition, isDismissSuppressed]
+  );
+  const toggleSurface = useCallback3(
+    (id, surface) => {
+      const isDraft = editingConditionId === id;
+      const popoverVisible = isDraft && activeSurface !== null;
+      if (isDraft && activeSurface === surface && popoverVisible) {
+        closeSurface(id);
+        return;
+      }
+      if (popoverVisible && activeSurface !== surface) {
+        segmentSwitchRef.current = true;
+      }
+      openSurface(id, surface);
+    },
+    [activeSurface, closeSurface, editingConditionId, openSurface]
+  );
+  const suppressDismissFor = useCallback3((id, ms = ADD_FILTER_POPOVER_SUPPRESS_MS) => {
+    suppressCloseUntilRef.current = {
+      id,
+      until: Date.now() + ms
+    };
+  }, []);
+  const removeCondition = useCallback3(
+    (id) => {
+      var _a;
+      if (((_a = suppressCloseUntilRef.current) == null ? void 0 : _a.id) === id) {
+        suppressCloseUntilRef.current = null;
+      }
+      setCommittedConditionIds((prev) => {
+        if (!prev.has(id)) {
+          return prev;
+        }
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+      setEditingConditionId((current) => current === id ? null : current);
+      if (editingConditionId === id) {
+        setActiveSurface(null);
+        segmentSwitchRef.current = false;
+      }
+    },
+    [editingConditionId]
+  );
+  const clearSuppress = useCallback3(() => {
+    suppressCloseUntilRef.current = null;
+  }, []);
+  const getController = useCallback3(
+    (conditionId) => {
+      const isDraft = editingConditionId === conditionId;
+      const surface = isDraft ? activeSurface : null;
+      return {
+        isDraft,
+        activeSurface: surface,
+        popoverVisible: isDraft && activeSurface !== null,
+        isDismissSuppressed: () => isDismissSuppressed(conditionId),
+        beginEditing: () => beginEditing(conditionId),
+        openSurface: (s) => openSurface(conditionId, s),
+        closeSurface: () => closeSurface(conditionId),
+        commit: () => {
+          suppressCloseUntilRef.current = null;
+          commitCondition(conditionId);
+        },
+        handlePopoverDismiss: () => handlePopoverDismiss(conditionId),
+        toggleSurface: (s) => toggleSurface(conditionId, s)
+      };
+    },
+    [
+      activeSurface,
+      beginEditing,
+      closeSurface,
+      commitCondition,
+      editingConditionId,
+      handlePopoverDismiss,
+      isDismissSuppressed,
+      openSurface,
+      toggleSurface
+    ]
+  );
+  return {
+    editingConditionId,
+    activeSurface,
+    committedConditionIds,
+    getController,
+    beginEditing,
+    suppressDismissFor,
+    removeCondition,
+    clearSuppress
+  };
+}
+
+// src/lib/cel-filter/date-utils.ts
+var CALENDAR_DAY_PATTERN = /^(\d{4}-\d{2}-\d{2})/;
+var MINUTE_PATTERN = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})/;
+var TIME_OF_DAY_PATTERN = /^\d{4}-\d{2}-\d{2}T(\d{2}:\d{2})/;
+function calendarDayStartInstant(instant) {
+  const match = CALENDAR_DAY_PATTERN.exec(instant);
+  return match ? `${match[1]}T00:00:00.000Z` : instant;
+}
+function inclusiveEndInstant(instant, granularity) {
+  if (granularity === "minute") {
+    const minuteMatch = MINUTE_PATTERN.exec(instant);
+    return minuteMatch ? `${minuteMatch[1]}:59.999Z` : instant;
+  }
+  const match = CALENDAR_DAY_PATTERN.exec(instant);
+  return match ? `${match[1]}T23:59:59.999Z` : instant;
+}
+function isRealCalendarDay(instant) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(instant);
+  if (!match) {
+    return false;
+  }
+  const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day;
+}
+function readTimeOfDay(instant) {
+  if (!instant) {
+    return "";
+  }
+  const match = TIME_OF_DAY_PATTERN.exec(instant);
+  return match ? match[1] : "";
+}
+function withTimeOfDay(instant, timeOfDay) {
+  const day = CALENDAR_DAY_PATTERN.exec(instant);
+  const time = /^(\d{2}):(\d{2})/.exec(timeOfDay);
+  if (!day || !time) {
+    return instant;
+  }
+  return `${day[1]}T${time[1]}:${time[2]}:00.000Z`;
+}
+function formatCalendarDateUtc(date, boundary) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const time = boundary === "end" ? "T23:59:59.999Z" : "T00:00:00.000Z";
+  return `${year}-${month}-${day}${time}`;
+}
+function parseCalendarDate(value) {
+  if (!value) {
+    return void 0;
+  }
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+  if (!match) {
+    return void 0;
+  }
+  return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+}
+function formatInstantLabel(instant, { withTime = false, locale } = {}) {
+  const date = parseCalendarDate(instant);
+  if (!date) {
+    return "";
+  }
+  const dateLabel = date.toLocaleDateString(locale);
+  const timeOfDay = withTime ? readTimeOfDay(instant) : "";
+  return timeOfDay ? `${dateLabel} ${timeOfDay} UTC` : dateLabel;
+}
+
+// src/lib/cel-filter/types.ts
+var isCelFilterGroup = (node) => node.type === "group";
+var isCelFilterCondition = (node) => node.type === "condition";
+var isCheckboxCelValue = (value) => Array.isArray(value) && value.every((item) => typeof item === "string");
+var isMultiTextCelValue = (value) => typeof value === "object" && value !== null && "tokens" in value;
+var isDateCelValue = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  if ("tokens" in value || "key" in value) {
+    return false;
+  }
+  return "preset" in value || "instant" in value || "range" in value || Object.keys(value).length === 0;
+};
+var isMapKeyCelValue = (value) => typeof value === "object" && value !== null && "key" in value;
+
+// src/lib/cel-filter/value-utils.ts
+function isRelativeDateCelValue(value) {
+  return value.preset != null;
+}
+function readDateCelValue(value) {
+  return isDateCelValue(value) ? value : {};
+}
+function readMapKeyCelValue(value) {
+  return isMapKeyCelValue(value) ? value : { key: "" };
+}
+function readMultiTextCelValue(value) {
+  return isMultiTextCelValue(value) ? value : { tokens: [] };
+}
+
+// src/lib/cel-filter/compile/escape-cel-string.ts
+function escapeCelString(input) {
+  let out = "";
+  for (const char of input) {
+    switch (char) {
+      case "\\":
+        out += "\\\\";
+        break;
+      case '"':
+        out += '\\"';
+        break;
+      case "\n":
+        out += "\\n";
+        break;
+      case "\r":
+        out += "\\r";
+        break;
+      case "	":
+        out += "\\t";
+        break;
+      case "\f":
+        out += "\\f";
+        break;
+      case "\v":
+        out += "\\v";
+        break;
+      case "\b":
+        out += "\\b";
+        break;
+      case "\0":
+        out += "\\0";
+        break;
+      default:
+        out += char;
+    }
+  }
+  return out;
+}
+function celStringLiteral(input) {
+  return `"${escapeCelString(input)}"`;
+}
+
+// src/lib/cel-filter/compile/operators.ts
+var RESERVED_COLUMN_CEL_IDENTIFIERS = {
+  namespace: "__namespace__"
+};
+var CEL_IDENTIFIER_TO_COLUMN_ID = Object.fromEntries(
+  Object.entries(RESERVED_COLUMN_CEL_IDENTIFIERS).map(([columnId, celIdentifier]) => [celIdentifier, columnId])
+);
+var ENUM_OPERATORS = ["is", "is_not"];
+var TEXT_OPERATORS = [
+  "is",
+  "is_not",
+  "contains",
+  "does_not_contain",
+  "starts_with",
+  "ends_with",
+  "matches"
+];
+var DATE_OPERATORS = [
+  "is",
+  "is_not",
+  "is_before",
+  "is_after",
+  "is_on_or_before",
+  "is_on_or_after",
+  "is_between",
+  "is_not_between"
+];
+var MAP_OPERATORS = ["key_exists", "key_does_not_exist", "has_value", "does_not_have_value"];
+var DATE_RELATIVE_OPERATORS = ["is_before", "is_after", "is_on_or_before", "is_on_or_after"];
+var DATE_WINDOW_OPERATORS = ["is", "is_not"];
+var DATE_RANGE_OPERATORS = ["is_between", "is_not_between"];
+var DATE_END_BOUNDARY_OPERATORS = ["is_on_or_before", "is_after"];
+var MAP_VALUE_OPERATORS = ["has_value", "does_not_have_value"];
+function getAllowedOperatorsForShape(shape) {
+  switch (shape) {
+    case "checkbox":
+    case "radio":
+    case "static":
+      return ENUM_OPERATORS;
+    case "text":
+    case "multiText":
+      return TEXT_OPERATORS;
+    case "date":
+      return DATE_OPERATORS;
+    case "map":
+      return MAP_OPERATORS;
+    default:
+      return [];
+  }
+}
+function getAllowedOperators(columnDef) {
+  if (!columnDef) {
+    return [];
+  }
+  if (columnDef.allowedOperators) {
+    return columnDef.allowedOperators;
+  }
+  const shape = columnDef.filterType === "keyValue" ? "map" : columnDef.filterType;
+  return getAllowedOperatorsForShape(shape);
+}
+function isDateRelativeOperator(operator) {
+  return DATE_RELATIVE_OPERATORS.includes(operator);
+}
+function isDateWindowOperator(operator) {
+  return DATE_WINDOW_OPERATORS.includes(operator);
+}
+function isDateRangeOperator(operator) {
+  return DATE_RANGE_OPERATORS.includes(operator);
+}
+function dateBoundaryForOperator(operator) {
+  return DATE_END_BOUNDARY_OPERATORS.includes(operator) ? "end" : "start";
+}
+function resolveColumnDefinition(condition, schema) {
+  if (!condition.columnId) {
+    return void 0;
+  }
+  return schema.columns.find((column) => column.id === condition.columnId);
+}
+function resolveFilterShape(condition, schema) {
+  const columnDef = resolveColumnDefinition(condition, schema);
+  if (!columnDef) {
+    return void 0;
+  }
+  if (columnDef.filterType === "keyValue") {
+    return "map";
+  }
+  if (columnDef.filterType === "static") {
+    return Array.isArray(condition.value) ? "checkbox" : "radio";
+  }
+  return columnDef.filterType;
+}
+var OPERATOR_LABELS = {
+  is: "is",
+  is_not: "is not",
+  contains: "contains",
+  does_not_contain: "does not contain",
+  starts_with: "starts with",
+  ends_with: "ends with",
+  matches: "matches",
+  is_before: "is before",
+  is_after: "is after",
+  is_on_or_before: "is on or before",
+  is_on_or_after: "is on or after",
+  is_between: "is between",
+  is_not_between: "is not between",
+  key_exists: "key exists",
+  key_does_not_exist: "key does not exist",
+  has_value: "has value",
+  does_not_have_value: "does not have value"
+};
+function getOperatorLabel(operator) {
+  return OPERATOR_LABELS[operator];
+}
+function getQuantifierLabel(quantifier) {
+  return quantifier === "all" ? "all of" : "any of";
+}
+var SINGLE_INSTANCE_FILTER_TYPES = /* @__PURE__ */ new Set(["checkbox", "radio", "static"]);
+function allowsMultipleConditions(filterType) {
+  return !SINGLE_INSTANCE_FILTER_TYPES.has(filterType);
+}
+function getDefaultOperator(filterType) {
+  switch (filterType) {
+    case "checkbox":
+    case "radio":
+    case "text":
+    case "static":
+      return "is";
+    case "multiText":
+      return "contains";
+    case "date":
+      return "is";
+    case "keyValue":
+      return "key_exists";
+    default:
+      return "is";
+  }
+}
+function applyOperatorChange(condition, newOperator, shape) {
+  const next = __spreadProps(__spreadValues({}, condition), { operator: newOperator });
+  const oldOperator = condition.operator;
+  if (shape === "date") {
+    const value = condition.value;
+    const isRelative = isDateCelValue(value) && isRelativeDateCelValue(value);
+    const changesValueShape = isDateRangeOperator(oldOperator) !== isDateRangeOperator(newOperator);
+    const relativeNeedsClear = isRelative && (newOperator === "is" || newOperator === "is_not");
+    if (changesValueShape || relativeNeedsClear) {
+      next.value = void 0;
+      return next;
+    }
+    if (isDateCelValue(value) && value.hasTime && isDateWindowOperator(newOperator)) {
+      const _a = value, { hasTime: _hasTime } = _a, dayOnly = __objRest(_a, ["hasTime"]);
+      next.value = dayOnly;
+    }
+    return next;
+  }
+  if (shape === "map") {
+    const value = condition.value;
+    if (!isMapKeyCelValue(value)) {
+      return next;
+    }
+    const bothValueOps = MAP_VALUE_OPERATORS.includes(oldOperator) && MAP_VALUE_OPERATORS.includes(newOperator);
+    next.value = bothValueOps ? { key: value.key, value: value.value } : { key: value.key };
+    return next;
+  }
+  return next;
+}
+var atomic = (expression) => ({ expression, needsGrouping: false });
+function buildConditionExpression(condition, shape, columnDef) {
+  var _a, _b, _c, _d, _e, _f;
+  if (shape === "map") {
+    return buildMapExpression(condition.columnId, condition.operator, condition.value);
+  }
+  const columnId = (_b = (_a = columnDef == null ? void 0 : columnDef.id) != null ? _a : condition.columnId) != null ? _b : "";
+  const column = (_c = RESERVED_COLUMN_CEL_IDENTIFIERS[columnId]) != null ? _c : columnId;
+  switch (shape) {
+    case "checkbox":
+      return buildCheckboxExpression(column, condition.operator, (_d = condition.value) != null ? _d : []);
+    case "radio":
+      return buildRadioExpression(column, condition.operator, String((_e = condition.value) != null ? _e : ""));
+    case "text":
+      return atomic(buildTextTokenFragment(column, condition.operator, String((_f = condition.value) != null ? _f : "")));
+    case "multiText":
+      return buildMultiTextExpression(column, condition.operator, condition.value);
+    case "date":
+      return atomic(buildDateExpression(column, condition.operator, condition.value));
+    default:
+      return atomic("");
+  }
+}
+function buildCheckboxExpression(column, operator, values) {
+  const list = `${column} in [${values.map(celStringLiteral).join(", ")}]`;
+  return atomic(operator === "is_not" ? `!(${list})` : list);
+}
+function buildRadioExpression(column, operator, value) {
+  const literal = celStringLiteral(value);
+  return atomic(operator === "is_not" ? `${column} != ${literal}` : `${column} == ${literal}`);
+}
+function buildTextTokenFragment(column, operator, value, forcePositive = false) {
+  const literal = celStringLiteral(value);
+  switch (operator) {
+    case "is":
+      return `${column} == ${literal}`;
+    case "is_not":
+      return forcePositive ? `${column} == ${literal}` : `${column} != ${literal}`;
+    case "contains":
+      return `${column}.contains(${literal})`;
+    case "does_not_contain":
+      return forcePositive ? `${column}.contains(${literal})` : `!${column}.contains(${literal})`;
+    case "starts_with":
+      return `${column}.startsWith(${literal})`;
+    case "ends_with":
+      return `${column}.endsWith(${literal})`;
+    case "matches":
+      return `${column}.matches(${literal})`;
+    default:
+      return "";
+  }
+}
+function isNegatedTextOperator(operator) {
+  return operator === "is_not" || operator === "does_not_contain";
+}
+function buildMultiTextExpression(column, operator, value) {
+  const tokens = value.tokens;
+  if (tokens.length === 1) {
+    return atomic(buildTextTokenFragment(column, operator, tokens[0]));
+  }
+  const connective = value.quantifier === "all" ? " && " : " || ";
+  const joined = tokens.map((token) => buildTextTokenFragment(column, operator, token, true)).join(connective);
+  if (isNegatedTextOperator(operator)) {
+    return atomic(`!(${joined})`);
+  }
+  return { expression: joined, needsGrouping: value.quantifier !== "all" };
+}
+var DATE_RELATIVE_COMPARATOR_SYMBOLS = {
+  is_before: "<",
+  is_after: ">",
+  is_on_or_before: "<=",
+  is_on_or_after: ">="
+};
+function buildCalendarDayRange(column, startInstant, endInstant) {
+  const start = `timestamp(${celStringLiteral(startInstant)})`;
+  const end = `timestamp(${celStringLiteral(endInstant)})`;
+  return `${column} >= ${start} && ${column} <= ${end}`;
+}
+function buildDateExpression(column, operator, value) {
+  var _a, _b, _c;
+  if (isRelativeDateCelValue(value)) {
+    const durationStr = (_a = value.preset) != null ? _a : "";
+    if (!durationStr) {
+      return "";
+    }
+    const relativeSymbol = (_b = DATE_RELATIVE_COMPARATOR_SYMBOLS[operator]) != null ? _b : ">";
+    return `${column} ${relativeSymbol} now() - duration(${celStringLiteral(durationStr)})`;
+  }
+  if (isDateRangeOperator(operator) && value.range) {
+    const range = buildCalendarDayRange(column, value.range.start, value.range.end);
+    return operator === "is_not_between" ? `!(${range})` : range;
+  }
+  const startInstant = (_c = value.instant) != null ? _c : "";
+  const granularity = value.hasTime && !isDateWindowOperator(operator) ? "minute" : "day";
+  const endInstant = inclusiveEndInstant(startInstant, granularity);
+  const startTimestamp = `timestamp(${celStringLiteral(startInstant)})`;
+  const endTimestamp = `timestamp(${celStringLiteral(endInstant)})`;
+  switch (operator) {
+    case "is":
+      return buildCalendarDayRange(column, startInstant, endInstant);
+    case "is_not":
+      return `!(${buildCalendarDayRange(column, startInstant, endInstant)})`;
+    case "is_before":
+      return `${column} < ${startTimestamp}`;
+    case "is_on_or_before":
+      return `${column} <= ${endTimestamp}`;
+    case "is_after":
+      return `${column} > ${endTimestamp}`;
+    case "is_on_or_after":
+      return `${column} >= ${startTimestamp}`;
+    default:
+      return `${column} == ${startTimestamp}`;
+  }
+}
+function buildMapExpression(columnId, operator, value) {
+  var _a, _b, _c;
+  const column = (_a = RESERVED_COLUMN_CEL_IDENTIFIERS[columnId]) != null ? _a : columnId;
+  const keyLiteral = celStringLiteral(value.key);
+  switch (operator) {
+    case "key_exists":
+      return atomic(`${keyLiteral} in ${column}`);
+    case "key_does_not_exist":
+      return atomic(`!(${keyLiteral} in ${column})`);
+    case "has_value":
+      return atomic(`${column}[${keyLiteral}] == ${celStringLiteral((_b = value.value) != null ? _b : "")}`);
+    case "does_not_have_value":
+      return atomic(`${column}[${keyLiteral}] != ${celStringLiteral((_c = value.value) != null ? _c : "")}`);
+    default:
+      return atomic("");
+  }
+}
+
+// src/lib/cel-filter/compile/validate-condition.ts
+function statusFromIssues(issues) {
+  if (issues.some((issue) => issue.severity === "invalid")) {
+    return "invalid";
+  }
+  if (issues.some((issue) => issue.severity === "incomplete")) {
+    return "incomplete";
+  }
+  return "valid";
+}
+var SEVERITY_BY_CODE = {
+  missing_column: "incomplete",
+  missing_value: "incomplete",
+  missing_key: "incomplete",
+  missing_tokens: "incomplete",
+  missing_quantifier: "incomplete",
+  missing_instant: "incomplete",
+  missing_range: "incomplete",
+  missing_duration: "incomplete",
+  unknown_column: "invalid",
+  illegal_operator: "invalid",
+  invalid_date_mode: "invalid",
+  regex_too_long: "invalid",
+  invalid_timestamp: "invalid",
+  invalid_date_range: "invalid",
+  nesting_depth_exceeded: "invalid"
+};
+var MESSAGES = {
+  missing_column: "Select a column for this filter.",
+  missing_value: "Enter a value for this filter.",
+  missing_key: "Enter a key for this filter.",
+  missing_tokens: "Enter at least one value for this filter.",
+  missing_quantifier: "Choose whether to match any or all values.",
+  missing_instant: "Select a date for this filter.",
+  missing_range: "Select a start and end date for this filter.",
+  missing_duration: "Select a duration for this filter.",
+  unknown_column: "This column is not available for filtering.",
+  illegal_operator: "This operator is not allowed for this filter.",
+  invalid_date_mode: "This operator cannot be used with this date mode.",
+  regex_too_long: `Pattern exceeds the maximum length of ${MAX_REGEX_LEN} characters.`,
+  invalid_timestamp: "Enter a valid date.",
+  invalid_date_range: "The start must be on or before the end.",
+  nesting_depth_exceeded: "This filter is nested too deeply."
+};
+var RFC3339_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/;
+function isValidRfc3339(value) {
+  return RFC3339_RE.test(value) && !Number.isNaN(Date.parse(value)) && isRealCalendarDay(value);
+}
+function makeIssue({ condition, code, field }) {
+  return {
+    code,
+    message: MESSAGES[code],
+    severity: SEVERITY_BY_CODE[code],
+    nodeId: condition.id,
+    nodeType: "condition",
+    field
+  };
+}
+function validateCondition(condition, schema) {
+  if (!condition.columnId) {
+    return [makeIssue({ condition, code: "missing_column", field: "columnId" })];
+  }
+  const columnDef = resolveColumnDefinition(condition, schema);
+  if (!columnDef) {
+    return [makeIssue({ condition, code: "unknown_column", field: "columnId" })];
+  }
+  return validateColumnCondition(condition, columnDef);
+}
+function validateColumnCondition(condition, columnDef) {
+  const allowed = getAllowedOperators(columnDef);
+  if (!allowed.includes(condition.operator)) {
+    return [makeIssue({ condition, code: "illegal_operator", field: "operator" })];
+  }
+  switch (columnDef.filterType) {
+    case "checkbox":
+    case "static":
+      return validateCheckbox(condition);
+    case "radio":
+    case "text":
+      return validateSingleString(condition, columnDef.filterType);
+    case "multiText":
+      return validateMultiText(condition);
+    case "date":
+      return validateDate(condition);
+    case "keyValue":
+      return validateMapCondition(condition);
+    default:
+      return [];
+  }
+}
+function validateCheckbox(condition) {
+  const value = condition.value;
+  if (!Array.isArray(value) || value.length === 0) {
+    return [makeIssue({ condition, code: "missing_value", field: "value" })];
+  }
+  return [];
+}
+function validateSingleString(condition, filterType) {
+  const value = condition.value;
+  if (typeof value !== "string" || value === "") {
+    return [makeIssue({ condition, code: "missing_value", field: "value" })];
+  }
+  if (filterType === "text" && condition.operator === "matches" && value.length > MAX_REGEX_LEN) {
+    return [makeIssue({ condition, code: "regex_too_long", field: "pattern" })];
+  }
+  return [];
+}
+function validateMultiText(condition) {
+  const value = condition.value;
+  if (!isMultiTextCelValue(value) || value.tokens.length === 0) {
+    return [makeIssue({ condition, code: "missing_tokens", field: "tokens" })];
+  }
+  const issues = [];
+  const multi = value;
+  if (multi.tokens.length > 1 && !multi.quantifier) {
+    issues.push(makeIssue({ condition, code: "missing_quantifier", field: "quantifier" }));
+  }
+  if (condition.operator === "matches" && multi.tokens.some((token) => token.length > MAX_REGEX_LEN)) {
+    issues.push(makeIssue({ condition, code: "regex_too_long", field: "pattern" }));
+  }
+  return issues;
+}
+function validateDate(condition) {
+  const value = condition.value;
+  if (!isDateCelValue(value)) {
+    return [makeIssue({ condition, code: "missing_instant", field: "instant" })];
+  }
+  const date = value;
+  if (isRelativeDateCelValue(date)) {
+    return validateRelativeDate(condition, date);
+  }
+  return validateAbsoluteDate(condition, date);
+}
+function validateAbsoluteDate(condition, value) {
+  const issues = [];
+  if (isDateRangeOperator(condition.operator)) {
+    const range = value.range;
+    if (!range || !range.start || !range.end) {
+      issues.push(makeIssue({ condition, code: "missing_range", field: "range" }));
+      return issues;
+    }
+    if (!isValidRfc3339(range.start)) {
+      issues.push(makeIssue({ condition, code: "invalid_timestamp", field: "start" }));
+    }
+    if (!isValidRfc3339(range.end)) {
+      issues.push(makeIssue({ condition, code: "invalid_timestamp", field: "end" }));
+    }
+    if (issues.length === 0 && Date.parse(range.start) > Date.parse(range.end)) {
+      issues.push(makeIssue({ condition, code: "invalid_date_range", field: "range" }));
+    }
+    return issues;
+  }
+  if (!value.instant) {
+    issues.push(makeIssue({ condition, code: "missing_instant", field: "instant" }));
+    return issues;
+  }
+  if (!isValidRfc3339(value.instant)) {
+    issues.push(makeIssue({ condition, code: "invalid_timestamp", field: "instant" }));
+  }
+  return issues;
+}
+function validateRelativeDate(condition, value) {
+  const issues = [];
+  if (!isDateRelativeOperator(condition.operator)) {
+    issues.push(makeIssue({ condition, code: "invalid_date_mode", field: "value" }));
+    return issues;
+  }
+  if (!value.preset) {
+    issues.push(makeIssue({ condition, code: "missing_duration", field: "preset" }));
+  }
+  return issues;
+}
+function validateMapCondition(condition) {
+  const issues = [];
+  const value = isMapKeyCelValue(condition.value) ? condition.value : void 0;
+  if (!value || value.key === "") {
+    issues.push(makeIssue({ condition, code: "missing_key", field: "key" }));
+  }
+  const requiresValue = condition.operator === "has_value" || condition.operator === "does_not_have_value";
+  if (requiresValue && (!value || !value.value)) {
+    issues.push(makeIssue({ condition, code: "missing_value", field: "value" }));
+  }
+  return issues;
+}
+
+// src/lib/cel-filter/compile/apply-display-rules.ts
+function applyDisplayRules(raw, meta) {
+  const issues = raw.issues.filter((issue) => {
+    if (issue.nodeType === "group") {
+      return true;
+    }
+    if (issue.nodeId === meta.editingConditionId) {
+      return false;
+    }
+    return meta.committedConditionIds.has(issue.nodeId);
+  });
+  const status = statusFromIssues(issues);
+  const expression = status === "valid" ? raw.expression : void 0;
+  return {
+    status,
+    expression,
+    issues,
+    isEmitReady: false
+  };
+}
+
+// src/lib/cel-filter/schema-utils.ts
+var COMMIT_FILTER_TYPES = /* @__PURE__ */ new Set(["text", "multiText", "keyValue", "date"]);
+function getColumnEmitOn(columnDef) {
+  if (columnDef.emitOn) {
+    return columnDef.emitOn;
+  }
+  return COMMIT_FILTER_TYPES.has(columnDef.filterType) ? "commit" : "change";
+}
+
+// src/lib/cel-filter/compile/compute-is-emit-ready.ts
+function resolveEditingColumn(tree, schema, editingConditionId) {
+  const condition = tree.root.children.find(
+    (child) => isCelFilterCondition(child) && child.id === editingConditionId
+  );
+  return condition && schema.columns.find((column) => column.id === condition.columnId);
+}
+function computeIsEmitReady(raw, editingConditionId, schema, tree, meta) {
+  if (raw.status !== "valid") return false;
+  if (!editingConditionId) return true;
+  const columnDef = resolveEditingColumn(tree, schema, editingConditionId);
+  if (!columnDef || getColumnEmitOn(columnDef) === "change") return true;
+  const popoverClosed = meta.activeSurface === null;
+  return popoverClosed && meta.committedConditionIds.has(editingConditionId);
+}
+
+// src/lib/cel-filter/compile/compile-cel-filter-tree.ts
+function combineGroupFragments(fragments) {
+  if (fragments.length === 0) {
+    return { expression: "", needsGrouping: false };
+  }
+  if (fragments.length === 1) {
+    return fragments[0];
+  }
+  return {
+    expression: fragments.map((fragment) => fragment.needsGrouping ? `(${fragment.expression})` : fragment.expression).join(" && "),
+    needsGrouping: false
+  };
+}
+function compileGroup(group, schema) {
+  const depthIssues = group.depth > MAX_NESTING_DEPTH ? [
+    {
+      code: "nesting_depth_exceeded",
+      message: "This filter is nested too deeply.",
+      severity: "invalid",
+      nodeId: group.id,
+      nodeType: "group"
+    }
+  ] : [];
+  return group.children.reduce(
+    (acc, child) => {
+      if (isCelFilterGroup(child)) {
+        const nested = compileGroup(child, schema);
+        acc.issues.push(...nested.issues);
+        if (nested.fragments.length > 0) {
+          acc.fragments.push(combineGroupFragments(nested.fragments));
+        }
+        return acc;
+      }
+      if (isCelFilterCondition(child)) {
+        const conditionIssues = validateCondition(child, schema);
+        if (conditionIssues.length > 0) {
+          acc.issues.push(...conditionIssues);
+          return acc;
+        }
+        const shape = resolveFilterShape(child, schema);
+        if (!shape) {
+          return acc;
+        }
+        const columnDef = resolveColumnDefinition(child, schema);
+        acc.fragments.push(buildConditionExpression(child, shape, columnDef));
+      }
+      return acc;
+    },
+    { issues: depthIssues, fragments: [] }
+  );
+}
+function compileCelFilterTree(tree, schema) {
+  const { issues, fragments } = compileGroup(tree.root, schema);
+  const status = statusFromIssues(issues);
+  if (status === "valid") {
+    return { status, expression: combineGroupFragments(fragments).expression, issues, isEmitReady: true };
+  }
+  return { status, issues, isEmitReady: false };
+}
+
+// src/lib/cel-filter/tree-utils.ts
+function createCelNodeId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `cel-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function createEmptyCelFilterTree() {
+  return {
+    root: {
+      id: createCelNodeId(),
+      type: "group",
+      combinator: "and",
+      depth: 0,
+      children: []
+    }
+  };
+}
+function createDefaultCondition({ schema, columnId }) {
+  const columnDef = schema.columns.find((column) => column.id === columnId);
+  if (!columnDef) {
+    throw new Error(`createDefaultCondition: column "${columnId}" is not in schema.columns`);
+  }
+  return {
+    id: createCelNodeId(),
+    type: "condition",
+    columnId,
+    operator: getDefaultOperator(columnDef.filterType),
+    value: columnDef.defaultValue
+  };
+}
+function appendCondition(tree, condition) {
+  return { root: __spreadProps(__spreadValues({}, tree.root), { children: [...tree.root.children, condition] }) };
+}
+function replaceCondition(tree, conditionId, updater) {
+  return {
+    root: __spreadProps(__spreadValues({}, tree.root), {
+      children: tree.root.children.map(
+        (child) => isCelFilterCondition(child) && child.id === conditionId ? updater(child) : child
+      )
+    })
+  };
+}
+function removeConditionById(tree, conditionId) {
+  return {
+    root: __spreadProps(__spreadValues({}, tree.root), {
+      children: tree.root.children.filter((child) => !(isCelFilterCondition(child) && child.id === conditionId))
+    })
+  };
+}
+
+// src/cel-filter-bar/cel-filter-bar.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var RELATIVE_PRESET_LABELS = {
+  "24h": "Last 24 hours",
+  "168h": "Last 7 days",
+  "720h": "Last 30 days"
+};
+var SEGMENT_SELECT_TRIGGER_CLASSNAME = "hover:border-input! focus-visible:border-input focus-visible:ring-0 hover:bg-muted focus-visible:bg-muted aria-expanded:bg-muted";
+function CelFilterBar({
+  tree,
+  onChange,
+  schema,
+  onCompileResultChange,
+  onRestrictedOptionSelect,
+  showClearButton = false,
+  className
+}) {
+  const editor = useCelFilterEditorState();
+  const onCompileResultChangeRef = React3.useRef(onCompileResultChange);
+  React3.useEffect(() => {
+    onCompileResultChangeRef.current = onCompileResultChange;
+  });
+  const rawResult = React3.useMemo(() => compileCelFilterTree(tree, schema), [tree, schema]);
+  const displayResult = React3.useMemo(
+    () => applyDisplayRules(rawResult, {
+      editingConditionId: editor.editingConditionId,
+      committedConditionIds: editor.committedConditionIds
+    }),
+    [rawResult, editor.editingConditionId, editor.committedConditionIds]
+  );
+  const isEmitReady = React3.useMemo(
+    () => computeIsEmitReady(rawResult, editor.editingConditionId, schema, tree, {
+      activeSurface: editor.activeSurface,
+      committedConditionIds: editor.committedConditionIds
+    }),
+    [rawResult, editor.editingConditionId, editor.activeSurface, editor.committedConditionIds, schema, tree]
+  );
+  React3.useEffect(() => {
+    var _a;
+    (_a = onCompileResultChangeRef.current) == null ? void 0 : _a.call(onCompileResultChangeRef, __spreadProps(__spreadValues({}, displayResult), { isEmitReady }));
+  }, [displayResult, isEmitReady]);
+  const conditions = tree.root.children.filter(isCelFilterCondition);
+  function handleAddFilter(columnId) {
+    const condition = createDefaultCondition({ schema, columnId });
+    onChange(appendCondition(tree, condition));
+    editor.beginEditing(condition.id);
+    editor.suppressDismissFor(condition.id);
+  }
+  function handleRemove(conditionId) {
+    onChange(removeConditionById(tree, conditionId));
+    editor.removeCondition(conditionId);
+  }
+  function handleClearAll() {
+    onChange({ root: __spreadProps(__spreadValues({}, tree.root), { children: [] }) });
+    editor.clearSuppress();
+  }
+  return /* @__PURE__ */ jsxs4("div", { "data-slot": "cel-filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx5(CelAddFilterButton, { schema, conditions, onSelect: handleAddFilter }),
+    conditions.map((condition) => {
+      const columnDef = resolveColumnDefinition(condition, schema);
+      if (!columnDef) return null;
+      return /* @__PURE__ */ jsx5(
+        CelFilterPill,
+        {
+          condition,
+          columnDef,
+          schema,
+          tree,
+          onChange,
+          controller: editor.getController(condition.id),
+          issues: displayResult.issues.filter((issue) => issue.nodeId === condition.id),
+          onRemove: () => handleRemove(condition.id),
+          onRestrictedOptionSelect
+        },
+        condition.id
+      );
+    }),
+    showClearButton && conditions.length > 0 && /* @__PURE__ */ jsx5(Button3, { variant: "ghost", size: "sm", onClick: handleClearAll, children: "Clear all" })
+  ] });
+}
+function CelAddFilterButton({
+  schema,
+  conditions,
+  onSelect
+}) {
+  var _a, _b;
+  const usedSingleInstanceColumnIds = new Set(
+    conditions.map((condition) => resolveColumnDefinition(condition, schema)).filter(
+      (columnDef) => !!columnDef && !allowsMultipleConditions(columnDef.filterType)
+    ).map((columnDef) => columnDef.id)
+  );
+  const availableColumns = schema.columns.filter((column) => !usedSingleInstanceColumnIds.has(column.id));
+  const groupMap = /* @__PURE__ */ new Map();
+  for (const column of availableColumns) {
+    const key = (_a = column.group) != null ? _a : "";
+    const list = (_b = groupMap.get(key)) != null ? _b : [];
+    list.push(column);
+    groupMap.set(key, list);
+  }
+  const groups = Array.from(groupMap.entries()).map(([value, items]) => ({ value, items }));
+  return /* @__PURE__ */ jsxs4(
+    Combobox,
+    {
+      items: groups,
+      itemToStringValue: (item) => item.title,
+      itemToStringLabel: (item) => item.title,
+      onValueChange: (column) => {
+        if (column) onSelect(column.id);
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(ComboboxTrigger, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx5(Button3, { variant: "outline" }), children: [
+          /* @__PURE__ */ jsx5(Icon3, { name: "plus", "data-icon": "inline-start" }),
+          "Add filter"
+        ] }),
+        /* @__PURE__ */ jsxs4(ComboboxContent, { align: "start", className: "w-64", children: [
+          /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: "Search filters\u2026" }),
+          /* @__PURE__ */ jsx5(ComboboxEmpty, { children: "No filters found." }),
+          /* @__PURE__ */ jsx5(ComboboxList, { children: (group) => /* @__PURE__ */ jsxs4(ComboboxGroup, { items: group.items, children: [
+            group.value && /* @__PURE__ */ jsx5(ComboboxLabel, { children: group.value }),
+            /* @__PURE__ */ jsx5(ComboboxCollection, { children: (column) => /* @__PURE__ */ jsx5(ComboboxItem, { value: column, children: column.title }, column.id) })
+          ] }, group.value) })
+        ] })
+      ]
+    }
+  );
+}
+function formatConditionSummary(condition, columnDef, locale) {
+  var _a, _b, _c, _d, _e, _f;
+  const shape = columnDef.filterType === "keyValue" ? "map" : columnDef.filterType;
+  switch (shape) {
+    case "checkbox": {
+      const value = isCheckboxCelValue(condition.value) ? condition.value : [];
+      if (value.length === 0) return "Any";
+      if (value.length === 1) {
+        return (_c = (_b = (_a = columnDef.options) == null ? void 0 : _a.find((opt) => opt.value === value[0])) == null ? void 0 : _b.label) != null ? _c : value[0];
+      }
+      return `${value.length} ${columnDef.pluralTitle}`;
+    }
+    case "radio":
+    case "static": {
+      const value = typeof condition.value === "string" ? condition.value : "";
+      if (!value) return "Any";
+      return (_f = (_e = (_d = columnDef.options) == null ? void 0 : _d.find((opt) => opt.value === value)) == null ? void 0 : _e.label) != null ? _f : value;
+    }
+    case "text":
+      return typeof condition.value === "string" && condition.value ? condition.value : "Any";
+    case "multiText": {
+      const value = readMultiTextCelValue(condition.value);
+      if (value.tokens.length === 0) return "Any";
+      if (value.tokens.length === 1) return value.tokens[0];
+      return `${value.tokens.length} values`;
+    }
+    case "date": {
+      const value = readDateCelValue(condition.value);
+      if (isRelativeDateCelValue(value)) return value.preset ? RELATIVE_PRESET_LABELS[value.preset] : "Any";
+      if (value.range)
+        return `${formatInstantLabel(value.range.start, { locale })} \u2013 ${formatInstantLabel(value.range.end, { locale })}`;
+      if (value.instant) return formatInstantLabel(value.instant, { withTime: value.hasTime, locale });
+      return "Any";
+    }
+    case "map": {
+      const value = readMapKeyCelValue(condition.value);
+      if (!value.key) return "Any";
+      return value.value ? `${value.key}=${value.value}` : value.key;
+    }
+    default:
+      return "Any";
+  }
+}
+function CelFilterPill({
+  condition,
+  columnDef,
+  schema,
+  tree,
+  onChange,
+  controller,
+  issues,
+  onRemove,
+  onRestrictedOptionSelect
+}) {
+  var _a;
+  const shape = (_a = resolveFilterShape(condition, schema)) != null ? _a : columnDef.filterType;
+  const mounted = useMounted();
+  const locale = mounted ? void 0 : "en-US";
+  if (shape === "checkbox") {
+    return /* @__PURE__ */ jsx5(
+      CelCheckboxComboboxPill,
+      {
+        condition,
+        columnDef,
+        tree,
+        onChange,
+        controller,
+        issues,
+        onRemove,
+        onRestrictedOptionSelect
+      }
+    );
+  }
+  if (shape === "radio") {
+    return /* @__PURE__ */ jsx5(
+      CelRadioComboboxPill,
+      {
+        condition,
+        columnDef,
+        tree,
+        onChange,
+        controller,
+        issues,
+        onRemove,
+        onRestrictedOptionSelect
+      }
+    );
+  }
+  function updateValue(value) {
+    onChange(replaceCondition(tree, condition.id, (c) => __spreadProps(__spreadValues({}, c), { value })));
+  }
+  function updateOperator(operator) {
+    const hadValue = condition.value !== void 0;
+    const next = applyOperatorChange(condition, operator, shape);
+    onChange(replaceCondition(tree, condition.id, () => next));
+    if (hadValue && next.value === void 0) controller.beginEditing();
+  }
+  const allowedOperators = getAllowedOperators(columnDef);
+  return /* @__PURE__ */ jsxs4(
+    Popover,
+    {
+      open: controller.popoverVisible,
+      onOpenChange: (open) => {
+        if (open) controller.beginEditing();
+        else if (!controller.isDismissSuppressed()) controller.handlePopoverDismiss();
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx5(ButtonGroupText, { children: columnDef.title }),
+          /* @__PURE__ */ jsx5(
+            CelOperatorSegment,
+            {
+              columnTitle: columnDef.title,
+              operator: condition.operator,
+              allowedOperators,
+              hideOnSingleOperator: columnDef.hideOnSingleOperator,
+              onChangeOperator: updateOperator
+            }
+          ),
+          shape === "multiText" && /* @__PURE__ */ jsx5(
+            CelQuantifierSegment,
+            {
+              columnTitle: columnDef.title,
+              value: readMultiTextCelValue(condition.value),
+              onChangeValue: updateValue
+            }
+          ),
+          /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button3, { variant: "outline", className: "gap-1 font-normal", children: [
+            /* @__PURE__ */ jsx5("span", { className: cn(issues.length > 0 && "text-destructive"), children: formatConditionSummary(condition, columnDef, locale) }),
+            /* @__PURE__ */ jsx5(Icon3, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+          ] }) }),
+          /* @__PURE__ */ jsx5(Button3, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx5(Icon3, { name: "xmark" }) })
+        ] }),
+        /* @__PURE__ */ jsxs4(PopoverContent, { align: "start", className: shape === "date" ? "w-fit" : "w-72", children: [
+          shape === "text" && /* @__PURE__ */ jsx5(CelTextValueEditor, { condition, onChangeValue: updateValue, onCommit: controller.commit }),
+          shape === "multiText" && /* @__PURE__ */ jsx5(CelMultiTextValueEditor, { condition, onChangeValue: updateValue }),
+          shape === "date" && /* @__PURE__ */ jsx5(CelDateValueEditor, { condition, onChangeValue: updateValue }),
+          shape === "map" && /* @__PURE__ */ jsx5(CelKeyValueValueEditor, { condition, onChangeValue: updateValue, onCommit: controller.commit }),
+          issues.length > 0 && /* @__PURE__ */ jsx5("p", { className: "text-body-sm text-destructive", children: issues.map((issue) => issue.message).join(" ") })
+        ] })
+      ]
+    }
+  );
+}
+function CelOperatorSegment({
+  columnTitle,
+  operator,
+  allowedOperators,
+  hideOnSingleOperator,
+  onChangeOperator
+}) {
+  if (allowedOperators.length > 1) {
+    return /* @__PURE__ */ jsxs4(Select, { value: operator, onValueChange: (value) => onChangeOperator(value), children: [
+      /* @__PURE__ */ jsx5(SelectTrigger, { "aria-label": `${columnTitle} operator`, className: SEGMENT_SELECT_TRIGGER_CLASSNAME, children: /* @__PURE__ */ jsx5(SelectValue, {}) }),
+      /* @__PURE__ */ jsx5(SelectContent, { position: "popper", children: /* @__PURE__ */ jsx5(SelectGroup, { children: allowedOperators.map((op) => /* @__PURE__ */ jsx5(SelectItem, { value: op, children: getOperatorLabel(op) }, op)) }) })
+    ] });
+  }
+  if (allowedOperators.length === 1 && !hideOnSingleOperator) {
+    return /* @__PURE__ */ jsx5(ButtonGroupText, { className: "text-muted-foreground font-normal", children: getOperatorLabel(allowedOperators[0]) });
+  }
+  return null;
+}
+function CelQuantifierSegment({
+  columnTitle,
+  value,
+  onChangeValue
+}) {
+  var _a;
+  if (value.tokens.length <= 1) return null;
+  return /* @__PURE__ */ jsxs4(
+    Select,
+    {
+      value: (_a = value.quantifier) != null ? _a : "any",
+      onValueChange: (next) => {
+        if (next === "any" || next === "all") onChangeValue(__spreadProps(__spreadValues({}, value), { quantifier: next }));
+      },
+      children: [
+        /* @__PURE__ */ jsx5(SelectTrigger, { "aria-label": `${columnTitle} quantifier`, className: SEGMENT_SELECT_TRIGGER_CLASSNAME, children: /* @__PURE__ */ jsx5(SelectValue, {}) }),
+        /* @__PURE__ */ jsx5(SelectContent, { position: "popper", children: /* @__PURE__ */ jsxs4(SelectGroup, { children: [
+          /* @__PURE__ */ jsx5(SelectItem, { value: "any", children: getQuantifierLabel("any") }),
+          /* @__PURE__ */ jsx5(SelectItem, { value: "all", children: getQuantifierLabel("all") })
+        ] }) })
+      ]
+    }
+  );
+}
+function CelCheckboxComboboxPill({
+  condition,
+  columnDef,
+  tree,
+  onChange,
+  controller,
+  issues,
+  onRemove,
+  onRestrictedOptionSelect
+}) {
+  var _a;
+  const options = (_a = columnDef.options) != null ? _a : [];
+  const value = isCheckboxCelValue(condition.value) ? condition.value : [];
+  const selected = options.filter((option) => value.includes(option.value));
+  const allowedOperators = getAllowedOperators(columnDef);
+  function updateOperator(operator) {
+    onChange(replaceCondition(tree, condition.id, (c) => applyOperatorChange(c, operator, "checkbox")));
+  }
+  function applySelection(nextSelected) {
+    const current = new Set(value);
+    const nextValues = new Set(nextSelected.map((option) => option.value));
+    for (const option of nextSelected) {
+      if (!current.has(option.value) && option.disabled) {
+        onRestrictedOptionSelect == null ? void 0 : onRestrictedOptionSelect({ columnId: columnDef.id, value: option.value, label: option.label });
+        nextValues.delete(option.value);
+      }
+    }
+    onChange(replaceCondition(tree, condition.id, (c) => __spreadProps(__spreadValues({}, c), { value: Array.from(nextValues) })));
+    const added = nextSelected.find((option) => !current.has(option.value) && !option.disabled && option.operator);
+    if (added == null ? void 0 : added.operator) updateOperator(added.operator);
+  }
+  return /* @__PURE__ */ jsxs4(
+    Combobox,
+    {
+      items: options,
+      itemToStringValue: (item) => item.label,
+      multiple: true,
+      value: selected,
+      onValueChange: (next) => applySelection(next),
+      open: controller.popoverVisible,
+      onOpenChange: (open) => {
+        if (open) controller.beginEditing();
+        else if (!controller.isDismissSuppressed()) controller.handlePopoverDismiss();
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx5(ButtonGroupText, { children: columnDef.title }),
+          /* @__PURE__ */ jsx5(
+            CelOperatorSegment,
+            {
+              columnTitle: columnDef.title,
+              operator: condition.operator,
+              allowedOperators,
+              hideOnSingleOperator: columnDef.hideOnSingleOperator,
+              onChangeOperator: updateOperator
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            ComboboxTrigger,
+            {
+              "aria-label": `${columnDef.title} value`,
+              render: /* @__PURE__ */ jsx5(Button3, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx5("span", { className: cn(issues.length > 0 && "text-destructive"), children: formatConditionSummary(condition, columnDef) })
+            }
+          ),
+          /* @__PURE__ */ jsx5(Button3, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx5(Icon3, { name: "xmark" }) })
+        ] }),
+        /* @__PURE__ */ jsxs4(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+          /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
+          selected.length > 0 && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+            /* @__PURE__ */ jsxs4(ComboboxSelectedChips, { children: [
+              /* @__PURE__ */ jsx5(ComboboxValue, { children: (items) => /* @__PURE__ */ jsx5(Fragment3, { children: items.map((item) => /* @__PURE__ */ jsx5(ComboboxChip, { children: item.label }, item.value)) }) }),
+              /* @__PURE__ */ jsx5(ComboboxClearAll, { onClick: () => applySelection([]) })
+            ] }),
+            /* @__PURE__ */ jsx5(ComboboxSeparator, {})
+          ] }),
+          /* @__PURE__ */ jsxs4(ComboboxEmpty, { children: [
+            "No ",
+            columnDef.title.toLowerCase(),
+            " found."
+          ] }),
+          /* @__PURE__ */ jsx5(ComboboxList, { children: (item) => /* @__PURE__ */ jsx5(ComboboxItem, { value: item, className: cn(item.disabled && "text-muted-foreground"), children: item.label }, item.value) }),
+          issues.length > 0 && /* @__PURE__ */ jsx5("p", { className: "text-body-sm text-destructive", children: issues.map((issue) => issue.message).join(" ") })
+        ] })
+      ]
+    }
+  );
+}
+function CelRadioComboboxPill({
+  condition,
+  columnDef,
+  tree,
+  onChange,
+  controller,
+  issues,
+  onRemove,
+  onRestrictedOptionSelect
+}) {
+  var _a, _b;
+  const options = (_a = columnDef.options) != null ? _a : [];
+  const value = typeof condition.value === "string" ? condition.value : "";
+  const selected = (_b = options.find((option) => option.value === value)) != null ? _b : null;
+  const allowedOperators = getAllowedOperators(columnDef);
+  function updateOperator(operator) {
+    onChange(replaceCondition(tree, condition.id, (c) => applyOperatorChange(c, operator, "radio")));
+  }
+  function applySelection(option) {
+    if (!option) return;
+    if (option.disabled) {
+      onRestrictedOptionSelect == null ? void 0 : onRestrictedOptionSelect({ columnId: columnDef.id, value: option.value, label: option.label });
+      return;
+    }
+    onChange(replaceCondition(tree, condition.id, (c) => __spreadProps(__spreadValues({}, c), { value: option.value })));
+    if (option.operator) updateOperator(option.operator);
+    controller.commit();
+  }
+  return /* @__PURE__ */ jsxs4(
+    Combobox,
+    {
+      items: options,
+      itemToStringValue: (item) => item.label,
+      value: selected,
+      onValueChange: (next) => applySelection(next),
+      open: controller.popoverVisible,
+      onOpenChange: (open) => {
+        if (open) controller.beginEditing();
+        else if (!controller.isDismissSuppressed()) controller.handlePopoverDismiss();
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx5(ButtonGroupText, { children: columnDef.title }),
+          /* @__PURE__ */ jsx5(
+            CelOperatorSegment,
+            {
+              columnTitle: columnDef.title,
+              operator: condition.operator,
+              allowedOperators,
+              hideOnSingleOperator: columnDef.hideOnSingleOperator,
+              onChangeOperator: updateOperator
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            ComboboxTrigger,
+            {
+              "aria-label": `${columnDef.title} value`,
+              render: /* @__PURE__ */ jsx5(Button3, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx5("span", { className: cn(issues.length > 0 && "text-destructive"), children: formatConditionSummary(condition, columnDef) })
+            }
+          ),
+          /* @__PURE__ */ jsx5(Button3, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx5(Icon3, { name: "xmark" }) })
+        ] }),
+        /* @__PURE__ */ jsxs4(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+          /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
+          /* @__PURE__ */ jsxs4(ComboboxEmpty, { children: [
+            "No ",
+            columnDef.title.toLowerCase(),
+            " found."
+          ] }),
+          /* @__PURE__ */ jsx5(ComboboxList, { children: (item) => /* @__PURE__ */ jsx5(ComboboxItem, { value: item, className: cn(item.disabled && "text-muted-foreground"), children: item.label }, item.value) }),
+          issues.length > 0 && /* @__PURE__ */ jsx5("p", { className: "text-body-sm text-destructive", children: issues.map((issue) => issue.message).join(" ") })
+        ] })
+      ]
+    }
+  );
+}
+function CelTextValueEditor({
+  condition,
+  onChangeValue,
+  onCommit
+}) {
+  const value = typeof condition.value === "string" ? condition.value : "";
+  return /* @__PURE__ */ jsx5(
+    Input,
+    {
+      autoFocus: true,
+      value,
+      placeholder: "Enter a value\u2026",
+      onChange: (e) => onChangeValue(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") onCommit();
+      }
+    }
+  );
+}
+function CelMultiTextValueEditor({
+  condition,
+  onChangeValue
+}) {
+  const value = readMultiTextCelValue(condition.value);
+  const [draft, setDraft] = React3.useState("");
+  function addToken() {
+    var _a;
+    const token = draft.trim();
+    if (!token || value.tokens.includes(token)) {
+      setDraft("");
+      return;
+    }
+    const nextTokens = [...value.tokens, token];
+    const quantifier = nextTokens.length > 1 ? (_a = value.quantifier) != null ? _a : "any" : value.quantifier;
+    onChangeValue(__spreadProps(__spreadValues({}, value), { tokens: nextTokens, quantifier }));
+    setDraft("");
+  }
+  function removeToken(token) {
+    onChangeValue(__spreadProps(__spreadValues({}, value), { tokens: value.tokens.filter((t) => t !== token) }));
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+    value.tokens.length > 0 && /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap gap-1", children: value.tokens.map((token) => /* @__PURE__ */ jsxs4(Badge, { variant: "secondary", className: "gap-1", children: [
+      token,
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Remove ${token}`,
+          onClick: () => removeToken(token),
+          className: "cursor-pointer",
+          children: /* @__PURE__ */ jsx5(Icon3, { name: "xmark", size: "xs" })
+        }
+      )
+    ] }, token)) }),
+    /* @__PURE__ */ jsx5(
+      Input,
+      {
+        autoFocus: true,
+        value: draft,
+        placeholder: "Type a value, press Enter\u2026",
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            addToken();
+          } else if (e.key === "Backspace" && draft === "" && value.tokens.length > 0) {
+            removeToken(value.tokens[value.tokens.length - 1]);
+          }
+        }
+      }
+    )
+  ] });
+}
+function CelKeyValueValueEditor({
+  condition,
+  onChangeValue,
+  onCommit
+}) {
+  var _a;
+  const value = readMapKeyCelValue(condition.value);
+  const needsValue = condition.operator === "has_value" || condition.operator === "does_not_have_value";
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs4(InputGroup, { children: [
+      /* @__PURE__ */ jsx5(InputGroupAddon, { children: /* @__PURE__ */ jsx5(InputGroupText, { children: "Key" }) }),
+      /* @__PURE__ */ jsx5(
+        InputGroupInput,
+        {
+          autoFocus: true,
+          value: value.key,
+          onChange: (e) => onChangeValue(__spreadProps(__spreadValues({}, value), { key: e.target.value })),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !needsValue) onCommit();
+          }
+        }
+      )
+    ] }),
+    needsValue && /* @__PURE__ */ jsxs4(InputGroup, { children: [
+      /* @__PURE__ */ jsx5(InputGroupAddon, { children: /* @__PURE__ */ jsx5(InputGroupText, { children: "Value" }) }),
+      /* @__PURE__ */ jsx5(
+        InputGroupInput,
+        {
+          value: (_a = value.value) != null ? _a : "",
+          onChange: (e) => onChangeValue(__spreadProps(__spreadValues({}, value), { value: e.target.value })),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") onCommit();
+          }
+        }
+      )
+    ] })
+  ] });
+}
+function CelDateValueEditor({
+  condition,
+  onChangeValue
+}) {
+  const value = readDateCelValue(condition.value);
+  const operator = condition.operator;
+  const relativeCapable = isDateRelativeOperator(operator);
+  const isRange = isDateRangeOperator(operator);
+  const showTime = !isDateWindowOperator(operator) && !isRange;
+  const isRelative = isRelativeDateCelValue(value);
+  function pickInstant(date) {
+    if (!date) return;
+    const boundary = dateBoundaryForOperator(operator);
+    const instant = formatCalendarDateUtc(date, showTime ? boundary : "start");
+    onChangeValue({ instant });
+  }
+  function pickRange(range) {
+    if (!(range == null ? void 0 : range.from)) return;
+    const start = calendarDayStartInstant(formatCalendarDateUtc(range.from, "start"));
+    const end = range.to ? formatCalendarDateUtc(range.to, "end") : formatCalendarDateUtc(range.from, "end");
+    onChangeValue({ range: { start, end } });
+  }
+  function pickTime(timeOfDay) {
+    if (!value.instant) return;
+    onChangeValue({ instant: withTimeOfDay(value.instant, timeOfDay), hasTime: true });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex", children: [
+      relativeCapable && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1 border-r pr-2", children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-body-sm text-muted-foreground px-2 font-medium", children: "Quick select" }),
+        RELATIVE_DURATION_PRESET_VALUES.map((preset) => /* @__PURE__ */ jsx5(
+          Button3,
+          {
+            type: "button",
+            variant: isRelative && value.preset === preset ? "secondary" : "ghost",
+            size: "sm",
+            className: "justify-start",
+            onClick: () => onChangeValue({ preset }),
+            children: RELATIVE_PRESET_LABELS[preset]
+          },
+          preset
+        ))
+      ] }),
+      isRange ? /* @__PURE__ */ jsx5(
+        Calendar,
+        {
+          mode: "range",
+          selected: value.range ? { from: parseCalendarDate(value.range.start), to: parseCalendarDate(value.range.end) } : void 0,
+          onSelect: pickRange
+        }
+      ) : /* @__PURE__ */ jsx5(
+        Calendar,
+        {
+          mode: "single",
+          selected: isRelative ? void 0 : parseCalendarDate(value.instant),
+          onSelect: pickInstant
+        }
+      )
+    ] }),
+    showTime && !isRelative && /* @__PURE__ */ jsxs4("div", { className: "flex w-full items-center gap-2", children: [
+      /* @__PURE__ */ jsx5(Label, { htmlFor: "cel-date-time", className: "text-body-sm text-muted-foreground shrink-0", children: "Time (UTC)" }),
+      /* @__PURE__ */ jsx5(
+        Input,
+        {
+          id: "cel-date-time",
+          type: "time",
+          className: "w-full",
+          value: readTimeOfDay(value.instant),
+          onChange: (e) => pickTime(e.target.value),
+          disabled: !value.instant
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/data-table/data-table.tsx
+import { Icon as Icon8 } from "@upbound/monarch-core";
+import { InputGroup as InputGroup2, InputGroupAddon as InputGroupAddon2, InputGroupInput as InputGroupInput2 } from "@upbound/monarch-core";
+
+// src/lib/data-table/contextual-filters.ts
+function valueToString(value) {
+  if (value === void 0 || value === null) return void 0;
+  const normalized = String(value).trim();
+  return normalized || void 0;
+}
+function stringArrayFromValue(value) {
+  if (Array.isArray(value)) {
+    return value.map(valueToString).filter((v) => !!v);
+  }
+  const normalized = valueToString(value);
+  return normalized ? [normalized] : [];
+}
+function columnFilterValueToStrings(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item).trim()).filter(Boolean);
+  }
+  const normalized = String(value != null ? value : "").trim();
+  return normalized ? [normalized] : [];
+}
+function hasContextualFilterValue(value) {
+  var _a;
+  if (value === void 0) return false;
+  if (typeof value === "string") return value.trim() !== "";
+  if (Array.isArray(value)) {
+    return value.filter((item) => typeof item === "string" && item.trim() !== "").length > 0;
+  }
+  return !!((_a = value.startDate) != null ? _a : value.endDate);
+}
+function getDefaultContextualFilterValue(cell, filter) {
+  const value = cell.getValue();
+  if (filter.type === "checkbox" || filter.type === "scrollableCheckbox" || filter.type === "multiText") {
+    const values = stringArrayFromValue(value);
+    return values.length > 0 ? values : void 0;
+  }
+  if (filter.type === "radio" || filter.type === "scrollableRadio" || filter.type === "text") {
+    return valueToString(value);
+  }
+  return void 0;
+}
+function getContextualColumnFilter(cell) {
+  const meta = cell.column.columnDef.meta;
+  const filter = meta == null ? void 0 : meta.filter;
+  if (!filter) return void 0;
+  const value = (meta == null ? void 0 : meta.contextualFilterValue) ? meta.contextualFilterValue(cell) : getDefaultContextualFilterValue(cell, filter);
+  if (!hasContextualFilterValue(value)) return void 0;
+  return { id: cell.column.id, value };
+}
+function getContextualGlobalSearch(cell) {
+  var _a;
+  const globalSearchValue = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.contextualGlobalSearchValue;
+  if (!globalSearchValue) return void 0;
+  return valueToString(globalSearchValue(cell));
+}
+function mergeColumnFilter(columnFilters, nextFilter, filterDefinition) {
+  const shouldMergeArrayValue = (filterDefinition == null ? void 0 : filterDefinition.type) === "checkbox" || (filterDefinition == null ? void 0 : filterDefinition.type) === "scrollableCheckbox" || (filterDefinition == null ? void 0 : filterDefinition.type) === "multiText";
+  if (!shouldMergeArrayValue) {
+    return [...columnFilters.filter((filter) => filter.id !== nextFilter.id), nextFilter];
+  }
+  const nextValues = stringArrayFromValue(nextFilter.value);
+  if (nextValues.length === 0) return columnFilters;
+  const existingFilter = columnFilters.find((filter) => filter.id === nextFilter.id);
+  const existingValues = stringArrayFromValue(existingFilter == null ? void 0 : existingFilter.value);
+  const mergedValues = Array.from(/* @__PURE__ */ new Set([...existingValues, ...nextValues]));
+  if (existingFilter && mergedValues.length === existingValues.length) return columnFilters;
+  return [...columnFilters.filter((filter) => filter.id !== nextFilter.id), { id: nextFilter.id, value: mergedValues }];
+}
+function getColumnFilterCount(filterValue, filter) {
+  const isCheckboxValue = (value) => value === void 0 || Array.isArray(value) && value.every((item) => typeof item === "string");
+  const isRadioValue = (value) => value === void 0 || typeof value === "string";
+  const isDateRangeValue = (value) => value === void 0 || typeof value === "object" && value !== null && "startDate" in value && "endDate" in value;
+  if ((filter == null ? void 0 : filter.type) === "checkbox" || (filter == null ? void 0 : filter.type) === "scrollableCheckbox") {
+    return isCheckboxValue(filterValue) ? (filterValue || []).length : 0;
+  }
+  if ((filter == null ? void 0 : filter.type) === "radio" || (filter == null ? void 0 : filter.type) === "scrollableRadio") {
+    return isRadioValue(filterValue) && filterValue !== void 0 ? 1 : 0;
+  }
+  if ((filter == null ? void 0 : filter.type) === "dateRange") {
+    if (!isDateRangeValue(filterValue)) return 0;
+    return Number(!!(filterValue == null ? void 0 : filterValue.startDate)) + Number(!!(filterValue == null ? void 0 : filterValue.endDate));
+  }
+  if (isCheckboxValue(filterValue)) {
+    return (filterValue || []).length;
+  }
+  if (isRadioValue(filterValue) && filterValue !== void 0) {
+    return 1;
+  }
+  if (isDateRangeValue(filterValue)) {
+    return Number(!!(filterValue == null ? void 0 : filterValue.startDate)) + Number(!!(filterValue == null ? void 0 : filterValue.endDate));
+  }
+  return 0;
+}
+
+// src/hooks/use-table-column-resizing.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+var RESIZE_MIN = 40;
+var RESIZE_MAX = 500;
+var RESIZE_MAX_UNBOUNDED = Number.MAX_SAFE_INTEGER;
+var DEFAULT_COLUMN_SIZE = 150;
+var FIT_CONTENT_PLACEHOLDER_SIZE = 400;
+var PERSIST_DEBOUNCE_MS = 300;
+var MIN_FR_VALUE = 0.01;
+function clampSizing(sizing, maxSize = RESIZE_MAX) {
+  return Object.entries(sizing).reduce(
+    (acc, [colId, size]) => __spreadProps(__spreadValues({}, acc), { [colId]: Math.min(maxSize, Math.max(RESIZE_MIN, size)) }),
+    {}
+  );
+}
+function computeGridResizeFrValues({
+  resizingColumnId,
+  deltaOffset,
+  visualOrder,
+  snapshotWidths,
+  snapshotMeta
+}) {
+  var _a, _b, _c, _d;
+  if (!resizingColumnId || deltaOffset == null || snapshotMeta.containerWidth <= 0) {
+    return {};
+  }
+  const { fixedTotal, flexIds, mins, containerWidth } = snapshotMeta;
+  const snapshotPx = snapshotWidths[resizingColumnId];
+  if (!snapshotPx || !flexIds.includes(resizingColumnId)) {
+    return {};
+  }
+  const desiredPx = Math.max((_a = mins[resizingColumnId]) != null ? _a : 0, snapshotPx + deltaOffset);
+  const resizeIdx = visualOrder.indexOf(resizingColumnId);
+  const otherFlexIds = flexIds.filter((colId) => colId !== resizingColumnId);
+  const rightFlexIds = otherFlexIds.filter((colId) => visualOrder.indexOf(colId) > resizeIdx);
+  const leftFlexIds = otherFlexIds.filter((colId) => visualOrder.indexOf(colId) < resizeIdx);
+  const absorbingIds = rightFlexIds.length > 0 ? rightFlexIds : leftFlexIds;
+  const frozenIds = rightFlexIds.length > 0 ? leftFlexIds : rightFlexIds;
+  const nextFr = {};
+  for (const colId of frozenIds) {
+    nextFr[colId] = (_b = snapshotWidths[colId]) != null ? _b : MIN_FR_VALUE;
+  }
+  const frozenTotal = frozenIds.reduce((sum, colId) => {
+    var _a2;
+    return sum + ((_a2 = snapshotWidths[colId]) != null ? _a2 : 0);
+  }, 0);
+  const availableForAbsorbing = containerWidth - fixedTotal - desiredPx - frozenTotal;
+  const absorbingSnapshotTotal = absorbingIds.reduce((sum, colId) => {
+    var _a2;
+    return sum + ((_a2 = snapshotWidths[colId]) != null ? _a2 : 0);
+  }, 0);
+  for (const colId of absorbingIds) {
+    const snap = (_c = snapshotWidths[colId]) != null ? _c : 0;
+    const share = absorbingSnapshotTotal > 0 ? snap / absorbingSnapshotTotal : 1 / absorbingIds.length;
+    const targetPx = Math.max((_d = mins[colId]) != null ? _d : 0, availableForAbsorbing * share);
+    nextFr[colId] = Math.max(MIN_FR_VALUE, targetPx);
+  }
+  nextFr[resizingColumnId] = Math.max(MIN_FR_VALUE, desiredPx);
+  return nextFr;
+}
+function resolveGridPersistedFr({
+  visualOrder,
+  persistedFr,
+  columnSizing,
+  measuredMins,
+  getGridSizing
+}) {
+  var _a;
+  const nextFr = __spreadValues({}, persistedFr);
+  for (const colId of visualOrder) {
+    const grid = getGridSizing(colId);
+    if (!grid || grid.flex == null) continue;
+    if (!nextFr[colId] && columnSizing[colId]) {
+      nextFr[colId] = columnSizing[colId];
+    }
+    if (nextFr[colId]) {
+      const minPx = (_a = measuredMins[colId]) != null ? _a : grid.min ? parseFloat(grid.min) || 0 : 0;
+      const maxPx = grid.max ? parseFloat(grid.max) || Infinity : Infinity;
+      nextFr[colId] = Math.max(minPx, Math.min(maxPx, nextFr[colId]));
+    }
+  }
+  return nextFr;
+}
+function useTableColumnResizing({
+  initialSizing,
+  onColumnSizingPersist,
+  maxSize
+} = {}) {
+  const [columnSizing, setColumnSizing] = useState5(() => clampSizing(initialSizing != null ? initialSizing : {}, maxSize));
+  const persistTimerRef = useRef3(null);
+  useEffect3(() => {
+    if (!initialSizing) return;
+    const next = clampSizing(initialSizing, maxSize);
+    setColumnSizing((prev) => {
+      const keys = Object.keys(next);
+      if (Object.keys(prev).length !== keys.length) return next;
+      return keys.every((k) => prev[k] === next[k]) ? prev : next;
+    });
+  }, [initialSizing, maxSize]);
+  useEffect3(() => {
+    return () => {
+      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+    };
+  }, []);
+  const debouncedPersist = useCallback4(
+    (sizing) => {
+      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = setTimeout(() => onColumnSizingPersist == null ? void 0 : onColumnSizingPersist(sizing), PERSIST_DEBOUNCE_MS);
+    },
+    [onColumnSizingPersist]
+  );
+  const handleColumnSizingChange = useCallback4(
+    (updaterOrValue) => {
+      setColumnSizing((prev) => {
+        const raw = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+        const next = clampSizing(raw, maxSize);
+        debouncedPersist(next);
+        return next;
+      });
+    },
+    [debouncedPersist, maxSize]
+  );
+  const cancelPendingPersist = useCallback4(() => {
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+  }, []);
+  const handleAutosizeAll = useCallback4(() => {
+    cancelPendingPersist();
+    setColumnSizing({});
+    onColumnSizingPersist == null ? void 0 : onColumnSizingPersist({});
+  }, [cancelPendingPersist, onColumnSizingPersist]);
+  const handleAutosizeColumn = useCallback4(
+    (columnId) => {
+      cancelPendingPersist();
+      setColumnSizing((prev) => {
+        var _a;
+        const current = (_a = prev[columnId]) != null ? _a : DEFAULT_COLUMN_SIZE;
+        const next = __spreadValues({}, prev);
+        next[columnId] = current <= DEFAULT_COLUMN_SIZE ? FIT_CONTENT_PLACEHOLDER_SIZE : DEFAULT_COLUMN_SIZE;
+        onColumnSizingPersist == null ? void 0 : onColumnSizingPersist(next);
+        return next;
+      });
+    },
+    [cancelPendingPersist, onColumnSizingPersist]
+  );
+  const handleResetColumnSize = useCallback4(
+    (columnId) => {
+      cancelPendingPersist();
+      setColumnSizing((prev) => {
+        const next = __spreadValues({}, prev);
+        delete next[columnId];
+        onColumnSizingPersist == null ? void 0 : onColumnSizingPersist(next);
+        return next;
+      });
+    },
+    [cancelPendingPersist, onColumnSizingPersist]
+  );
+  return { columnSizing, handleColumnSizingChange, handleAutosizeAll, handleAutosizeColumn, handleResetColumnSize };
+}
+
+// src/hooks/use-grid-layout.ts
+import * as React4 from "react";
+
+// src/lib/data-table/grid-layout.ts
+function computeGridResizeSnapshot({
+  headers,
+  visualOrder,
+  getColumnGrid
+}) {
+  let fixedTotal = 0;
+  const flexIds = [];
+  const mins = {};
+  const widths = {};
+  const needsMaxContentMeasure = [];
+  Array.from(headers).forEach((header, idx) => {
+    const columnId = visualOrder[idx];
+    if (!columnId) return;
+    const px = header.getBoundingClientRect().width;
+    widths[columnId] = px;
+    const grid = getColumnGrid(columnId);
+    if (grid && "flex" in grid && grid.flex != null) {
+      flexIds.push(columnId);
+      const minVal = grid.min;
+      if (minVal && minVal !== "max-content" && minVal !== "min-content") {
+        mins[columnId] = parseFloat(minVal) || 0;
+      } else if (minVal === "max-content" || minVal === "min-content") {
+        needsMaxContentMeasure.push(columnId);
+      }
+    } else {
+      fixedTotal += px;
+    }
+  });
+  return { widths, fixedTotal, flexIds, mins, needsMaxContentMeasure };
+}
+function measureMaxContentMins(tableEl, headers, visualOrder, columnsToMeasure, getColumnGrid) {
+  const mins = {};
+  if (columnsToMeasure.length === 0) return mins;
+  const origTemplate = tableEl.style.gridTemplateColumns;
+  tableEl.style.gridTemplateColumns = visualOrder.map(() => "max-content").join(" ");
+  Array.from(headers).forEach((header, idx) => {
+    const colId = visualOrder[idx];
+    if (colId && columnsToMeasure.includes(colId)) {
+      let measured = header.getBoundingClientRect().width;
+      const grid = getColumnGrid(colId);
+      if (grid && "minCap" in grid && grid.minCap) {
+        measured = Math.min(measured, parseFloat(grid.minCap) || measured);
+      }
+      mins[colId] = measured;
+    }
+  });
+  tableEl.style.gridTemplateColumns = origTemplate;
+  return mins;
+}
+function getGridColumnTemplate({ headers, gridMeasuredMins }) {
+  return headers.map((h) => {
+    var _a, _b;
+    const { grid } = h;
+    if (!grid) return `${h.size}px`;
+    if ("fixed" in grid && grid.fixed) return grid.fixed;
+    if ("flex" in grid && grid.flex != null) {
+      const varName = `--col-fr-${h.columnId}`;
+      const measuredMin = gridMeasuredMins[h.columnId];
+      const min = measuredMin != null ? `${measuredMin}px` : (_a = grid.min) != null ? _a : "auto";
+      const max = (_b = grid.max) != null ? _b : `var(${varName}, ${grid.flex}fr)`;
+      return `minmax(${min}, ${max})`;
+    }
+    return `${h.size}px`;
+  }).join(" ");
+}
+function findContentMinColumns(visualOrder, getColumnGrid) {
+  return visualOrder.filter((colId) => {
+    const grid = getColumnGrid(colId);
+    return grid && "flex" in grid && grid.flex != null && (grid.min === "max-content" || grid.min === "min-content");
+  });
+}
+function snapshotResizeStart({
+  headers,
+  visualOrder,
+  getColumnGrid,
+  tableEl
+}) {
+  var _a;
+  if (!headers || visualOrder.length !== headers.length) return null;
+  const snapshot = computeGridResizeSnapshot({ headers, visualOrder, getColumnGrid });
+  if (tableEl && snapshot.needsMaxContentMeasure.length > 0) {
+    const measuredMins = measureMaxContentMins(
+      tableEl,
+      headers,
+      visualOrder,
+      snapshot.needsMaxContentMeasure,
+      getColumnGrid
+    );
+    Object.assign(snapshot.mins, measuredMins);
+  }
+  const containerWidth = (_a = tableEl == null ? void 0 : tableEl.getBoundingClientRect().width) != null ? _a : 0;
+  return {
+    widths: snapshot.widths,
+    meta: {
+      containerWidth,
+      fixedTotal: snapshot.fixedTotal,
+      flexIds: snapshot.flexIds,
+      mins: snapshot.mins
+    }
+  };
+}
+
+// src/hooks/use-grid-layout.ts
+function useGridLayout({
+  layout,
+  table,
+  tableBodyScrollRef,
+  displayableColumns,
+  columnOrdering,
+  gridMeasuredMins,
+  setGridMeasuredMins,
+  handleColumnSizingChange,
+  rawHandleAutosizeAll,
+  rawHandleAutosizeColumn,
+  rawHandleResetColumnSize
+}) {
+  const isGrid = layout === "grid";
+  const gridRootRef = React4.useRef(null);
+  const gridSnapshotWidths = React4.useRef({});
+  const gridVisualColumnOrder = React4.useRef([]);
+  const gridPersistedFr = React4.useRef({});
+  const gridSnapshotMeta = React4.useRef({
+    containerWidth: 0,
+    fixedTotal: 0,
+    flexIds: [],
+    mins: {}
+  });
+  const prevResizingColumn = React4.useRef(false);
+  const prevResizingForCorrection = React4.useRef(false);
+  const clearGridFr = React4.useCallback(
+    (columnId) => {
+      if (!isGrid) return;
+      const tableEl = gridRootRef.current;
+      if (columnId) {
+        delete gridPersistedFr.current[columnId];
+        tableEl == null ? void 0 : tableEl.style.removeProperty(`--col-fr-${columnId}`);
+      } else {
+        for (const colId of Object.keys(gridPersistedFr.current)) {
+          tableEl == null ? void 0 : tableEl.style.removeProperty(`--col-fr-${colId}`);
+        }
+        gridPersistedFr.current = {};
+      }
+      gridSnapshotWidths.current = {};
+    },
+    [isGrid]
+  );
+  const headerGroups = table.getHeaderGroups();
+  const gridTemplate = React4.useMemo(() => {
+    if (!isGrid) return void 0;
+    const firstGroup = headerGroups[0];
+    if (!firstGroup) return void 0;
+    const displayableIds = new Set(displayableColumns.map((c) => c.id));
+    const visibleHeaders = firstGroup.headers.filter((h) => displayableIds.has(h.column.id));
+    return {
+      visualOrder: visibleHeaders.map((h) => h.column.id),
+      template: getGridColumnTemplate({
+        headers: visibleHeaders.map((h) => {
+          var _a;
+          return {
+            columnId: h.column.id,
+            size: h.column.getSize(),
+            grid: (_a = h.column.columnDef.meta) == null ? void 0 : _a.grid
+          };
+        }),
+        gridMeasuredMins
+      })
+    };
+  }, [isGrid, headerGroups, displayableColumns, gridMeasuredMins]);
+  const gridTemplateColumns = gridTemplate == null ? void 0 : gridTemplate.template;
+  React4.useLayoutEffect(() => {
+    if (gridTemplate) gridVisualColumnOrder.current = gridTemplate.visualOrder;
+  }, [gridTemplate]);
+  const resizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+  React4.useLayoutEffect(() => {
+    var _a;
+    if (resizingColumn && !prevResizingColumn.current) {
+      const headers = (_a = tableBodyScrollRef.current) == null ? void 0 : _a.querySelectorAll('[role="columnheader"]');
+      if (headers) {
+        const result = snapshotResizeStart({
+          headers,
+          visualOrder: gridVisualColumnOrder.current,
+          getColumnGrid: (colId) => {
+            var _a2, _b;
+            return (_b = (_a2 = table.getColumn(colId)) == null ? void 0 : _a2.columnDef.meta) == null ? void 0 : _b.grid;
+          },
+          tableEl: gridRootRef.current
+        });
+        if (result) {
+          Object.assign(gridSnapshotWidths.current, result.widths);
+          gridSnapshotMeta.current = result.meta;
+        }
+      }
+    }
+    prevResizingColumn.current = resizingColumn || false;
+  }, [resizingColumn, table, tableBodyScrollRef]);
+  const measureContentMins = React4.useCallback(() => {
+    var _a;
+    const tableEl = gridRootRef.current;
+    const headers = (_a = tableBodyScrollRef.current) == null ? void 0 : _a.querySelectorAll('[role="columnheader"]');
+    const visualOrder = gridVisualColumnOrder.current;
+    if (!tableEl || !headers || visualOrder.length !== headers.length) return;
+    const getColumnGrid = (colId) => {
+      var _a2, _b;
+      return (_b = (_a2 = table.getColumn(colId)) == null ? void 0 : _a2.columnDef.meta) == null ? void 0 : _b.grid;
+    };
+    const columnsToMeasure = findContentMinColumns(visualOrder, getColumnGrid);
+    if (columnsToMeasure.length === 0) return;
+    const newMins = measureMaxContentMins(tableEl, headers, visualOrder, columnsToMeasure, getColumnGrid);
+    setGridMeasuredMins((prev) => {
+      const keys = Object.keys(newMins);
+      if (keys.length === Object.keys(prev).length && keys.every((k) => {
+        var _a2;
+        return Math.abs(((_a2 = prev[k]) != null ? _a2 : 0) - newMins[k]) < 0.5;
+      })) {
+        return prev;
+      }
+      return newMins;
+    });
+  }, [table, tableBodyScrollRef, setGridMeasuredMins]);
+  const rowCount = table.getRowCount();
+  const tableRows = table.getRowModel().rows;
+  const contentMinKey = displayableColumns.map((c) => c.id).join(",");
+  React4.useLayoutEffect(() => {
+    if (!isGrid || resizingColumn) return;
+    measureContentMins();
+  }, [isGrid, resizingColumn, rowCount, contentMinKey, tableRows, measureContentMins]);
+  React4.useEffect(() => {
+    if (!isGrid) return;
+    const scrollEl = tableBodyScrollRef.current;
+    if (!scrollEl) return;
+    const observer = new ResizeObserver(() => {
+      if (!table.getState().columnSizingInfo.isResizingColumn) {
+        measureContentMins();
+      }
+    });
+    observer.observe(scrollEl);
+    return () => observer.disconnect();
+  }, [isGrid, measureContentMins, table, tableBodyScrollRef]);
+  React4.useLayoutEffect(() => {
+    if (!isGrid) return;
+    const tableEl = gridRootRef.current;
+    if (!tableEl) return;
+    const { isResizingColumn, deltaOffset } = table.getState().columnSizingInfo;
+    if (isResizingColumn && deltaOffset != null) {
+      const nextFr = computeGridResizeFrValues({
+        resizingColumnId: isResizingColumn,
+        deltaOffset,
+        visualOrder: gridVisualColumnOrder.current,
+        snapshotWidths: gridSnapshotWidths.current,
+        snapshotMeta: gridSnapshotMeta.current
+      });
+      for (const [colId, fr] of Object.entries(nextFr)) {
+        tableEl.style.setProperty(`--col-fr-${colId}`, `${fr}fr`);
+        gridPersistedFr.current[colId] = fr;
+      }
+    } else {
+      gridPersistedFr.current = resolveGridPersistedFr({
+        visualOrder: gridVisualColumnOrder.current,
+        persistedFr: gridPersistedFr.current,
+        columnSizing: table.getState().columnSizing,
+        measuredMins: gridMeasuredMins,
+        getGridSizing: (colId) => {
+          var _a, _b;
+          const grid = (_b = (_a = table.getColumn(colId)) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.grid;
+          return grid && "flex" in grid ? grid : void 0;
+        }
+      });
+    }
+    for (const [colId, fr] of Object.entries(gridPersistedFr.current)) {
+      tableEl.style.setProperty(`--col-fr-${colId}`, `${fr}fr`);
+    }
+  });
+  React4.useLayoutEffect(() => {
+    var _a;
+    const wasResizing = prevResizingForCorrection.current;
+    prevResizingForCorrection.current = resizingColumn || false;
+    if (!isGrid || resizingColumn || !wasResizing) return;
+    const headers = (_a = tableBodyScrollRef.current) == null ? void 0 : _a.querySelectorAll('[role="columnheader"]');
+    const visualOrder = gridVisualColumnOrder.current;
+    if (!headers || visualOrder.length !== headers.length) return;
+    const corrected = {};
+    Array.from(headers).forEach((header, idx) => {
+      var _a2, _b;
+      const colId = visualOrder[idx];
+      if (!colId) return;
+      const grid = (_b = (_a2 = table.getColumn(colId)) == null ? void 0 : _a2.columnDef.meta) == null ? void 0 : _b.grid;
+      if (grid && "flex" in grid && grid.flex != null) {
+        corrected[colId] = Math.round(header.getBoundingClientRect().width);
+      }
+    });
+    if (Object.keys(corrected).length > 0) {
+      handleColumnSizingChange((prev) => __spreadValues(__spreadValues({}, prev), corrected));
+    }
+  });
+  const handleAutosizeAll = React4.useCallback(() => {
+    clearGridFr();
+    rawHandleAutosizeAll();
+  }, [clearGridFr, rawHandleAutosizeAll]);
+  const handleAutosizeColumn = React4.useCallback(
+    (columnId) => {
+      clearGridFr(columnId);
+      rawHandleAutosizeColumn(columnId);
+    },
+    [clearGridFr, rawHandleAutosizeColumn]
+  );
+  const handleResetColumnSize = React4.useCallback(
+    (columnId) => {
+      clearGridFr(columnId);
+      rawHandleResetColumnSize(columnId);
+    },
+    [clearGridFr, rawHandleResetColumnSize]
+  );
+  const prevColumnOrderingRef = React4.useRef(columnOrdering);
+  React4.useEffect(() => {
+    const prev = prevColumnOrderingRef.current;
+    prevColumnOrderingRef.current = columnOrdering;
+    if (isGrid && prev.length > 0 && prev.join(",") !== columnOrdering.join(",")) {
+      gridSnapshotWidths.current = {};
+      gridPersistedFr.current = {};
+      handleAutosizeAll();
+    }
+  }, [isGrid, columnOrdering, handleAutosizeAll]);
+  return {
+    gridTemplateColumns,
+    gridRootRef,
+    gridVisualColumnOrder,
+    gridPersistedFr,
+    gridSnapshotWidths,
+    clearGridFr,
+    measureContentMins,
+    handleAutosizeAll,
+    handleAutosizeColumn,
+    handleResetColumnSize
+  };
+}
+
+// src/data-table/empty-view.tsx
+import { Alert, AlertDescription } from "@upbound/monarch-core";
+import { Button as Button4 } from "@upbound/monarch-core";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@upbound/monarch-core";
+import { Icon as Icon4 } from "@upbound/monarch-core";
+import { IconTile } from "@upbound/monarch-core";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var defaultErrorConfig = {
+  icon: "circle-exclamation",
+  header: "Something went wrong",
+  subheader: "We couldn't load this data. Try again in a moment."
+};
+var defaultEmptyConfig = {
+  icon: "inbox",
+  header: "No results",
+  subheader: "There's nothing here yet."
+};
+var defaultNoFilterFoundConfig = {
+  icon: "magnifying-glass",
+  header: "No matching results",
+  subheader: "Try adjusting your search or filters."
+};
+function DataTableEmptyView({
+  emptyView,
+  tableState,
+  filterCount,
+  resetFilters,
+  className
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const isFilteredEmpty = tableState === "empty" && filterCount > 0;
+  const config = tableState === "error" ? (_a = emptyView == null ? void 0 : emptyView.error) != null ? _a : defaultErrorConfig : tableState === "empty" ? isFilteredEmpty ? (_b = emptyView == null ? void 0 : emptyView.filter) != null ? _b : defaultNoFilterFoundConfig : (_c = emptyView == null ? void 0 : emptyView.empty) != null ? _c : defaultEmptyConfig : null;
+  const wrapperClassName = tableState === "error" ? (_f = (_d = emptyView == null ? void 0 : emptyView.error) == null ? void 0 : _d.wrapperClassName) != null ? _f : (_e = emptyView == null ? void 0 : emptyView.empty) == null ? void 0 : _e.wrapperClassName : config == null ? void 0 : config.wrapperClassName;
+  const defaultAction = isFilteredEmpty && !(config == null ? void 0 : config.action) ? /* @__PURE__ */ jsxs5(Button4, { variant: "outline", size: "sm", onClick: resetFilters, children: [
+    /* @__PURE__ */ jsx6(Icon4, { name: "xmark" }),
+    "Clear filters"
+  ] }) : null;
+  return /* @__PURE__ */ jsx6("div", { className: cn("flex size-full flex-col justify-center p-6", wrapperClassName, className), children: config && // The error state ignores its own config's `className` for outer
+  // padding, matching the source's forced `pt-0` on that branch.
+  /* @__PURE__ */ jsxs5(Empty, { className: tableState === "error" ? "pt-0" : config.className, children: [
+    /* @__PURE__ */ jsxs5(EmptyHeader, { children: [
+      config.icon && /* @__PURE__ */ jsx6(EmptyMedia, { children: /* @__PURE__ */ jsx6(IconTile, { variant: "branded", children: /* @__PURE__ */ jsx6(Icon4, { name: config.icon }) }) }),
+      config.header && /* @__PURE__ */ jsx6(EmptyTitle, { children: config.header }),
+      config.subheader && /* @__PURE__ */ jsx6(EmptyDescription, { children: config.subheader })
+    ] }),
+    (config.details || config.action || defaultAction) && /* @__PURE__ */ jsxs5(EmptyContent, { children: [
+      config.details && /* @__PURE__ */ jsx6(Alert, { children: /* @__PURE__ */ jsx6(AlertDescription, { children: config.details }) }),
+      (_g = config.action) != null ? _g : defaultAction
+    ] })
+  ] }) });
+}
+
+// src/data-table/pagination.tsx
+import { Button as Button5 } from "@upbound/monarch-core";
+import { Icon as Icon5 } from "@upbound/monarch-core";
+import { Label as Label2 } from "@upbound/monarch-core";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink
+} from "@upbound/monarch-core";
+import { Select as Select2, SelectContent as SelectContent2, SelectGroup as SelectGroup2, SelectItem as SelectItem2, SelectTrigger as SelectTrigger2, SelectValue as SelectValue2 } from "@upbound/monarch-core";
+import { Tooltip as Tooltip2, TooltipContent as TooltipContent2, TooltipTrigger as TooltipTrigger2 } from "@upbound/monarch-core";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_PAGINATION_CONFIG = {
+  summary: true,
+  arrows: true,
+  numbers: false,
+  pageSizeSelector: true,
+  pageSizeOptions: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+};
+var PAGE_SIZE_SELECT_ID = "table-page-size-select";
+function getPageSizeOptions(pageSizeOptions) {
+  return Array.from(new Set(pageSizeOptions)).filter((option) => option > 0).sort((a, b) => a - b);
+}
+function getEffectivePageSize(pageSize, pageSizeOptions) {
+  if (pageSizeOptions.length === 0 || pageSizeOptions.includes(pageSize)) return pageSize;
+  return pageSizeOptions.reduce(
+    (closest, option) => Math.abs(option - pageSize) < Math.abs(closest - pageSize) ? option : closest,
+    pageSizeOptions[0]
+  );
+}
+function normalizePageSizeOptions(pageSize, pageSizeOptions) {
+  const normalizedPageSizeOptions = getPageSizeOptions(pageSizeOptions);
+  return { normalizedPageSizeOptions, effectivePageSize: getEffectivePageSize(pageSize, normalizedPageSizeOptions) };
+}
+function DataTablePagination({
+  pageIndex,
+  pageSize,
+  rowCount,
+  rowCountRelation = "eq",
+  paginationConfig = true,
+  onPageChange,
+  onPageSizeChange
+}) {
+  const isRowCountExact = rowCountRelation === "eq";
+  const resolved = typeof paginationConfig === "object" ? __spreadValues(__spreadValues({}, DEFAULT_PAGINATION_CONFIG), paginationConfig) : DEFAULT_PAGINATION_CONFIG;
+  const { normalizedPageSizeOptions, effectivePageSize } = normalizePageSizeOptions(pageSize, resolved.pageSizeOptions);
+  const { visiblePages, pageCount, itemStart, itemEnd } = getPaginationInfo(pageIndex, rowCount, effectivePageSize);
+  const currentPage = pageIndex + 1;
+  const mounted = useMounted();
+  const locale = mounted ? void 0 : "en-US";
+  return /* @__PURE__ */ jsxs6("div", { "data-testid": "table-footer", className: "flex items-center justify-between px-2 pt-4", children: [
+    resolved.summary ? /* @__PURE__ */ jsxs6("div", { className: "text-body text-muted-foreground", "data-testid": "table-pagination-summary", children: [
+      "Showing ",
+      /* @__PURE__ */ jsx7("span", { className: "text-foreground font-medium", children: itemStart.toLocaleString(locale) }),
+      " to",
+      " ",
+      /* @__PURE__ */ jsx7("span", { className: "text-foreground font-medium", children: itemEnd.toLocaleString(locale) }),
+      " of",
+      " ",
+      /* @__PURE__ */ jsxs6("span", { className: "text-foreground font-medium", children: [
+        rowCount.toLocaleString(locale),
+        !isRowCountExact && "+"
+      ] }),
+      " ",
+      "results",
+      !isRowCountExact && /* @__PURE__ */ jsxs6(Tooltip2, { children: [
+        /* @__PURE__ */ jsx7(TooltipTrigger2, { className: "ml-1 align-middle", children: /* @__PURE__ */ jsx7(Icon5, { name: "circle-info", size: "sm" }) }),
+        /* @__PURE__ */ jsx7(TooltipContent2, { children: "Add filters or refine your search to reduce the result set." })
+      ] })
+    ] }) : /* @__PURE__ */ jsx7("div", {}),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-4", children: [
+      resolved.pageSizeSelector && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx7(Label2, { htmlFor: PAGE_SIZE_SELECT_ID, className: "font-semibold", children: "Rows per page" }),
+        /* @__PURE__ */ jsxs6(Select2, { value: String(effectivePageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [
+          /* @__PURE__ */ jsx7(SelectTrigger2, { id: PAGE_SIZE_SELECT_ID, size: "sm", className: "w-18", "data-testid": "table-page-size-select", children: /* @__PURE__ */ jsx7(SelectValue2, {}) }),
+          /* @__PURE__ */ jsx7(SelectContent2, { align: "end", children: /* @__PURE__ */ jsx7(SelectGroup2, { children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ jsx7(SelectItem2, { value: String(option), children: option }, option)) }) })
+        ] })
+      ] }),
+      pageCount > 1 && (resolved.arrows || resolved.numbers) && /* @__PURE__ */ jsx7(Pagination, { className: "mx-0 w-auto justify-end", children: /* @__PURE__ */ jsxs6(PaginationContent, { children: [
+        resolved.arrows && /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+          Button5,
+          {
+            variant: "outline",
+            size: "icon",
+            "aria-label": "Go to first page",
+            disabled: currentPage <= 1,
+            onClick: () => onPageChange(1),
+            children: /* @__PURE__ */ jsx7(Icon5, { name: "chevrons-left", className: "cn-rtl-flip" })
+          }
+        ) }),
+        resolved.arrows && /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+          Button5,
+          {
+            variant: "outline",
+            size: "icon",
+            "aria-label": "Go to previous page",
+            disabled: currentPage <= 1,
+            onClick: () => onPageChange(currentPage - 1),
+            children: /* @__PURE__ */ jsx7(Icon5, { name: "chevron-left", className: "cn-rtl-flip" })
+          }
+        ) }),
+        resolved.numbers && visiblePages.map(
+          (page, index) => page === void 0 ? /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+            PaginationLink,
+            {
+              href: "#",
+              isActive: page === currentPage,
+              onClick: (e) => {
+                e.preventDefault();
+                onPageChange(page);
+              },
+              children: page
+            }
+          ) }, page)
+        ),
+        resolved.arrows && /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+          Button5,
+          {
+            variant: "outline",
+            size: "icon",
+            "aria-label": "Go to next page",
+            disabled: currentPage >= pageCount,
+            onClick: () => onPageChange(currentPage + 1),
+            children: /* @__PURE__ */ jsx7(Icon5, { name: "chevron-right", className: "cn-rtl-flip" })
+          }
+        ) }),
+        resolved.arrows && /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+          Button5,
+          {
+            variant: "outline",
+            size: "icon",
+            "aria-label": "Go to last page",
+            disabled: currentPage >= pageCount,
+            onClick: () => onPageChange(pageCount),
+            children: /* @__PURE__ */ jsx7(Icon5, { name: "chevrons-right", className: "cn-rtl-flip" })
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/data-table/table-primitives.tsx
+import * as React5 from "react";
+import {
+  flexRender as flexRender2
+} from "@tanstack/react-table";
+import { ContextMenu, ContextMenuTrigger } from "@upbound/monarch-core";
+import {
+  DropdownMenu as DropdownMenu3,
+  DropdownMenuContent as DropdownMenuContent3,
+  DropdownMenuItem as DropdownMenuItem3,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger as DropdownMenuTrigger3
+} from "@upbound/monarch-core";
+import { Icon as Icon6 } from "@upbound/monarch-core";
+import { Skeleton } from "@upbound/monarch-core";
+import {
+  Table as BaseTable,
+  TableBody as BaseTableBody,
+  TableCell as BaseTableCell,
+  TableHead as BaseTableHead,
+  TableHeader as BaseTableHeader,
+  TableRow as BaseTableRow
+} from "@upbound/monarch-core";
+import { Tooltip as Tooltip3, TooltipContent as TooltipContent3, TooltipTrigger as TooltipTrigger3 } from "@upbound/monarch-core";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var HEADER_SURFACE_BG = "bg-[color-mix(in_oklch,var(--muted)_50%,var(--card))]";
+var TABLE_HEAD_CLASSES = "text-body-sm text-muted-foreground h-10 px-4 text-left align-middle font-medium whitespace-nowrap has-[[role=checkbox]]:pr-0";
+var TABLE_CELL_CLASSES = "px-4 py-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0";
+var TABLE_ROW_CLASSES = "hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b motion-safe:transition-colors";
+function DataTableRoot({
+  layout = "auto",
+  gridTemplateColumns,
+  gridRootRef,
+  className,
+  style,
+  children
+}) {
+  if (layout === "grid") {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ref: gridRootRef,
+        role: "table",
+        className: cn("text-body grid w-full", className),
+        style: __spreadProps(__spreadValues({}, style), { gridTemplateColumns }),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(BaseTable, { className, style, children });
+}
+function getColumnPinningProps(column, surface = "body") {
+  const isPinned = column.getIsPinned();
+  if (!isPinned) return { className: "", style: {} };
+  const isLastLeft = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRight = isPinned === "right" && column.getIsFirstColumn("right");
+  return {
+    className: cn(
+      "sticky",
+      surface === "header" ? HEADER_SURFACE_BG : "bg-card",
+      isLastLeft && "border-r-2 border-r-border",
+      isFirstRight && "border-l-2 border-l-border"
+    ),
+    style: {
+      left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+      right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+      width: column.getSize()
+    }
+  };
+}
+function DataTableSortIcon({ sortOrder }) {
+  if (!sortOrder) return null;
+  return /* @__PURE__ */ jsx8(
+    Icon6,
+    {
+      name: sortOrder === "asc" ? "arrow-up" : "arrow-down",
+      size: "xs",
+      className: "text-primary group-hover/col-actions:text-foreground group-data-[state=open]/col-actions:text-foreground mr-0.5 shrink-0"
+    }
+  );
+}
+function ColumnActionsMenuItems({
+  header,
+  onAutosizeAll,
+  onAutosizeColumn,
+  layout = "auto"
+}) {
+  const isGrid = layout === "grid";
+  const canSort = header.column.getCanSort();
+  const canResize = header.column.getCanResize();
+  const canHide = header.column.getCanHide();
+  const canPin = !isGrid && header.column.getCanPin();
+  return /* @__PURE__ */ jsxs7(DropdownMenuContent3, { align: "start", className: "w-45", children: [
+    canSort && /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      /* @__PURE__ */ jsxs7(
+        DropdownMenuItem3,
+        {
+          disabled: header.column.getIsSorted() === "asc",
+          onClick: () => header.column.toggleSorting(false),
+          children: [
+            /* @__PURE__ */ jsx8(Icon6, { name: "arrow-up" }),
+            "Sort ascending"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs7(
+        DropdownMenuItem3,
+        {
+          disabled: header.column.getIsSorted() === "desc",
+          onClick: () => header.column.toggleSorting(true),
+          children: [
+            /* @__PURE__ */ jsx8(Icon6, { name: "arrow-down" }),
+            "Sort descending"
+          ]
+        }
+      ),
+      !!header.column.getIsSorted() && /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => header.column.clearSorting(), children: [
+        /* @__PURE__ */ jsx8(Icon6, { name: "xmark" }),
+        "Remove sorting"
+      ] })
+    ] }),
+    canResize && /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      canSort && /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+      !isGrid && /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => onAutosizeColumn(header.column.id), children: [
+        /* @__PURE__ */ jsx8(Icon6, { name: "arrows-left-right" }),
+        "Autosize column"
+      ] }),
+      /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => onAutosizeAll(), children: [
+        /* @__PURE__ */ jsx8(Icon6, { name: "table-columns" }),
+        isGrid ? "Reset all columns" : "Autosize all columns"
+      ] })
+    ] }),
+    (canHide || canPin) && /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      (canSort || canResize) && /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+      canHide && /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => header.column.toggleVisibility(), children: [
+        /* @__PURE__ */ jsx8(Icon6, { name: "eye-slash" }),
+        "Hide column"
+      ] }),
+      canPin && (header.column.getIsPinned() ? /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => header.column.pin(false), children: [
+        /* @__PURE__ */ jsx8(Icon6, { name: "thumbtack" }),
+        "Unpin column"
+      ] }) : /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => header.column.pin("left"), children: [
+        /* @__PURE__ */ jsx8(Icon6, { name: "thumbtack" }),
+        "Pin column"
+      ] }))
+    ] })
+  ] });
+}
+function HeaderCellContent({
+  header,
+  canResize,
+  isActionColumn,
+  isGroupedColumn,
+  shouldShowActionsMenu,
+  onAutosizeAll,
+  onAutosizeColumn,
+  onResetColumnSize,
+  layout = "auto"
+}) {
+  const resizeHandler = header.getResizeHandler();
+  const headerTitle = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "";
+  const sorted = header.column.getIsSorted();
+  const labelButton = /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      "aria-label": shouldShowActionsMenu ? headerTitle ? `${headerTitle} column actions` : "Column actions" : void 0,
+      className: cn(
+        "group/col-actions text-muted-foreground -mx-2 -my-1 flex min-w-0 items-center gap-1 truncate rounded-md px-2 py-1 text-left font-medium motion-safe:transition-colors",
+        sorted && "text-primary",
+        shouldShowActionsMenu ? "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 cursor-pointer" : "cursor-default"
+      ),
+      children: [
+        /* @__PURE__ */ jsx8(DataTableSortIcon, { sortOrder: sorted }),
+        /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate", children: flexRender2(header.column.columnDef.header, header.getContext()) }),
+        shouldShowActionsMenu && /* @__PURE__ */ jsx8(
+          Icon6,
+          {
+            size: "sm",
+            name: "ellipsis",
+            className: "ml-1 shrink-0 opacity-0 transition-none group-hover/col-actions:opacity-100 group-focus-visible/col-actions:opacity-100 group-data-[state=open]/col-actions:opacity-100"
+          }
+        )
+      ]
+    }
+  );
+  const label = shouldShowActionsMenu ? /* @__PURE__ */ jsxs7(DropdownMenu3, { children: [
+    /* @__PURE__ */ jsx8(DropdownMenuTrigger3, { asChild: true, children: labelButton }),
+    /* @__PURE__ */ jsx8(
+      ColumnActionsMenuItems,
+      {
+        header,
+        onAutosizeAll,
+        onAutosizeColumn,
+        layout
+      }
+    )
+  ] }) : labelButton;
+  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex min-w-0 items-center gap-1", children: /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1", children: !isActionColumn && !isGroupedColumn && (headerTitle ? /* @__PURE__ */ jsxs7(Tooltip3, { children: [
+      /* @__PURE__ */ jsx8(TooltipTrigger3, { asChild: true, children: label }),
+      /* @__PURE__ */ jsx8(TooltipContent3, { children: headerTitle })
+    ] }) : label) }) }),
+    canResize && /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Resize column",
+        className: "hover:border-primary absolute top-0 right-0 z-10 h-full w-2 cursor-col-resize border-r border-transparent opacity-0 group-hover:opacity-100 hover:opacity-100 motion-safe:transition-opacity",
+        onMouseDown: resizeHandler,
+        onDoubleClick: (e) => {
+          e.preventDefault();
+          onResetColumnSize(header.column.id);
+        }
+      }
+    )
+  ] });
+}
+var DEFAULT_STICKY_HEADER_OFFSET_PX = 0;
+var DEFAULT_STICKY_HEADER_ROW_HEIGHT_PX = 48;
+function DataTableHeader({
+  headerGroups,
+  onAutosizeAll,
+  onAutosizeColumn,
+  onResetColumnSize,
+  stickyHeader,
+  layout = "auto"
+}) {
+  var _a, _b;
+  const isGrid = layout === "grid";
+  const stickyHeaderOffset = typeof stickyHeader === "object" ? (_a = stickyHeader == null ? void 0 : stickyHeader.offset) != null ? _a : DEFAULT_STICKY_HEADER_OFFSET_PX : DEFAULT_STICKY_HEADER_OFFSET_PX;
+  const stickyHeaderRowHeight = typeof stickyHeader === "object" ? (_b = stickyHeader == null ? void 0 : stickyHeader.rowHeight) != null ? _b : DEFAULT_STICKY_HEADER_ROW_HEIGHT_PX : DEFAULT_STICKY_HEADER_ROW_HEIGHT_PX;
+  const renderHeaders = (headerGroup, headerGroupIndex) => {
+    const visibleHeaders = headerGroup.headers.filter((header) => !isFilterOnlyColumn(header.column));
+    return visibleHeaders.map((header, headerIndex) => {
+      const meta = header.column.columnDef.meta;
+      const isActionColumn = !!(meta == null ? void 0 : meta.actions);
+      const isGroupedColumn = header.column.getIsGrouped();
+      const canSort = header.column.getCanSort();
+      const isLastColumn = isGrid && headerIndex === visibleHeaders.length - 1;
+      const canResize = header.column.getCanResize() && !isLastColumn;
+      const canHide = header.column.getCanHide();
+      const canPin = !isGrid && header.column.getCanPin();
+      const shouldShowActionsMenu = !isGroupedColumn && !isActionColumn && (canSort || canResize || canHide || canPin);
+      const stickyTopPx = stickyHeader ? stickyHeaderOffset + headerGroupIndex * stickyHeaderRowHeight : void 0;
+      const isPinned = !isGrid && header.column.getIsPinned();
+      const pinning = isGrid ? { className: "", style: {} } : getColumnPinningProps(header.column, "header");
+      const content = /* @__PURE__ */ jsx8(
+        HeaderCellContent,
+        {
+          header,
+          canResize,
+          isActionColumn,
+          isGroupedColumn,
+          shouldShowActionsMenu,
+          onAutosizeAll,
+          onAutosizeColumn,
+          onResetColumnSize,
+          layout
+        }
+      );
+      const cellClassName = cn(
+        "group relative overflow-visible text-left",
+        !!stickyHeader && cn(HEADER_SURFACE_BG, "sticky z-20"),
+        pinning.className,
+        isPinned && "z-30"
+      );
+      if (isGrid) {
+        return /* @__PURE__ */ jsx8(
+          "div",
+          {
+            role: "columnheader",
+            className: cn(TABLE_HEAD_CLASSES, cellClassName, "h-auto py-1.5 whitespace-normal"),
+            style: __spreadValues({
+              minWidth: header.column.columnDef.minSize
+            }, stickyTopPx !== void 0 ? { top: stickyTopPx } : {}),
+            children: content
+          },
+          header.id
+        );
+      }
+      return /* @__PURE__ */ jsx8(
+        BaseTableHead,
+        {
+          className: cn(cellClassName, "h-auto py-1.5 whitespace-normal"),
+          style: __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, pinning.style), {
+            minWidth: header.column.columnDef.minSize,
+            maxWidth: header.column.columnDef.maxSize
+          }), !isPinned ? { width: header.column.getSize() } : {}), stickyTopPx !== void 0 ? { top: stickyTopPx } : {}),
+          children: content
+        },
+        header.id
+      );
+    });
+  };
+  if (isGrid) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: "rowgroup",
+        className: cn("col-span-full grid grid-cols-subgrid", HEADER_SURFACE_BG, !!stickyHeader && "sticky z-20"),
+        style: stickyHeader ? { top: stickyHeaderOffset } : void 0,
+        children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx8("div", { role: "row", className: "col-span-full grid grid-cols-subgrid border-b", children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(BaseTableHeader, { children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx8(BaseTableRow, { children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id)) });
+}
+var DataTableRow = React5.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { hoverable, disabled, className, layout = "auto" } = _b, props = __objRest(_b, ["hoverable", "disabled", "className", "layout"]);
+    const classes = cn(
+      "break-all",
+      hoverable && "cursor-pointer",
+      disabled && "cursor-not-allowed opacity-80",
+      className
+    );
+    if (layout === "grid") {
+      return /* @__PURE__ */ jsx8(
+        "div",
+        __spreadValues({
+          ref,
+          role: "row",
+          className: cn(TABLE_ROW_CLASSES, "col-span-full grid grid-cols-subgrid", classes)
+        }, props)
+      );
+    }
+    return /* @__PURE__ */ jsx8(BaseTableRow, __spreadValues({ ref, className: classes }, props));
+  }
+);
+DataTableRow.displayName = "DataTableRow";
+function DataTableCell({
+  cell,
+  className,
+  showContextualFilter,
+  onContextCell,
+  onContextSearch,
+  contextualMenuActions,
+  layout = "auto"
+}) {
+  const isGrid = layout === "grid";
+  const meta = cell.column.columnDef.meta;
+  const isActions = !!(meta == null ? void 0 : meta.actions);
+  const shouldTruncate = !isActions;
+  const isPinned = !isGrid && cell.column.getIsPinned();
+  const pinning = isGrid ? { className: "", style: {} } : getColumnPinningProps(cell.column);
+  const shouldShowContextualMenu = !!showContextualFilter && !!onContextCell && !isActions;
+  const contextualGlobalSearch = shouldShowContextualMenu ? getContextualGlobalSearch(cell) : void 0;
+  const contextualFilter = shouldShowContextualMenu ? getContextualColumnFilter(cell) : void 0;
+  const content = flexRender2(cell.column.columnDef.cell, cell.getContext());
+  const cellClassName = cn(
+    isActions && "text-right",
+    shouldTruncate && "overflow-hidden text-ellipsis whitespace-nowrap",
+    isGrid && "flex items-center",
+    pinning.className,
+    isPinned && "z-10",
+    className
+  );
+  const cellElement = isGrid ? /* @__PURE__ */ jsx8(
+    "div",
+    {
+      role: "cell",
+      className: cn(TABLE_CELL_CLASSES, cellClassName),
+      style: { minWidth: cell.column.columnDef.minSize },
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx8(
+    BaseTableCell,
+    {
+      className: cellClassName,
+      style: __spreadProps(__spreadValues(__spreadValues({}, pinning.style), !isPinned ? { width: cell.column.getSize() } : {}), {
+        minWidth: cell.column.columnDef.minSize,
+        maxWidth: cell.column.columnDef.maxSize
+      }),
+      children: content
+    }
+  );
+  if (!shouldShowContextualMenu || !onContextCell) return cellElement;
+  return /* @__PURE__ */ jsxs7(ContextMenu, { children: [
+    /* @__PURE__ */ jsx8(ContextMenuTrigger, { asChild: true, children: cellElement }),
+    /* @__PURE__ */ jsx8(
+      CellContextualFilter,
+      {
+        filter: contextualFilter,
+        globalSearch: contextualGlobalSearch,
+        cell,
+        onContextCell,
+        onContextSearch,
+        contextualMenuActions
+      }
+    )
+  ] });
+}
+function DataTableGroupRow({
+  groupLabel,
+  colSpan,
+  layout = "auto"
+}) {
+  if (layout === "grid") {
+    return /* @__PURE__ */ jsx8("div", { role: "row", className: "bg-muted/50 hover:bg-muted/50 col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: "cell",
+        style: { gridColumn: `span ${colSpan}` },
+        className: "text-foreground border-b px-4 py-2 font-semibold whitespace-nowrap",
+        children: groupLabel
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx8(BaseTableRow, { className: "bg-muted/50 hover:bg-muted/50", children: /* @__PURE__ */ jsx8(BaseTableCell, { colSpan, className: "text-foreground border-b font-semibold whitespace-nowrap", children: groupLabel }) });
+}
+function DataTableSkeletonBody({
+  rowCount = 10,
+  columns,
+  renderCell,
+  layout = "auto"
+}) {
+  const isGrid = layout === "grid";
+  const rows = Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx8(DataTableRow, { layout, children: columns.map(
+    (col) => {
+      var _a, _b;
+      return isGrid ? /* @__PURE__ */ jsx8(
+        "div",
+        {
+          role: "cell",
+          className: cn(TABLE_CELL_CLASSES, "flex items-center overflow-hidden"),
+          style: { minWidth: col.minSize },
+          children: (_a = renderCell == null ? void 0 : renderCell(col.id)) != null ? _a : /* @__PURE__ */ jsx8(Skeleton, { className: "h-4 w-full" })
+        },
+        `skeleton-col-${col.id}-row-${rowIndex}`
+      ) : /* @__PURE__ */ jsx8(
+        BaseTableCell,
+        {
+          style: { width: col.size, minWidth: col.minSize, maxWidth: col.maxSize },
+          children: (_b = renderCell == null ? void 0 : renderCell(col.id)) != null ? _b : /* @__PURE__ */ jsx8(Skeleton, { className: "h-4 w-full" })
+        },
+        `skeleton-col-${col.id}-row-${rowIndex}`
+      );
+    }
+  ) }, `skeleton-row-${rowIndex}`));
+  if (isGrid) {
+    return /* @__PURE__ */ jsx8("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", "data-testid": "table-skeleton-loader", children: rows });
+  }
+  return /* @__PURE__ */ jsx8(BaseTableBody, { "data-testid": "table-skeleton-loader", children: rows });
+}
+function DataTableExpandedRow({
+  colSpan,
+  show,
+  children,
+  layout = "auto"
+}) {
+  if (!show) return null;
+  if (layout === "grid") {
+    return /* @__PURE__ */ jsx8("div", { role: "row", className: "col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx8("div", { role: "cell", style: { gridColumn: `span ${colSpan}` }, className: "bg-card p-0 align-top whitespace-normal", children }) });
+  }
+  return /* @__PURE__ */ jsx8(BaseTableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx8(BaseTableCell, { colSpan, className: "bg-card p-0 align-top whitespace-normal", children }) });
+}
+function DataTableBody({
+  tableRows,
+  tableState,
+  columns,
+  skeletonRowCount,
+  renderSkeletonCell,
+  onRowRender,
+  renderExpandedRow,
+  showContextualFilter,
+  onContextCell,
+  onContextSearch,
+  contextualMenuActions,
+  layout = "auto"
+}) {
+  const isGrid = layout === "grid";
+  const visibleColumns = columns.filter((column) => !isFilterOnlyColumn(column));
+  const colSpan = visibleColumns.length;
+  if (tableState === "loading") {
+    const skeletonColumns = visibleColumns.map((c) => ({
+      id: c.id,
+      size: c.columnDef.size,
+      minSize: c.columnDef.minSize,
+      maxSize: c.columnDef.maxSize
+    }));
+    return /* @__PURE__ */ jsx8(
+      DataTableSkeletonBody,
+      {
+        columns: skeletonColumns,
+        rowCount: skeletonRowCount,
+        renderCell: renderSkeletonCell,
+        layout
+      }
+    );
+  }
+  const rows = tableRows.map((row) => {
+    var _a, _b, _c, _d;
+    if ((_a = row.getIsGrouped) == null ? void 0 : _a.call(row)) {
+      const groupLabel = (_c = row.groupingValue) != null ? _c : row.groupingColumnId ? (_b = row.getGroupingValue) == null ? void 0 : _b.call(row, row.groupingColumnId) : void 0;
+      return /* @__PURE__ */ jsx8(DataTableGroupRow, { groupLabel: String(groupLabel != null ? groupLabel : ""), colSpan, layout }, row.id);
+    }
+    const isExpanded = !!(renderExpandedRow && ((_d = row.getIsExpanded) == null ? void 0 : _d.call(row)));
+    const expandedRow = renderExpandedRow ? renderExpandedRow(row.original) : null;
+    return /* @__PURE__ */ jsxs7(React5.Fragment, { children: [
+      /* @__PURE__ */ jsx8(
+        DataTableRow,
+        __spreadProps(__spreadValues({}, onRowRender ? onRowRender(row.original) : {}), {
+          "data-expanded": isExpanded || void 0,
+          layout,
+          children: row.getVisibleCells().filter((cell) => !isFilterOnlyColumn(cell.column)).map((cell) => /* @__PURE__ */ jsx8(
+            DataTableCell,
+            {
+              cell,
+              showContextualFilter,
+              onContextCell,
+              onContextSearch,
+              contextualMenuActions,
+              layout
+            },
+            cell.id
+          ))
+        })
+      ),
+      /* @__PURE__ */ jsx8(DataTableExpandedRow, { colSpan, show: isExpanded, layout, children: expandedRow })
+    ] }, row.id);
+  });
+  if (isGrid) {
+    return /* @__PURE__ */ jsx8("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", children: rows });
+  }
+  return /* @__PURE__ */ jsx8(BaseTableBody, { children: rows });
+}
+
+// src/data-table/view-filter.tsx
+import * as React7 from "react";
+
+// src/filter-bar/filter-bar.tsx
+import * as React6 from "react";
+import { Icon as Icon7 } from "@upbound/monarch-core";
+import { Badge as Badge2 } from "@upbound/monarch-core";
+import { Button as Button6 } from "@upbound/monarch-core";
+import { ButtonGroup as ButtonGroup2, ButtonGroupText as ButtonGroupText2 } from "@upbound/monarch-core";
+import { Calendar as Calendar2 } from "@upbound/monarch-core";
+import {
+  Combobox as Combobox2,
+  ComboboxChip as ComboboxChip2,
+  ComboboxClearAll as ComboboxClearAll2,
+  ComboboxContent as ComboboxContent2,
+  ComboboxEmpty as ComboboxEmpty2,
+  ComboboxInput as ComboboxInput2,
+  ComboboxItem as ComboboxItem2,
+  ComboboxList as ComboboxList2,
+  ComboboxSelectedChips as ComboboxSelectedChips2,
+  ComboboxSeparator as ComboboxSeparator2,
+  ComboboxTrigger as ComboboxTrigger2,
+  ComboboxValue as ComboboxValue2
+} from "@upbound/monarch-core";
+import {
+  DropdownMenu as DropdownMenu4,
+  DropdownMenuCheckboxItem as DropdownMenuCheckboxItem2,
+  DropdownMenuContent as DropdownMenuContent4,
+  DropdownMenuItem as DropdownMenuItem4,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger as DropdownMenuTrigger4
+} from "@upbound/monarch-core";
+import { Input as Input2 } from "@upbound/monarch-core";
+import { Label as Label3 } from "@upbound/monarch-core";
+import { Popover as Popover2, PopoverContent as PopoverContent2, PopoverTrigger as PopoverTrigger2 } from "@upbound/monarch-core";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function asCheckboxValue(value) {
+  return Array.isArray(value) ? value : [];
+}
+function asRadioValue(value) {
+  return typeof value === "string" ? value : "";
+}
+function asTextValue(value) {
+  return typeof value === "string" ? value : "";
+}
+function asMultiTextValue(value) {
+  return Array.isArray(value) ? value : [];
+}
+function asDateValue(value) {
+  if (value && typeof value === "object" && !Array.isArray(value)) return value;
+  return { startDate: null, endDate: null };
+}
+function hasExplicitTime(date) {
+  if (!date) return false;
+  return date.getHours() !== 0 || date.getMinutes() !== 0;
+}
+function formatTimeForInput(date) {
+  if (!date) return "";
+  return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+function applyTimeToDate(date, time) {
+  const [hours, minutes] = time.split(":").map(Number);
+  const next = new Date(date);
+  next.setHours(hours || 0, minutes || 0, 0, 0);
+  return next;
+}
+function formatDateLabel(date) {
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+function FilterBar(_a) {
+  var _b = _a, {
+    filters,
+    activeFilters,
+    onAddFilter,
+    onRemoveFilter,
+    onChangeFilter,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "filters",
+    "activeFilters",
+    "onAddFilter",
+    "onRemoveFilter",
+    "onChangeFilter",
+    "className",
+    "children"
+  ]);
+  const usedKeys = new Set(activeFilters.map((f) => f.key));
+  const availableFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const shouldShowFilters = availableFilters.length > 0 || activeFilters.length > 0;
+  const [pendingOpenKey, setPendingOpenKey] = React6.useState(null);
+  function handleAddFilter(key) {
+    onAddFilter(key);
+    setPendingOpenKey(key);
+  }
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "filter-bar",
+      "data-visible-filters": shouldShowFilters,
+      className: cn("flex flex-wrap items-center gap-2", className)
+    }, props), {
+      children: [
+        availableFilters.length > 0 && /* @__PURE__ */ jsxs8(DropdownMenu4, { children: [
+          /* @__PURE__ */ jsx9(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs8(Button6, { variant: "outline", children: [
+            /* @__PURE__ */ jsx9(Icon7, { name: "plus", "data-icon": "inline-start" }),
+            "Add filter"
+          ] }) }),
+          /* @__PURE__ */ jsx9(
+            DropdownMenuContent4,
+            {
+              align: "start",
+              className: "w-48",
+              onCloseAutoFocus: (e) => e.preventDefault(),
+              children: availableFilters.map((filter) => /* @__PURE__ */ jsx9(DropdownMenuItem4, { onSelect: () => handleAddFilter(filter.key), children: filter.label }, filter.key))
+            }
+          )
+        ] }),
+        activeFilters.map((active) => {
+          const definition = filters.find((f) => f.key === active.key);
+          if (!definition) return null;
+          return /* @__PURE__ */ jsx9(
+            FilterChip,
+            {
+              definition,
+              value: active.value,
+              autoOpen: active.key === pendingOpenKey,
+              onChangeValue: (value) => onChangeFilter(active.key, value),
+              onRemove: () => onRemoveFilter(active.key)
+            },
+            active.key
+          );
+        }),
+        children
+      ]
+    })
+  );
+}
+function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
+  var _a;
+  const type = (_a = definition.type) != null ? _a : "checkbox";
+  switch (type) {
+    case "checkbox":
+      return /* @__PURE__ */ jsx9(
+        CheckboxFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ jsx9(
+        RadioFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ jsx9(
+        TextFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "multiText":
+      return /* @__PURE__ */ jsx9(
+        MultiTextFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx9(
+        DateFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+  }
+}
+function FilterChipRemoveButton({ label, onRemove }) {
+  return /* @__PURE__ */ jsx9(Button6, { variant: "outline", size: "icon", "aria-label": `Remove ${label} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx9(Icon7, { name: "xmark" }) });
+}
+function CheckboxFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  var _a, _b;
+  const { label, options, searchable = false } = definition;
+  const values = asCheckboxValue(value);
+  const displayLabel = values.length === 0 ? "Any" : values.length === 1 ? (_b = (_a = options.find((o) => o.value === values[0])) == null ? void 0 : _a.label) != null ? _b : values[0] : `${values.length} selected`;
+  function toggle(optionValue) {
+    const next = values.includes(optionValue) ? values.filter((v) => v !== optionValue) : [...values, optionValue];
+    onChangeValue(next);
+  }
+  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs8(
+      Combobox2,
+      {
+        items: options,
+        itemToStringValue: (item) => item.label,
+        multiple: true,
+        defaultOpen: autoOpen,
+        value: options.filter((o) => values.includes(o.value)),
+        onValueChange: (selected) => onChangeValue(selected.map((s) => s.value)),
+        children: [
+          /* @__PURE__ */ jsx9(
+            ComboboxTrigger2,
+            {
+              render: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx9("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel })
+            }
+          ),
+          /* @__PURE__ */ jsxs8(ComboboxContent2, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+            /* @__PURE__ */ jsx9(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+            values.length > 0 && /* @__PURE__ */ jsxs8(Fragment6, { children: [
+              /* @__PURE__ */ jsxs8(ComboboxSelectedChips2, { children: [
+                /* @__PURE__ */ jsx9(ComboboxValue2, { children: (selected) => /* @__PURE__ */ jsx9(Fragment6, { children: selected.map((item) => /* @__PURE__ */ jsx9(ComboboxChip2, { children: item.label }, item.value)) }) }),
+                /* @__PURE__ */ jsx9(ComboboxClearAll2, { onClick: () => onChangeValue([]) })
+              ] }),
+              /* @__PURE__ */ jsx9(ComboboxSeparator2, {})
+            ] }),
+            /* @__PURE__ */ jsxs8(ComboboxEmpty2, { children: [
+              "No ",
+              label.toLowerCase(),
+              " found."
+            ] }),
+            /* @__PURE__ */ jsx9(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs8(ComboboxItem2, { value: item, children: [
+              item.icon,
+              item.label
+            ] }, item.value) })
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs8(DropdownMenu4, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx9(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs8(Button6, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx9("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel }),
+        /* @__PURE__ */ jsx9(Icon7, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+      ] }) }),
+      /* @__PURE__ */ jsx9(DropdownMenuContent4, { align: "start", className: "w-48", children: options.map((opt) => /* @__PURE__ */ jsxs8(
+        DropdownMenuCheckboxItem2,
+        {
+          checked: values.includes(opt.value),
+          onCheckedChange: () => toggle(opt.value),
+          children: [
+            opt.icon,
+            opt.label
+          ]
+        },
+        opt.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function RadioFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  var _a, _b, _c;
+  const { label, options, searchable = false } = definition;
+  const selectedValue = asRadioValue(value);
+  const displayLabel = selectedValue ? (_b = (_a = options.find((o) => o.value === selectedValue)) == null ? void 0 : _a.label) != null ? _b : selectedValue : "Any";
+  const selected = (_c = options.find((o) => o.value === selectedValue)) != null ? _c : null;
+  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs8(
+      Combobox2,
+      {
+        items: options,
+        itemToStringValue: (item) => item.label,
+        defaultOpen: autoOpen,
+        value: selected,
+        onValueChange: (next) => {
+          var _a2;
+          return onChangeValue((_a2 = next == null ? void 0 : next.value) != null ? _a2 : "");
+        },
+        children: [
+          /* @__PURE__ */ jsx9(
+            ComboboxTrigger2,
+            {
+              render: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx9("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel })
+            }
+          ),
+          /* @__PURE__ */ jsxs8(ComboboxContent2, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+            /* @__PURE__ */ jsx9(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+            /* @__PURE__ */ jsxs8(ComboboxEmpty2, { children: [
+              "No ",
+              label.toLowerCase(),
+              " found."
+            ] }),
+            /* @__PURE__ */ jsx9(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs8(ComboboxItem2, { value: item, children: [
+              item.icon,
+              item.label
+            ] }, item.value) })
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs8(DropdownMenu4, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx9(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs8(Button6, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx9("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel }),
+        /* @__PURE__ */ jsx9(Icon7, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+      ] }) }),
+      /* @__PURE__ */ jsx9(DropdownMenuContent4, { align: "start", className: "w-48", children: /* @__PURE__ */ jsx9(DropdownMenuRadioGroup, { value: selectedValue, onValueChange: onChangeValue, children: options.map((opt) => /* @__PURE__ */ jsxs8(DropdownMenuRadioItem, { value: opt.value, children: [
+        opt.icon,
+        opt.label
+      ] }, opt.value)) }) })
+    ] }),
+    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function TextFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, placeholder } = definition;
+  const text = asTextValue(value);
+  const [open, setOpen] = React6.useState(!!autoOpen);
+  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs8(Popover2, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx9(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx9("span", { className: text ? "" : "text-muted-foreground", children: text || "Any" }) }) }),
+      /* @__PURE__ */ jsx9(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsx9(
+        Input2,
+        {
+          autoFocus: true,
+          value: text,
+          placeholder: placeholder != null ? placeholder : "Enter a value\u2026",
+          onChange: (e) => onChangeValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") setOpen(false);
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function MultiTextFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, placeholder } = definition;
+  const tokens = asMultiTextValue(value);
+  const [draft, setDraft] = React6.useState("");
+  const displayLabel = tokens.length === 0 ? "Any" : tokens.length === 1 ? tokens[0] : `${tokens.length} values`;
+  function addToken() {
+    const token = draft.trim();
+    if (!token || tokens.includes(token)) {
+      setDraft("");
+      return;
+    }
+    onChangeValue([...tokens, token]);
+    setDraft("");
+  }
+  function removeToken(token) {
+    onChangeValue(tokens.filter((t) => t !== token));
+  }
+  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs8(Popover2, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx9(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx9("span", { className: tokens.length === 0 ? "text-muted-foreground" : "", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx9(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
+        tokens.length > 0 && /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-1", children: tokens.map((token) => /* @__PURE__ */ jsxs8(Badge2, { variant: "secondary", className: "gap-1", children: [
+          token,
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${token}`,
+              onClick: () => removeToken(token),
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ jsx9(Icon7, { name: "xmark", size: "xs" })
+            }
+          )
+        ] }, token)) }),
+        /* @__PURE__ */ jsx9(
+          Input2,
+          {
+            autoFocus: true,
+            value: draft,
+            placeholder: placeholder != null ? placeholder : "Type a value, press Enter\u2026",
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addToken();
+              } else if (e.key === "Backspace" && draft === "" && tokens.length > 0) {
+                removeToken(tokens[tokens.length - 1]);
+              }
+            }
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function DateFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, includeTime } = definition;
+  const { startDate, endDate } = asDateValue(value);
+  const showTimeInputs = includeTime != null ? includeTime : hasExplicitTime(startDate) || hasExplicitTime(endDate);
+  const displayLabel = !startDate ? "Any" : !endDate || startDate.getTime() === endDate.getTime() ? formatDateLabel(startDate) : `${formatDateLabel(startDate)} \u2013 ${formatDateLabel(endDate)}`;
+  function pickRange(range) {
+    var _a;
+    if (!(range == null ? void 0 : range.from)) {
+      onChangeValue({ startDate: null, endDate: null });
+      return;
+    }
+    onChangeValue({ startDate: range.from, endDate: (_a = range.to) != null ? _a : range.from });
+  }
+  function pickStartTime(time) {
+    if (!startDate) return;
+    onChangeValue({ startDate: applyTimeToDate(startDate, time), endDate });
+  }
+  function pickEndTime(time) {
+    if (!endDate) return;
+    onChangeValue({ startDate, endDate: applyTimeToDate(endDate, time) });
+  }
+  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs8(Popover2, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx9(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx9("span", { className: startDate ? "" : "text-muted-foreground", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx9(PopoverContent2, { align: "start", className: "w-fit", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx9(
+          Calendar2,
+          {
+            mode: "range",
+            selected: { from: startDate != null ? startDate : void 0, to: endDate != null ? endDate : void 0 },
+            onSelect: pickRange
+          }
+        ),
+        showTimeInputs && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx9(
+              Label3,
+              {
+                htmlFor: `${definition.key}-start-time`,
+                className: "text-body-sm text-muted-foreground w-10 shrink-0",
+                children: "Start"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              Input2,
+              {
+                id: `${definition.key}-start-time`,
+                type: "time",
+                className: "w-full",
+                value: formatTimeForInput(startDate),
+                onChange: (e) => pickStartTime(e.target.value),
+                disabled: !startDate
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx9(
+              Label3,
+              {
+                htmlFor: `${definition.key}-end-time`,
+                className: "text-body-sm text-muted-foreground w-10 shrink-0",
+                children: "End"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              Input2,
+              {
+                id: `${definition.key}-end-time`,
+                type: "time",
+                className: "w-full",
+                value: formatTimeForInput(endDate),
+                onChange: (e) => pickEndTime(e.target.value),
+                disabled: !endDate
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+
+// src/lib/data-table/filter-types.ts
+var isDateRangeColumnFilter = (definition) => definition.type === "dateRange";
+var isRadioColumnFilter = (definition) => definition.type === "radio" || definition.type === "scrollableRadio";
+var isCheckboxColumnFilter = (definition) => definition.type === "checkbox" || definition.type === "scrollableCheckbox";
+var isMultiTextColumnFilter = (definition) => definition.type === "multiText";
+
+// src/data-table/view-filter.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function toFilterOption(opt) {
+  return typeof opt === "string" ? { value: opt, label: opt } : { value: opt.value, label: opt.label };
+}
+function toFilterBarDefinition(key, filter) {
+  var _a;
+  const base = { key, label: filter.title, order: (_a = filter.order) != null ? _a : 0 };
+  if (isCheckboxColumnFilter(filter)) {
+    const options = "options" in filter && filter.options ? filter.options : [];
+    return __spreadProps(__spreadValues({}, base), {
+      type: "checkbox",
+      options: options.map(toFilterOption),
+      searchable: filter.type === "scrollableCheckbox"
+    });
+  }
+  if (isRadioColumnFilter(filter)) {
+    return __spreadProps(__spreadValues({}, base), {
+      type: "radio",
+      options: filter.options.map(toFilterOption),
+      searchable: filter.type === "scrollableRadio"
+    });
+  }
+  if (isDateRangeColumnFilter(filter)) {
+    return __spreadProps(__spreadValues({}, base), { type: "date", includeTime: filter.includeTime });
+  }
+  if (isMultiTextColumnFilter(filter)) {
+    return __spreadProps(__spreadValues({}, base), { type: "multiText", placeholder: filter.placeholder });
+  }
+  return __spreadProps(__spreadValues({}, base), { type: "text", placeholder: filter.placeholder });
+}
+function emptyValueFor(filter) {
+  if (isCheckboxColumnFilter(filter)) return [];
+  if (isRadioColumnFilter(filter)) return void 0;
+  if (isDateRangeColumnFilter(filter)) return { startDate: null, endDate: null };
+  if (isMultiTextColumnFilter(filter)) return [];
+  return void 0;
+}
+function ViewFilter({
+  columns,
+  columnFilters,
+  onColumnFiltersChange,
+  className
+}) {
+  const filterableColumns = React7.useMemo(
+    () => columns.filter((column) => !isFilterOnlyColumn(column) && column.getCanFilter()).flatMap((column) => {
+      var _a;
+      const filter = (_a = column.columnDef.meta) == null ? void 0 : _a.filter;
+      return filter ? [{ key: column.id, filter }] : [];
+    }),
+    [columns]
+  );
+  const filterDefinitions = React7.useMemo(
+    () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => a.order - b.order),
+    [filterableColumns]
+  );
+  const emptyValueByKey = React7.useMemo(
+    () => new Map(filterableColumns.map(({ key, filter }) => [key, emptyValueFor(filter)])),
+    [filterableColumns]
+  );
+  const activeFilters = React7.useMemo(
+    () => columnFilters.map((filter) => ({ key: filter.id, value: filter.value })),
+    [columnFilters]
+  );
+  return /* @__PURE__ */ jsx10(
+    FilterBar,
+    {
+      className,
+      filters: filterDefinitions,
+      activeFilters,
+      onAddFilter: (key) => onColumnFiltersChange((prev) => [...prev.filter((f) => f.id !== key), { id: key, value: emptyValueByKey.get(key) }]),
+      onRemoveFilter: (key) => onColumnFiltersChange((prev) => prev.filter((f) => f.id !== key)),
+      onChangeFilter: (key, value) => onColumnFiltersChange((prev) => [...prev.filter((f) => f.id !== key), { id: key, value }])
+    }
+  );
+}
+
+// src/section-header.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function SectionHeader(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx11(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "section-header",
+      className: cn("flex w-full items-start justify-between gap-4", className)
+    }, props), {
+      children
+    })
+  );
+}
+function SectionHeaderContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx11("div", __spreadValues({ "data-slot": "section-header-content", className: cn("flex flex-col gap-1", className) }, props));
+}
+function SectionHeaderTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx11("h2", __spreadValues({ "data-slot": "section-header-title", className: cn("text-h3 text-foreground", className) }, props));
+}
+function SectionHeaderDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx11("p", __spreadValues({ "data-slot": "section-header-description", className: cn("text-body text-muted-foreground", className) }, props));
+}
+
+// src/data-table/data-table.tsx
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULT_PAGE_SIZE = 20;
+function DataTable({
+  id,
+  config,
+  title,
+  description,
+  emptyView,
+  showError,
+  className,
+  fitContent = false,
+  loading = false,
+  renderSkeletonCell,
+  serverSidePagination = false,
+  ActionsComponent: Actions,
+  onRowRender,
+  renderExpandedRow,
+  expanded: parentExpanded,
+  onExpandedChange: parentOnExpandedChange,
+  disableSearch = false,
+  disableFilters = false,
+  disableSorting = false,
+  paginationConfig = true,
+  disableColumnReordering = false,
+  disableColumnVisibility = false,
+  disableColumnResizing = false,
+  disableColumnPinning = false,
+  searchTerm: parentGlobalFilter,
+  onSearchTermChange: parentSetGlobalFilter,
+  filters: parentColumnFilters,
+  onFiltersChange: parentSetColumnFilters,
+  pagination: parentPagination,
+  onPaginationChange: parentSetPagination,
+  sorting: parentSorting,
+  onSortingChange: parentSetSorting,
+  columnOrdering: parentColumnOrdering,
+  onColumnOrderingChange: parentSetColumnOrdering,
+  columnVisibility: parentColumnVisibility,
+  onColumnVisibilityChange: parentSetColumnVisibility,
+  columnPinning: parentColumnPinning,
+  onColumnPinningChange: parentSetColumnPinning,
+  grouping: parentGrouping,
+  onGroupingChange: parentSetGrouping,
+  celFilterClassName,
+  showContextualFilter = false,
+  onContextCell,
+  contextualMenuActions,
+  layout = "auto",
+  initialColumnSizing,
+  onColumnSizingPersist,
+  stickyHeader = false,
+  celFilterConfig
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const isGrid = layout === "grid";
+  const tableBodyScrollRef = React8.useRef(null);
+  const [innerGlobalFilter, setInnerGlobalFilter] = React8.useState("");
+  const [innerColumnOrdering, setInnerColumnOrdering] = React8.useState([]);
+  const [innerColumnFilters, setInnerColumnFilters] = React8.useState([]);
+  const [innerSorting, setInnerSorting] = React8.useState(((_a = config.state) == null ? void 0 : _a.sorting) || []);
+  const [innerColumnPinning, setInnerColumnPinning] = React8.useState({ left: [], right: [] });
+  const [innerPagination, setInnerPagination] = React8.useState({
+    pageIndex: ((_c = (_b = config.state) == null ? void 0 : _b.pagination) == null ? void 0 : _c.pageIndex) || 0,
+    pageSize: ((_e = (_d = config.state) == null ? void 0 : _d.pagination) == null ? void 0 : _e.pageSize) || DEFAULT_PAGE_SIZE
+  });
+  const [innerGrouping, setInnerGrouping] = React8.useState([]);
+  const [innerColumnVisibility, setInnerColumnVisibility] = React8.useState({});
+  const [innerExpanded, setInnerExpanded] = React8.useState({});
+  const {
+    columnSizing,
+    handleColumnSizingChange,
+    handleAutosizeAll: rawHandleAutosizeAll,
+    handleAutosizeColumn: rawHandleAutosizeColumn,
+    handleResetColumnSize: rawHandleResetColumnSize
+  } = useTableColumnResizing({
+    initialSizing: initialColumnSizing,
+    onColumnSizingPersist,
+    maxSize: isGrid ? RESIZE_MAX_UNBOUNDED : void 0
+  });
+  const globalFilter = parentGlobalFilter != null ? parentGlobalFilter : innerGlobalFilter;
+  const applyGlobalFilter = parentSetGlobalFilter != null ? parentSetGlobalFilter : setInnerGlobalFilter;
+  const columnFilters = parentColumnFilters || innerColumnFilters;
+  const applyColumnFilters = parentSetColumnFilters != null ? parentSetColumnFilters : setInnerColumnFilters;
+  const pagination = parentPagination || innerPagination;
+  const setPagination = parentSetPagination != null ? parentSetPagination : setInnerPagination;
+  const shouldDisablePagination = paginationConfig === false;
+  const resetPageIndexOnFilterChange = React8.useCallback(() => {
+    if (!serverSidePagination || pagination.pageIndex === 0) return;
+    setPagination((prev) => __spreadProps(__spreadValues({}, prev), { pageIndex: 0 }));
+  }, [serverSidePagination, pagination.pageIndex, setPagination]);
+  const setGlobalFilter = React8.useCallback(
+    (value) => {
+      applyGlobalFilter(value);
+      resetPageIndexOnFilterChange();
+    },
+    [applyGlobalFilter, resetPageIndexOnFilterChange]
+  );
+  const setColumnFilters = React8.useCallback(
+    (value) => {
+      applyColumnFilters(value);
+      resetPageIndexOnFilterChange();
+    },
+    [applyColumnFilters, resetPageIndexOnFilterChange]
+  );
+  React8.useLayoutEffect(() => {
+    var _a2;
+    if (shouldDisablePagination) return;
+    (_a2 = tableBodyScrollRef.current) == null ? void 0 : _a2.scrollTo({ top: 0 });
+  }, [shouldDisablePagination, pagination.pageIndex]);
+  const sorting = parentSorting || innerSorting;
+  const setSorting = parentSetSorting != null ? parentSetSorting : setInnerSorting;
+  const columnOrdering = parentColumnOrdering || innerColumnOrdering;
+  const setColumnOrdering = parentSetColumnOrdering != null ? parentSetColumnOrdering : setInnerColumnOrdering;
+  const columnVisibility = parentColumnVisibility != null ? parentColumnVisibility : innerColumnVisibility;
+  const setColumnVisibility = parentSetColumnVisibility != null ? parentSetColumnVisibility : setInnerColumnVisibility;
+  const expanded = parentExpanded != null ? parentExpanded : innerExpanded;
+  const setExpanded = parentOnExpandedChange != null ? parentOnExpandedChange : setInnerExpanded;
+  const columnPinning = parentColumnPinning != null ? parentColumnPinning : innerColumnPinning;
+  const setColumnPinning = parentSetColumnPinning != null ? parentSetColumnPinning : setInnerColumnPinning;
+  const grouping = parentGrouping != null ? parentGrouping : innerGrouping;
+  const setGrouping = parentSetGrouping != null ? parentSetGrouping : setInnerGrouping;
+  const hasGrouping = grouping.length > 0;
+  const hasExternalSearch = parentGlobalFilter !== void 0;
+  const hasExternalFilters = parentColumnFilters !== void 0;
+  const shouldDisableFiltersModels = !!disableFilters && !!disableSearch && !hasExternalSearch && !hasExternalFilters;
+  const table = useReactTable(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, config), {
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: !disableSorting ? getSortedRowModel() : void 0,
+    getPaginationRowModel: !shouldDisablePagination ? getPaginationRowModel() : void 0,
+    getFilteredRowModel: !shouldDisableFiltersModels ? getFilteredRowModel() : void 0,
+    getFacetedRowModel: !shouldDisableFiltersModels ? getFacetedRowModel() : void 0,
+    getFacetedUniqueValues: !shouldDisableFiltersModels ? getFacetedUniqueValues() : void 0
+  }), !!renderExpandedRow && {
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand: () => true,
+    paginateExpandedRows: false
+  }), {
+    getGroupedRowModel: hasGrouping ? getGroupedRowModel() : void 0,
+    getExpandedRowModel: hasGrouping ? getExpandedRowModel() : void 0,
+    groupedColumnMode: hasGrouping ? "reorder" : void 0,
+    enableFilters: !shouldDisableFiltersModels,
+    enableGlobalFilter: !shouldDisableFiltersModels,
+    enableColumnFilters: !shouldDisableFiltersModels,
+    enableColumnResizing: !disableColumnResizing,
+    enableColumnPinning: !disableColumnPinning,
+    enableHiding: !disableColumnVisibility,
+    columnResizeMode: disableColumnResizing ? void 0 : isGrid ? "onEnd" : "onChange",
+    defaultColumn: {
+      size: 150,
+      minSize: 40,
+      maxSize: isGrid ? RESIZE_MAX_UNBOUNDED : 500
+    },
+    state: __spreadValues(__spreadProps(__spreadValues({
+      sorting: disableSorting ? [] : sorting,
+      globalFilter: shouldDisableFiltersModels ? "" : globalFilter,
+      columnFilters: shouldDisableFiltersModels ? [] : columnFilters,
+      pagination: shouldDisablePagination ? void 0 : pagination,
+      columnOrder: disableColumnReordering ? [] : columnOrdering,
+      columnVisibility: disableColumnVisibility ? {} : columnVisibility,
+      columnSizing: disableColumnResizing ? {} : columnSizing,
+      columnPinning: disableColumnPinning ? { left: [], right: [] } : columnPinning
+    }, !!renderExpandedRow && { expanded }), {
+      grouping
+    }), hasGrouping && { expanded: true }),
+    manualSorting: serverSidePagination,
+    manualFiltering: serverSidePagination,
+    manualPagination: serverSidePagination,
+    onSortingChange: disableSorting ? noop : setSorting,
+    onColumnFiltersChange: shouldDisableFiltersModels ? noop : setColumnFilters,
+    onGlobalFilterChange: shouldDisableFiltersModels ? noop : setGlobalFilter,
+    onPaginationChange: shouldDisablePagination ? noop : setPagination,
+    onColumnOrderChange: disableColumnReordering ? noop : setColumnOrdering,
+    onColumnVisibilityChange: disableColumnVisibility ? noop : setColumnVisibility,
+    onColumnSizingChange: disableColumnResizing ? noop : handleColumnSizingChange,
+    onColumnPinningChange: disableColumnPinning ? noop : setColumnPinning
+  }), !!renderExpandedRow && {
+    onExpandedChange: (updater) => setExpanded((prev) => typeof updater === "function" ? updater(prev) : updater)
+  }), {
+    onGroupingChange: setGrouping
+  }));
+  const headerGroups = table.getHeaderGroups();
+  const tableRows = table.getRowModel().rows;
+  const rowCount = table.getRowCount();
+  const flatColumns = table.getAllFlatColumns();
+  const displayableColumns = flatColumns.filter((col) => !isFilterOnlyColumn(col));
+  const orderedVisibleColumns = table.getVisibleLeafColumns().filter((col) => !isFilterOnlyColumn(col));
+  const [gridMeasuredMins, setGridMeasuredMins] = React8.useState({});
+  const { gridTemplateColumns, gridRootRef, handleAutosizeAll, handleAutosizeColumn, handleResetColumnSize } = useGridLayout({
+    layout,
+    table,
+    tableBodyScrollRef,
+    displayableColumns,
+    columnOrdering,
+    gridMeasuredMins,
+    setGridMeasuredMins,
+    handleColumnSizingChange,
+    rawHandleAutosizeAll,
+    rawHandleAutosizeColumn,
+    rawHandleResetColumnSize
+  });
+  const handleContextCell = React8.useCallback(
+    (filter, cell) => {
+      var _a2, _b2;
+      if (celFilterConfig == null ? void 0 : celFilterConfig.onContextualFilter) {
+        celFilterConfig.onContextualFilter({
+          columnId: filter.id,
+          values: columnFilterValueToStrings(filter.value),
+          cell
+        });
+        return;
+      }
+      const filterDefinition = (_b2 = (_a2 = table.getColumn(filter.id)) == null ? void 0 : _a2.columnDef.meta) == null ? void 0 : _b2.filter;
+      setColumnFilters((prev) => mergeColumnFilter(prev, filter, filterDefinition));
+      onContextCell == null ? void 0 : onContextCell(filter, cell);
+    },
+    [celFilterConfig, onContextCell, setColumnFilters, table]
+  );
+  const handleContextSearch = React8.useCallback(
+    (searchTerm) => {
+      setGlobalFilter(searchTerm);
+    },
+    [setGlobalFilter]
+  );
+  const totalTableWidth = React8.useMemo(() => {
+    if (isGrid) return 0;
+    const firstGroup = headerGroups[0];
+    if (!firstGroup) return 0;
+    const displayableIds = new Set(displayableColumns.map((c) => c.id));
+    return firstGroup.headers.filter((h) => displayableIds.has(h.column.id)).reduce((sum, h) => sum + h.column.getSize(), 0);
+  }, [isGrid, headerGroups, displayableColumns]);
+  const filterCount = celFilterConfig ? celFilterConfig.activeFilterCount : table.getState().columnFilters.map(
+    ({ id: columnFilterId, value }) => {
+      var _a2, _b2;
+      return getColumnFilterCount(value, (_b2 = (_a2 = table.getColumn(columnFilterId)) == null ? void 0 : _a2.columnDef.meta) == null ? void 0 : _b2.filter);
+    }
+  ).reduce((prev, curr) => prev + curr, 0);
+  const tableState = getTableState({ error: !!showError, loading, rowCount });
+  const shouldDisable = tableState === "error";
+  const shouldRenderTableContent = tableState !== "error" && tableState !== "empty";
+  const resetFilters = () => {
+    if (celFilterConfig) {
+      celFilterConfig.onTreeChange(createEmptyCelFilterTree());
+    } else {
+      table.resetColumnFilters();
+    }
+    setGlobalFilter("");
+  };
+  React8.useEffect(() => {
+    if (parentGlobalFilter !== void 0) {
+      setInnerGlobalFilter(parentGlobalFilter);
+    }
+  }, [parentGlobalFilter]);
+  React8.useEffect(() => {
+    if (disableColumnReordering) return;
+    const allColumnIds = flatColumns.map((col) => col.id);
+    const normalizedColumnOrdering = normalizeColumnOrdering(columnOrdering, allColumnIds);
+    if (!isSameColumnOrdering(columnOrdering, normalizedColumnOrdering)) {
+      setColumnOrdering(normalizedColumnOrdering);
+    }
+  }, [columnOrdering, disableColumnReordering, flatColumns, setColumnOrdering]);
+  const showViewHeader = !!title || !!Actions;
+  const showColumnOptions = !disableColumnReordering || !disableColumnVisibility;
+  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs9(InputGroup2, { className: "w-70", children: [
+    /* @__PURE__ */ jsx12(InputGroupAddon2, { align: "inline-start", children: /* @__PURE__ */ jsx12(Icon8, { name: "magnifying-glass" }) }),
+    /* @__PURE__ */ jsx12(
+      InputGroupInput2,
+      {
+        "aria-label": "Search",
+        placeholder: "Search\u2026",
+        disabled: shouldDisable,
+        value: globalFilter,
+        onChange: (e) => setGlobalFilter(e.target.value)
+      }
+    )
+  ] });
+  const toolbarColumns = !!showColumnOptions && /* @__PURE__ */ jsx12(
+    ColumnOptions,
+    {
+      columns: flatColumns,
+      columnOrdering,
+      onColumnOrderingChange: setColumnOrdering,
+      disableColumnOrdering: disableColumnReordering
+    }
+  );
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      id: `table-${id}`,
+      "data-testid": `table-${id}`,
+      className: cn(
+        "flex w-full flex-col",
+        !fitContent && (shouldRenderTableContent ? "h-full min-h-0" : "h-screen max-h-[calc(100vh-100px)]"),
+        className
+      ),
+      children: [
+        showViewHeader && /* @__PURE__ */ jsx12(SectionHeader, { className: "mb-4 flex w-full gap-2", children: /* @__PURE__ */ jsxs9(SectionHeaderContent, { children: [
+          !!title && /* @__PURE__ */ jsx12(SectionHeaderTitle, { children: title }),
+          !!description && /* @__PURE__ */ jsx12(SectionHeaderDescription, { children: description })
+        ] }) }),
+        /* @__PURE__ */ jsxs9("div", { className: "mb-4 flex flex-row gap-2", children: [
+          toolbarSearch,
+          /* @__PURE__ */ jsxs9("div", { className: "ml-auto flex items-center gap-2", children: [
+            !!Actions && /* @__PURE__ */ jsx12(Actions, { state: tableState }),
+            toolbarColumns
+          ] })
+        ] }),
+        !disableFilters && /* @__PURE__ */ jsx12("div", { className: "flex w-full", children: celFilterConfig ? /* @__PURE__ */ jsx12("div", { className: cn("mr-2 mb-4 min-w-0 flex-1", celFilterClassName), children: /* @__PURE__ */ jsx12(
+          CelFilterBar,
+          {
+            schema: celFilterConfig.schema,
+            tree: celFilterConfig.tree,
+            onChange: celFilterConfig.onTreeChange,
+            onCompileResultChange: celFilterConfig.onCompileResultChange,
+            onRestrictedOptionSelect: celFilterConfig.onRestrictedOptionSelect,
+            showClearButton: celFilterConfig.showClearButton
+          }
+        ) }) : /* @__PURE__ */ jsx12(
+          ViewFilter,
+          {
+            columns: flatColumns,
+            columnFilters,
+            onColumnFiltersChange: setColumnFilters,
+            className: "data-[visible-filters=true]:mb-4"
+          }
+        ) }),
+        shouldRenderTableContent ? /* @__PURE__ */ jsxs9(Fragment7, { children: [
+          /* @__PURE__ */ jsx12("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "table-main", children: /* @__PURE__ */ jsx12(
+            "div",
+            {
+              ref: tableBodyScrollRef,
+              className: cn(
+                "min-h-0 flex-1 overflow-auto rounded-lg border **:data-[slot=table-container]:overflow-visible",
+                !!stickyHeader && "max-h-[calc(100svh-250px)]"
+              ),
+              children: /* @__PURE__ */ jsxs9(
+                DataTableRoot,
+                {
+                  layout,
+                  gridTemplateColumns,
+                  gridRootRef,
+                  style: isGrid ? { width: "100%" } : totalTableWidth > 0 ? { width: `max(100%, ${totalTableWidth}px)`, minWidth: "100%" } : { width: "100%" },
+                  children: [
+                    /* @__PURE__ */ jsx12(
+                      DataTableHeader,
+                      {
+                        headerGroups,
+                        onAutosizeAll: handleAutosizeAll,
+                        onAutosizeColumn: handleAutosizeColumn,
+                        onResetColumnSize: handleResetColumnSize,
+                        stickyHeader,
+                        layout
+                      }
+                    ),
+                    /* @__PURE__ */ jsx12(
+                      DataTableBody,
+                      {
+                        tableRows,
+                        tableState,
+                        columns: orderedVisibleColumns,
+                        skeletonRowCount: pagination.pageSize,
+                        renderSkeletonCell,
+                        onRowRender,
+                        renderExpandedRow,
+                        showContextualFilter,
+                        onContextCell: handleContextCell,
+                        onContextSearch: handleContextSearch,
+                        contextualMenuActions,
+                        layout
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ) }),
+          !shouldDisablePagination && !!pagination && /* @__PURE__ */ jsx12(
+            DataTablePagination,
+            {
+              rowCount,
+              rowCountRelation: (_f = config.rowCountRelation) != null ? _f : "eq",
+              paginationConfig,
+              pageSize: pagination.pageSize,
+              pageIndex: pagination.pageIndex,
+              onPageChange: (p) => table.setPageIndex(p - 1),
+              onPageSizeChange: (nextPageSize) => setPagination((prev) => __spreadProps(__spreadValues({}, prev || pagination), { pageIndex: 0, pageSize: nextPageSize }))
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx12(
+          DataTableEmptyView,
+          {
+            emptyView,
+            tableState,
+            filterCount: filterCount + (!!globalFilter.trim() ? 1 : 0),
+            resetFilters
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CellContextualFilter,
+  ColumnOptions,
+  DataTable,
+  DataTableBody,
+  DataTableCell,
+  DataTableEmptyView,
+  DataTableExpandedRow,
+  DataTableGroupRow,
+  DataTableHeader,
+  DataTablePagination,
+  DataTableRow,
+  DataTableSkeletonBody,
+  DataTableValueCell,
+  ExpandButton,
+  RowActionItem,
+  RowActions,
+  TimestampCell,
+  ViewFilter,
+  defaultEmptyConfig,
+  defaultErrorConfig,
+  defaultNoFilterFoundConfig,
+  getActionsColumnDefinition,
+  getExpandColumnDefinition,
+  normalizePageSizeOptions
+};
+//# sourceMappingURL=data-table.js.map