@ceed/cds 1.9.0 → 1.11.0-next.1

package/dist/index.js

@@ -152,7 +152,7 @@ import {
   stepperClasses,
   Skeleton as Skeleton2,
   skeletonClasses,
-  styled as styled29
+  styled as styled30
 } from "@mui/joy";
 
 // src/components/Accordions/Accordions.tsx
@@ -1846,117 +1846,301 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
 var CurrencyInput_default = CurrencyInput;
 
 // src/components/DataTable/DataTable.tsx
-import React23, {
-  useCallback as useCallback9,
-  useEffect as useEffect5,
-  useMemo as useMemo8,
-  useRef as useRef4,
-  useState as useState6,
+import React25, {
+  useCallback as useCallback11,
+  useMemo as useMemo10,
+  useRef as useRef6,
   useId,
   forwardRef as forwardRef7,
   useImperativeHandle as useImperativeHandle2,
-  createElement,
-  memo,
-  useLayoutEffect,
   Fragment as Fragment2
 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { styled as styled12, LinearProgress, Link, useTheme, buttonClasses, iconButtonClasses } from "@mui/joy";
-import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
 
-// src/components/Sheet/Sheet.tsx
-import { Sheet as JoySheet } from "@mui/joy";
-import { motion as motion16 } from "framer-motion";
-var MotionSheet = motion16(JoySheet);
-var Sheet = MotionSheet;
-Sheet.displayName = "Sheet";
-
-// src/components/Sheet/index.ts
-var Sheet_default = Sheet;
-
-// src/components/Table/Table.tsx
-import React16 from "react";
-import { Table as JoyTable } from "@mui/joy";
-var Table = (props) => {
-  const { children, ...inheritProps } = props;
-  return /* @__PURE__ */ React16.createElement(JoyTable, { ...inheritProps }, children);
-};
-Table.displayName = "Table";
-function TableHead(props) {
-  const {
-    headCells,
-    showCheckbox,
-    onCheckboxChange,
-    slots: { checkbox: RenderCheckbox = Checkbox_default } = {},
-    slotProps: { checkbox: checkboxProps = {} } = {}
-  } = props;
-  return /* @__PURE__ */ React16.createElement("thead", null, /* @__PURE__ */ React16.createElement("tr", null, showCheckbox && /* @__PURE__ */ React16.createElement(
-    "th",
-    {
-      style: {
-        width: "40px",
-        textAlign: "center"
-      }
-    },
-    /* @__PURE__ */ React16.createElement(RenderCheckbox, { onChange: onCheckboxChange, ...checkboxProps })
-  ), headCells.map((headCell) => /* @__PURE__ */ React16.createElement(
-    "th",
-    {
-      key: headCell.label,
-      style: {
-        width: headCell.width,
-        minWidth: headCell.minWidth,
-        maxWidth: headCell.maxWidth,
-        textAlign: headCell.numeric ? "right" : "left"
-      }
-    },
-    headCell.label
-  ))));
+// src/components/DataTable/utils.ts
+function extractFieldsFromGroupingModel(items) {
+  const fields = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if ("groupId" in item) {
+      const children = Array.isArray(item.children) ? item.children : [item.children];
+      const childFields = extractFieldsFromGroupingModel(children);
+      childFields.forEach((field) => fields.add(field));
+    } else {
+      fields.add(item.field);
+    }
+  }
+  return fields;
 }
-TableHead.displayName = "TableHead";
-function TableBody(props) {
-  const {
-    rows,
-    cellOrder,
-    rowOptions,
-    showCheckbox,
-    onCheckboxChange,
-    slots: { checkbox: RenderCheckbox = Checkbox_default } = {},
-    slotProps: { checkbox: checkboxProps = {} } = {}
-  } = props;
-  return /* @__PURE__ */ React16.createElement("tbody", null, rows.map((row, rowIndex) => /* @__PURE__ */ React16.createElement("tr", { key: `table-row-${rowIndex}` }, showCheckbox && /* @__PURE__ */ React16.createElement(
-    "td",
-    {
-      style: {
-        textAlign: "center"
+function reorderColumnsByGroupingModel(columns, columnGroupingModel) {
+  const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
+  const orderedFields = [];
+  function collectFieldsInOrder(items) {
+    for (const item of items) {
+      if ("groupId" in item) {
+        const children = Array.isArray(item.children) ? item.children : [item.children];
+        collectFieldsInOrder(children);
+      } else {
+        if (!orderedFields.includes(item.field)) {
+          orderedFields.push(item.field);
+        }
       }
-    },
-    /* @__PURE__ */ React16.createElement(RenderCheckbox, { onChange: (event) => onCheckboxChange?.(event, rowIndex), ...checkboxProps })
-  ), cellOrder.map((cellKey) => /* @__PURE__ */ React16.createElement(
-    "td",
-    {
-      key: cellKey,
-      style: {
-        textAlign: rowOptions?.[cellKey]?.numeric ? "right" : "left"
+    }
+  }
+  collectFieldsInOrder(columnGroupingModel);
+  const columnMap = new Map(columns.map((col) => [col.field, col]));
+  const reorderedColumns = [];
+  for (const field of orderedFields) {
+    const column = columnMap.get(field);
+    if (column) {
+      reorderedColumns.push(column);
+    }
+  }
+  for (const column of columns) {
+    if (!fieldsInGroupingModel.has(column.field)) {
+      reorderedColumns.push(column);
+    }
+  }
+  return reorderedColumns;
+}
+function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }) {
+  const result = [];
+  for (const item of items) {
+    if ("groupId" in item) {
+      const newPath = [...groupPath, item.groupId];
+      const children = Array.isArray(item.children) ? item.children : [item.children];
+      result.push(...flattenColumnGroups(children, newPath, columnIndex));
+    } else {
+      result.push({
+        ...item,
+        groupPath,
+        columnIndex: columnIndex.current++
+      });
+    }
+  }
+  return result;
+}
+function calculateColumnGroups(columnGroupingModel, columns) {
+  const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
+  const flattenedColumns = flattenColumnGroups(columnGroupingModel);
+  const columnIndexMap = new Map(flattenedColumns.map((col) => [col.field, col.columnIndex]));
+  const processedGroups = /* @__PURE__ */ new Map();
+  const groupsByLevel = [];
+  let maxLevel = 0;
+  function processGroup(items, level, parentGroupId) {
+    let minIndex = Infinity;
+    let maxIndex = -Infinity;
+    for (const item of items) {
+      if ("groupId" in item) {
+        const groupKey = parentGroupId ? `${parentGroupId}.${item.groupId}` : item.groupId;
+        if (!processedGroups.has(groupKey)) {
+          const children = Array.isArray(item.children) ? item.children : [item.children];
+          const { startIndex, colspan } = processGroup(children, level + 1, groupKey);
+          const group = {
+            groupId: item.groupId,
+            headerName: item.headerName,
+            headerClassName: item.headerClassName,
+            colspan,
+            level,
+            startIndex
+          };
+          processedGroups.set(groupKey, group);
+          if (!groupsByLevel[level]) {
+            groupsByLevel[level] = [];
+          }
+          groupsByLevel[level].push(group);
+          maxLevel = Math.max(maxLevel, level);
+          minIndex = Math.min(minIndex, startIndex);
+          maxIndex = Math.max(maxIndex, startIndex + colspan - 1);
+        }
+      } else {
+        const columnIndex = columnIndexMap.get(item.field);
+        if (columnIndex !== void 0) {
+          minIndex = Math.min(minIndex, columnIndex);
+          maxIndex = Math.max(maxIndex, columnIndex);
+        }
       }
-    },
-    row[cellKey]
-  )))));
+    }
+    return {
+      startIndex: minIndex === Infinity ? 0 : minIndex,
+      colspan: maxIndex === -Infinity ? 0 : maxIndex - minIndex + 1
+    };
+  }
+  processGroup(columnGroupingModel, 0);
+  groupsByLevel.forEach((level) => {
+    level.sort((a, b) => a.startIndex - b.startIndex);
+  });
+  return { groups: groupsByLevel, maxLevel, fieldsInGroupingModel };
 }
-TableBody.displayName = "TableBody";
+function getTextAlign(props) {
+  return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
+}
+var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
+
+// src/components/DataTable/styled.tsx
+import React16 from "react";
+import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses } from "@mui/joy";
+import { motion as motion16 } from "framer-motion";
+import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
+var EllipsisDiv = styled8("div", {
+  name: "DataTable",
+  slot: "textEllipsis"
+})({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var OverlayWrapper = styled8("tr", {
+  name: "DataTable",
+  slot: "overlayWrapper"
+})({
+  position: "sticky",
+  top: `calc(var(--unstable_TableCell-height, 32px))`,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  "& > td": {
+    height: 0,
+    padding: 0,
+    border: "none !important"
+  }
+});
+var VirtualizedTableBody = styled8("tbody", {
+  name: "DataTable",
+  slot: "tableBody"
+})({
+  "&::after": {
+    content: "''",
+    display: "block",
+    height: "0.01em"
+  },
+  [`& .${buttonClasses.root}`]: {
+    "--Button-minHeight": "26px",
+    "--Button-paddingBlock": "0.25rem",
+    lineHeight: 1,
+    marginTop: "-2px",
+    marginBottom: "-2px"
+  },
+  [`& .${iconButtonClasses.root}`]: {
+    "--IconButton-size": "26px",
+    verticalAlign: "middle",
+    marginTop: "-2px",
+    marginBottom: "-2px"
+  }
+});
+var StyledTableRow = styled8("tr", {
+  name: "DataTable",
+  slot: "tableRow",
+  shouldForwardProp: (prop) => prop !== "striped"
+})(({ striped }) => ({
+  ...striped && {
+    backgroundColor: "var(--TableRow-stripeBackground, var(--ceed-palette-background-level2))",
+    color: "var(--ceed-palette-text-primary)",
+    "& td": {
+      backgroundColor: "background.surface"
+    }
+  },
+  "&:hover": {
+    backgroundColor: "var(--TableRow-hoverBackground, var(--ceed-palette-background-level3))",
+    "& td": {
+      backgroundColor: "var(--TableRow-hoverBackground, var(--ceed-palette-background-level3))"
+    }
+  }
+}));
+var Asterisk = styled8("span", {
+  name: "DataTable",
+  slot: "headCellAsterisk"
+})(({ theme }) => ({
+  color: "var(--ceed-palette-danger-500)",
+  marginLeft: theme.spacing(0.5)
+}));
+var StyledTh = styled8(motion16.th)(({ theme }) => ({
+  boxShadow: "1px 0 var(--TableCell-borderColor)"
+}));
+var StyledTd = styled8("td")(({ theme }) => ({
+  transition: `box-shadow 0.3s`,
+  "&:not(.is-last-left):not(.is-last-right)": {
+    boxShadow: "1px 0 var(--TableCell-borderColor)"
+  },
+  ".ScrollableRight &": {
+    "&.is-last-left": {
+      boxShadow: `1px 0 var(--TableCell-borderColor), ${theme.shadow.md}`
+    }
+  },
+  ".ScrollableLeft &": {
+    "&.is-last-right": {
+      boxShadow: `1px 0 var(--TableCell-borderColor), ${theme.shadow.md}`
+    }
+  }
+}));
+var MotionSortIcon = motion16(SortIcon);
+var DefaultLoadingOverlay = () => /* @__PURE__ */ React16.createElement(LinearProgress, { value: 8, variant: "plain" });
+var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
+  Box_default,
+  {
+    sx: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: "4px",
+      cursor: "col-resize"
+    },
+    onClick: (e) => e.stopPropagation(),
+    onMouseDown: (e) => {
+      const initialX = e.clientX;
+      const initialWidth = ref.current?.getBoundingClientRect().width;
+      const onMouseMove = (e2) => {
+        if (initialWidth && initialX) {
+          ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
+          targetRef.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
+        }
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    }
+  }
+);
+
+// src/components/DataTable/components.tsx
+import React22, {
+  useRef as useRef4,
+  useState as useState6,
+  useLayoutEffect,
+  useMemo as useMemo8,
+  useCallback as useCallback8,
+  useEffect as useEffect4,
+  memo,
+  createElement
+} from "react";
+import { styled as styled12, useTheme } from "@mui/joy";
+import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // src/components/DatePicker/DatePicker.tsx
 import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState5 } from "react";
 import { IMaskInput, IMask } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
-import { styled as styled9, useThemeProps as useThemeProps4 } from "@mui/joy";
+import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
 import { FocusTrap, ClickAwayListener, Popper as Popper2 } from "@mui/base";
 
-// src/components/DialogActions/DialogActions.tsx
-import { DialogActions as JoyDialogActions, styled as styled8 } from "@mui/joy";
+// src/components/Sheet/Sheet.tsx
+import { Sheet as JoySheet } from "@mui/joy";
 import { motion as motion17 } from "framer-motion";
-var MotionDialogActions = motion17(JoyDialogActions);
-var StyledDialogActions = styled8(MotionDialogActions)(({ theme }) => ({
+var MotionSheet = motion17(JoySheet);
+var Sheet = MotionSheet;
+Sheet.displayName = "Sheet";
+
+// src/components/Sheet/index.ts
+var Sheet_default = Sheet;
+
+// src/components/DialogActions/DialogActions.tsx
+import { DialogActions as JoyDialogActions, styled as styled9 } from "@mui/joy";
+import { motion as motion18 } from "framer-motion";
+var MotionDialogActions = motion18(JoyDialogActions);
+var StyledDialogActions = styled9(MotionDialogActions)(({ theme }) => ({
   padding: theme.spacing(2),
   gap: theme.spacing(2),
   flexDirection: "row",
@@ -1969,7 +2153,7 @@ DialogActions.displayName = "DialogActions";
 var DialogActions_default = DialogActions;
 
 // src/components/DatePicker/DatePicker.tsx
-var CalendarButton = styled9(IconButton_default, {
+var CalendarButton = styled10(IconButton_default, {
   name: "DatePicker",
   slot: "calendarButton"
 })(({ theme }) => ({
@@ -1979,13 +2163,13 @@ var CalendarButton = styled9(IconButton_default, {
     outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
   }
 }));
-var StyledPopper = styled9(Popper2, {
+var StyledPopper = styled10(Popper2, {
   name: "DatePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
-var CalendarSheet = styled9(Sheet_default, {
+var CalendarSheet = styled10(Sheet_default, {
   name: "DatePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -1994,7 +2178,7 @@ var CalendarSheet = styled9(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var DatePickerRoot = styled9("div", {
+var DatePickerRoot = styled10("div", {
   name: "DatePicker",
   slot: "root",
   overridesResolver: (props, styles) => styles.root
@@ -2311,8 +2495,8 @@ var DatePicker_default = DatePicker;
 // src/components/Textarea/Textarea.tsx
 import React18 from "react";
 import { Textarea as JoyTextarea } from "@mui/joy";
-import { motion as motion18 } from "framer-motion";
-var MotionTextarea = motion18(JoyTextarea);
+import { motion as motion19 } from "framer-motion";
+var MotionTextarea = motion19(JoyTextarea);
 var Textarea = (props) => {
   const {
     label,
@@ -2365,8 +2549,8 @@ var Textarea_default = Textarea;
 // src/components/Select/Select.tsx
 import React19, { useMemo as useMemo7 } from "react";
 import { Select as JoySelect, Option as JoyOption } from "@mui/joy";
-import { motion as motion19 } from "framer-motion";
-var MotionOption = motion19(JoyOption);
+import { motion as motion20 } from "framer-motion";
+var MotionOption = motion20(JoyOption);
 var Option = MotionOption;
 Option.displayName = "Option";
 function Select(props) {
@@ -2442,11 +2626,14 @@ Select.displayName = "Select";
 // src/components/Select/index.ts
 var Select_default = Select;
 
+// src/components/DataTable/components.tsx
+import { Link } from "@mui/joy";
+
 // src/components/Tooltip/Tooltip.tsx
 import React20 from "react";
 import { Tooltip as JoyTooltip } from "@mui/joy";
-import { motion as motion20 } from "framer-motion";
-var MotionTooltip = motion20(JoyTooltip);
+import { motion as motion21 } from "framer-motion";
+var MotionTooltip = motion21(JoyTooltip);
 var Tooltip = (props) => {
   return /* @__PURE__ */ React20.createElement(MotionTooltip, { ...props });
 };
@@ -2455,148 +2642,8 @@ Tooltip.displayName = "Tooltip";
 // src/components/Tooltip/index.ts
 var Tooltip_default = Tooltip;
 
-// src/components/DataTable/DataTable.tsx
-import { motion as motion21, AnimatePresence as AnimatePresence2 } from "framer-motion";
-
-// src/components/Pagination/Pagination.tsx
-import React21, { useCallback as useCallback8, useEffect as useEffect4 } from "react";
-import PreviousIcon from "@mui/icons-material/ChevronLeft";
-import NextIcon from "@mui/icons-material/ChevronRight";
-import { styled as styled10 } from "@mui/joy";
-var PaginationButton = styled10(Button_default, {
-  name: "Pagination",
-  slot: "button"
-})(({ theme, active, size }) => ({
-  "--Button-size": {
-    sm: "32px",
-    md: "40px",
-    lg: "48px"
-  }[size],
-  width: "var(--Button-size)",
-  height: "var(--Button-size)",
-  backgroundColor: active ? theme.vars.palette.primary.softHoverBg : "transparent",
-  color: active ? theme.vars.palette.primary.softColor : theme.vars.palette.neutral.plainColor,
-  "&:hover": {
-    color: active ? theme.vars.palette.primary.softColor : theme.vars.palette.neutral.softColor,
-    backgroundColor: active ? theme.vars.palette.primary.softActiveBg : theme.vars.palette.neutral.softHoverBg
-  }
-}));
-var PaginationIconButton = styled10(IconButton_default, {
-  name: "Pagination",
-  slot: "button"
-})(({ theme, size }) => ({
-  "--IconButton-size": {
-    sm: "32px",
-    md: "40px",
-    lg: "48px"
-  }[size],
-  "--Icon-fontSize": "20px",
-  width: "var(--IconButton-size)",
-  height: "var(--IconButton-size)",
-  color: theme.vars.palette.neutral.plainColor,
-  "&:hover": {
-    color: theme.vars.palette.neutral.softColor,
-    backgroundColor: theme.vars.palette.neutral.softHoverBg
-  }
-}));
-var PaginationRoot = styled10(Stack_default, {
-  name: "Pagination",
-  slot: "root"
-})({});
-var PaginationContainer = styled10(Stack_default, {
-  name: "Pagination",
-  slot: "container"
-})(({ theme, size }) => ({
-  gap: {
-    sm: theme.spacing(1),
-    md: theme.spacing(1.5),
-    lg: theme.spacing(2)
-  }[size]
-}));
-function Pagination(props) {
-  const {
-    paginationModel: _paginationModel,
-    defaultPaginationModel = { page: 1, pageSize: 25 },
-    onPageChange,
-    rowCount,
-    size = "md",
-    ...innerProps
-  } = props;
-  const [paginationModel, setPaginationModel] = useControlledState(
-    _paginationModel,
-    defaultPaginationModel,
-    useCallback8(
-      (newPage) => {
-        onPageChange(newPage.page);
-      },
-      [onPageChange]
-    )
-  );
-  const handlePageChange = (newPage) => {
-    setPaginationModel({ ...paginationModel, page: newPage });
-  };
-  const firstPage = 1;
-  const lastPage = Math.max(firstPage, Math.ceil(rowCount / paginationModel.pageSize));
-  const beforePages = [paginationModel.page - 2, paginationModel.page - 1].filter((p) => p > 1);
-  const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
-  const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
-  const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
-  useEffect4(() => {
-    if (paginationModel.page > lastPage) {
-      setPaginationModel({ ...paginationModel, page: lastPage });
-    }
-  }, [rowCount, paginationModel, lastPage, setPaginationModel]);
-  return /* @__PURE__ */ React21.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React21.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React21.createElement(
-    PaginationIconButton,
-    {
-      size,
-      variant: "plain",
-      color: "neutral",
-      onClick: () => handlePageChange(paginationModel.page - 1),
-      disabled: paginationModel.page === firstPage,
-      "aria-label": "Previous page"
-    },
-    /* @__PURE__ */ React21.createElement(PreviousIcon, null)
-  ), paginationModel.page !== firstPage && /* @__PURE__ */ React21.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(firstPage) }, firstPage), isMoreBeforePages && /* @__PURE__ */ React21.createElement(
-    PaginationButton,
-    {
-      size,
-      variant: "plain",
-      color: "neutral",
-      onClick: () => handlePageChange(paginationModel.page - 3),
-      "aria-label": "More previous pages"
-    },
-    "..."
-  ), beforePages.map((p) => /* @__PURE__ */ React21.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ React21.createElement(PaginationButton, { active: "active", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ React21.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ React21.createElement(
-    PaginationButton,
-    {
-      size,
-      variant: "plain",
-      color: "neutral",
-      "aria-label": "More next pages",
-      onClick: () => handlePageChange(paginationModel.page + 3)
-    },
-    "..."
-  ), paginationModel.page !== lastPage && /* @__PURE__ */ React21.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(lastPage) }, lastPage), /* @__PURE__ */ React21.createElement(
-    PaginationIconButton,
-    {
-      size,
-      variant: "plain",
-      color: "neutral",
-      onClick: () => handlePageChange(paginationModel.page + 1),
-      disabled: paginationModel.page === lastPage,
-      "aria-label": "Next page"
-    },
-    /* @__PURE__ */ React21.createElement(NextIcon, null)
-  )));
-}
-Pagination.displayName = "Pagination";
-
-// src/components/Pagination/index.ts
-var Pagination_default = Pagination;
-
 // src/components/InfoSign/InfoSign.tsx
-import React22 from "react";
+import React21 from "react";
 import { styled as styled11, tooltipClasses } from "@mui/joy";
 import MuiInfoIcon from "@mui/icons-material/Info";
 var InfoIcon = styled11(MuiInfoIcon, {
@@ -2609,7 +2656,7 @@ var InfoIcon = styled11(MuiInfoIcon, {
 }));
 function InfoSign(props) {
   const { message, placement } = props;
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(
     Tooltip_default,
     {
       arrow: true,
@@ -2618,141 +2665,17 @@ function InfoSign(props) {
         [`&.${tooltipClasses.root}`]: {
           maxWidth: "320px"
         }
-      },
-      title: message?.split("\n").map((line, i) => /* @__PURE__ */ React22.createElement("div", { key: `info-sign-${i}` }, line))
-    },
-    /* @__PURE__ */ React22.createElement(InfoIcon, null)
-  );
-}
-
-// src/components/InfoSign/index.ts
-var InfoSign_default = InfoSign;
-
-// src/components/DataTable/DataTable.tsx
-function extractFieldsFromGroupingModel(items) {
-  const fields = /* @__PURE__ */ new Set();
-  for (const item of items) {
-    if ("groupId" in item) {
-      const children = Array.isArray(item.children) ? item.children : [item.children];
-      const childFields = extractFieldsFromGroupingModel(children);
-      childFields.forEach((field) => fields.add(field));
-    } else {
-      fields.add(item.field);
-    }
-  }
-  return fields;
-}
-function reorderColumnsByGroupingModel(columns, columnGroupingModel) {
-  const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
-  const orderedFields = [];
-  function collectFieldsInOrder(items) {
-    for (const item of items) {
-      if ("groupId" in item) {
-        const children = Array.isArray(item.children) ? item.children : [item.children];
-        collectFieldsInOrder(children);
-      } else {
-        if (!orderedFields.includes(item.field)) {
-          orderedFields.push(item.field);
-        }
-      }
-    }
-  }
-  collectFieldsInOrder(columnGroupingModel);
-  const columnMap = new Map(columns.map((col) => [col.field, col]));
-  const reorderedColumns = [];
-  for (const field of orderedFields) {
-    const column = columnMap.get(field);
-    if (column) {
-      reorderedColumns.push(column);
-    }
-  }
-  for (const column of columns) {
-    if (!fieldsInGroupingModel.has(column.field)) {
-      reorderedColumns.push(column);
-    }
-  }
-  return reorderedColumns;
-}
-function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }) {
-  const result = [];
-  for (const item of items) {
-    if ("groupId" in item) {
-      const newPath = [...groupPath, item.groupId];
-      const children = Array.isArray(item.children) ? item.children : [item.children];
-      result.push(...flattenColumnGroups(children, newPath, columnIndex));
-    } else {
-      result.push({
-        ...item,
-        groupPath,
-        columnIndex: columnIndex.current++
-      });
-    }
-  }
-  return result;
-}
-function calculateColumnGroups(columnGroupingModel, columns) {
-  const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
-  const flattenedColumns = flattenColumnGroups(columnGroupingModel);
-  const columnIndexMap = new Map(flattenedColumns.map((col) => [col.field, col.columnIndex]));
-  const processedGroups = /* @__PURE__ */ new Map();
-  const groupsByLevel = [];
-  let maxLevel = 0;
-  function processGroup(items, level, parentGroupId) {
-    let minIndex = Infinity;
-    let maxIndex = -Infinity;
-    for (const item of items) {
-      if ("groupId" in item) {
-        const groupKey = parentGroupId ? `${parentGroupId}.${item.groupId}` : item.groupId;
-        if (!processedGroups.has(groupKey)) {
-          const children = Array.isArray(item.children) ? item.children : [item.children];
-          const { startIndex, colspan } = processGroup(children, level + 1, groupKey);
-          const group = {
-            groupId: item.groupId,
-            headerName: item.headerName,
-            colspan,
-            level,
-            startIndex
-          };
-          processedGroups.set(groupKey, group);
-          if (!groupsByLevel[level]) {
-            groupsByLevel[level] = [];
-          }
-          groupsByLevel[level].push(group);
-          maxLevel = Math.max(maxLevel, level);
-          minIndex = Math.min(minIndex, startIndex);
-          maxIndex = Math.max(maxIndex, startIndex + colspan - 1);
-        }
-      } else {
-        const columnIndex = columnIndexMap.get(item.field);
-        if (columnIndex !== void 0) {
-          minIndex = Math.min(minIndex, columnIndex);
-          maxIndex = Math.max(maxIndex, columnIndex);
-        }
-      }
-    }
-    return {
-      startIndex: minIndex === Infinity ? 0 : minIndex,
-      colspan: maxIndex === -Infinity ? 0 : maxIndex - minIndex + 1
-    };
-  }
-  processGroup(columnGroupingModel, 0);
-  groupsByLevel.forEach((level) => {
-    level.sort((a, b) => a.startIndex - b.startIndex);
-  });
-  return { groups: groupsByLevel, maxLevel, fieldsInGroupingModel };
-}
-function getTextAlign(props) {
-  return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
+      },
+      title: message?.split("\n").map((line, i) => /* @__PURE__ */ React21.createElement("div", { key: `info-sign-${i}` }, line))
+    },
+    /* @__PURE__ */ React21.createElement(InfoIcon, null)
+  );
 }
-var DefaultLoadingOverlay = () => /* @__PURE__ */ React23.createElement(LinearProgress, { value: 8, variant: "plain" });
-var EllipsisDiv = styled12("div", {
-  name: "DataTable",
-  slot: "textEllipsis"
-})({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-});
+
+// src/components/InfoSign/index.ts
+var InfoSign_default = InfoSign;
+
+// src/components/DataTable/components.tsx
 var TextEllipsis = ({ children }) => {
   const textRef = useRef4(null);
   const [showTooltip, setShowTooltip] = useState6(false);
@@ -2763,9 +2686,9 @@ var TextEllipsis = ({ children }) => {
       setShowTooltip(isTextTruncated);
     }
   }, [children]);
-  const content = /* @__PURE__ */ React23.createElement(EllipsisDiv, { ref: textRef }, children);
+  const content = /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef }, children);
   if (showTooltip) {
-    return /* @__PURE__ */ React23.createElement(Tooltip_default, { title: children, placement: "top", onClick: (e) => e.stopPropagation() }, content);
+    return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: children, placement: "top", onClick: (e) => e.stopPropagation() }, content);
   }
   return content;
 };
@@ -2779,9 +2702,9 @@ var CellTextEllipsis = ({ children }) => {
       setShowTooltip(isTextTruncated);
     }
   }, [children]);
-  const content = /* @__PURE__ */ React23.createElement(EllipsisDiv, { ref: textRef }, children);
+  const content = /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef }, children);
   if (showTooltip) {
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React22.createElement(
       Tooltip_default,
       {
         title: children,
@@ -2795,130 +2718,6 @@ var CellTextEllipsis = ({ children }) => {
   }
   return content;
 };
-var OverlayWrapper = styled12("tr", {
-  name: "DataTable",
-  slot: "overlayWrapper"
-})({
-  position: "sticky",
-  top: `calc(var(--unstable_TableCell-height, 32px))`,
-  left: 0,
-  right: 0,
-  zIndex: 1,
-  "& > td": {
-    height: 0,
-    padding: 0,
-    border: "none !important"
-  }
-});
-var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
-var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React23.createElement(
-  Box_default,
-  {
-    sx: {
-      position: "absolute",
-      top: 0,
-      right: 0,
-      bottom: 0,
-      width: "4px",
-      cursor: "col-resize"
-    },
-    onClick: (e) => e.stopPropagation(),
-    onMouseDown: (e) => {
-      const initialX = e.clientX;
-      const initialWidth = ref.current?.getBoundingClientRect().width;
-      const onMouseMove = (e2) => {
-        if (initialWidth && initialX) {
-          ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
-          targetRef.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
-        }
-      };
-      const onMouseUp = () => {
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
-    }
-  }
-);
-var VirtualizedTableBody = styled12("tbody", {
-  name: "DataTable",
-  slot: "tableBody"
-})({
-  // HACK: for virtualization: tbody의 height를 렌더링 된 tr의 총 높이 보다 높은 값으로 지정하고도 tr의 size를 유지하기 위한 꼼수
-  "&::after": {
-    content: "''",
-    display: "block",
-    height: "0.01em"
-  },
-  // NOTE: 테이블 안에 버튼을 넣을 때 버튼의 높이가 테이블의 높이를 넘어가지 않도록 설정
-  [`& .${buttonClasses.root}`]: {
-    "--Button-minHeight": "26px",
-    "--Button-paddingBlock": "0.25rem",
-    lineHeight: 1,
-    marginTop: "-2px",
-    marginBottom: "-2px"
-  },
-  [`& .${iconButtonClasses.root}`]: {
-    "--IconButton-size": "26px",
-    verticalAlign: "middle",
-    marginTop: "-2px",
-    marginBottom: "-2px"
-  }
-});
-var StyledTableRow = styled12("tr", {
-  name: "DataTable",
-  slot: "tableRow",
-  shouldForwardProp: (prop) => prop !== "striped"
-})(({ striped }) => ({
-  ...striped && {
-    backgroundColor: "var(--TableRow-stripeBackground, var(--ceed-palette-background-level2))",
-    color: "var(--ceed-palette-text-primary)",
-    "& td": {
-      backgroundColor: "background.surface"
-    }
-  },
-  "&:hover": {
-    backgroundColor: "var(--TableRow-hoverBackground, var(--ceed-palette-background-level3))",
-    "& td": {
-      backgroundColor: "var(--TableRow-hoverBackground, var(--ceed-palette-background-level3))"
-    }
-  }
-}));
-var VirtualizedTableRow = memo(StyledTableRow, (prevProps, nextProps) => {
-  return prevProps.striped === nextProps.striped && prevProps.style?.height === nextProps.style?.height && prevProps.style?.transform === nextProps.style?.transform && // @ts-ignore
-  prevProps["data-row-id"] === nextProps["data-row-id"] && // @ts-ignore
-  prevProps["data-index"] === nextProps["data-index"] && prevProps.tabIndex === nextProps.tabIndex && prevProps["aria-checked"] === nextProps["aria-checked"] && // Include children check to handle isCellEditable changes
-  prevProps.children === nextProps.children;
-});
-var Asterisk = styled12("span", {
-  name: "DataTable",
-  slot: "headCellAsterisk"
-})(({ theme }) => ({
-  color: "var(--ceed-palette-danger-500)",
-  marginLeft: theme.spacing(0.5)
-}));
-var StyledTh = styled12(motion21.th)(({ theme }) => ({
-  boxShadow: "1px 0 var(--TableCell-borderColor)"
-  // border 대신 box-shadow를 사용하여 stickyHeader와 함께 사용할 때 border가 겹치는 문제를 해결
-}));
-var StyledTd = styled12("td")(({ theme }) => ({
-  transition: `box-shadow 0.3s`,
-  "&:not(.is-last-left):not(.is-last-right)": {
-    boxShadow: "1px 0 var(--TableCell-borderColor)"
-  },
-  ".ScrollableRight &": {
-    "&.is-last-left": {
-      boxShadow: `1px 0 var(--TableCell-borderColor), ${theme.shadow.md}`
-    }
-  },
-  ".ScrollableLeft &": {
-    "&.is-last-right": {
-      boxShadow: `1px 0 var(--TableCell-borderColor), ${theme.shadow.md}`
-    }
-  }
-}));
-var MotionSortIcon = motion21(SortIcon);
 var HeadCell = (props) => {
   const {
     width,
@@ -2941,7 +2740,8 @@ var HeadCell = (props) => {
     pinnedStartPosition,
     pinnedEndPosition,
     headerRef,
-    tableColRef
+    tableColRef,
+    headerClassName
   } = props;
   const theme = useTheme();
   const ref = headerRef;
@@ -2974,7 +2774,7 @@ var HeadCell = (props) => {
   const sortIcon = useMemo8(() => {
     const isSorted = !!sort;
     const isVisible = sortable && (isSorted || isHovered);
-    return /* @__PURE__ */ React23.createElement(AnimatePresence2, { mode: "wait" }, isVisible && /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React22.createElement(AnimatePresence2, { mode: "wait" }, isVisible && /* @__PURE__ */ React22.createElement(
       MotionSortIcon,
       {
         key: "sort-icon",
@@ -3003,10 +2803,20 @@ var HeadCell = (props) => {
     ));
   }, [headId, initialSort, sort, sortable, isHovered]);
   const infoSign = useMemo8(
-    () => description ? /* @__PURE__ */ React23.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null,
+    () => description ? /* @__PURE__ */ React22.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null,
     [description]
   );
-  return /* @__PURE__ */ React23.createElement(
+  const params = useMemo8(
+    () => ({
+      field
+    }),
+    [field]
+  );
+  const computedHeaderClassName = useMemo8(
+    () => (typeof headerClassName === "function" ? headerClassName(params) : headerClassName) || void 0,
+    [headerClassName, params]
+  );
+  return /* @__PURE__ */ React22.createElement(
     StyledTh,
     {
       id: headId,
@@ -3015,16 +2825,17 @@ var HeadCell = (props) => {
       ref,
       key: field,
       style,
-      onClick: useCallback9(
+      onClick: useCallback8(
         (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
         [field, onSortChange, sort, sortable]
       ),
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       whileHover: "hover",
-      initial: "initial"
+      initial: "initial",
+      className: computedHeaderClassName
     },
-    /* @__PURE__ */ React23.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center" }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ React23.createElement(TextEllipsis, null, headerName ?? field, editMode && required && /* @__PURE__ */ React23.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
+    /* @__PURE__ */ React22.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center" }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ React22.createElement(TextEllipsis, null, headerName ?? field, editMode && required && /* @__PURE__ */ React22.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
     resizer
   );
 };
@@ -3139,18 +2950,18 @@ var BodyCell = (props) => {
       return createElement(memo(renderEditCell), params);
     }
     return {
-      date: /* @__PURE__ */ React23.createElement(DatePicker_default, { value, ...editModeComponentProps }),
-      currency: /* @__PURE__ */ React23.createElement(
+      date: /* @__PURE__ */ React22.createElement(DatePicker_default, { value, ...editModeComponentProps }),
+      currency: /* @__PURE__ */ React22.createElement(
         CurrencyInput_default,
         {
           value,
           ...editModeComponentProps
         }
       ),
-      number: /* @__PURE__ */ React23.createElement(Input_default, { value, type: "number", ...editModeComponentProps }),
-      text: /* @__PURE__ */ React23.createElement(Input_default, { value, type: "text", ...editModeComponentProps }),
-      longText: /* @__PURE__ */ React23.createElement(Textarea_default, { value, ...editModeComponentProps }),
-      autocomplete: /* @__PURE__ */ React23.createElement(
+      number: /* @__PURE__ */ React22.createElement(Input_default, { value, type: "number", ...editModeComponentProps }),
+      text: /* @__PURE__ */ React22.createElement(Input_default, { value, type: "text", ...editModeComponentProps }),
+      longText: /* @__PURE__ */ React22.createElement(Textarea_default, { value, ...editModeComponentProps }),
+      autocomplete: /* @__PURE__ */ React22.createElement(
         Autocomplete_default,
         {
           value,
@@ -3158,7 +2969,7 @@ var BodyCell = (props) => {
           ...editModeComponentProps
         }
       ),
-      select: /* @__PURE__ */ React23.createElement(
+      select: /* @__PURE__ */ React22.createElement(
         Select_default,
         {
           value,
@@ -3175,7 +2986,7 @@ var BodyCell = (props) => {
     }
     const innerText = value;
     const typedComponent = {
-      link: React23.createElement(linkComponentFromProps || Link, {
+      link: React22.createElement(linkComponentFromProps || Link, {
         children: innerText,
         ...componentProps
       })
@@ -3185,7 +2996,7 @@ var BodyCell = (props) => {
   const getActions = props.getActions;
   const CellComponent = useMemo8(() => {
     if (type === "actions") {
-      return /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", gap: 1, justifyContent: "center", alignItems: "center" }, getActions?.(params));
+      return /* @__PURE__ */ React22.createElement(Stack_default, { direction: "row", gap: 1, justifyContent: "center", alignItems: "center" }, getActions?.(params));
     }
     return editMode && EditModeComponent ? EditModeComponent : ReadModeComponent;
   }, [type, getActions, params, editMode, EditModeComponent, ReadModeComponent]);
@@ -3195,10 +3006,10 @@ var BodyCell = (props) => {
     () => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
     [cellClassName, params]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     setValue(row[field]);
   }, [row, field]);
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React22.createElement(
     StyledTd,
     {
       ref: cellRef,
@@ -3216,7 +3027,7 @@ var BodyCell = (props) => {
       className: [isLastStartPinnedColumn && "is-last-left", isLastEndPinnedColumn && "is-last-right", computedCellClassName].filter(Boolean).join(" ") || ""
     },
     useMemo8(
-      () => showTooltip ? /* @__PURE__ */ React23.createElement(CellTextEllipsis, null, CellComponent) : CellComponent,
+      () => showTooltip ? /* @__PURE__ */ React22.createElement(CellTextEllipsis, null, CellComponent) : CellComponent,
       [CellComponent, showTooltip]
     )
   );
@@ -3224,7 +3035,7 @@ var BodyCell = (props) => {
 var BodyRow = memo(
   (props) => {
     const { tableId, columns, rowId, editMode, noWrap, row } = props;
-    return /* @__PURE__ */ React23.createElement(React23.Fragment, null, columns.map((column, i) => /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React22.createElement(React22.Fragment, null, columns.map((column, i) => /* @__PURE__ */ React22.createElement(
       BodyCell,
       {
         key: `${rowId}_${column.field.toString()}_${i}`,
@@ -3238,10 +3049,38 @@ var BodyRow = memo(
     )));
   }
 );
+var StyledTableRow2 = styled12("tr", {
+  name: "DataTable",
+  slot: "tableRow",
+  shouldForwardProp: (prop) => prop !== "striped"
+})(({ striped }) => ({
+  ...striped && {
+    backgroundColor: "var(--TableRow-stripeBackground, var(--ceed-palette-background-level2))",
+    color: "var(--ceed-palette-text-primary)",
+    "& td": {
+      backgroundColor: "background.surface"
+    }
+  },
+  "&:hover": {
+    backgroundColor: "var(--TableRow-hoverBackground, var(--ceed-palette-background-level3))",
+    "& td": {
+      backgroundColor: "var(--TableRow-hoverBackground, var(--ceed-palette-background-level3))"
+    }
+  }
+}));
+var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
+  return prevProps.striped === nextProps.striped && prevProps.style?.height === nextProps.style?.height && prevProps.style?.transform === nextProps.style?.transform && // @ts-ignore
+  prevProps["data-row-id"] === nextProps["data-row-id"] && // @ts-ignore
+  prevProps["data-index"] === nextProps["data-index"] && prevProps.tabIndex === nextProps.tabIndex && prevProps["aria-checked"] === nextProps["aria-checked"] && // Include children check to handle isCellEditable changes
+  prevProps.children === nextProps.children;
+});
+
+// src/components/DataTable/hooks.ts
+import { useState as useState7, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
 function useColumnWidths(columnsByField) {
-  const [widths, setWidths] = useState6({});
-  const roRef = useRef4();
-  useLayoutEffect(() => {
+  const [widths, setWidths] = useState7({});
+  const roRef = useRef5();
+  useLayoutEffect2(() => {
     if (roRef.current) roRef.current.disconnect();
     roRef.current = new ResizeObserver((entries) => {
       let changed = false;
@@ -3289,33 +3128,32 @@ function useDataTableRenderer({
   isTotalSelected: _isTotalSelected,
   isRowSelectable,
   columnGroupingModel
-  // Add this prop
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
       "You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
     );
   }
-  const onSelectionModelChangeRef = useRef4(onSelectionModelChange);
+  const onSelectionModelChangeRef = useRef5(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
-  const [focusedRowId, setFocusedRowId] = useState6(null);
+  const [focusedRowId, setFocusedRowId] = useState7(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
     useCallback9((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
   );
-  const reorderedColumns = useMemo8(() => {
+  const reorderedColumns = useMemo9(() => {
     if (!columnGroupingModel) return columnsProp;
     return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
   }, [columnsProp, columnGroupingModel]);
-  const columnsByField = useMemo8(
+  const columnsByField = useMemo9(
     () => reorderedColumns.reduce(
       (acc, curr) => ({
         ...acc,
         [curr.field]: {
           ...curr,
-          headerRef: React23.createRef(),
-          tableColRef: React23.createRef()
+          headerRef: createRef(),
+          tableColRef: createRef()
         }
       }),
       {}
@@ -3350,47 +3188,42 @@ function useDataTableRenderer({
     },
     [sortModel, columnsByField]
   );
-  const rows = useMemo8(
+  const rows = useMemo9(
     () => sortModel.length ? [..._rows].sort(sortComparator) : _rows,
     [_rows, sortModel, sortComparator]
   );
-  const sortOrder = useMemo8(
-    // NOTE: default value를 props destructuring에서 할당하면 렌더링 시점에 초기화가 되어버린다.
+  const sortOrder = useMemo9(
     () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
-  const [page, setPage] = useState6(paginationModel?.page || 1);
+  const [page, setPage] = useState7(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
   const getId = useCallback9(
     (row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
     [_getId, page, pageSize]
   );
-  const selectedModelSet = useMemo8(
-    // NOTE: default value를 props destructuring에서 할당하면 렌더링 시점에 초기화가 되어버린다.
-    () => new Set(selectionModel || []),
-    [selectionModel]
-  );
-  const dataInPage = useMemo8(
+  const selectedModelSet = useMemo9(() => new Set(selectionModel || []), [selectionModel]);
+  const dataInPage = useMemo9(
     () => !pagination || paginationMode === "server" ? rows : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
     [rows, page, pageSize, paginationMode, pagination]
   );
-  const selectableDataInPage = useMemo8(
+  const selectableDataInPage = useMemo9(
     () => dataInPage.filter((row, i) => {
       if (!isRowSelectable) return true;
       return isRowSelectable({ row, id: getId(row, i) });
     }),
     [dataInPage, isRowSelectable, getId]
   );
-  const isAllSelected = useMemo8(
+  const isAllSelected = useMemo9(
     () => selectableDataInPage.length > 0 && selectableDataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
     [selectableDataInPage, selectedModelSet, getId]
   );
   const rowCount = totalRowsProp || rows.length;
-  const selectableRowCount = useMemo8(() => {
+  const selectableRowCount = useMemo9(() => {
     if (!isRowSelectable) return rowCount;
     return rows.filter((row, i) => isRowSelectable({ row, id: getId(row, i) })).length;
   }, [rows, isRowSelectable, getId, rowCount]);
-  const isTotalSelected = useMemo8(
+  const isTotalSelected = useMemo9(
     () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
     [_isTotalSelected, selectionModel, selectableRowCount]
   );
@@ -3400,17 +3233,14 @@ function useDataTableRenderer({
     columnsByField[f].minWidth ?? 0,
     [columnWidths, columnsByField]
   );
-  const processedColumnGroups = useMemo8(() => {
+  const processedColumnGroups = useMemo9(() => {
     if (!columnGroupingModel) return null;
     return calculateColumnGroups(columnGroupingModel, reorderedColumns);
   }, [columnGroupingModel, reorderedColumns]);
-  const columns = useMemo8(() => {
-    const baseColumns = reorderedColumns.length > 0 ? reorderedColumns : (
-      // fallback
-      Object.keys(rows[0] || {}).map((key) => ({
-        field: key
-      }))
-    );
+  const columns = useMemo9(() => {
+    const baseColumns = reorderedColumns.length > 0 ? reorderedColumns : Object.keys(rows[0] || {}).map((key) => ({
+      field: key
+    }));
     return baseColumns.map((column) => {
       const isLeftPinned = pinnedColumns?.left?.includes(column.field);
       const isRightPinned = pinnedColumns?.right?.includes(column.field);
@@ -3425,7 +3255,6 @@ function useDataTableRenderer({
         isPinned,
         isLastStartPinnedColumn: isLeftPinned && [...pinnedColumns?.left || []].pop() === column.field,
         isLastEndPinnedColumn: isRightPinned && (pinnedColumns?.right?.[0] ?? null) === column.field,
-        // pinned 관련 계산부
         pinnedStartPosition: pinnedColumns?.left?.slice(0, isLeftPinned ? pinnedColumns.left.indexOf(column.field) : pinnedColumns.left.length).reduce((acc, curr) => acc + getWidth(curr), 0),
         pinnedEndPosition: pinnedColumns?.right?.slice(isRightPinned ? pinnedColumns.right.indexOf(column.field) + 1 : 0).reduce((acc, curr) => acc + getWidth(curr), 0)
       };
@@ -3487,56 +3316,265 @@ function useDataTableRenderer({
   }, [page]);
   return {
     rowCount,
-    selectableRowCount,
-    page,
-    pageSize,
-    onPaginationModelChange: handlePageChange,
-    getId,
-    HeadCell,
-    BodyRow,
-    dataInPage,
-    handleSortChange,
-    isAllSelected,
-    // all rows are selected on this page
-    isTotalSelected,
-    isSelectedRow: useCallback9((model) => selectedModelSet.has(model), [selectedModelSet]),
-    isRowSelectable: useCallback9(
-      (rowId, row) => {
-        if (!isRowSelectable) return true;
-        return isRowSelectable({ row, id: rowId });
-      },
-      [isRowSelectable]
-    ),
-    focusedRowId,
-    onRowFocus: useCallback9((rowId) => {
-      setFocusedRowId(rowId);
-    }, []),
-    onAllCheckboxChange: useCallback9(() => {
-      onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
-    }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
-    onCheckboxChange: useCallback9(
-      (event, selectedModel) => {
-        if (selectedModelSet.has(selectedModel)) {
-          const newSelectionModel = (selectionModel || []).filter((model) => model !== selectedModel);
-          onSelectionModelChange?.(newSelectionModel);
-        } else {
-          const newSelectionModel = [...selectionModel || [], selectedModel];
-          onSelectionModelChange?.(newSelectionModel);
-        }
+    selectableRowCount,
+    page,
+    pageSize,
+    onPaginationModelChange: handlePageChange,
+    getId,
+    HeadCell,
+    BodyRow,
+    dataInPage,
+    handleSortChange,
+    isAllSelected,
+    isTotalSelected,
+    isSelectedRow: useCallback9((model) => selectedModelSet.has(model), [selectedModelSet]),
+    isRowSelectable: useCallback9(
+      (rowId, row) => {
+        if (!isRowSelectable) return true;
+        return isRowSelectable({ row, id: rowId });
+      },
+      [isRowSelectable]
+    ),
+    focusedRowId,
+    onRowFocus: useCallback9((rowId) => {
+      setFocusedRowId(rowId);
+    }, []),
+    onAllCheckboxChange: useCallback9(() => {
+      onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
+    }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
+    onCheckboxChange: useCallback9(
+      (event, selectedModel) => {
+        if (selectedModelSet.has(selectedModel)) {
+          const newSelectionModel = (selectionModel || []).filter((model) => model !== selectedModel);
+          onSelectionModelChange?.(newSelectionModel);
+        } else {
+          const newSelectionModel = [...selectionModel || [], selectedModel];
+          onSelectionModelChange?.(newSelectionModel);
+        }
+      },
+      [selectionModel, onSelectionModelChange, selectedModelSet]
+    ),
+    columns,
+    processedColumnGroups,
+    onTotalSelect: useCallback9(() => {
+      const selectableRows = rows.filter((row, i) => {
+        if (!isRowSelectable) return true;
+        return isRowSelectable({ row, id: getId(row, i) });
+      });
+      onSelectionModelChange?.(isTotalSelected ? [] : selectableRows.map(getId), !isTotalSelected);
+    }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable])
+  };
+}
+
+// src/components/Table/Table.tsx
+import React23 from "react";
+import { Table as JoyTable } from "@mui/joy";
+var Table = (props) => {
+  const { children, ...inheritProps } = props;
+  return /* @__PURE__ */ React23.createElement(JoyTable, { ...inheritProps }, children);
+};
+Table.displayName = "Table";
+function TableHead(props) {
+  const {
+    headCells,
+    showCheckbox,
+    onCheckboxChange,
+    slots: { checkbox: RenderCheckbox = Checkbox_default } = {},
+    slotProps: { checkbox: checkboxProps = {} } = {}
+  } = props;
+  return /* @__PURE__ */ React23.createElement("thead", null, /* @__PURE__ */ React23.createElement("tr", null, showCheckbox && /* @__PURE__ */ React23.createElement(
+    "th",
+    {
+      style: {
+        width: "40px",
+        textAlign: "center"
+      }
+    },
+    /* @__PURE__ */ React23.createElement(RenderCheckbox, { onChange: onCheckboxChange, ...checkboxProps })
+  ), headCells.map((headCell) => /* @__PURE__ */ React23.createElement(
+    "th",
+    {
+      key: headCell.label,
+      style: {
+        width: headCell.width,
+        minWidth: headCell.minWidth,
+        maxWidth: headCell.maxWidth,
+        textAlign: headCell.numeric ? "right" : "left"
+      }
+    },
+    headCell.label
+  ))));
+}
+TableHead.displayName = "TableHead";
+function TableBody(props) {
+  const {
+    rows,
+    cellOrder,
+    rowOptions,
+    showCheckbox,
+    onCheckboxChange,
+    slots: { checkbox: RenderCheckbox = Checkbox_default } = {},
+    slotProps: { checkbox: checkboxProps = {} } = {}
+  } = props;
+  return /* @__PURE__ */ React23.createElement("tbody", null, rows.map((row, rowIndex) => /* @__PURE__ */ React23.createElement("tr", { key: `table-row-${rowIndex}` }, showCheckbox && /* @__PURE__ */ React23.createElement(
+    "td",
+    {
+      style: {
+        textAlign: "center"
+      }
+    },
+    /* @__PURE__ */ React23.createElement(RenderCheckbox, { onChange: (event) => onCheckboxChange?.(event, rowIndex), ...checkboxProps })
+  ), cellOrder.map((cellKey) => /* @__PURE__ */ React23.createElement(
+    "td",
+    {
+      key: cellKey,
+      style: {
+        textAlign: rowOptions?.[cellKey]?.numeric ? "right" : "left"
+      }
+    },
+    row[cellKey]
+  )))));
+}
+TableBody.displayName = "TableBody";
+
+// src/components/Pagination/Pagination.tsx
+import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
+import PreviousIcon from "@mui/icons-material/ChevronLeft";
+import NextIcon from "@mui/icons-material/ChevronRight";
+import { styled as styled13 } from "@mui/joy";
+var PaginationButton = styled13(Button_default, {
+  name: "Pagination",
+  slot: "button"
+})(({ theme, active, size }) => ({
+  "--Button-size": {
+    sm: "32px",
+    md: "40px",
+    lg: "48px"
+  }[size],
+  width: "var(--Button-size)",
+  height: "var(--Button-size)",
+  backgroundColor: active ? theme.vars.palette.primary.softHoverBg : "transparent",
+  color: active ? theme.vars.palette.primary.softColor : theme.vars.palette.neutral.plainColor,
+  "&:hover": {
+    color: active ? theme.vars.palette.primary.softColor : theme.vars.palette.neutral.softColor,
+    backgroundColor: active ? theme.vars.palette.primary.softActiveBg : theme.vars.palette.neutral.softHoverBg
+  }
+}));
+var PaginationIconButton = styled13(IconButton_default, {
+  name: "Pagination",
+  slot: "button"
+})(({ theme, size }) => ({
+  "--IconButton-size": {
+    sm: "32px",
+    md: "40px",
+    lg: "48px"
+  }[size],
+  "--Icon-fontSize": "20px",
+  width: "var(--IconButton-size)",
+  height: "var(--IconButton-size)",
+  color: theme.vars.palette.neutral.plainColor,
+  "&:hover": {
+    color: theme.vars.palette.neutral.softColor,
+    backgroundColor: theme.vars.palette.neutral.softHoverBg
+  }
+}));
+var PaginationRoot = styled13(Stack_default, {
+  name: "Pagination",
+  slot: "root"
+})({});
+var PaginationContainer = styled13(Stack_default, {
+  name: "Pagination",
+  slot: "container"
+})(({ theme, size }) => ({
+  gap: {
+    sm: theme.spacing(1),
+    md: theme.spacing(1.5),
+    lg: theme.spacing(2)
+  }[size]
+}));
+function Pagination(props) {
+  const {
+    paginationModel: _paginationModel,
+    defaultPaginationModel = { page: 1, pageSize: 25 },
+    onPageChange,
+    rowCount,
+    size = "md",
+    ...innerProps
+  } = props;
+  const [paginationModel, setPaginationModel] = useControlledState(
+    _paginationModel,
+    defaultPaginationModel,
+    useCallback10(
+      (newPage) => {
+        onPageChange(newPage.page);
       },
-      [selectionModel, onSelectionModelChange, selectedModelSet]
-    ),
-    columns,
-    processedColumnGroups,
-    onTotalSelect: useCallback9(() => {
-      const selectableRows = rows.filter((row, i) => {
-        if (!isRowSelectable) return true;
-        return isRowSelectable({ row, id: getId(row, i) });
-      });
-      onSelectionModelChange?.(isTotalSelected ? [] : selectableRows.map(getId), !isTotalSelected);
-    }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable])
+      [onPageChange]
+    )
+  );
+  const handlePageChange = (newPage) => {
+    setPaginationModel({ ...paginationModel, page: newPage });
   };
+  const firstPage = 1;
+  const lastPage = Math.max(firstPage, Math.ceil(rowCount / paginationModel.pageSize));
+  const beforePages = [paginationModel.page - 2, paginationModel.page - 1].filter((p) => p > 1);
+  const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
+  const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
+  const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
+  useEffect6(() => {
+    if (paginationModel.page > lastPage) {
+      setPaginationModel({ ...paginationModel, page: lastPage });
+    }
+  }, [rowCount, paginationModel, lastPage, setPaginationModel]);
+  return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(
+    PaginationIconButton,
+    {
+      size,
+      variant: "plain",
+      color: "neutral",
+      onClick: () => handlePageChange(paginationModel.page - 1),
+      disabled: paginationModel.page === firstPage,
+      "aria-label": "Previous page"
+    },
+    /* @__PURE__ */ React24.createElement(PreviousIcon, null)
+  ), paginationModel.page !== firstPage && /* @__PURE__ */ React24.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(firstPage) }, firstPage), isMoreBeforePages && /* @__PURE__ */ React24.createElement(
+    PaginationButton,
+    {
+      size,
+      variant: "plain",
+      color: "neutral",
+      onClick: () => handlePageChange(paginationModel.page - 3),
+      "aria-label": "More previous pages"
+    },
+    "..."
+  ), beforePages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ React24.createElement(PaginationButton, { active: "active", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ React24.createElement(
+    PaginationButton,
+    {
+      size,
+      variant: "plain",
+      color: "neutral",
+      "aria-label": "More next pages",
+      onClick: () => handlePageChange(paginationModel.page + 3)
+    },
+    "..."
+  ), paginationModel.page !== lastPage && /* @__PURE__ */ React24.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(lastPage) }, lastPage), /* @__PURE__ */ React24.createElement(
+    PaginationIconButton,
+    {
+      size,
+      variant: "plain",
+      color: "neutral",
+      onClick: () => handlePageChange(paginationModel.page + 1),
+      disabled: paginationModel.page === lastPage,
+      "aria-label": "Next page"
+    },
+    /* @__PURE__ */ React24.createElement(NextIcon, null)
+  )));
 }
+Pagination.displayName = "Pagination";
+
+// src/components/Pagination/index.ts
+var Pagination_default = Pagination;
+
+// src/components/DataTable/DataTable.tsx
 function Component(props, apiRef) {
   const {
     rows,
@@ -3584,8 +3622,8 @@ function Component(props, apiRef) {
     ...innerProps
   } = props;
   const tableId = useId();
-  const parentRef = useRef4(null);
-  const tableBodyRef = useRef4(null);
+  const parentRef = useRef6(null);
+  const tableBodyRef = useRef6(null);
   const {
     columns,
     processedColumnGroups,
@@ -3616,29 +3654,29 @@ function Component(props, apiRef) {
     measureElement: (element) => element.clientHeight,
     overscan: 10
   });
-  const paginationModel = useMemo8(() => ({ page, pageSize }), [page, pageSize]);
+  const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
-  const getRowClickHandler = useCallback9(
+  const getRowClickHandler = useCallback11(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
       checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
     },
     [onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
   );
-  const getRowFocusHandler = useCallback9(
+  const getRowFocusHandler = useCallback11(
     (rowId) => () => {
       onRowFocus(rowId);
     },
     [onRowFocus]
   );
-  const getCheckboxClickHandler = useCallback9(
+  const getCheckboxClickHandler = useCallback11(
     () => (e) => {
       e.stopPropagation();
     },
     []
   );
-  const getCheckboxChangeHandler = useCallback9(
+  const getCheckboxChangeHandler = useCallback11(
     (rowId, row) => (e) => {
       if (isRowSelectableCheck(rowId, row)) {
         onCheckboxChange(e, rowId);
@@ -3662,7 +3700,7 @@ function Component(props, apiRef) {
       });
     }
   }));
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     Box_default,
     {
       sx: {
@@ -3672,7 +3710,7 @@ function Component(props, apiRef) {
         flexDirection: "column"
       }
     },
-    (!!checkboxSelection || !!Toolbar) && /* @__PURE__ */ React23.createElement(
+    (!!checkboxSelection || !!Toolbar) && /* @__PURE__ */ React25.createElement(
       Stack_default,
       {
         direction: "row",
@@ -3682,10 +3720,10 @@ function Component(props, apiRef) {
         justifyContent: "space-between",
         alignItems: "center"
       },
-      !!checkboxSelection && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ React23.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(selectableRowCount), " items")), isTotalSelected && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectableRowCount), " items are selected."), /* @__PURE__ */ React23.createElement(Button_default, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel"))),
-      Toolbar && /* @__PURE__ */ React23.createElement(Toolbar, { ...toolbarProps || {} })
+      !!checkboxSelection && /* @__PURE__ */ React25.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ React25.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ React25.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React25.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ React25.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(selectableRowCount), " items")), isTotalSelected && /* @__PURE__ */ React25.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React25.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectableRowCount), " items are selected."), /* @__PURE__ */ React25.createElement(Button_default, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel"))),
+      Toolbar && /* @__PURE__ */ React25.createElement(Toolbar, { ...toolbarProps || {} })
     ),
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React25.createElement(
       Sheet_default,
       {
         variant: "outlined",
@@ -3706,14 +3744,14 @@ function Component(props, apiRef) {
         ref: parentRef,
         ...backgroundProps
       },
-      /* @__PURE__ */ React23.createElement(Table, { ...innerProps }, /* @__PURE__ */ React23.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ React23.createElement(
+      /* @__PURE__ */ React25.createElement(Table, { ...innerProps }, /* @__PURE__ */ React25.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ React25.createElement(
         "col",
         {
           style: {
             width: "40px"
           }
         }
-      ), columns.map((c) => /* @__PURE__ */ React23.createElement(
+      ), columns.map((c) => /* @__PURE__ */ React25.createElement(
         "col",
         {
           ref: c.tableColRef,
@@ -3722,7 +3760,7 @@ function Component(props, apiRef) {
             width: c.width
           }
         }
-      ))), /* @__PURE__ */ React23.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React23.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React23.createElement(
+      ))), /* @__PURE__ */ React25.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React25.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React25.createElement(
         "th",
         {
           rowSpan: processedColumnGroups.maxLevel + 2,
@@ -3732,7 +3770,7 @@ function Component(props, apiRef) {
             verticalAlign: "middle"
           }
         },
-        /* @__PURE__ */ React23.createElement(
+        /* @__PURE__ */ React25.createElement(
           RenderCheckbox,
           {
             onChange: onAllCheckboxChange,
@@ -3742,10 +3780,12 @@ function Component(props, apiRef) {
             ...checkboxProps
           }
         )
-      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ React23.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.map((group, groupIndex) => {
+      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.map((group, groupIndex) => {
         const nextGroup = levelGroups[groupIndex + 1];
         const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
-        return /* @__PURE__ */ React23.createElement(Fragment2, { key: group.groupId }, /* @__PURE__ */ React23.createElement(
+        const params = { groupId: group.groupId };
+        const computedHeaderClassName = group.headerClassName ? typeof group.headerClassName === "function" ? group.headerClassName(params) : group.headerClassName : void 0;
+        return /* @__PURE__ */ React25.createElement(Fragment2, { key: group.groupId }, /* @__PURE__ */ React25.createElement(
           "th",
           {
             colSpan: group.colspan,
@@ -3753,11 +3793,12 @@ function Component(props, apiRef) {
               textAlign: "center",
               fontWeight: "bold",
               verticalAlign: "middle"
-            }
+            },
+            className: computedHeaderClassName
           },
           group.headerName ?? group.groupId
-        ), emptyCells > 0 && Array.from({ length: emptyCells }).map((_2, i) => /* @__PURE__ */ React23.createElement("th", { key: `empty-between-${level}-${groupIndex}-${i}`, colSpan: 1 })));
-      }))), /* @__PURE__ */ React23.createElement("tr", null, !processedColumnGroups && checkboxSelection && /* @__PURE__ */ React23.createElement(
+        ), emptyCells > 0 && Array.from({ length: emptyCells }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-between-${level}-${groupIndex}-${i}`, colSpan: 1 })));
+      }))), /* @__PURE__ */ React25.createElement("tr", null, !processedColumnGroups && checkboxSelection && /* @__PURE__ */ React25.createElement(
         "th",
         {
           style: {
@@ -3765,7 +3806,7 @@ function Component(props, apiRef) {
             textAlign: "center"
           }
         },
-        /* @__PURE__ */ React23.createElement(
+        /* @__PURE__ */ React25.createElement(
           RenderCheckbox,
           {
             onChange: onAllCheckboxChange,
@@ -3777,7 +3818,7 @@ function Component(props, apiRef) {
         )
       ), columns.map((c, i) => (
         // @ts-ignore
-        /* @__PURE__ */ React23.createElement(
+        /* @__PURE__ */ React25.createElement(
           HeadCell2,
           {
             tableId,
@@ -3788,7 +3829,7 @@ function Component(props, apiRef) {
             ...c
           }
         )
-      )))), /* @__PURE__ */ React23.createElement(
+      )))), /* @__PURE__ */ React25.createElement(
         VirtualizedTableBody,
         {
           ref: tableBodyRef,
@@ -3798,7 +3839,7 @@ function Component(props, apiRef) {
           role: "rowgroup",
           "aria-label": "DataTableBody"
         },
-        !!loading && /* @__PURE__ */ React23.createElement(OverlayWrapper, null, /* @__PURE__ */ React23.createElement(
+        !!loading && /* @__PURE__ */ React25.createElement(OverlayWrapper, null, /* @__PURE__ */ React25.createElement(
           "td",
           {
             style: {
@@ -3807,7 +3848,7 @@ function Component(props, apiRef) {
               overflow: "visible"
             }
           },
-          /* @__PURE__ */ React23.createElement(
+          /* @__PURE__ */ React25.createElement(
             Box_default,
             {
               sx: {
@@ -3817,7 +3858,7 @@ function Component(props, apiRef) {
                 right: 0
               }
             },
-            /* @__PURE__ */ React23.createElement(LoadingOverlay, null)
+            /* @__PURE__ */ React25.createElement(LoadingOverlay, null)
           )
         )),
         virtualizedItems.map((virtualizedRow, index) => {
@@ -3825,7 +3866,7 @@ function Component(props, apiRef) {
           const row = dataInPage[rowIndex];
           const rowId = getId(row, rowIndex);
           const striped = stripe && (stripe === "even" && (rowIndex + 1) % 2 === 0 || stripe === "odd" && (rowIndex + 1) % 2 === 1);
-          return /* @__PURE__ */ React23.createElement(
+          return /* @__PURE__ */ React25.createElement(
             VirtualizedTableRow,
             {
               key: virtualizedRow.key,
@@ -3843,7 +3884,7 @@ function Component(props, apiRef) {
                 transform: `translateY(${virtualizedRow.start - index * virtualizedRow.size}px)`
               }
             },
-            checkboxSelection && /* @__PURE__ */ React23.createElement(
+            checkboxSelection && /* @__PURE__ */ React25.createElement(
               "th",
               {
                 scope: "row",
@@ -3851,7 +3892,7 @@ function Component(props, apiRef) {
                   textAlign: "center"
                 }
               },
-              /* @__PURE__ */ React23.createElement(
+              /* @__PURE__ */ React25.createElement(
                 RenderCheckbox,
                 {
                   onClick: getCheckboxClickHandler(),
@@ -3862,7 +3903,7 @@ function Component(props, apiRef) {
                 }
               )
             ),
-            /* @__PURE__ */ React23.createElement(
+            /* @__PURE__ */ React25.createElement(
               BodyRow2,
               {
                 tableId,
@@ -3875,9 +3916,9 @@ function Component(props, apiRef) {
             )
           );
         })
-      ), Footer && /* @__PURE__ */ React23.createElement(Footer, null))
+      ), Footer && /* @__PURE__ */ React25.createElement(Footer, null))
     ),
-    pagination && /* @__PURE__ */ React23.createElement(
+    pagination && /* @__PURE__ */ React25.createElement(
       Pagination_default,
       {
         pt: 2,
@@ -3894,12 +3935,12 @@ var DataTable = forwardRef7(Component);
 DataTable.displayName = "DataTable";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import React24, { forwardRef as forwardRef8, useCallback as useCallback10, useEffect as useEffect6, useImperativeHandle as useImperativeHandle3, useMemo as useMemo9, useRef as useRef5, useState as useState7 } from "react";
+import React26, { forwardRef as forwardRef8, useCallback as useCallback12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef7, useState as useState8 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
-import { styled as styled13, useThemeProps as useThemeProps5 } from "@mui/joy";
+import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
 import { FocusTrap as FocusTrap2, ClickAwayListener as ClickAwayListener2, Popper as Popper3 } from "@mui/base";
-var CalendarButton2 = styled13(IconButton_default, {
+var CalendarButton2 = styled14(IconButton_default, {
   name: "DateRangePicker",
   slot: "calendarButton"
 })(({ theme }) => ({
@@ -3909,13 +3950,13 @@ var CalendarButton2 = styled13(IconButton_default, {
     outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
   }
 }));
-var StyledPopper2 = styled13(Popper3, {
+var StyledPopper2 = styled14(Popper3, {
   name: "DateRangePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
-var CalendarSheet2 = styled13(Sheet_default, {
+var CalendarSheet2 = styled14(Sheet_default, {
   name: "DateRangePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -3925,7 +3966,7 @@ var CalendarSheet2 = styled13(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var DateRangePickerRoot = styled13("div", {
+var DateRangePickerRoot = styled14("div", {
   name: "DateRangePicker",
   slot: "root",
   overridesResolver: (props, styles) => styles.root
@@ -3995,9 +4036,9 @@ var parseDates = (str, format) => {
 var formatToPattern2 = (format) => {
   return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter5 = React24.forwardRef(function TextMaskAdapter6(props, ref) {
+var TextMaskAdapter5 = React26.forwardRef(function TextMaskAdapter6(props, ref) {
   const { onChange, format, ...other } = props;
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement(
     IMaskInput2,
     {
       ...other,
@@ -4055,23 +4096,23 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     readOnly,
     ...innerProps
   } = props;
-  const innerRef = useRef5(null);
-  const buttonRef = useRef5(null);
+  const innerRef = useRef7(null);
+  const buttonRef = useRef7(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
-    useCallback10((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    useCallback12((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [displayValue, setDisplayValue] = useState7(
+  const [displayValue, setDisplayValue] = useState8(
     () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
   );
-  const [anchorEl, setAnchorEl] = useState7(null);
+  const [anchorEl, setAnchorEl] = useState8(null);
   const open = Boolean(anchorEl);
-  const calendarValue = useMemo9(
+  const calendarValue = useMemo11(
     () => value ? parseDates(value, format) : void 0,
     [value, format]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (value) {
       try {
         const dates = parseDates(value, format);
@@ -4083,13 +4124,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       setDisplayValue("");
     }
   }, [displayFormat, value, format]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback10(
+  const handleChange = useCallback12(
     (event) => {
       const value2 = event.target.value;
       setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
@@ -4097,7 +4138,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [displayFormat, format, setValue]
   );
-  const handleDisplayInputChange = useCallback10(
+  const handleDisplayInputChange = useCallback12(
     (event) => {
       if (event.target.value === "") {
         handleChange({
@@ -4122,14 +4163,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [displayFormat, format, handleChange, props.name]
   );
-  const handleCalendarToggle = useCallback10(
+  const handleCalendarToggle = useCallback12(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleCalendarChange = useCallback10(
+  const handleCalendarChange = useCallback12(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
       const formattedValue = formatValueString2([date1, date2], format);
@@ -4143,7 +4184,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
   );
-  const handleInputMouseDown = useCallback10(
+  const handleInputMouseDown = useCallback12(
     (event) => {
       if (inputReadOnly) {
         event.preventDefault();
@@ -4152,7 +4193,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [inputReadOnly, buttonRef]
   );
-  return /* @__PURE__ */ React24.createElement(DateRangePickerRoot, null, /* @__PURE__ */ React24.createElement(FocusTrap2, { open: true }, /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement(DateRangePickerRoot, null, /* @__PURE__ */ React26.createElement(FocusTrap2, { open: true }, /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(
     Input_default,
     {
       ...innerProps,
@@ -4180,7 +4221,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       error,
       className,
       sx,
-      endDecorator: /* @__PURE__ */ React24.createElement(
+      endDecorator: /* @__PURE__ */ React26.createElement(
         CalendarButton2,
         {
           ref: buttonRef,
@@ -4192,13 +4233,13 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
           "aria-expanded": open,
           disabled
         },
-        /* @__PURE__ */ React24.createElement(CalendarTodayIcon2, null)
+        /* @__PURE__ */ React26.createElement(CalendarTodayIcon2, null)
       ),
       label,
       helperText,
       readOnly: readOnly || inputReadOnly
     }
-  ), open && /* @__PURE__ */ React24.createElement(ClickAwayListener2, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React24.createElement(
+  ), open && /* @__PURE__ */ React26.createElement(ClickAwayListener2, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React26.createElement(
     StyledPopper2,
     {
       id: "date-range-picker-popper",
@@ -4217,7 +4258,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React24.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(
       Calendar_default,
       {
         rangeSelection: true,
@@ -4228,14 +4269,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
         disableFuture,
         disablePast
       }
-    ), !hideClearButton && /* @__PURE__ */ React24.createElement(
+    ), !hideClearButton && /* @__PURE__ */ React26.createElement(
       DialogActions_default,
       {
         sx: {
           p: 1
         }
       },
-      /* @__PURE__ */ React24.createElement(
+      /* @__PURE__ */ React26.createElement(
         Button_default,
         {
           size,
@@ -4255,11 +4296,11 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
 DateRangePicker.displayName = "DateRangePicker";
 
 // src/components/Drawer/Drawer.tsx
-import React25 from "react";
-import { Drawer as JoyDrawer, styled as styled14, drawerClasses } from "@mui/joy";
+import React27 from "react";
+import { Drawer as JoyDrawer, styled as styled15, drawerClasses } from "@mui/joy";
 import { motion as motion22 } from "framer-motion";
 var MotionDrawer = motion22(JoyDrawer);
-var StyledDrawer = styled14(MotionDrawer)(({ theme, size = "md" }) => ({
+var StyledDrawer = styled15(MotionDrawer)(({ theme, size = "md" }) => ({
   "--Drawer-horizontalSize": {
     sm: "360px",
     md: "600px",
@@ -4273,15 +4314,15 @@ var StyledDrawer = styled14(MotionDrawer)(({ theme, size = "md" }) => ({
 }));
 var Drawer = (props) => {
   const { children, ...innerProps } = props;
-  return /* @__PURE__ */ React25.createElement(StyledDrawer, { ...innerProps }, children);
+  return /* @__PURE__ */ React27.createElement(StyledDrawer, { ...innerProps }, children);
 };
 Drawer.displayName = "Drawer";
 
 // src/components/DialogContent/DialogContent.tsx
-import { DialogContent as JoyDialogContent, styled as styled15 } from "@mui/joy";
+import { DialogContent as JoyDialogContent, styled as styled16 } from "@mui/joy";
 import { motion as motion23 } from "framer-motion";
 var MotionDialogContent = motion23(JoyDialogContent);
-var StyledDialogContent = styled15(MotionDialogContent)(({ theme }) => ({
+var StyledDialogContent = styled16(MotionDialogContent)(({ theme }) => ({
   padding: theme.spacing(0, 6, 5)
 }));
 var DialogContent = StyledDialogContent;
@@ -4291,10 +4332,10 @@ DialogContent.displayName = "DialogContent";
 var DialogContent_default = DialogContent;
 
 // src/components/DialogTitle/DialogTitle.tsx
-import { DialogTitle as JoyDialogTitle, styled as styled16 } from "@mui/joy";
+import { DialogTitle as JoyDialogTitle, styled as styled17 } from "@mui/joy";
 import { motion as motion24 } from "framer-motion";
 var MotionDialogTitle = motion24(JoyDialogTitle);
-var StyledDialogTitle = styled16(MotionDialogTitle)(({ theme }) => ({
+var StyledDialogTitle = styled17(MotionDialogTitle)(({ theme }) => ({
   padding: theme.spacing(4, 6)
 }));
 var DialogTitle = StyledDialogTitle;
@@ -4304,22 +4345,22 @@ DialogTitle.displayName = "DialogTitle";
 var DialogTitle_default = DialogTitle;
 
 // src/components/DialogFrame/DialogFrame.tsx
-import React27 from "react";
+import React29 from "react";
 
 // src/components/Modal/Modal.tsx
-import React26 from "react";
+import React28 from "react";
 import {
   Modal as JoyModal,
   ModalDialog as JoyModalDialog,
   ModalClose as JoyModalClose,
   ModalOverflow as JoyModalOverflow,
-  styled as styled17
+  styled as styled18
 } from "@mui/joy";
 import { motion as motion25 } from "framer-motion";
 var MotionModal = motion25(JoyModal);
 var Modal = MotionModal;
 Modal.displayName = "Modal";
-var StyledModalDialog = styled17(JoyModalDialog)({
+var StyledModalDialog = styled18(JoyModalDialog)({
   padding: 0
 });
 var ModalDialog = StyledModalDialog;
@@ -4330,37 +4371,37 @@ var ModalOverflow = MotionModalOverflow;
 ModalOverflow.displayName = "ModalOverflow";
 function ModalFrame(props) {
   const { title, children, titleStartDecorator, onClose, ...innerProps } = props;
-  return /* @__PURE__ */ React26.createElement(StyledModalDialog, { ...innerProps }, /* @__PURE__ */ React26.createElement(ModalClose, { onClick: onClose }), /* @__PURE__ */ React26.createElement(DialogTitle_default, null, titleStartDecorator, title), /* @__PURE__ */ React26.createElement(DialogContent_default, null, children));
+  return /* @__PURE__ */ React28.createElement(StyledModalDialog, { ...innerProps }, /* @__PURE__ */ React28.createElement(ModalClose, { onClick: onClose }), /* @__PURE__ */ React28.createElement(DialogTitle_default, null, titleStartDecorator, title), /* @__PURE__ */ React28.createElement(DialogContent_default, null, children));
 }
 ModalFrame.displayName = "ModalFrame";
 
 // src/components/DialogFrame/DialogFrame.tsx
-import { styled as styled18 } from "@mui/joy";
-var StyledDialogFrame = styled18(ModalDialog, {
+import { styled as styled19 } from "@mui/joy";
+var StyledDialogFrame = styled19(ModalDialog, {
   name: "Dialog",
   slot: "Root"
 })({
   padding: 0
 });
-var DialogFrame = React27.forwardRef((props, ref) => {
+var DialogFrame = React29.forwardRef((props, ref) => {
   const { title, children, actions, fullscreen, ...innerProps } = props;
-  return /* @__PURE__ */ React27.createElement(StyledDialogFrame, { layout: fullscreen ? "fullscreen" : "center", ref, ...innerProps }, /* @__PURE__ */ React27.createElement(DialogTitle_default, null, title), /* @__PURE__ */ React27.createElement(DialogContent_default, null, children), /* @__PURE__ */ React27.createElement(DialogActions_default, null, actions));
+  return /* @__PURE__ */ React29.createElement(StyledDialogFrame, { layout: fullscreen ? "fullscreen" : "center", ref, ...innerProps }, /* @__PURE__ */ React29.createElement(DialogTitle_default, null, title), /* @__PURE__ */ React29.createElement(DialogContent_default, null, children), /* @__PURE__ */ React29.createElement(DialogActions_default, null, actions));
 });
 DialogFrame.displayName = "DialogFrame";
 
 // src/components/Divider/Divider.tsx
-import React28 from "react";
+import React30 from "react";
 import { Divider as JoyDivider } from "@mui/joy";
 import { motion as motion26 } from "framer-motion";
 var MotionDivider = motion26(JoyDivider);
 var Divider = (props) => {
-  return /* @__PURE__ */ React28.createElement(MotionDivider, { ...props });
+  return /* @__PURE__ */ React30.createElement(MotionDivider, { ...props });
 };
 Divider.displayName = "Divider";
 
 // src/components/InsetDrawer/InsetDrawer.tsx
-import { Drawer as JoyDrawer2, styled as styled19, drawerClasses as drawerClasses2 } from "@mui/joy";
-var InsetDrawer = styled19(JoyDrawer2)(({ theme }) => ({
+import { Drawer as JoyDrawer2, styled as styled20, drawerClasses as drawerClasses2 } from "@mui/joy";
+var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
   [`& .${drawerClasses2.content}`]: {
     backgroundColor: "transparent",
     boxShadow: "none",
@@ -4378,7 +4419,7 @@ var InsetDrawer = styled19(JoyDrawer2)(({ theme }) => ({
 import { Grid } from "@mui/joy";
 
 // src/components/IconMenuButton/IconMenuButton.tsx
-import React29 from "react";
+import React31 from "react";
 import { MenuButton as JoyMenuButton2, IconButton as JoyIconButton2 } from "@mui/joy";
 function IconMenuButton(props) {
   const {
@@ -4392,7 +4433,7 @@ function IconMenuButton(props) {
     placement = "bottom"
   } = props;
   if (!items.length) {
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React31.createElement(
       JoyIconButton2,
       {
         component: props.buttonComponent ?? "button",
@@ -4406,7 +4447,7 @@ function IconMenuButton(props) {
       icon
     );
   }
-  return /* @__PURE__ */ React29.createElement(Dropdown_default, null, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React31.createElement(Dropdown_default, null, /* @__PURE__ */ React31.createElement(
     JoyMenuButton2,
     {
       slots: { root: JoyIconButton2 },
@@ -4423,19 +4464,19 @@ function IconMenuButton(props) {
       }
     },
     icon
-  ), /* @__PURE__ */ React29.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ React29.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
+  ), /* @__PURE__ */ React31.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ React31.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
 }
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
-import React30, { lazy, Suspense, useEffect as useEffect7, useState as useState8 } from "react";
+import React32, { lazy, Suspense, useEffect as useEffect8, useState as useState9 } from "react";
 import { Skeleton } from "@mui/joy";
 import { Link as Link2 } from "@mui/joy";
 import remarkGfm from "remark-gfm";
 var LazyReactMarkdown = lazy(() => import("react-markdown"));
 var Markdown = (props) => {
-  const [rehypeAccent2, setRehypeAccent] = useState8(null);
-  useEffect7(() => {
+  const [rehypeAccent2, setRehypeAccent] = useState9(null);
+  useEffect8(() => {
     const loadRehypeAccent = async () => {
       const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
       setRehypeAccent(() => module.rehypeAccent);
@@ -4457,12 +4498,12 @@ var Markdown = (props) => {
   if (!rehypeAccent2) {
     return null;
   }
-  return /* @__PURE__ */ React30.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React32.createElement(
     Suspense,
     {
-      fallback: fallback || /* @__PURE__ */ React30.createElement(Typography, null, /* @__PURE__ */ React30.createElement(Skeleton, null, content || ""))
+      fallback: fallback || /* @__PURE__ */ React32.createElement(Typography, null, /* @__PURE__ */ React32.createElement(Skeleton, null, content || ""))
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React32.createElement(
       LazyReactMarkdown,
       {
         ...markdownOptions,
@@ -4470,15 +4511,15 @@ var Markdown = (props) => {
         rehypePlugins: [[rehypeAccent2, { accentColor }]],
         remarkPlugins: [remarkGfm],
         components: {
-          h1: ({ children }) => /* @__PURE__ */ React30.createElement(Typography, { color, textColor, level: "h1" }, children),
-          h2: ({ children }) => /* @__PURE__ */ React30.createElement(Typography, { color, textColor, level: "h2" }, children),
-          h3: ({ children }) => /* @__PURE__ */ React30.createElement(Typography, { color, textColor, level: "h3" }, children),
-          h4: ({ children }) => /* @__PURE__ */ React30.createElement(Typography, { color, textColor, level: "h4" }, children),
-          p: ({ children, node }) => /* @__PURE__ */ React30.createElement(Typography, { color, textColor, level: defaultLevel, ...node?.properties }, children),
-          a: ({ children, href }) => /* @__PURE__ */ React30.createElement(Link2, { href, target: defaultLinkAction }, children),
-          hr: () => /* @__PURE__ */ React30.createElement(Divider, null),
-          b: ({ children }) => /* @__PURE__ */ React30.createElement(Typography, { fontWeight: boldFontWeight }, children),
-          strong: ({ children }) => /* @__PURE__ */ React30.createElement(Typography, { fontWeight: boldFontWeight }, children),
+          h1: ({ children }) => /* @__PURE__ */ React32.createElement(Typography, { color, textColor, level: "h1" }, children),
+          h2: ({ children }) => /* @__PURE__ */ React32.createElement(Typography, { color, textColor, level: "h2" }, children),
+          h3: ({ children }) => /* @__PURE__ */ React32.createElement(Typography, { color, textColor, level: "h3" }, children),
+          h4: ({ children }) => /* @__PURE__ */ React32.createElement(Typography, { color, textColor, level: "h4" }, children),
+          p: ({ children, node }) => /* @__PURE__ */ React32.createElement(Typography, { color, textColor, level: defaultLevel, ...node?.properties }, children),
+          a: ({ children, href }) => /* @__PURE__ */ React32.createElement(Link2, { href, target: defaultLinkAction }, children),
+          hr: () => /* @__PURE__ */ React32.createElement(Divider, null),
+          b: ({ children }) => /* @__PURE__ */ React32.createElement(Typography, { fontWeight: boldFontWeight }, children),
+          strong: ({ children }) => /* @__PURE__ */ React32.createElement(Typography, { fontWeight: boldFontWeight }, children),
           ...markdownOptions?.components
         }
       }
@@ -4488,7 +4529,7 @@ var Markdown = (props) => {
 Markdown.displayName = "Markdown";
 
 // src/components/MenuButton/MenuButton.tsx
-import React31 from "react";
+import React33 from "react";
 import { MenuButton as JoyMenuButton3, Button as JoyButton2 } from "@mui/joy";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 function MenuButton(props) {
@@ -4506,7 +4547,7 @@ function MenuButton(props) {
     placement = "bottom"
   } = props;
   if (!items.length) {
-    return /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React33.createElement(
       JoyButton2,
       {
         component: props.buttonComponent ?? "button",
@@ -4517,12 +4558,12 @@ function MenuButton(props) {
         loading,
         startDecorator,
         ...props.buttonComponentProps ?? {},
-        endDecorator: showIcon ? /* @__PURE__ */ React31.createElement(React31.Fragment, null, endDecorator, /* @__PURE__ */ React31.createElement(ExpandMoreIcon, null)) : /* @__PURE__ */ React31.createElement(React31.Fragment, null, endDecorator)
+        endDecorator: showIcon ? /* @__PURE__ */ React33.createElement(React33.Fragment, null, endDecorator, /* @__PURE__ */ React33.createElement(ExpandMoreIcon, null)) : /* @__PURE__ */ React33.createElement(React33.Fragment, null, endDecorator)
       },
       buttonText
     );
   }
-  return /* @__PURE__ */ React31.createElement(Dropdown_default, null, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(Dropdown_default, null, /* @__PURE__ */ React33.createElement(
     JoyMenuButton3,
     {
       component: props.buttonComponent ?? "button",
@@ -4533,25 +4574,25 @@ function MenuButton(props) {
       loading,
       startDecorator,
       ...props.buttonComponentProps ?? {},
-      endDecorator: showIcon ? /* @__PURE__ */ React31.createElement(React31.Fragment, null, endDecorator, /* @__PURE__ */ React31.createElement(ExpandMoreIcon, null)) : /* @__PURE__ */ React31.createElement(React31.Fragment, null, endDecorator)
+      endDecorator: showIcon ? /* @__PURE__ */ React33.createElement(React33.Fragment, null, endDecorator, /* @__PURE__ */ React33.createElement(ExpandMoreIcon, null)) : /* @__PURE__ */ React33.createElement(React33.Fragment, null, endDecorator)
     },
     buttonText
-  ), /* @__PURE__ */ React31.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ React31.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
+  ), /* @__PURE__ */ React33.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ React33.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
 }
 MenuButton.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-import React32, { forwardRef as forwardRef9, useCallback as useCallback11, useEffect as useEffect8, useImperativeHandle as useImperativeHandle4, useRef as useRef6, useState as useState9 } from "react";
+import React34, { forwardRef as forwardRef9, useCallback as useCallback13, useEffect as useEffect9, useImperativeHandle as useImperativeHandle4, useRef as useRef8, useState as useState10 } from "react";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
-import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
+import { styled as styled21, useThemeProps as useThemeProps6 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
-var StyledPopper3 = styled20(Popper4, {
+var StyledPopper3 = styled21(Popper4, {
   name: "MonthPicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
-var CalendarSheet3 = styled20(Sheet_default, {
+var CalendarSheet3 = styled21(Sheet_default, {
   name: "MonthPicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -4560,7 +4601,7 @@ var CalendarSheet3 = styled20(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var MonthPickerRoot = styled20("div", {
+var MonthPickerRoot = styled21("div", {
   name: "MonthPicker",
   slot: "root",
   overridesResolver: (props, styles) => styles.root
@@ -4623,14 +4664,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     locale,
     ...innerProps
   } = props;
-  const innerRef = useRef6(null);
-  const buttonRef = useRef6(null);
+  const innerRef = useRef8(null);
+  const buttonRef = useRef8(null);
   const [value, setValue, isControlled] = useControlledState(
     props.value,
     props.defaultValue || "",
-    useCallback11((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    useCallback13((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const getFormattedDisplayValue = useCallback11(
+  const getFormattedDisplayValue = useCallback13(
     (inputValue) => {
       if (!inputValue) return "";
       try {
@@ -4641,19 +4682,19 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [format, displayFormat, locale]
   );
-  const [displayValue, setDisplayValue] = useState9(() => getFormattedDisplayValue(value));
-  const [anchorEl, setAnchorEl] = useState9(null);
+  const [displayValue, setDisplayValue] = useState10(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = useState10(null);
   const open = Boolean(anchorEl);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
-  useEffect8(() => {
+  useEffect9(() => {
     setDisplayValue(getFormattedDisplayValue(value));
   }, [value, getFormattedDisplayValue]);
-  const handleChange = useCallback11(
+  const handleChange = useCallback13(
     (event) => {
       const newValue = event.target.value;
       setValue(newValue);
@@ -4663,21 +4704,21 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [setValue, getFormattedDisplayValue, isControlled]
   );
-  const handleCalendarToggle = useCallback11(
+  const handleCalendarToggle = useCallback13(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleInputMouseDown = useCallback11(
+  const handleInputMouseDown = useCallback13(
     (event) => {
       event.preventDefault();
       buttonRef.current?.focus();
     },
     [buttonRef]
   );
-  return /* @__PURE__ */ React32.createElement(MonthPickerRoot, null, /* @__PURE__ */ React32.createElement(FocusTrap3, { open: true }, /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React34.createElement(MonthPickerRoot, null, /* @__PURE__ */ React34.createElement(FocusTrap3, { open: true }, /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
     Input_default,
     {
       ...innerProps,
@@ -4707,7 +4748,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
         // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
         fontFamily: "monospace"
       },
-      endDecorator: /* @__PURE__ */ React32.createElement(
+      endDecorator: /* @__PURE__ */ React34.createElement(
         IconButton_default,
         {
           ref: buttonRef,
@@ -4719,12 +4760,12 @@ var MonthPicker = forwardRef9((inProps, ref) => {
           "aria-expanded": open,
           disabled
         },
-        /* @__PURE__ */ React32.createElement(CalendarTodayIcon3, null)
+        /* @__PURE__ */ React34.createElement(CalendarTodayIcon3, null)
       ),
       label,
       helperText
     }
-  ), open && /* @__PURE__ */ React32.createElement(ClickAwayListener3, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React32.createElement(
+  ), open && /* @__PURE__ */ React34.createElement(ClickAwayListener3, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React34.createElement(
     StyledPopper3,
     {
       id: "month-picker-popper",
@@ -4743,7 +4784,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React32.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React34.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React34.createElement(
       Calendar_default,
       {
         view: "month",
@@ -4764,14 +4805,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
         disablePast,
         locale
       }
-    ), /* @__PURE__ */ React32.createElement(
+    ), /* @__PURE__ */ React34.createElement(
       DialogActions_default,
       {
         sx: {
           p: 1
         }
       },
-      /* @__PURE__ */ React32.createElement(
+      /* @__PURE__ */ React34.createElement(
         Button_default,
         {
           size,
@@ -4794,18 +4835,18 @@ var MonthPicker = forwardRef9((inProps, ref) => {
 });
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React33, { forwardRef as forwardRef10, useCallback as useCallback12, useEffect as useEffect9, useImperativeHandle as useImperativeHandle5, useMemo as useMemo10, useRef as useRef7, useState as useState10 } from "react";
+import React35, { forwardRef as forwardRef10, useCallback as useCallback14, useEffect as useEffect10, useImperativeHandle as useImperativeHandle5, useMemo as useMemo12, useRef as useRef9, useState as useState11 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
-import { styled as styled21, useThemeProps as useThemeProps7 } from "@mui/joy";
+import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
 import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
-var StyledPopper4 = styled21(Popper5, {
+var StyledPopper4 = styled22(Popper5, {
   name: "MonthRangePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.tooltip
 }));
-var CalendarSheet4 = styled21(Sheet_default, {
+var CalendarSheet4 = styled22(Sheet_default, {
   name: "MonthRangePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -4815,7 +4856,7 @@ var CalendarSheet4 = styled21(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var MonthRangePickerRoot = styled21("div", {
+var MonthRangePickerRoot = styled22("div", {
   name: "MonthRangePicker",
   slot: "root",
   overridesResolver: (props, styles) => styles.root
@@ -4852,9 +4893,9 @@ var parseDates2 = (str) => {
 var formatToPattern3 = (format) => {
   return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "m").replace(/[^YMm\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter7 = React33.forwardRef(function TextMaskAdapter8(props, ref) {
+var TextMaskAdapter7 = React35.forwardRef(function TextMaskAdapter8(props, ref) {
   const { onChange, format, ...other } = props;
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React35.createElement(
     IMaskInput3,
     {
       ...other,
@@ -4902,35 +4943,35 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     size,
     ...innerProps
   } = props;
-  const innerRef = useRef7(null);
+  const innerRef = useRef9(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
-    useCallback12((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    useCallback14((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [anchorEl, setAnchorEl] = useState10(null);
+  const [anchorEl, setAnchorEl] = useState11(null);
   const open = Boolean(anchorEl);
-  const calendarValue = useMemo10(() => value ? parseDates2(value) : void 0, [value]);
-  useEffect9(() => {
+  const calendarValue = useMemo12(() => value ? parseDates2(value) : void 0, [value]);
+  useEffect10(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback12(
+  const handleChange = useCallback14(
     (event) => {
       setValue(event.target.value);
     },
     [setValue]
   );
-  const handleCalendarToggle = useCallback12(
+  const handleCalendarToggle = useCallback14(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleCalendarChange = useCallback12(
+  const handleCalendarChange = useCallback14(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
       setValue(formatValueString4([date1, date2], format));
@@ -4938,7 +4979,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     },
     [setValue, setAnchorEl, format]
   );
-  return /* @__PURE__ */ React33.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ React33.createElement(FocusTrap4, { open: true }, /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React35.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ React35.createElement(FocusTrap4, { open: true }, /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
     Input_default,
     {
       ...innerProps,
@@ -4960,7 +5001,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
         // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
         fontFamily: "monospace"
       },
-      endDecorator: /* @__PURE__ */ React33.createElement(
+      endDecorator: /* @__PURE__ */ React35.createElement(
         IconButton_default,
         {
           variant: "plain",
@@ -4970,12 +5011,12 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
           "aria-haspopup": "dialog",
           "aria-expanded": open
         },
-        /* @__PURE__ */ React33.createElement(CalendarTodayIcon4, null)
+        /* @__PURE__ */ React35.createElement(CalendarTodayIcon4, null)
       ),
       label,
       helperText
     }
-  ), open && /* @__PURE__ */ React33.createElement(ClickAwayListener4, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React33.createElement(
+  ), open && /* @__PURE__ */ React35.createElement(ClickAwayListener4, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React35.createElement(
     StyledPopper4,
     {
       id: "month-range-picker-popper",
@@ -4994,7 +5035,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React33.createElement(CalendarSheet4, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React35.createElement(CalendarSheet4, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React35.createElement(
       Calendar_default,
       {
         view: "month",
@@ -5007,14 +5048,14 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
         disableFuture,
         disablePast
       }
-    ), /* @__PURE__ */ React33.createElement(
+    ), /* @__PURE__ */ React35.createElement(
       DialogActions_default,
       {
         sx: {
           p: 1
         }
       },
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React35.createElement(
         Button_default,
         {
           size,
@@ -5033,16 +5074,16 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
 MonthRangePicker.displayName = "MonthRangePicker";
 
 // src/components/NavigationGroup/NavigationGroup.tsx
-import React34 from "react";
+import React36 from "react";
 import {
   Accordion as JoyAccordion2,
   AccordionSummary as JoyAccordionSummary2,
   AccordionDetails as JoyAccordionDetails2,
-  styled as styled22,
+  styled as styled23,
   accordionSummaryClasses,
   Stack as Stack2
 } from "@mui/joy";
-var AccordionSummary2 = styled22(JoyAccordionSummary2, {
+var AccordionSummary2 = styled23(JoyAccordionSummary2, {
   name: "NavigationGroup",
   slot: "Summary",
   shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level"
@@ -5055,7 +5096,7 @@ var AccordionSummary2 = styled22(JoyAccordionSummary2, {
     }
   }
 }));
-var AccordionDetails2 = styled22(JoyAccordionDetails2, {
+var AccordionDetails2 = styled23(JoyAccordionDetails2, {
   name: "NavigationGroup",
   slot: "Details"
 })(({ theme }) => ({
@@ -5064,19 +5105,19 @@ var AccordionDetails2 = styled22(JoyAccordionDetails2, {
 }));
 function NavigationGroup(props) {
   const { title, children, startDecorator, level, ...rest } = props;
-  return /* @__PURE__ */ React34.createElement(JoyAccordion2, { ...rest }, /* @__PURE__ */ React34.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ React34.createElement(Stack2, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ React34.createElement(AccordionDetails2, null, children));
+  return /* @__PURE__ */ React36.createElement(JoyAccordion2, { ...rest }, /* @__PURE__ */ React36.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ React36.createElement(Stack2, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ React36.createElement(AccordionDetails2, null, children));
 }
 
 // src/components/NavigationItem/NavigationItem.tsx
-import React35 from "react";
+import React37 from "react";
 import {
   ListItem as JoyListItem,
   ListItemButton as JoyListItemButton,
   ListItemDecorator as JoyListItemDecorator,
-  styled as styled23,
+  styled as styled24,
   listItemButtonClasses
 } from "@mui/joy";
-var ListItemButton = styled23(JoyListItemButton, {
+var ListItemButton = styled24(JoyListItemButton, {
   name: "NavigationItem",
   slot: "Button",
   shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level"
@@ -5103,7 +5144,7 @@ function NavigationItem(props) {
   const handleClick = () => {
     onClick?.(id);
   };
-  return /* @__PURE__ */ React35.createElement(JoyListItem, { ...rest }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(JoyListItem, { ...rest }, /* @__PURE__ */ React37.createElement(
     ListItemButton,
     {
       level,
@@ -5112,21 +5153,21 @@ function NavigationItem(props) {
       "aria-current": selected,
       onClick: handleClick
     },
-    startDecorator && /* @__PURE__ */ React35.createElement(JoyListItemDecorator, null, startDecorator),
+    startDecorator && /* @__PURE__ */ React37.createElement(JoyListItemDecorator, null, startDecorator),
     children
   ));
 }
 
 // src/components/Navigator/Navigator.tsx
-import React36 from "react";
+import React38 from "react";
 function Navigator(props) {
   const { items, level = 0, onSelect } = props;
   const handleItemClick = (id) => {
     onSelect?.(id);
   };
-  return /* @__PURE__ */ React36.createElement("div", null, items.map((item, index) => {
+  return /* @__PURE__ */ React38.createElement("div", null, items.map((item, index) => {
     if (item.type === "item") {
-      return /* @__PURE__ */ React36.createElement(
+      return /* @__PURE__ */ React38.createElement(
         NavigationItem,
         {
           key: item.id,
@@ -5139,7 +5180,7 @@ function Navigator(props) {
         item.title
       );
     } else if (item.type === "group") {
-      return /* @__PURE__ */ React36.createElement(
+      return /* @__PURE__ */ React38.createElement(
         NavigationGroup,
         {
           key: `${item.title}-${index}`,
@@ -5157,16 +5198,16 @@ function Navigator(props) {
 Navigator.displayName = "Navigator";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React37, { useCallback as useCallback13, useMemo as useMemo11, useState as useState11 } from "react";
+import React39, { useCallback as useCallback15, useMemo as useMemo13, useState as useState12 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
-import { styled as styled24, useThemeProps as useThemeProps8 } from "@mui/joy";
+import { styled as styled25, useThemeProps as useThemeProps8 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
 };
-var TextMaskAdapter9 = React37.forwardRef(function TextMaskAdapter10(props, ref) {
+var TextMaskAdapter9 = React39.forwardRef(function TextMaskAdapter10(props, ref) {
   const { onChange, min, max, ...innerProps } = props;
-  return /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React39.createElement(
     NumericFormat2,
     {
       ...innerProps,
@@ -5186,12 +5227,12 @@ var TextMaskAdapter9 = React37.forwardRef(function TextMaskAdapter10(props, ref)
     }
   );
 });
-var PercentageInputRoot = styled24(Input_default, {
+var PercentageInputRoot = styled25(Input_default, {
   name: "PercentageInput",
   slot: "Root",
   overridesResolver: (props, styles) => styles.root
 })({});
-var PercentageInput = React37.forwardRef(
+var PercentageInput = React39.forwardRef(
   function PercentageInput2(inProps, ref) {
     const props = useThemeProps8({ props: inProps, name: "PercentageInput" });
     const {
@@ -5214,18 +5255,18 @@ var PercentageInput = React37.forwardRef(
     const [_value, setValue] = useControlledState(
       props.value,
       props.defaultValue,
-      useCallback13((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
+      useCallback15((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = useState11(
+    const [internalError, setInternalError] = useState12(
       max && _value && _value > max || min && _value && _value < min
     );
-    const value = useMemo11(() => {
+    const value = useMemo13(() => {
       if (_value && useMinorUnit) {
         return _value / Math.pow(10, maxDecimalScale);
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
-    const handleChange = useCallback13(
+    const handleChange = useCallback15(
       (event) => {
         if (event.target.value === "") {
           setValue(void 0);
@@ -5242,7 +5283,7 @@ var PercentageInput = React37.forwardRef(
       },
       [setValue, useMinorUnit, maxDecimalScale, min, max]
     );
-    return /* @__PURE__ */ React37.createElement(
+    return /* @__PURE__ */ React39.createElement(
       PercentageInputRoot,
       {
         ...innerProps,
@@ -5283,30 +5324,30 @@ var RadioGroup = MotionRadioGroup;
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/RadioList/RadioList.tsx
-import React38 from "react";
+import React40 from "react";
 function RadioList(props) {
   const { items, ...innerProps } = props;
-  return /* @__PURE__ */ React38.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React38.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
+  return /* @__PURE__ */ React40.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React40.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
 }
 RadioList.displayName = "RadioList";
 
 // src/components/Stepper/Stepper.tsx
-import React39 from "react";
+import React41 from "react";
 import {
   Stepper as JoyStepper,
   Step as JoyStep,
   StepIndicator as JoyStepIndicator,
   stepClasses,
   stepIndicatorClasses,
-  styled as styled25
+  styled as styled26
 } from "@mui/joy";
 import CheckIcon from "@mui/icons-material/Check";
 import { motion as motion28 } from "framer-motion";
-var Step = styled25(JoyStep)({});
+var Step = styled26(JoyStep)({});
 Step.displayName = "Step";
-var StepIndicator = styled25(JoyStepIndicator)({});
+var StepIndicator = styled26(JoyStepIndicator)({});
 StepIndicator.displayName = "StepIndicator";
-var StyledStepper = styled25(JoyStepper)(({ theme }) => ({
+var StyledStepper = styled26(JoyStepper)(({ theme }) => ({
   "--StepIndicator-size": "24px",
   "--Step-gap": theme.spacing(2),
   "--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
@@ -5324,7 +5365,7 @@ function Stepper(props) {
     inactiveLineColor = "neutral.300",
     activeStep
   } = props;
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React41.createElement(
     MotionStepper,
     {
       sx: (theme) => ({
@@ -5358,16 +5399,16 @@ function Stepper(props) {
       const completed = activeStep > i + 1;
       const disabled = activeStep < i + 1;
       const hasContent = step.label || step.extraContent;
-      return /* @__PURE__ */ React39.createElement(
+      return /* @__PURE__ */ React41.createElement(
         Step,
         {
           key: `step-${i}`,
-          indicator: /* @__PURE__ */ React39.createElement(StepIndicator, { variant: "solid", color: "primary" }, completed ? /* @__PURE__ */ React39.createElement(CheckIcon, null) : step.indicatorContent),
+          indicator: /* @__PURE__ */ React41.createElement(StepIndicator, { variant: "solid", color: "primary" }, completed ? /* @__PURE__ */ React41.createElement(CheckIcon, null) : step.indicatorContent),
           active,
           completed,
           disabled
         },
-        hasContent && /* @__PURE__ */ React39.createElement(Stack_default, null, step.label && /* @__PURE__ */ React39.createElement(Typography_default, { level: "title-sm" }, step.label), step.extraContent && /* @__PURE__ */ React39.createElement(Typography_default, { level: "body-xs" }, step.extraContent))
+        hasContent && /* @__PURE__ */ React41.createElement(Stack_default, null, step.label && /* @__PURE__ */ React41.createElement(Typography_default, { level: "title-sm" }, step.label), step.extraContent && /* @__PURE__ */ React41.createElement(Typography_default, { level: "body-xs" }, step.extraContent))
       );
     })
   );
@@ -5375,11 +5416,11 @@ function Stepper(props) {
 Stepper.displayName = "Stepper";
 
 // src/components/Switch/Switch.tsx
-import React40 from "react";
-import { Switch as JoySwitch, styled as styled26, switchClasses } from "@mui/joy";
+import React42 from "react";
+import { Switch as JoySwitch, styled as styled27, switchClasses } from "@mui/joy";
 import { motion as motion29 } from "framer-motion";
 var MotionSwitch = motion29(JoySwitch);
-var StyledThumb = styled26(motion29.div)({
+var StyledThumb = styled27(motion29.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",
@@ -5397,14 +5438,14 @@ var StyledThumb = styled26(motion29.div)({
     right: "var(--Switch-thumbOffset)"
   }
 });
-var Thumb = (props) => /* @__PURE__ */ React40.createElement(StyledThumb, { ...props, layout: true, transition: spring });
+var Thumb = (props) => /* @__PURE__ */ React42.createElement(StyledThumb, { ...props, layout: true, transition: spring });
 var spring = {
   type: "spring",
   stiffness: 700,
   damping: 30
 };
 var Switch = (props) => {
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React42.createElement(
     MotionSwitch,
     {
       ...props,
@@ -5418,21 +5459,21 @@ var Switch = (props) => {
 Switch.displayName = "Switch";
 
 // src/components/Tabs/Tabs.tsx
-import React41, { forwardRef as forwardRef11 } from "react";
+import React43, { forwardRef as forwardRef11 } from "react";
 import {
   Tabs as JoyTabs,
   Tab as JoyTab,
   TabList as JoyTabList,
   TabPanel as JoyTabPanel,
-  styled as styled27,
+  styled as styled28,
   tabClasses
 } from "@mui/joy";
-var StyledTabs = styled27(JoyTabs)(({ theme }) => ({
+var StyledTabs = styled28(JoyTabs)(({ theme }) => ({
   backgroundColor: theme.palette.background.body
 }));
 var Tabs = StyledTabs;
 Tabs.displayName = "Tabs";
-var StyledTab = styled27(JoyTab)(({ theme }) => ({
+var StyledTab = styled28(JoyTab)(({ theme }) => ({
   gap: theme.spacing(2),
   [`&:not(.${tabClasses.selected})`]: {
     color: theme.palette.neutral[700]
@@ -5442,14 +5483,14 @@ var StyledTab = styled27(JoyTab)(({ theme }) => ({
   }
 }));
 var Tab = forwardRef11(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
-  return /* @__PURE__ */ React41.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
+  return /* @__PURE__ */ React43.createElement(StyledTab, { ...props, ref }, startDecorator, children, endDecorator);
 });
 Tab.displayName = "Tab";
 var TabList = JoyTabList;
 var TabPanel = JoyTabPanel;
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-import React42 from "react";
+import React44 from "react";
 import {
   CssBaseline,
   CssVarsProvider,
@@ -5705,13 +5746,13 @@ var defaultTheme = extendTheme({
 });
 function ThemeProvider(props) {
   const theme = props.theme || defaultTheme;
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React42.createElement(CssBaseline, null), props.children));
+  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React44.createElement(CssBaseline, null), props.children));
 }
 ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Uploader/Uploader.tsx
-import React43, { useCallback as useCallback14, useEffect as useEffect10, useMemo as useMemo12, useRef as useRef8, useState as useState12 } from "react";
-import { styled as styled28, Input as Input2 } from "@mui/joy";
+import React45, { useCallback as useCallback16, useEffect as useEffect11, useMemo as useMemo14, useRef as useRef10, useState as useState13 } from "react";
+import { styled as styled29, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
 import MuiClearIcon from "@mui/icons-material/ClearRounded";
@@ -5733,7 +5774,7 @@ var esmFiles = {
     "@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
   )
 };
-var VisuallyHiddenInput = styled28(Input2)({
+var VisuallyHiddenInput = styled29(Input2)({
   width: "1px",
   height: "1px",
   overflow: "hidden",
@@ -5742,18 +5783,18 @@ var VisuallyHiddenInput = styled28(Input2)({
   clipPath: "inset(50%)",
   position: "absolute"
 });
-var PreviewRoot = styled28(Stack_default, {
+var PreviewRoot = styled29(Stack_default, {
   name: "Uploader",
   slot: "PreviewRoot"
 })({});
-var UploadCard = styled28(Card, {
+var UploadCard = styled29(Card, {
   name: "Uploader",
   slot: "UploadCard"
 })(({ theme }) => ({
   padding: theme.spacing(2.5),
   border: `1px solid ${theme.palette.neutral.outlinedBorder}`
 }));
-var UploadFileIcon = styled28(MuiUploadFileIcon, {
+var UploadFileIcon = styled29(MuiUploadFileIcon, {
   name: "Uploader",
   slot: "UploadFileIcon"
 })(({ theme }) => ({
@@ -5761,7 +5802,7 @@ var UploadFileIcon = styled28(MuiUploadFileIcon, {
   width: "32px",
   height: "32px"
 }));
-var ClearIcon2 = styled28(MuiClearIcon, {
+var ClearIcon2 = styled29(MuiClearIcon, {
   name: "Uploader",
   slot: "ClearIcon"
 })(({ theme }) => ({
@@ -5787,40 +5828,50 @@ var getFileSize = (n) => {
 };
 var Preview = (props) => {
   const { files, uploaded, onDelete } = props;
-  return /* @__PURE__ */ React43.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React43.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React43.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React43.createElement(UploadFileIcon, null), /* @__PURE__ */ React43.createElement(Stack_default, { flex: "1" }, /* @__PURE__ */ React43.createElement(Typography_default, { level: "body-sm", textColor: "common.black" }, file.name), !!file.size && /* @__PURE__ */ React43.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React43.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React43.createElement(ClearIcon2, null))))));
+  return /* @__PURE__ */ React45.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React45.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React45.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React45.createElement(UploadFileIcon, null), /* @__PURE__ */ React45.createElement(Stack_default, { flex: "1" }, /* @__PURE__ */ React45.createElement(Typography_default, { level: "body-sm", textColor: "common.black" }, file.name), !!file.size && /* @__PURE__ */ React45.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ React45.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React45.createElement(ClearIcon2, null))))));
 };
-var UploaderRoot = styled28(Stack_default, {
+var UploaderRoot = styled29(Stack_default, {
   name: "Uploader",
   slot: "root"
 })(({ theme }) => ({
   gap: theme.spacing(2)
 }));
-var FileDropZone = styled28(Sheet_default, {
+var FileDropZone = styled29(Sheet_default, {
   name: "Uploader",
   slot: "dropZone",
-  shouldForwardProp: (prop) => prop !== "error"
-})(({ theme, state, error }) => ({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: theme.spacing(5),
-  gap: theme.spacing(4),
-  cursor: "pointer",
-  backgroundColor: theme.palette.background.surface,
-  border: error ? `1px solid ${theme.palette.danger.outlinedBorder}` : state === "idle" ? `1px solid ${theme.palette.neutral.outlinedBorder}` : `1px solid ${theme.palette.primary.outlinedBorder}`
-}));
-var UploaderIcon = styled28(MuiFileUploadIcon, {
+  shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
+})(
+  ({ theme, state, error, disabled }) => ({
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: theme.spacing(5),
+    gap: theme.spacing(4),
+    cursor: disabled ? "not-allowed" : "pointer",
+    backgroundColor: theme.palette.background.surface,
+    border: disabled ? `1px solid ${theme.palette.danger.outlinedDisabledBorder}` : error ? `1px solid ${theme.palette.danger.outlinedBorder}` : state === "idle" ? `1px solid ${theme.palette.neutral.outlinedBorder}` : `1px solid ${theme.palette.primary.outlinedBorder}`,
+    "&:hover": {
+      border: disabled ? `1px solid ${theme.palette.danger.outlinedDisabledBorder}` : error ? `1px solid ${theme.palette.danger.outlinedBorder}` : `1px solid ${theme.palette.primary.outlinedBorder}`
+    }
+  })
+);
+var UploaderIcon = styled29(MuiFileUploadIcon, {
   name: "Uploader",
   slot: "iconContainer",
-  shouldForwardProp: (prop) => prop !== "error"
-})(({ theme, state, error }) => ({
-  color: error ? `rgba(${theme.vars.palette.danger.mainChannel} / 0.6)` : state === "over" ? `rgba(${theme.palette.primary.mainChannel} / 0.6)` : theme.palette.neutral.softActiveBg,
-  width: "32px",
-  height: "32px"
-}));
-var Uploader = React43.memo(
+  shouldForwardProp: (prop) => prop !== "error" && prop !== "disabled"
+})(
+  ({ theme, state, error, disabled }) => ({
+    color: disabled ? theme.palette.primary.outlinedDisabledBorder : error ? `rgba(${theme.vars.palette.danger.mainChannel} / 0.6)` : state === "over" ? `rgba(${theme.palette.primary.mainChannel} / 0.6)` : theme.palette.neutral.softActiveBg,
+    width: "32px",
+    height: "32px",
+    ".MuiSheet-root:hover &": {
+      color: disabled ? theme.palette.primary.outlinedDisabledBorder : error ? `rgba(${theme.vars.palette.danger.mainChannel} / 0.6)` : `rgba(${theme.palette.primary.mainChannel} / 0.6)`
+    }
+  })
+);
+var Uploader = React45.memo(
   (props) => {
     const {
       accept,
@@ -5835,14 +5886,14 @@ var Uploader = React43.memo(
       disabled,
       onDelete
     } = props;
-    const dropZoneRef = useRef8(null);
-    const inputRef = useRef8(null);
-    const [errorText, setErrorText] = useState12();
-    const [files, setFiles] = useState12([]);
-    const [uploaded, setUploaded] = useState12(props.uploaded || []);
-    const [previewState, setPreviewState] = useState12("idle");
-    const accepts = useMemo12(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
-    const parsedAccepts = useMemo12(
+    const dropZoneRef = useRef10(null);
+    const inputRef = useRef10(null);
+    const [errorText, setErrorText] = useState13();
+    const [files, setFiles] = useState13([]);
+    const [uploaded, setUploaded] = useState13(props.uploaded || []);
+    const [previewState, setPreviewState] = useState13("idle");
+    const accepts = useMemo14(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
+    const parsedAccepts = useMemo14(
       () => accepts.flatMap((type) => {
         if (["image/*", "video/*", "audio/*"].includes(type)) {
           return ALL_EXTENSIONS_BY_TYPE[type];
@@ -5851,7 +5902,7 @@ var Uploader = React43.memo(
       }),
       [accepts]
     );
-    const helperText = useMemo12(() => {
+    const helperText = useMemo14(() => {
       const [allAcceptedTypes, acceptedTypes] = [
         accepts.filter((accept2) => ["image/*", "video/*", "audio/*"].includes(accept2)).map((accept2) => {
           const [type] = accept2.split("/");
@@ -5878,12 +5929,12 @@ var Uploader = React43.memo(
       }
       return helperTexts.join(", ");
     }, [accepts, maxFileTotalSize, maxCount]);
-    const error = useMemo12(() => !!errorText || props.error, [props.error, errorText]);
-    const showDropZone = useMemo12(
+    const error = useMemo14(() => !!errorText || props.error, [props.error, errorText]);
+    const showDropZone = useMemo14(
       () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
       [files, maxCount, uploaded]
     );
-    const addFiles = useCallback14(
+    const addFiles = useCallback16(
       (uploads) => {
         try {
           const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
@@ -5928,7 +5979,7 @@ var Uploader = React43.memo(
       },
       [files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
     );
-    useEffect10(() => {
+    useEffect11(() => {
       if (!dropZoneRef.current || disabled) {
         return;
       }
@@ -5966,7 +6017,7 @@ var Uploader = React43.memo(
       );
       return () => cleanup?.();
     }, [disabled, addFiles]);
-    useEffect10(() => {
+    useEffect11(() => {
       if (inputRef.current && minCount) {
         if (files.length < minCount) {
           inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
@@ -5975,14 +6026,14 @@ var Uploader = React43.memo(
         }
       }
     }, [inputRef, files, minCount]);
-    const handleFileChanged = useCallback14(
+    const handleFileChanged = useCallback16(
       (event) => {
         const files2 = Array.from(event.target.files || []);
         addFiles(files2);
       },
       [addFiles]
     );
-    const handleDeleteFile = useCallback14(
+    const handleDeleteFile = useCallback16(
       (deletedFile) => {
         if (deletedFile instanceof File) {
           setFiles((current) => {
@@ -6002,19 +6053,20 @@ var Uploader = React43.memo(
       },
       [name, onChange, onDelete]
     );
-    const handleUploaderButtonClick = useCallback14(() => {
+    const handleUploaderButtonClick = useCallback16(() => {
       inputRef.current?.click();
     }, []);
-    const uploader = /* @__PURE__ */ React43.createElement(
+    const uploader = /* @__PURE__ */ React45.createElement(
       FileDropZone,
       {
         state: previewState,
         error: !!(error || errorText),
+        disabled,
         ref: dropZoneRef,
         onClick: handleUploaderButtonClick
       },
-      /* @__PURE__ */ React43.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React43.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText) })),
-      /* @__PURE__ */ React43.createElement(
+      /* @__PURE__ */ React45.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React45.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText), disabled })),
+      /* @__PURE__ */ React45.createElement(
         VisuallyHiddenInput,
         {
           disabled,
@@ -6037,7 +6089,7 @@ var Uploader = React43.memo(
         }
       )
     );
-    return /* @__PURE__ */ React43.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React43.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ React43.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ React43.createElement(FormHelperText_default, null, /* @__PURE__ */ React43.createElement(Stack_default, null, errorText && /* @__PURE__ */ React43.createElement("div", null, errorText), /* @__PURE__ */ React43.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React43.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
+    return /* @__PURE__ */ React45.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React45.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ React45.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ React45.createElement(FormHelperText_default, null, /* @__PURE__ */ React45.createElement(Stack_default, null, errorText && /* @__PURE__ */ React45.createElement("div", null, errorText), /* @__PURE__ */ React45.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React45.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
   }
 );
 Uploader.displayName = "Uploader";
@@ -6201,7 +6253,7 @@ export {
   stepButtonClasses,
   stepClasses2 as stepClasses,
   stepperClasses,
-  styled29 as styled,
+  styled30 as styled,
   switchClasses2 as switchClasses,
   tabListClasses,
   tabPanelClasses,