@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-DELCADNF.mjs

@@ -0,0 +1,1926 @@
+import {
+  FormModalRenderer,
+  useConfiguredForm
+} from "./chunk-24XDGNJ6.mjs";
+import {
+  default as default18
+} from "./chunk-VYD3PDBB.mjs";
+import {
+  MenuPopper,
+  useMenu
+} from "./chunk-HR3A4H4E.mjs";
+import {
+  default as default16
+} from "./chunk-3DQINB57.mjs";
+import {
+  default as default17
+} from "./chunk-BGB7JHIU.mjs";
+import {
+  MuiFormControlLabel,
+  default3 as default15
+} from "./chunk-T4X375IG.mjs";
+import {
+  MuiPaper
+} from "./chunk-3VUAM2GY.mjs";
+import {
+  CircularProgress
+} from "./chunk-WYYP3Y34.mjs";
+import {
+  Button,
+  IconButton_default
+} from "./chunk-JIU5GVM7.mjs";
+import {
+  default as default5
+} from "./chunk-4Q54P737.mjs";
+import {
+  default109 as default6,
+  default110 as default7,
+  default111 as default8,
+  default112 as default9,
+  default113 as default10,
+  default114 as default11,
+  default115 as default12,
+  default116 as default13,
+  default117 as default14
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default4
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  default2 as default3
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/compound/Table/src/Table.tsx
+import React9 from "react";
+
+// src/components/compound/Table/src/utils/expanded.ts
+function toggleRowExpanded(table, rowId) {
+  table.setExpanded((old) => {
+    const state = old;
+    const exists = state === true ? true : !!(state && state[rowId]);
+    if (exists) {
+      if (state === true) {
+        const ret2 = {};
+        Object.keys(table.getRowModel().rowsById).forEach((id) => {
+          if (id !== rowId) {
+            ret2[id] = true;
+          }
+        });
+        return ret2;
+      }
+      const ret = {};
+      if (state && typeof state === "object") {
+        for (const k in state) {
+          if (k !== rowId) {
+            ret[k] = state[k];
+          }
+        }
+      }
+      return ret;
+    }
+    if (state === true) {
+      return state;
+    }
+    return { ...state || {}, [rowId]: true };
+  });
+}
+
+// src/components/compound/Table/src/render/cell/RowControlsCell.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RowControlsCell({
+  row,
+  table,
+  isExpandable,
+  enableRowSelection,
+  renderExpandedRow
+}) {
+  const isGroupedRow = row.getIsGrouped();
+  const isRowChecked = isGroupedRow ? row.getIsAllSubRowsSelected() : row.getIsSelected();
+  const isRowIndeterminate = isGroupedRow ? row.getIsSomeSelected() && !row.getIsAllSubRowsSelected() : row.getIsSomeSelected();
+  const canToggleSelection = isGroupedRow ? row.getLeafRows().length > 0 : row.getCanSelect();
+  const hasGroupChildren = !!(row.subRows && row.subRows.length > 0);
+  const canShowRowDetailExpand = !!renderExpandedRow && !hasGroupChildren;
+  const canExpand = row.getCanExpand();
+  const shouldShowExpandControl = canExpand && (hasGroupChildren || canShowRowDetailExpand);
+  const handleRowSelectionChange = () => {
+    if (isGroupedRow) {
+      const shouldSelectAllLeaves = !row.getIsAllSubRowsSelected();
+      table.setRowSelection((previous) => {
+        const next = { ...previous };
+        row.getLeafRows().forEach((leafRow) => {
+          if (shouldSelectAllLeaves) {
+            next[leafRow.id] = true;
+          } else {
+            delete next[leafRow.id];
+          }
+        });
+        return next;
+      });
+      return;
+    }
+    row.toggleSelected();
+  };
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", gap: 1 }, children: [
+    isExpandable ? shouldShowExpandControl ? /* @__PURE__ */ jsx(
+      IconButton_default,
+      {
+        size: "small",
+        className: isGroupedRow ? "parent-expand-button" : "child-expand-button",
+        onClick: (e) => {
+          e.stopPropagation();
+          toggleRowExpanded(table, row.id);
+        },
+        sx: {
+          p: 0.5,
+          color: "text.secondary"
+        },
+        children: row.getIsExpanded() ? /* @__PURE__ */ jsx(default6, { sx: { fontSize: "12px" } }) : /* @__PURE__ */ jsx(default7, { sx: { fontSize: "12px" } })
+      }
+    ) : enableRowSelection ? /* @__PURE__ */ jsx(default2, { sx: { width: 28 } }) : null : null,
+    enableRowSelection ? /* @__PURE__ */ jsx(
+      default17,
+      {
+        size: "small",
+        checked: isRowChecked,
+        indeterminate: isRowIndeterminate,
+        disabled: !canToggleSelection,
+        onChange: handleRowSelectionChange,
+        sx: { p: 0.5 }
+      }
+    ) : null
+  ] });
+}
+
+// src/components/compound/Table/src/Table.tsx
+import {
+  createColumnHelper,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getExpandedRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+
+// src/components/compound/Table/src/_types.ts
+var COL_ID_CONTROLS = "__controls__";
+var COL_ID_ACTIONS = "__actions__";
+
+// src/components/elemental/Table/src/index.ts
+import { default as default19 } from "@mui/material/Table";
+import { default as default20 } from "@mui/material/TableBody";
+import { default as default21 } from "@mui/material/TableCell";
+import { default as default22 } from "@mui/material/TableContainer";
+import { default as default23 } from "@mui/material/TableHead";
+import { default as default24 } from "@mui/material/TablePagination";
+import { default as default25 } from "@mui/material/TableRow";
+import { default as default26 } from "@mui/material/TableSortLabel";
+
+// src/components/compound/Table/src/render/controls/PaginationControl.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function PaginationControl({
+  count,
+  pagination,
+  pageSizeOptions,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx2(
+    default24,
+    {
+      component: "div",
+      count,
+      page: pagination.pageIndex,
+      rowsPerPage: pagination.pageSize,
+      rowsPerPageOptions: pageSizeOptions,
+      onPageChange: (_, page) => {
+        onChange({
+          ...pagination,
+          pageIndex: page
+        });
+      },
+      onRowsPerPageChange: (event) => {
+        const pageSize = Number(event.target.value);
+        onChange({
+          pageIndex: 0,
+          pageSize
+        });
+      }
+    }
+  );
+}
+
+// src/components/compound/Table/src/form/FormActionDialog.tsx
+import React from "react";
+import { useFormState } from "react-hook-form";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var resolveConfig = (action, context) => {
+  const baseConfig = typeof action.form.config === "function" ? action.form.config(context) : action.form.config;
+  if (!action.form.getDefaultValues) {
+    return baseConfig;
+  }
+  return {
+    ...baseConfig,
+    defaultValues: {
+      ...baseConfig.defaultValues ?? {},
+      ...action.form.getDefaultValues(context)
+    }
+  };
+};
+function FormActionDialog({
+  open,
+  action,
+  context,
+  onClose
+}) {
+  if (!open || !action || !context) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(
+    FormActionDialogForm,
+    {
+      action,
+      context,
+      onClose
+    }
+  );
+}
+function FormActionDialogForm({
+  action,
+  context,
+  onClose
+}) {
+  const formConfig = resolveConfig(action, context);
+  const { methods, config: resolvedConfig } = useConfiguredForm({ config: formConfig });
+  const { dirtyFields } = useFormState({ control: methods.control });
+  const openProps = React.useMemo(() => [
+    true,
+    (nextOpen) => {
+      const resolvedOpen = typeof nextOpen === "function" ? nextOpen(true) : nextOpen;
+      if (!resolvedOpen) {
+        onClose();
+      }
+    }
+  ], [onClose]);
+  const extraButtonsElement = /* @__PURE__ */ jsx3(default2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: typeof action.form.extraButtons === "function" ? action.form.extraButtons(methods) : action.form.extraButtons });
+  return /* @__PURE__ */ jsx3(
+    FormModalRenderer,
+    {
+      openProps,
+      title: typeof action.form.title === "string" ? action.form.title : "Action Form",
+      methods,
+      config: resolvedConfig,
+      extraButtons: extraButtonsElement,
+      maxWidth: "960px",
+      slotProps: {
+        modal: {
+          size: { w: "100%", h: "auto" }
+        }
+      },
+      onSubmit: (values) => {
+        void action.form.onSubmit({
+          values,
+          dirtyFields,
+          context,
+          close: onClose
+        });
+      },
+      children: action.form.description ? /* @__PURE__ */ jsx3(default4, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: action.form.description }) : null
+    }
+  );
+}
+
+// src/components/compound/Table/src/form/ConfirmDialog.tsx
+import React2 from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  confirm,
+  onCancel,
+  onConfirm
+}) {
+  const [checked, setChecked] = React2.useState(false);
+  const [error, setError] = React2.useState(false);
+  const config = React2.useMemo(() => ({ schema: [] }), []);
+  const { methods } = useConfiguredForm({ config });
+  const openProps = React2.useMemo(() => [
+    open,
+    (nextOpen) => {
+      const resolvedOpen = typeof nextOpen === "function" ? nextOpen(open) : nextOpen;
+      if (!resolvedOpen) {
+        setChecked(false);
+        setError(false);
+        onCancel();
+      }
+    }
+  ], [open, onCancel]);
+  const title = confirm?.title ?? "Confirm action";
+  const description = confirm?.description ?? "Are you sure you want to continue?";
+  return /* @__PURE__ */ jsxs2(
+    FormModalRenderer,
+    {
+      openProps,
+      title,
+      methods,
+      config,
+      maxWidth: "420px",
+      showUndo: false,
+      showClear: false,
+      onSubmit: () => {
+        if (confirm?.requireCheckLabel && !checked) {
+          setError(true);
+          return;
+        }
+        onConfirm();
+      },
+      children: [
+        /* @__PURE__ */ jsx4(default4, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: description }),
+        confirm?.requireCheckLabel ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx4(
+            MuiFormControlLabel,
+            {
+              sx: { mt: 1 },
+              control: /* @__PURE__ */ jsx4(
+                default17,
+                {
+                  size: "small",
+                  checked,
+                  onChange: (event) => {
+                    const isChecked = event.target.checked;
+                    setChecked(isChecked);
+                    if (isChecked) {
+                      setError(false);
+                    }
+                  }
+                }
+              ),
+              label: confirm.requireCheckLabel
+            }
+          ),
+          error ? /* @__PURE__ */ jsx4(default4, { variant: "caption", color: "error", sx: { display: "block" }, children: "Please check the confirmation box to continue." }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/compound/Table/src/render/utils/columnSizing.ts
+var COLUMN_SIZE_VAR_PREFIX = "--table-col-size-";
+var sanitizeColumnId = (columnId) => columnId.replace(/[^a-zA-Z0-9_-]/g, "_");
+var getColumnSizeVarName = (columnId) => `${COLUMN_SIZE_VAR_PREFIX}${sanitizeColumnId(columnId)}`;
+
+// src/components/compound/Table/src/theme.ts
+import { styled } from "@mui/material";
+var TableStyledWrapper = styled(default2)({
+  "--table-bg": "var(--mui-palette-background-paper)",
+  "--table-divider-color": "var(--mui-palette-divider)",
+  "--table-pinned-shadow-left": `1px 0 0 var(--mui-palette-divider)`,
+  "--table-pinned-shadow-right": `-1px 0 0 var(--mui-palette-divider)`,
+  "--table-pinned-header-z-index": 4,
+  "--table-pinned-cell-z-index": 2,
+  "--table-header-font-weight": "var(--mui-typography-fontWeightBold)",
+  "--table-sort-label-active-color": "var(--mui-palette-text-primary)",
+  "--table-sort-label-icon-color": "var(--mui-palette-error-light)",
+  "--table-dragger-bar-hover-color": "var(--mui-palette-focus-1)",
+  "--table-drragger-bar-hover-width": "4px",
+  "--table-empty-min-height": "200px",
+  "--table-empty-icon-color": "var(--mui-palette-text-disabled)",
+  "--table-empty-text-color": "var(--mui-palette-text-secondary)",
+  "--table-empty-description-color": "var(--mui-palette-text-disabled)"
+});
+var tableTheme = {
+  styleOverrides: {
+    root: {
+      borderCollapse: "separate",
+      borderSpacing: 0,
+      tableLayout: "fixed",
+      backgroundColor: "var(--table-bg, var(--mui-palette-background-paper))"
+    }
+  }
+};
+var tableContainerTheme = {
+  styleOverrides: {
+    root: {
+      width: "100%",
+      overflowX: "auto",
+      containerType: "inline-size",
+      containerName: "sdui-table"
+    }
+  }
+};
+var tableHeadTheme = {
+  styleOverrides: {
+    root: {
+      backgroundColor: "var(--table-bg, var(--mui-palette-background-paper))"
+    }
+  }
+};
+var tableSortLabelTheme = {
+  styleOverrides: {
+    root: {
+      "&.Mui-active": {
+        color: "var(--table-sort-label-active-color)",
+        "& .MuiTableSortLabel-icon": {
+          color: "var(--table-sort-label-icon-color)"
+        }
+      },
+      "& .MuiTableSortLabel-icon": {
+        color: "var(--table-sort-label-icon-color)"
+      }
+    }
+  }
+};
+var tableCellTheme = {
+  defaultProps: {
+    size: "small"
+  },
+  styleOverrides: {
+    root: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      verticalAlign: "middle",
+      borderBottomColor: "var(--table-divider-color, var(--mui-palette-divider))",
+      backgroundColor: "transparent"
+    },
+    head: {
+      fontWeight: "var(--table-header-font-weight, 700)",
+      backgroundColor: "var(--table-bg, var(--mui-palette-background-paper))",
+      "& [data-table-filter-trigger]": {
+        transition: "opacity 120ms ease"
+      },
+      "@media (hover: hover) and (pointer: fine)": {
+        "& [data-table-filter-trigger]": {
+          opacity: 0
+        },
+        "&:hover [data-table-filter-trigger]": {
+          opacity: 1
+        },
+        "& [data-table-filter-trigger]:focus-visible": {
+          opacity: 1
+        },
+        '& [data-table-filter-trigger][data-active="true"]': {
+          opacity: 1
+        }
+      }
+    }
+  }
+};
+var tablePaginationTheme = {
+  styleOverrides: {
+    root: {
+      borderTop: "1px solid var(--table-divider-color, var(--mui-palette-divider))"
+    },
+    actions: ({ theme }) => ({
+      display: "flex",
+      gap: theme.spacing(1),
+      marginRight: theme.spacing(0.5)
+    })
+  }
+};
+var tableEmptyCellSx = {
+  p: 0,
+  width: "100%",
+  borderBottom: "none",
+  whiteSpace: "normal",
+  overflow: "visible",
+  textAlign: "center",
+  verticalAlign: "middle"
+};
+var TablePlaceholderRoot = styled(default2)({
+  position: "sticky",
+  left: 0,
+  boxSizing: "border-box",
+  width: "100cqi",
+  maxWidth: "100%",
+  minHeight: "var(--table-empty-min-height)",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  padding: "32px 24px",
+  textAlign: "center",
+  whiteSpace: "normal"
+});
+
+// src/components/compound/Table/src/utils/filters.ts
+var createExcelColumnFilterFn = () => (row, columnId, filterValue) => {
+  const raw = row.getValue(columnId);
+  const text = String(raw ?? "").toLowerCase();
+  if (!filterValue || typeof filterValue !== "object") {
+    return true;
+  }
+  const typed = filterValue;
+  const query = (typed.query ?? "").toLowerCase().trim();
+  const selectedValues = Array.isArray(typed.selectedValues) ? typed.selectedValues : [];
+  if (query && !text.includes(query)) {
+    return false;
+  }
+  if (selectedValues.length > 0) {
+    return selectedValues.map((value) => value.toLowerCase()).includes(text);
+  }
+  return true;
+};
+
+// src/components/compound/Table/src/hooks/useTableState.ts
+import React3 from "react";
+var DEFAULT_PAGINATION = {
+  pageIndex: 0,
+  pageSize: 10
+};
+var DEFAULT_COLUMN_PINNING = {
+  left: [],
+  right: []
+};
+var DEFAULT_COLUMN_FILTERS = [];
+var DEFAULT_COLUMN_SIZING = {};
+var DEFAULT_GROUPING = [];
+var DEFAULT_ROW_SELECTION = {};
+var DEFAULT_EXPANDED = {};
+var DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+var resolveUpdater = (updater, previous) => {
+  if (typeof updater === "function") {
+    return updater(previous);
+  }
+  return updater;
+};
+function useTableState(props) {
+  const {
+    sorting,
+    defaultSorting = [],
+    onSortingChange,
+    globalFilter,
+    defaultGlobalFilter = "",
+    onGlobalFilterChange,
+    columnFilters,
+    defaultColumnFilters = DEFAULT_COLUMN_FILTERS,
+    onColumnFiltersChange,
+    grouping,
+    defaultGrouping = DEFAULT_GROUPING,
+    onGroupingChange,
+    pagination,
+    defaultPagination = DEFAULT_PAGINATION,
+    onPaginationChange,
+    columnPinning,
+    defaultColumnPinning = DEFAULT_COLUMN_PINNING,
+    onColumnPinningChange,
+    columnSizing,
+    defaultColumnSizing = DEFAULT_COLUMN_SIZING,
+    onColumnSizingChange,
+    rowSelection,
+    defaultRowSelection = DEFAULT_ROW_SELECTION,
+    onRowSelectionChange,
+    expanded,
+    defaultExpanded = DEFAULT_EXPANDED,
+    onExpandedChange
+  } = props;
+  const [internalSorting, setInternalSorting] = React3.useState(defaultSorting);
+  const [internalGlobalFilter, setInternalGlobalFilter] = React3.useState(defaultGlobalFilter);
+  const [internalColumnFilters, setInternalColumnFilters] = React3.useState(defaultColumnFilters);
+  const [internalGrouping, setInternalGrouping] = React3.useState(defaultGrouping);
+  const [internalPagination, setInternalPagination] = React3.useState(defaultPagination);
+  const [internalColumnPinning, setInternalColumnPinning] = React3.useState(defaultColumnPinning);
+  const [internalColumnSizing, setInternalColumnSizing] = React3.useState(defaultColumnSizing);
+  const [internalRowSelection, setInternalRowSelection] = React3.useState(defaultRowSelection);
+  const [internalExpanded, setInternalExpanded] = React3.useState(defaultExpanded);
+  const resolvedSorting = sorting ?? internalSorting;
+  const resolvedGlobalFilter = globalFilter ?? internalGlobalFilter;
+  const resolvedColumnFilters = columnFilters ?? internalColumnFilters;
+  const resolvedGrouping = grouping ?? internalGrouping;
+  const resolvedPagination = pagination ?? internalPagination;
+  const resolvedColumnPinning = columnPinning ?? internalColumnPinning;
+  const resolvedColumnSizing = columnSizing ?? internalColumnSizing;
+  const resolvedRowSelection = rowSelection ?? internalRowSelection;
+  const resolvedExpanded = expanded ?? internalExpanded;
+  const deferredGlobalFilter = React3.useDeferredValue(resolvedGlobalFilter);
+  const handleSortingChange = React3.useCallback((updater) => {
+    if (sorting === void 0) {
+      setInternalSorting((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onSortingChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedSorting);
+    onSortingChange?.(next);
+  }, [onSortingChange, resolvedSorting, sorting]);
+  const handlePaginationChange = React3.useCallback((updater) => {
+    if (pagination === void 0) {
+      setInternalPagination((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onPaginationChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedPagination);
+    onPaginationChange?.(next);
+  }, [onPaginationChange, pagination, resolvedPagination]);
+  const handleGroupingChange = React3.useCallback((updater) => {
+    if (grouping === void 0) {
+      setInternalGrouping((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onGroupingChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedGrouping);
+    onGroupingChange?.(next);
+  }, [grouping, onGroupingChange, resolvedGrouping]);
+  const handleGlobalFilterChange = React3.useCallback((updater) => {
+    if (globalFilter === void 0) {
+      setInternalGlobalFilter((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onGlobalFilterChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedGlobalFilter);
+    onGlobalFilterChange?.(next);
+  }, [globalFilter, onGlobalFilterChange, resolvedGlobalFilter]);
+  const handleColumnFiltersChange = React3.useCallback((updater) => {
+    if (columnFilters === void 0) {
+      setInternalColumnFilters((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onColumnFiltersChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedColumnFilters);
+    onColumnFiltersChange?.(next);
+  }, [columnFilters, onColumnFiltersChange, resolvedColumnFilters]);
+  const handleColumnPinningChange = React3.useCallback((updater) => {
+    if (columnPinning === void 0) {
+      setInternalColumnPinning((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onColumnPinningChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedColumnPinning);
+    onColumnPinningChange?.(next);
+  }, [columnPinning, onColumnPinningChange, resolvedColumnPinning]);
+  const handleRowSelectionChange = React3.useCallback((updater) => {
+    if (rowSelection === void 0) {
+      setInternalRowSelection((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onRowSelectionChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedRowSelection);
+    onRowSelectionChange?.(next);
+  }, [onRowSelectionChange, resolvedRowSelection, rowSelection]);
+  const handleColumnSizingChange = React3.useCallback((updater) => {
+    if (columnSizing === void 0) {
+      setInternalColumnSizing((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onColumnSizingChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedColumnSizing);
+    onColumnSizingChange?.(next);
+  }, [columnSizing, onColumnSizingChange, resolvedColumnSizing]);
+  const handleExpandedChange = React3.useCallback((updater) => {
+    if (expanded === void 0) {
+      setInternalExpanded((previous) => {
+        const next2 = resolveUpdater(updater, previous);
+        onExpandedChange?.(next2);
+        return next2;
+      });
+      return;
+    }
+    const next = resolveUpdater(updater, resolvedExpanded);
+    onExpandedChange?.(next);
+  }, [expanded, onExpandedChange, resolvedExpanded]);
+  return {
+    state: {
+      sorting: resolvedSorting,
+      globalFilter: resolvedGlobalFilter,
+      columnFilters: resolvedColumnFilters,
+      grouping: resolvedGrouping,
+      rowSelection: resolvedRowSelection,
+      expanded: resolvedExpanded,
+      pagination: resolvedPagination,
+      columnPinning: resolvedColumnPinning,
+      columnSizing: resolvedColumnSizing
+    },
+    deferredGlobalFilter,
+    handlers: {
+      onSortingChange: handleSortingChange,
+      onGlobalFilterChange: handleGlobalFilterChange,
+      onColumnFiltersChange: handleColumnFiltersChange,
+      onGroupingChange: handleGroupingChange,
+      onRowSelectionChange: handleRowSelectionChange,
+      onExpandedChange: handleExpandedChange,
+      onPaginationChange: handlePaginationChange,
+      onColumnPinningChange: handleColumnPinningChange,
+      onColumnSizingChange: handleColumnSizingChange
+    }
+  };
+}
+
+// src/components/compound/Table/src/render/actions/ActionButtons.tsx
+import React4 from "react";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+var resolveBoolean = (value, context) => {
+  if (typeof value === "function") {
+    return value(context);
+  }
+  return Boolean(value);
+};
+function ActionButtons({
+  actions,
+  context,
+  onOpenFormAction,
+  onRequestConfirm
+}) {
+  const [loadingMap, setLoadingMap] = React4.useState({});
+  const runAction = React4.useCallback(async (action, key) => {
+    try {
+      setLoadingMap((previous) => ({ ...previous, [key]: true }));
+      await action.onClick(context);
+    } finally {
+      setLoadingMap((previous) => ({ ...previous, [key]: false }));
+    }
+  }, [context]);
+  const visibleActions = actions.filter((action) => !resolveBoolean(action.visibility, context));
+  if (visibleActions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(Fragment2, { children: /* @__PURE__ */ jsx5(default2, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: visibleActions.map((action) => {
+    const key = `${action.id}-${context.rowIndex ?? "table"}`;
+    const actionLoading = loadingMap[key] || resolveBoolean(action.loading, context);
+    const actionDisabled = actionLoading || resolveBoolean(action.disabled, context);
+    const handleClick = () => {
+      if (action.kind === "form") {
+        onOpenFormAction(action, context);
+        return;
+      }
+      if (action.confirm) {
+        onRequestConfirm?.({
+          action,
+          context,
+          key,
+          proceed: () => runAction(action, key)
+        });
+        return;
+      }
+      void runAction(action, key);
+    };
+    if (action.iconOnly && action.icon) {
+      const content = /* @__PURE__ */ jsx5(
+        IconButton_default,
+        {
+          color: action.intent ?? "primary",
+          size: "small",
+          disabled: actionDisabled,
+          onClick: handleClick,
+          children: actionLoading ? /* @__PURE__ */ jsx5(CircularProgress, { size: 14, color: "inherit" }) : action.icon
+        },
+        key
+      );
+      return action.label ? /* @__PURE__ */ jsx5(default5, { title: action.label, children: content }, key) : content;
+    }
+    return /* @__PURE__ */ jsx5(
+      Button,
+      {
+        variant: action.variant ?? "outlined",
+        color: action.intent ?? "primary",
+        size: "small",
+        disabled: actionDisabled,
+        startIcon: actionLoading ? /* @__PURE__ */ jsx5(CircularProgress, { size: 14, color: "inherit" }) : action.icon,
+        onClick: handleClick,
+        children: action.label
+      },
+      key
+    );
+  }) }) });
+}
+
+// src/components/compound/Table/src/render/controls/GlobalFilterControl.tsx
+import React5 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var GLOBAL_FILTER_DEBOUNCE_MS = 180;
+function GlobalFilterControlComponent({ value, onChange, placeholder }) {
+  const [draftValue, setDraftValue] = React5.useState(value);
+  React5.useEffect(() => {
+    setDraftValue(value);
+  }, [value]);
+  React5.useEffect(() => {
+    if (draftValue === value) {
+      return;
+    }
+    const timeout = window.setTimeout(() => {
+      onChange(draftValue);
+    }, GLOBAL_FILTER_DEBOUNCE_MS);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [draftValue, onChange, value]);
+  return /* @__PURE__ */ jsx6(
+    default18,
+    {
+      size: "small",
+      value: draftValue,
+      placeholder,
+      onChange: (event) => setDraftValue(event.target.value),
+      variant: "outlined",
+      slotProps: {
+        input: {
+          startAdornment: /* @__PURE__ */ jsx6(default15, { position: "start", children: /* @__PURE__ */ jsx6(default8, { fontSize: "small", color: "action" }) }),
+          endAdornment: draftValue ? /* @__PURE__ */ jsx6(default15, { position: "end", children: /* @__PURE__ */ jsx6(default5, { title: "Clear", children: /* @__PURE__ */ jsx6(
+            IconButton_default,
+            {
+              size: "small",
+              "aria-label": "Clear filter",
+              onClick: () => {
+                setDraftValue("");
+                onChange("");
+              },
+              sx: { borderColor: "transparent", padding: 0 },
+              children: /* @__PURE__ */ jsx6(default9, { fontSize: "small" })
+            }
+          ) }) }) : null
+        }
+      },
+      sx: {
+        width: 220,
+        maxWidth: "100%",
+        minWidth: { sm: 220 },
+        "& .MuiOutlinedInput-root": {
+          borderRadius: 1.5,
+          backgroundColor: "var(--table-bg)",
+          transition: (theme) => theme.transitions.create(["box-shadow", "border-color"]),
+          minHeight: 34,
+          "&:hover": {
+            boxShadow: "var(--shadow-outset-1)"
+          },
+          "&.Mui-focused": {
+            boxShadow: "var(--shadow-outset-1)"
+          }
+        },
+        "& .MuiOutlinedInput-input": {
+          py: 0.5,
+          fontSize: "0.85rem"
+        }
+      }
+    }
+  );
+}
+var GlobalFilterControl = React5.memo(GlobalFilterControlComponent);
+
+// src/components/compound/Table/src/render/TableToolbar.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function TableToolbar({
+  table,
+  tableActions,
+  enableFiltering,
+  globalFilter,
+  filterPlaceholder,
+  onGlobalFilterChange,
+  onOpenFormAction,
+  onRequestConfirm
+}) {
+  if (tableActions.length === 0 && !enableFiltering) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(default2, { sx: { p: 1.25, borderBottom: "1px solid var(--table-divider-color)" }, children: /* @__PURE__ */ jsxs3(
+    default3,
+    {
+      direction: { xs: "column", sm: "row" },
+      spacing: 1.25,
+      alignItems: { xs: "stretch", sm: "center" },
+      justifyContent: "space-between",
+      useFlexGap: true,
+      children: [
+        tableActions.length > 0 ? /* @__PURE__ */ jsx7(default2, { sx: { minWidth: 0, flex: 1 }, children: /* @__PURE__ */ jsx7(
+          ActionButtons,
+          {
+            actions: tableActions,
+            context: { table },
+            onOpenFormAction,
+            onRequestConfirm
+          }
+        ) }) : null,
+        enableFiltering ? /* @__PURE__ */ jsx7(default2, { sx: { width: { xs: "100%", sm: "auto" }, ml: { sm: "auto" } }, children: /* @__PURE__ */ jsx7(
+          GlobalFilterControl,
+          {
+            value: globalFilter,
+            placeholder: filterPlaceholder,
+            onChange: onGlobalFilterChange
+          }
+        ) }) : null
+      ]
+    }
+  ) });
+}
+
+// src/components/compound/Table/src/render/Header.tsx
+import { flexRender } from "@tanstack/react-table";
+
+// src/components/compound/Table/src/render/controls/ColumnFilterDropdown/ColumnFilterDropdown.tsx
+import React7 from "react";
+
+// src/components/compound/Table/src/render/controls/ColumnFilterDropdown/useColumnFilterDropdown.ts
+import React6 from "react";
+
+// src/components/compound/Table/src/render/controls/ColumnFilterDropdown/utils.ts
+var toFilterValue = (value) => {
+  if (!value || typeof value !== "object") {
+    return { query: "", selectedValues: [] };
+  }
+  const casted = value;
+  const rawSelectedValues = Array.isArray(casted.selectedValues) ? casted.selectedValues : [];
+  return {
+    query: casted.query ?? "",
+    selectedValues: rawSelectedValues.map((selectedValue) => String(selectedValue ?? "")).filter((selectedValue) => selectedValue.length > 0)
+  };
+};
+var getMenuValuesSnapshot = (valueMap) => {
+  return Array.from(valueMap.keys()).map((value) => String(value ?? "")).filter((value) => value.length > 0).sort((a, b) => a.localeCompare(b));
+};
+
+// src/components/compound/Table/src/render/controls/ColumnFilterDropdown/useColumnFilterDropdown.ts
+var QUERY_COMMIT_DEBOUNCE_MS = 180;
+var useColumnFilterDropdown = (column) => {
+  const openMenuProps = useMenu({});
+  const current = toFilterValue(column.getFilterValue());
+  const [queryDraft, setQueryDraft] = React6.useState(current.query ?? "");
+  const deferredQueryDraft = React6.useDeferredValue(queryDraft);
+  const [menuValuesSnapshot, setMenuValuesSnapshot] = React6.useState([]);
+  const [localSelectedValues, setLocalSelectedValues] = React6.useState(null);
+  const [, startTransition] = React6.useTransition();
+  const open = Boolean(openMenuProps.anchorEl);
+  React6.useEffect(() => {
+    if (!open) {
+      setLocalSelectedValues(null);
+      return;
+    }
+    const snapshot = getMenuValuesSnapshot(column.getFacetedUniqueValues()).map((value) => ({
+      value,
+      normalized: value.toLowerCase()
+    }));
+    const latest = toFilterValue(column.getFilterValue());
+    setMenuValuesSnapshot(snapshot);
+    setQueryDraft(latest.query ?? "");
+    setLocalSelectedValues(latest.selectedValues ?? []);
+  }, [column, open]);
+  const uniqueValues = React6.useMemo(() => {
+    if (!deferredQueryDraft) {
+      return menuValuesSnapshot.map((entry) => entry.value);
+    }
+    const lower = deferredQueryDraft.toLowerCase();
+    return menuValuesSnapshot.filter((entry) => entry.normalized.includes(lower)).map((entry) => entry.value);
+  }, [deferredQueryDraft, menuValuesSnapshot]);
+  const selectedValues = current.selectedValues ?? [];
+  const selectedValuesForUi = localSelectedValues ?? selectedValues;
+  const selectedValuesSet = React6.useMemo(() => new Set(selectedValuesForUi), [selectedValuesForUi]);
+  const setFilterValue = React6.useCallback((next) => {
+    column.setFilterValue((previous) => {
+      const resolvedPrevious = toFilterValue(previous);
+      const resolvedNext = typeof next === "function" ? next(resolvedPrevious) : next;
+      const normalizedNext = {
+        query: resolvedNext.query ?? "",
+        selectedValues: Array.isArray(resolvedNext.selectedValues) ? resolvedNext.selectedValues.map((selectedValue) => String(selectedValue ?? "")).filter((selectedValue) => selectedValue.length > 0) : []
+      };
+      if (!normalizedNext.query && (!normalizedNext.selectedValues || normalizedNext.selectedValues.length === 0)) {
+        return void 0;
+      }
+      return normalizedNext;
+    });
+  }, [column]);
+  const commitDraftFilters = React6.useCallback((overrides) => {
+    const nextQuery = overrides?.query ?? queryDraft;
+    const nextSelectedValues = overrides?.selectedValues ?? selectedValuesForUi;
+    startTransition(() => {
+      setFilterValue({
+        query: nextQuery,
+        selectedValues: nextSelectedValues
+      });
+    });
+  }, [queryDraft, selectedValuesForUi, setFilterValue]);
+  const openMenu = openMenuProps.onTriggerClickHandler;
+  const closeMenu = React6.useCallback(() => {
+    openMenuProps.closeHandler();
+  }, [openMenuProps]);
+  const applyQuery = React6.useCallback((nextQuery) => {
+    setQueryDraft(nextQuery);
+  }, []);
+  React6.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (queryDraft === current.query) {
+      return;
+    }
+    const timeout = window.setTimeout(() => {
+      commitDraftFilters({ query: queryDraft });
+    }, QUERY_COMMIT_DEBOUNCE_MS);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [commitDraftFilters, current.query, open, queryDraft]);
+  const commitSelectedValues = React6.useCallback((nextSelectedValues) => {
+    setLocalSelectedValues(nextSelectedValues);
+    commitDraftFilters({ selectedValues: nextSelectedValues });
+  }, [commitDraftFilters]);
+  const toggleValue = React6.useCallback((value) => {
+    const nextSet = new Set(selectedValuesForUi);
+    if (nextSet.has(value)) {
+      nextSet.delete(value);
+    } else {
+      nextSet.add(value);
+    }
+    commitSelectedValues(Array.from(nextSet));
+  }, [commitSelectedValues, selectedValuesForUi]);
+  const toggleAllValues = React6.useCallback(() => {
+    const currentSet = new Set(selectedValuesForUi);
+    const areAllVisibleSelected = uniqueValues.length > 0 && uniqueValues.every((value) => currentSet.has(value));
+    if (areAllVisibleSelected) {
+      commitSelectedValues(selectedValuesForUi.filter((value) => !uniqueValues.includes(value)));
+      return;
+    }
+    uniqueValues.forEach((value) => currentSet.add(value));
+    commitSelectedValues(Array.from(currentSet));
+  }, [commitSelectedValues, selectedValuesForUi, uniqueValues]);
+  const clearFilters = React6.useCallback(() => {
+    setQueryDraft("");
+    setLocalSelectedValues([]);
+    commitDraftFilters({ query: "", selectedValues: [] });
+    closeMenu();
+  }, [closeMenu, commitDraftFilters]);
+  const allChecked = uniqueValues.length > 0 && uniqueValues.every((value) => selectedValuesSet.has(value));
+  const someChecked = uniqueValues.some((value) => selectedValuesSet.has(value));
+  return {
+    open,
+    openMenuProps,
+    queryDraft,
+    uniqueValues,
+    selectedValuesSet,
+    allChecked,
+    someChecked,
+    openMenu,
+    closeMenu,
+    applyQuery,
+    clearFilters,
+    toggleValue,
+    toggleAllValues
+  };
+};
+
+// src/components/compound/Table/src/render/controls/ColumnFilterDropdown/ColumnFilterDropdown.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function ColumnFilterDropdown({
+  column,
+  placeholder
+}) {
+  const sortedState = column.getIsSorted();
+  const {
+    openMenuProps,
+    queryDraft,
+    uniqueValues,
+    selectedValuesSet,
+    allChecked,
+    someChecked,
+    openMenu,
+    closeMenu,
+    applyQuery,
+    clearFilters,
+    toggleValue,
+    toggleAllValues
+  } = useColumnFilterDropdown(column);
+  const selectedSortOptionIds = React7.useMemo(() => {
+    if (sortedState === "asc") {
+      return ["__sort_asc__"];
+    }
+    if (sortedState === "desc") {
+      return ["__sort_desc__"];
+    }
+    return [];
+  }, [sortedState]);
+  const optionHeader = React7.useMemo(
+    () => /* @__PURE__ */ jsxs4(default2, { children: [
+      /* @__PURE__ */ jsx8(default2, { sx: { px: 1.25, pb: 1, pt: 1 }, children: /* @__PURE__ */ jsx8(
+        default18,
+        {
+          size: "small",
+          fullWidth: true,
+          placeholder,
+          value: queryDraft,
+          onChange: (event) => applyQuery(event.target.value),
+          onKeyDown: (event) => {
+            event.stopPropagation();
+          },
+          slotProps: {
+            input: {
+              startAdornment: /* @__PURE__ */ jsx8(default8, { fontSize: "small", color: "action" })
+            }
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx8(default16, { sx: { my: 0.5 } })
+    ] }),
+    [applyQuery, placeholder, queryDraft]
+  );
+  const menuOptions = React7.useMemo(() => [
+    {
+      id: "__sort_asc__",
+      icon: /* @__PURE__ */ jsx8(default10, { fontSize: "small" }),
+      label: "Sort A to Z",
+      onClick: () => {
+        if (!column.getCanSort()) {
+          return;
+        }
+        column.toggleSorting(false);
+        closeMenu();
+      }
+    },
+    {
+      id: "__sort_desc__",
+      icon: /* @__PURE__ */ jsx8(default10, { fontSize: "small", sx: { transform: "scaleY(-1)" } }),
+      label: "Sort Z to A",
+      onClick: () => {
+        if (!column.getCanSort()) {
+          return;
+        }
+        column.toggleSorting(true);
+        closeMenu();
+      }
+    },
+    {
+      id: "__clear__",
+      icon: /* @__PURE__ */ jsx8(default14, { fontSize: "small" }),
+      label: "Clear Filter",
+      onClick: () => {
+        if (!column.getIsFiltered()) {
+          return;
+        }
+        clearFilters();
+      }
+    },
+    {
+      id: "__select_all__",
+      icon: /* @__PURE__ */ jsx8(
+        default17,
+        {
+          size: "small",
+          disableRipple: true,
+          sx: { p: 0, pointerEvents: "none" },
+          checked: allChecked,
+          indeterminate: !allChecked && someChecked
+        }
+      ),
+      label: "(Select All)",
+      onClick: toggleAllValues
+    },
+    ...uniqueValues.map((value) => {
+      const isSelected = selectedValuesSet.has(value);
+      return {
+        id: value,
+        icon: /* @__PURE__ */ jsx8(
+          default17,
+          {
+            size: "small",
+            disableRipple: true,
+            sx: { p: 0, pointerEvents: "none" },
+            checked: isSelected
+          }
+        ),
+        label: value,
+        onClick: () => toggleValue(value)
+      };
+    })
+  ], [
+    allChecked,
+    clearFilters,
+    closeMenu,
+    column,
+    selectedValuesSet,
+    someChecked,
+    toggleAllValues,
+    toggleValue,
+    uniqueValues
+  ]);
+  const isFiltered = column.getIsFiltered();
+  const isMenuOpen = Boolean(openMenuProps.anchorEl);
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(
+      IconButton_default,
+      {
+        size: "small",
+        onClick: openMenu,
+        color: isFiltered ? "error" : void 0,
+        "aria-label": `Filter ${column.id}`,
+        "data-table-filter-trigger": "",
+        "data-active": isFiltered || isMenuOpen ? "true" : void 0,
+        sx: { padding: 0 },
+        children: /* @__PURE__ */ jsx8(default11, { fontSize: "small" })
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      MenuPopper,
+      {
+        openMenuProps: {
+          ...openMenuProps,
+          sorted: false,
+          initSelected: selectedSortOptionIds
+        },
+        optionHeader,
+        options: menuOptions,
+        menuItemProps: {
+          padding: "6px 12px",
+          fontSize: "0.875rem"
+        },
+        placement: "bottom-end"
+      }
+    )
+  ] });
+}
+
+// src/components/compound/Table/src/render/Header.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var startNativeDrag = (event, table, column) => {
+  event.preventDefault();
+  event.stopPropagation();
+  const target = event.currentTarget;
+  const startX = "touches" in event ? event.touches[0].clientX : event.clientX;
+  const startWidth = column.getSize();
+  const minWidth = column.columnDef.minSize ?? 20;
+  const maxWidth = column.columnDef.maxSize;
+  const varName = getColumnSizeVarName(column.id);
+  const tableContainer = target.closest(".MuiTableContainer-root");
+  const tableEl = tableContainer?.querySelector("table");
+  const originalBodyCursor = document.body.style.cursor;
+  const originalBodyUserSelect = document.body.style.userSelect;
+  document.body.style.cursor = "col-resize";
+  document.body.style.userSelect = "none";
+  if (tableEl) {
+    tableEl.style.pointerEvents = "none";
+  }
+  if (tableContainer) {
+    tableContainer.style.overflowX = "hidden";
+  }
+  target.classList.add("is-resizing");
+  let animationFrameId = null;
+  let latestWidth = startWidth;
+  const onMove = (e) => {
+    e.preventDefault();
+    const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
+    const deltaX = currentX - startX;
+    let newWidth = startWidth + deltaX;
+    if (newWidth < minWidth) newWidth = minWidth;
+    if (maxWidth && newWidth > maxWidth) newWidth = maxWidth;
+    latestWidth = newWidth;
+    if (animationFrameId === null) {
+      animationFrameId = requestAnimationFrame(() => {
+        if (tableEl) {
+          tableEl.style.setProperty(varName, `${latestWidth}px`);
+        }
+        animationFrameId = null;
+      });
+    }
+  };
+  const onEnd = () => {
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onEnd);
+    document.removeEventListener("touchmove", onMove);
+    document.removeEventListener("touchend", onEnd);
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+    }
+    document.body.style.cursor = originalBodyCursor;
+    document.body.style.userSelect = originalBodyUserSelect;
+    if (tableEl) {
+      tableEl.style.pointerEvents = "";
+    }
+    target.classList.remove("is-resizing");
+    if (tableContainer) {
+      tableContainer.style.overflowX = "";
+    }
+    table.setColumnSizing((old) => ({
+      ...old,
+      [column.id]: latestWidth
+    }));
+  };
+  document.addEventListener("mousemove", onMove, { passive: false });
+  document.addEventListener("mouseup", onEnd);
+  document.addEventListener("touchmove", onMove, { passive: false });
+  document.addEventListener("touchend", onEnd);
+};
+function HeaderComponent({
+  table,
+  enableColumnFilters = false,
+  columnFilterPlaceholder = "Filter..."
+}) {
+  return /* @__PURE__ */ jsx9(default23, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx9(default25, { children: headerGroup.headers.map((header) => {
+    const canSort = header.column.getCanSort();
+    const sorted = header.column.getIsSorted();
+    const canFilter = enableColumnFilters && header.column.getCanFilter() && header.column.id !== COL_ID_ACTIONS;
+    const columnSizeVar = `var(${getColumnSizeVarName(header.column.id)})`;
+    const pinned = header.column.getIsPinned();
+    const pinnedStyles = pinned ? {
+      position: "sticky",
+      zIndex: "var(--table-pinned-header-z-index)",
+      backgroundColor: "var(--table-bg)",
+      backgroundImage: "none",
+      [pinned]: pinned === "left" ? `${header.column.getStart("left")}px` : `${header.column.getAfter("right")}px`,
+      boxShadow: pinned === "left" ? "var(--table-pinned-shadow-left)" : "var(--table-pinned-shadow-right)"
+    } : void 0;
+    return /* @__PURE__ */ jsxs5(
+      default21,
+      {
+        sortDirection: sorted === false ? void 0 : sorted,
+        sx: {
+          width: columnSizeVar,
+          ...pinnedStyles
+        },
+        children: [
+          header.isPlaceholder ? null : /* @__PURE__ */ jsxs5(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 0.5, minHeight: 30 }, children: [
+            /* @__PURE__ */ jsx9(default2, { sx: { minWidth: 0, pr: canFilter ? 0.5 : 0 }, children: canSort ? /* @__PURE__ */ jsx9(
+              default26,
+              {
+                active: sorted !== false,
+                direction: sorted === false ? "asc" : sorted,
+                onClick: header.column.getToggleSortingHandler(),
+                children: flexRender(header.column.columnDef.header, header.getContext())
+              }
+            ) : flexRender(header.column.columnDef.header, header.getContext()) }),
+            canFilter ? /* @__PURE__ */ jsx9(
+              ColumnFilterDropdown,
+              {
+                column: header.column,
+                placeholder: columnFilterPlaceholder
+              }
+            ) : null
+          ] }),
+          header.column.getCanResize() ? /* @__PURE__ */ jsx9(
+            default2,
+            {
+              component: "button",
+              type: "button",
+              "aria-label": `Resize ${header.column.id} column`,
+              onDoubleClick: () => {
+                header.column.resetSize();
+              },
+              onMouseDown: (event) => startNativeDrag(event, table, header.column),
+              onTouchStart: (event) => startNativeDrag(event, table, header.column),
+              onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              },
+              sx: {
+                position: "absolute",
+                top: 0,
+                right: -6,
+                height: "100%",
+                width: 12,
+                minWidth: 12,
+                border: 0,
+                p: 0,
+                m: 0,
+                backgroundColor: "transparent",
+                cursor: "col-resize",
+                touchAction: "none",
+                userSelect: "none",
+                "&::before": {
+                  content: '""',
+                  position: "absolute",
+                  top: 6,
+                  bottom: 6,
+                  left: "50%",
+                  width: 2,
+                  transform: "translateX(-50%)",
+                  borderRadius: "999px",
+                  backgroundColor: "var(--table-divider-color)",
+                  transition: "background-color 120ms ease, width 120ms ease"
+                },
+                "&:hover::before": {
+                  backgroundColor: "var(--table-dragger-bar-hover-color)",
+                  width: "var(--table-drragger-bar-hover-width)"
+                },
+                "&.is-resizing::before": {
+                  backgroundColor: "var(--table-dragger-bar-hover-color)",
+                  width: "var(--table-drragger-bar-hover-width)"
+                }
+              }
+            }
+          ) : null
+        ]
+      },
+      header.id
+    );
+  }) }, headerGroup.id)) });
+}
+var Header = HeaderComponent;
+
+// src/components/compound/Table/src/render/Body.tsx
+import React8 from "react";
+import { flexRender as flexRender2 } from "@tanstack/react-table";
+
+// src/components/compound/Table/src/render/EmptyState.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function TableEmptyState({
+  message,
+  description,
+  filtered = false
+}) {
+  const Icon = filtered ? default13 : default12;
+  const resolvedDescription = description ?? (filtered ? "Try adjusting search or column filters." : null);
+  return /* @__PURE__ */ jsxs6(TablePlaceholderRoot, { role: "status", children: [
+    /* @__PURE__ */ jsx10(
+      Icon,
+      {
+        "aria-hidden": true,
+        sx: {
+          fontSize: 40,
+          color: "var(--table-empty-icon-color)"
+        }
+      }
+    ),
+    typeof message === "string" ? /* @__PURE__ */ jsx10(
+      default4,
+      {
+        variant: "body2",
+        sx: { color: "var(--table-empty-text-color)", m: 0 },
+        children: message
+      }
+    ) : message,
+    resolvedDescription ? /* @__PURE__ */ jsx10(
+      default4,
+      {
+        variant: "caption",
+        sx: { color: "var(--table-empty-description-color)", m: 0 },
+        children: resolvedDescription
+      }
+    ) : null
+  ] });
+}
+
+// src/components/compound/Table/src/render/Body.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function BodyComponent({
+  table,
+  loading,
+  emptyMessage,
+  emptyDescription,
+  rowActions,
+  renderExpandedRow,
+  onOpenFormAction,
+  onRequestConfirm
+}) {
+  const rowModel = table.getRowModel();
+  const totalColumns = table.getVisibleLeafColumns().length;
+  if (loading) {
+    return /* @__PURE__ */ jsx11(default20, { children: /* @__PURE__ */ jsx11(default25, { children: /* @__PURE__ */ jsx11(default21, { colSpan: Math.max(totalColumns, 1), sx: tableEmptyCellSx, children: /* @__PURE__ */ jsx11(TablePlaceholderRoot, { role: "status", children: /* @__PURE__ */ jsx11(CircularProgress, { size: 24 }) }) }) }) });
+  }
+  if (rowModel.rows.length === 0) {
+    const filtered = table.getPreFilteredRowModel().rows.length > 0;
+    return /* @__PURE__ */ jsx11(default20, { children: /* @__PURE__ */ jsx11(default25, { children: /* @__PURE__ */ jsx11(default21, { colSpan: Math.max(totalColumns, 1), sx: tableEmptyCellSx, children: /* @__PURE__ */ jsx11(
+      TableEmptyState,
+      {
+        message: emptyMessage,
+        description: emptyDescription,
+        filtered
+      }
+    ) }) }) });
+  }
+  return /* @__PURE__ */ jsx11(default20, { children: rowModel.rows.map((row) => {
+    const isExpanded = row.getIsExpanded();
+    return /* @__PURE__ */ jsxs7(React8.Fragment, { children: [
+      /* @__PURE__ */ jsx11(default25, { hover: true, children: row.getVisibleCells().map((cell) => {
+        const columnSizeVar = `var(${getColumnSizeVarName(cell.column.id)})`;
+        const pinned = cell.column.getIsPinned();
+        const pinnedStyles = pinned ? {
+          position: "sticky",
+          zIndex: "var(--table-pinned-cell-z-index)",
+          backgroundColor: "var(--table-bg)",
+          backgroundImage: "none",
+          [pinned]: pinned === "left" ? `${cell.column.getStart("left")}px` : `${cell.column.getAfter("right")}px`,
+          boxShadow: pinned === "left" ? "var(--table-pinned-shadow-left)" : "var(--table-pinned-shadow-right)"
+        } : void 0;
+        return /* @__PURE__ */ jsx11(
+          default21,
+          {
+            sx: {
+              width: columnSizeVar,
+              ...pinnedStyles,
+              ...isExpanded && renderExpandedRow ? { borderBottom: "none" } : {}
+            },
+            children: cell.column.id === COL_ID_ACTIONS ? row.subRows && row.subRows.length > 0 ? null : /* @__PURE__ */ jsx11(
+              ActionButtons,
+              {
+                actions: rowActions,
+                context: {
+                  row: row.original,
+                  rowIndex: row.index,
+                  table
+                },
+                onOpenFormAction,
+                onRequestConfirm
+              }
+            ) : cell.column.id === COL_ID_CONTROLS ? flexRender2(cell.column.columnDef.cell, cell.getContext()) : cell.getIsGrouped() ? /* @__PURE__ */ jsxs7(default2, { component: "span", sx: { fontWeight: "bold" }, children: [
+              flexRender2(cell.column.columnDef.cell, cell.getContext()),
+              " (",
+              row.subRows && row.subRows.length || 0,
+              ")"
+            ] }) : cell.getIsAggregated() ? flexRender2(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext()) : cell.getIsPlaceholder() ? null : flexRender2(cell.column.columnDef.cell, cell.getContext())
+          },
+          cell.id
+        );
+      }) }),
+      isExpanded && renderExpandedRow && !row.getIsGrouped() && /* @__PURE__ */ jsx11(default25, { children: /* @__PURE__ */ jsx11(
+        default21,
+        {
+          colSpan: Math.max(totalColumns, 1),
+          sx: {
+            p: 0,
+            width: "100%",
+            backgroundColor: "var(--mui-palette-action-hover)"
+          },
+          children: renderExpandedRow(row.original, row.index, table)
+        }
+      ) })
+    ] }, row.id);
+  }) });
+}
+var Body = BodyComponent;
+
+// src/components/compound/Table/src/render/TableContent.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function TableContent({
+  table,
+  bodyMaxHeight,
+  dense,
+  stickyHeader,
+  columnSizeVars,
+  enableColumnFilters,
+  columnFilterPlaceholder,
+  loading,
+  emptyMessage,
+  emptyDescription,
+  rowActions,
+  renderExpandedRow,
+  onOpenFormAction,
+  onRequestConfirm
+}) {
+  return /* @__PURE__ */ jsx12(
+    default22,
+    {
+      sx: {
+        containerType: "inline-size",
+        ...bodyMaxHeight ? { maxHeight: bodyMaxHeight, overflowY: "auto" } : {},
+        overflowX: "auto"
+      },
+      children: /* @__PURE__ */ jsxs8(
+        default19,
+        {
+          size: dense ? "small" : "medium",
+          stickyHeader,
+          style: columnSizeVars,
+          children: [
+            /* @__PURE__ */ jsx12(
+              Header,
+              {
+                table,
+                enableColumnFilters,
+                columnFilterPlaceholder
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              Body,
+              {
+                table,
+                loading,
+                emptyMessage,
+                emptyDescription,
+                rowActions,
+                renderExpandedRow,
+                onOpenFormAction,
+                onRequestConfirm
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/compound/Table/src/Table.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function TableInner(props) {
+  const {
+    columns,
+    data,
+    loading = false,
+    emptyMessage = "No data found.",
+    emptyDescription,
+    dense = false,
+    getRowId,
+    rowActions = [],
+    tableActions = [],
+    actionColumnHeader = "Actions",
+    enableFiltering = false,
+    filterPlaceholder = "Filter rows...",
+    enableColumnFilters = false,
+    columnFilterPlaceholder = "Filter...",
+    enableGrouping = false,
+    enableColumnPinning = false,
+    enableColumnResizing = true,
+    columnResizeMode = "onChange",
+    enableRowSelection = false,
+    enablePagination = true,
+    enableExpanding = false,
+    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+    stickyHeader = true,
+    bodyMaxHeight,
+    renderExpandedRow,
+    getRowCanExpand
+  } = props;
+  const tableState = useTableState(props);
+  const { state, deferredGlobalFilter, handlers } = tableState;
+  const [activeFormAction, setActiveFormAction] = React9.useState(null);
+  const [confirmRequest, setConfirmRequest] = React9.useState(null);
+  const handleRequestConfirm = React9.useCallback((req) => {
+    setConfirmRequest(req);
+  }, []);
+  const handleCloseConfirm = React9.useCallback(() => {
+    setConfirmRequest(null);
+  }, []);
+  const handleConfirm = React9.useCallback(() => {
+    if (!confirmRequest) return;
+    const { proceed } = confirmRequest;
+    handleCloseConfirm();
+    return proceed();
+  }, [confirmRequest, handleCloseConfirm]);
+  const columnHelper = React9.useMemo(() => createColumnHelper(), []);
+  const excelColumnFilterFn = React9.useMemo(() => createExcelColumnFilterFn(), []);
+  const filteredRowModel = React9.useMemo(() => getFilteredRowModel(), []);
+  const facetedRowModel = React9.useMemo(() => getFacetedRowModel(), []);
+  const facetedUniqueValues = React9.useMemo(() => getFacetedUniqueValues(), []);
+  const groupedRowModel = React9.useMemo(() => getGroupedRowModel(), []);
+  const expandedRowModel = React9.useMemo(() => getExpandedRowModel(), []);
+  const paginatedRowModel = React9.useMemo(() => getPaginationRowModel(), []);
+  const shouldEnableExpanding = enableExpanding || enableGrouping;
+  const tableColumns = React9.useMemo(() => {
+    const isExpandable = shouldEnableExpanding || !!renderExpandedRow;
+    const hasControls = enableRowSelection || isExpandable;
+    const controlsWidth = enableRowSelection && isExpandable ? 80 : enableRowSelection ? 48 : isExpandable ? 44 : 0;
+    const controlsColumn = hasControls ? [
+      columnHelper.display({
+        id: COL_ID_CONTROLS,
+        header: ({ table: table2 }) => /* @__PURE__ */ jsxs9(default2, { sx: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", gap: 1 }, children: [
+          isExpandable && enableRowSelection ? /* @__PURE__ */ jsx13(default2, { sx: { width: 28 } }) : null,
+          enableRowSelection ? /* @__PURE__ */ jsx13(
+            default17,
+            {
+              size: "small",
+              checked: enablePagination ? table2.getIsAllPageRowsSelected() : table2.getIsAllRowsSelected(),
+              indeterminate: enablePagination ? table2.getIsSomePageRowsSelected() : table2.getIsSomeRowsSelected(),
+              onChange: enablePagination ? table2.getToggleAllPageRowsSelectedHandler() : table2.getToggleAllRowsSelectedHandler(),
+              sx: { p: 0.5 }
+            }
+          ) : null
+        ] }),
+        cell: ({ row, table: table2 }) => /* @__PURE__ */ jsx13(
+          RowControlsCell,
+          {
+            row,
+            table: table2,
+            isExpandable,
+            enableRowSelection,
+            renderExpandedRow
+          }
+        ),
+        enableSorting: false,
+        enableColumnFilter: false,
+        enableGrouping: false,
+        size: controlsWidth,
+        minSize: controlsWidth,
+        maxSize: controlsWidth
+      })
+    ] : [];
+    const actionColumn = rowActions.length > 0 ? [
+      columnHelper.display({
+        id: COL_ID_ACTIONS,
+        header: () => actionColumnHeader,
+        enableSorting: false,
+        cell: () => null
+      })
+    ] : [];
+    return [
+      ...controlsColumn,
+      ...columns,
+      ...actionColumn
+    ];
+  }, [actionColumnHeader, columnHelper, columns, enablePagination, enableRowSelection, shouldEnableExpanding, renderExpandedRow, rowActions.length]);
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    getRowId,
+    defaultColumn: {
+      filterFn: excelColumnFilterFn
+    },
+    state: {
+      sorting: state.sorting,
+      globalFilter: enableFiltering ? deferredGlobalFilter : "",
+      columnFilters: enableColumnFilters ? state.columnFilters : DEFAULT_COLUMN_FILTERS,
+      grouping: enableGrouping ? state.grouping : DEFAULT_GROUPING,
+      rowSelection: enableRowSelection ? state.rowSelection : DEFAULT_ROW_SELECTION,
+      expanded: shouldEnableExpanding ? state.expanded : {},
+      pagination: enablePagination ? state.pagination : DEFAULT_PAGINATION,
+      columnPinning: enableColumnPinning ? state.columnPinning : DEFAULT_COLUMN_PINNING,
+      columnSizing: enableColumnResizing ? state.columnSizing : DEFAULT_COLUMN_SIZING
+    },
+    onSortingChange: handlers.onSortingChange,
+    onGlobalFilterChange: handlers.onGlobalFilterChange,
+    onColumnFiltersChange: handlers.onColumnFiltersChange,
+    onGroupingChange: handlers.onGroupingChange,
+    onRowSelectionChange: handlers.onRowSelectionChange,
+    onExpandedChange: handlers.onExpandedChange,
+    onPaginationChange: handlers.onPaginationChange,
+    onColumnPinningChange: handlers.onColumnPinningChange,
+    onColumnSizingChange: handlers.onColumnSizingChange,
+    enableGrouping,
+    enableColumnFilters,
+    enableColumnPinning,
+    enableColumnResizing,
+    autoResetExpanded: false,
+    columnResizeMode,
+    enableRowSelection,
+    enableExpanding: shouldEnableExpanding,
+    getRowCanExpand: getRowCanExpand ?? (() => true),
+    getCoreRowModel: getCoreRowModel(),
+    ...enableFiltering || enableColumnFilters ? { getFilteredRowModel: filteredRowModel } : {},
+    ...enableColumnFilters ? {
+      getFacetedRowModel: facetedRowModel,
+      getFacetedUniqueValues: facetedUniqueValues
+    } : {},
+    ...enableGrouping ? { getGroupedRowModel: groupedRowModel } : {},
+    ...shouldEnableExpanding ? { getExpandedRowModel: expandedRowModel } : {},
+    getSortedRowModel: getSortedRowModel(),
+    ...enablePagination ? { getPaginationRowModel: paginatedRowModel } : {}
+  });
+  const columnSizeVars = React9.useMemo(() => {
+    const vars = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      vars[getColumnSizeVarName(column.id)] = `${column.getSize()}px`;
+    });
+    return vars;
+  }, [state.columnSizing, table]);
+  const openFormAction = React9.useCallback((action, context) => {
+    setActiveFormAction({ action, context });
+  }, []);
+  const onRequestConfirm = React9.useCallback((req) => {
+    handleRequestConfirm(req);
+  }, [handleRequestConfirm]);
+  return /* @__PURE__ */ jsx13(TableStyledWrapper, { children: /* @__PURE__ */ jsxs9(MuiPaper, { variant: "outlined", sx: { width: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx13(
+      TableToolbar,
+      {
+        table,
+        tableActions,
+        enableFiltering,
+        globalFilter: state.globalFilter,
+        filterPlaceholder,
+        onGlobalFilterChange: handlers.onGlobalFilterChange,
+        onOpenFormAction: openFormAction,
+        onRequestConfirm
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      TableContent,
+      {
+        table,
+        bodyMaxHeight,
+        dense,
+        stickyHeader,
+        columnSizeVars,
+        enableColumnFilters,
+        columnFilterPlaceholder,
+        loading,
+        emptyMessage,
+        emptyDescription,
+        rowActions,
+        renderExpandedRow,
+        onOpenFormAction: openFormAction,
+        onRequestConfirm
+      }
+    ),
+    enablePagination ? /* @__PURE__ */ jsx13(
+      PaginationControl,
+      {
+        count: data.length,
+        pagination: state.pagination,
+        pageSizeOptions,
+        onChange: handlers.onPaginationChange
+      }
+    ) : null,
+    /* @__PURE__ */ jsx13(
+      ConfirmDialog,
+      {
+        open: Boolean(confirmRequest),
+        confirm: confirmRequest?.action.confirm,
+        onCancel: handleCloseConfirm,
+        onConfirm: handleConfirm
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      FormActionDialog,
+      {
+        open: Boolean(activeFormAction),
+        action: activeFormAction?.action ?? null,
+        context: activeFormAction?.context ?? null,
+        onClose: () => setActiveFormAction(null)
+      }
+    )
+  ] }) });
+}
+var Table = React9.memo(TableInner);
+
+// src/components/compound/Table/src/render/cell/PercentageBar.tsx
+import { useTheme } from "@mui/material";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function PercentageBar({
+  context,
+  baseType = "total-sum",
+  getColor
+}) {
+  const value = Number(context.getValue() || 0);
+  const theme = useTheme();
+  let max = 0;
+  if (typeof baseType === "number") {
+    max = baseType;
+  } else if (baseType === "total-sum") {
+    max = context.table.getCoreRowModel().rows.reduce((sum, row) => sum + Number(row.getValue(context.column.id) || 0), 0);
+  } else if (baseType === "max-value") {
+    max = Math.max(...context.table.getCoreRowModel().rows.map((row) => Number(row.getValue(context.column.id) || 0)));
+  } else if (baseType === "group-sum") {
+    const parentRow = context.row.getParentRow();
+    if (parentRow) {
+      max = Number(parentRow.getValue(context.column.id) || 0);
+    } else if (context.row.getIsGrouped()) {
+      max = Number(context.row.getValue(context.column.id) || 0);
+    } else {
+      max = context.table.getCoreRowModel().rows.reduce((sum, row) => sum + Number(row.getValue(context.column.id) || 0), 0);
+    }
+  }
+  const percentage = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  const defaultGetColor = (p) => {
+    if (p < 25) return theme.palette.success.main;
+    if (p < 50) return theme.palette.warning.main;
+    return theme.palette.error.main;
+  };
+  const finalColor = getColor ? getColor(percentage) : defaultGetColor(percentage);
+  const tooltipTitle = `${value} / ${max} (${percentage.toFixed(1)}%)`;
+  return /* @__PURE__ */ jsx14(default5, { title: tooltipTitle, arrow: true, children: /* @__PURE__ */ jsxs10(default2, { sx: { display: "flex", alignItems: "center", gap: 1, width: "100%", minWidth: 100 }, children: [
+    /* @__PURE__ */ jsx14(default2, { sx: { flexGrow: 1, height: 8, bgcolor: "action.hover", borderRadius: 4, overflow: "hidden" }, children: /* @__PURE__ */ jsx14(
+      default2,
+      {
+        sx: {
+          height: "100%",
+          width: `${percentage}%`,
+          bgcolor: finalColor,
+          transition: "width 0.3s ease, background-color 0.3s ease"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx14(default4, { variant: "caption", sx: { minWidth: 32, textAlign: "right", fontWeight: "medium" }, children: value })
+  ] }) });
+}
+function renderPercentageBar(options) {
+  return function PercentageBarRenderer(context) {
+    return /* @__PURE__ */ jsx14(PercentageBar, { context, ...options });
+  };
+}
+
+export {
+  COL_ID_CONTROLS,
+  COL_ID_ACTIONS,
+  TableStyledWrapper,
+  tableTheme,
+  tableContainerTheme,
+  tableHeadTheme,
+  tableSortLabelTheme,
+  tableCellTheme,
+  tablePaginationTheme,
+  tableEmptyCellSx,
+  TablePlaceholderRoot,
+  Table,
+  PercentageBar,
+  renderPercentageBar
+};
+//# sourceMappingURL=chunk-DELCADNF.mjs.map