@ceed/cds 1.40.3-next.6 → 1.40.3-next.8

package/dist/index.js

@@ -187,7 +187,7 @@ function Alert(inProps) {
 Alert.displayName = "Alert";
 
 // src/components/Autocomplete/Autocomplete.tsx
-import React5, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import React5, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3 } from "react";
 import {
   Autocomplete as JoyAutocomplete,
   AutocompleteOption as JoyAutocompleteOption,
@@ -295,7 +295,7 @@ function useControlledState(controlledValue, defaultValue, onChange) {
 }
 
 // src/libs/slot-props.ts
-import { useMemo } from "react";
+import { useCallback as useCallback2, useMemo, useRef as useRef2 } from "react";
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
@@ -313,16 +313,25 @@ function useSlotRef(slotProp, ref) {
   const isFunctionForm = typeof slotProp === "function";
   const slotRef = isFunctionForm ? void 0 : slotProp?.ref;
   const mergedRef = useMergedRef(slotRef, ref);
+  const latestSlotRef = useRef2(null);
+  const stableMergedRef = useCallback2(
+    (value) => {
+      assignRef(latestSlotRef.current, value);
+      assignRef(ref, value);
+    },
+    [ref]
+  );
   return useMemo(() => {
     if (isFunctionForm) {
       return ((ownerState) => {
         const resolved = slotProp(ownerState) ?? {};
-        const merged = mergeRefs(resolved.ref, ref);
-        return merged ? { ...resolved, ref: merged } : { ...resolved };
+        const resolvedRef = resolved.ref;
+        latestSlotRef.current = resolvedRef ?? null;
+        return resolvedRef || ref ? { ...resolved, ref: stableMergedRef } : { ...resolved };
       });
     }
     return mergedRef ? { ...slotProp, ref: mergedRef } : { ...slotProp };
-  }, [isFunctionForm, slotProp, mergedRef, ref]);
+  }, [isFunctionForm, slotProp, mergedRef, ref, stableMergedRef]);
 }
 
 // src/components/Autocomplete/Autocomplete.tsx
@@ -347,7 +356,7 @@ var AutocompleteListBox = React5.forwardRef((props, ref) => {
     ownerState: { loading, size: fontSize = "md" },
     ...innerProps
   } = props;
-  const parentRef = useRef2(null);
+  const parentRef = useRef3(null);
   const isGrouped = children[0].every((child) => child.hasOwnProperty("group"));
   const itemHeight = useMemo2(() => {
     const heights = itemHeightMap[fontSize ?? "md"];
@@ -464,7 +473,7 @@ function AutocompleteInner(props, ref) {
   const [rawValue, setValue] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback2(
+    useCallback3(
       (value2) => onChange?.({
         target: {
           value: value2,
@@ -507,7 +516,7 @@ function AutocompleteInner(props, ref) {
     }
     return optionMap.get(_value);
   }, [_value, optionMap, props.loading]);
-  const applySize = useCallback2(
+  const applySize = useCallback3(
     (node) => {
       return React5.isValidElement(node) && !props.loading ? React5.cloneElement(node, { ...{ size } }) : node;
     },
@@ -533,7 +542,7 @@ function AutocompleteInner(props, ref) {
     }),
     [options, props.slotProps, inputSlotProps]
   );
-  const handleChange = useCallback2(
+  const handleChange = useCallback3(
     (event, value2) => {
       const newValue = value2;
       const _value2 = Array.isArray(newValue) ? newValue.map((value3) => value3.value) : newValue?.value;
@@ -696,7 +705,7 @@ var MenuItem = JoyMenuItem;
 var Menu_default = Menu;
 
 // src/components/Dropdown/Dropdown.tsx
-import React8, { createContext, useCallback as useCallback3, useMemo as useMemo4, useState as useState2 } from "react";
+import React8, { createContext, useCallback as useCallback4, useMemo as useMemo4, useState as useState2 } from "react";
 import { Dropdown as JoyDropdown } from "@mui/joy";
 import { MenuButton } from "@mui/joy";
 import { useMenuButton } from "@mui/base/useMenuButton";
@@ -711,7 +720,7 @@ function Dropdown({ open: openProp, defaultOpen = false, onOpenChange, ...rest }
     }),
     []
   );
-  const handleOpenChange = useCallback3(
+  const handleOpenChange = useCallback4(
     (event, isOpen) => {
       if (nestedCount > 0 && !isOpen && event?.type === "blur") {
         return;
@@ -774,7 +783,7 @@ Button.displayName = "Button";
 var Button_default = Button;
 
 // src/components/Calendar/Calendar.tsx
-import React13, { Fragment, forwardRef as forwardRef4, useCallback as useCallback6, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef3, useState as useState5 } from "react";
+import React13, { Fragment, forwardRef as forwardRef4, useCallback as useCallback7, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef4, useState as useState5 } from "react";
 import { styled as styled5 } from "@mui/joy";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
@@ -868,7 +877,7 @@ var isSameMonth = (date1, date2) => {
 };
 
 // src/components/Calendar/hooks/use-calendar-props.ts
-import { useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo5, useState as useState3 } from "react";
 import { useThemeProps as useThemeProps3 } from "@mui/joy";
 var resolveView = (view, views) => {
   return views.includes(view) ? view : views[0];
@@ -898,13 +907,13 @@ var useCalendarProps = (inProps) => {
     maxDate.setHours(0, 0, 0, 0);
     return maxDate;
   }, [inProps.maxDate]);
-  const paginate = useCallback4(
+  const paginate = useCallback5(
     (newDirection) => {
       setPage([page + newDirection, newDirection]);
     },
     [page]
   );
-  const handleViewMonthChange = useCallback4(
+  const handleViewMonthChange = useCallback5(
     (newMonth) => {
       setViewMonth(newMonth);
       if (resolvedView === "month") {
@@ -957,7 +966,7 @@ var useCalendarProps = (inProps) => {
 };
 
 // src/components/Calendar/hooks/use-calendar.ts
-import { useCallback as useCallback5, useState as useState4 } from "react";
+import { useCallback as useCallback6, useState as useState4 } from "react";
 var useCalendar = (ownerState) => {
   const [localHoverDay, setLocalHoverDay] = useState4(null);
   const [localHoverMonth, setLocalHoverMonth] = useState4(null);
@@ -967,7 +976,7 @@ var useCalendar = (ownerState) => {
   const setHoverMonth = ownerState.onHoverMonthChange ?? setLocalHoverMonth;
   return {
     calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
-    onPrev: useCallback5(() => {
+    onPrev: useCallback6(() => {
       if (ownerState.view === "day") {
         const currentDate = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
         const currentYear = currentDate.getFullYear();
@@ -984,7 +993,7 @@ var useCalendar = (ownerState) => {
         ownerState.onMonthChange?.(prevYear);
       }
     }, [ownerState.onMonthChange, ownerState.viewMonth, ownerState.view]),
-    onNext: useCallback5(() => {
+    onNext: useCallback6(() => {
       if (ownerState.view === "day") {
         const currentDate = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
         const currentYear = currentDate.getFullYear();
@@ -1001,7 +1010,7 @@ var useCalendar = (ownerState) => {
         ownerState.onMonthChange?.(nextYear);
       }
     }, [ownerState.onMonthChange, ownerState.viewMonth, ownerState.view]),
-    getDayCellProps: useCallback5(
+    getDayCellProps: useCallback6(
       (day) => {
         const thisDay = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
         thisDay.setHours(0, 0, 0, 0);
@@ -1016,7 +1025,7 @@ var useCalendar = (ownerState) => {
       },
       [ownerState.rangeSelection, ownerState.value, ownerState.viewMonth, hoverDay]
     ),
-    getMonthCellProps: useCallback5(
+    getMonthCellProps: useCallback6(
       (monthIndex) => {
         const thisMonth = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
         thisMonth.setDate(1);
@@ -1033,7 +1042,7 @@ var useCalendar = (ownerState) => {
       },
       [ownerState.rangeSelection, ownerState.value, ownerState.viewMonth, hoverMonth]
     ),
-    getPickerDayProps: useCallback5(
+    getPickerDayProps: useCallback6(
       (day) => {
         const thisDay = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
         thisDay.setHours(0, 0, 0, 0);
@@ -1087,7 +1096,7 @@ var useCalendar = (ownerState) => {
         hoverDay
       ]
     ),
-    getPickerMonthProps: useCallback5(
+    getPickerMonthProps: useCallback6(
       (monthIndex) => {
         const thisMonth = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
         thisMonth.setDate(1);
@@ -1617,9 +1626,9 @@ var Calendar = forwardRef4((inProps, ref) => {
   } = props;
   const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
   const [isMonthViewAssistHintOpen, setIsMonthViewAssistHintOpen] = useState5(false);
-  const monthNavClickTimestampsRef = useRef3([]);
-  const monthViewAssistHintShownInSessionRef = useRef3(false);
-  const monthViewAssistHintTimeoutRef = useRef3(null);
+  const monthNavClickTimestampsRef = useRef4([]);
+  const monthViewAssistHintShownInSessionRef = useRef4(false);
+  const monthViewAssistHintTimeoutRef = useRef4(null);
   const [hoverDay, setHoverDay] = useState5(null);
   const [hoverMonth, setHoverMonth] = useState5(null);
   const resolvedNumberOfMonths = numberOfMonths ?? 1;
@@ -1640,14 +1649,14 @@ var Calendar = forwardRef4((inProps, ref) => {
       }
     };
   }, []);
-  const closeMonthViewAssistHint = useCallback6(() => {
+  const closeMonthViewAssistHint = useCallback7(() => {
     if (monthViewAssistHintTimeoutRef.current) {
       clearTimeout(monthViewAssistHintTimeoutRef.current);
       monthViewAssistHintTimeoutRef.current = null;
     }
     setIsMonthViewAssistHintOpen(false);
   }, []);
-  const showMonthViewAssistHint = useCallback6(() => {
+  const showMonthViewAssistHint = useCallback7(() => {
     const now = Date.now();
     if (monthViewAssistHintShownInSessionRef.current) return;
     if (now - lastMonthViewAssistHintShownAt < MONTH_VIEW_HINT_COOLDOWN_MS) return;
@@ -1662,7 +1671,7 @@ var Calendar = forwardRef4((inProps, ref) => {
       monthViewAssistHintTimeoutRef.current = null;
     }, MONTH_VIEW_HINT_DURATION_MS);
   }, []);
-  const trackFastMonthNavigation = useCallback6(() => {
+  const trackFastMonthNavigation = useCallback7(() => {
     if (!isHintEligible) return;
     const now = Date.now();
     monthNavClickTimestampsRef.current = [
@@ -1673,15 +1682,15 @@ var Calendar = forwardRef4((inProps, ref) => {
       showMonthViewAssistHint();
     }
   }, [isHintEligible, showMonthViewAssistHint]);
-  const handlePrevClick = useCallback6(() => {
+  const handlePrevClick = useCallback7(() => {
     onPrev();
     trackFastMonthNavigation();
   }, [onPrev, trackFastMonthNavigation]);
-  const handleNextClick = useCallback6(() => {
+  const handleNextClick = useCallback7(() => {
     onNext();
     trackFastMonthNavigation();
   }, [onNext, trackFastMonthNavigation]);
-  const handleSwitchViewClick = useCallback6(() => {
+  const handleSwitchViewClick = useCallback7(() => {
     closeMonthViewAssistHint();
     onViewChange?.();
   }, [closeMonthViewAssistHint, onViewChange]);
@@ -1851,11 +1860,11 @@ var Container = forwardRef5(function Container2(props, ref) {
 Container.displayName = "Container";
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-import React17, { useCallback as useCallback8, useMemo as useMemo7 } from "react";
+import React17, { useCallback as useCallback9, useMemo as useMemo7 } from "react";
 import { NumericFormat } from "react-number-format";
 
 // src/components/Input/Input.tsx
-import React16, { useCallback as useCallback7, useState as useState6 } from "react";
+import React16, { useCallback as useCallback8, useState as useState6 } from "react";
 import { Input as JoyInput } from "@mui/joy";
 import { motion as motion16 } from "framer-motion";
 import ClearIcon from "@mui/icons-material/Close";
@@ -1893,7 +1902,7 @@ var Input = React16.forwardRef((props, ref) => {
   const [value, setValue] = useControlledState(
     valueProp,
     defaultValueProp ?? null,
-    useCallback7(
+    useCallback8(
       (value2) => {
         onChange?.({
           /**
@@ -2183,7 +2192,7 @@ var CurrencyInput = React17.forwardRef(function CurrencyInput2(inProps, ref) {
   const [_value, setValue] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback8((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
+    useCallback9((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
   );
   const value = useMemo7(() => {
     if (_value && useMinorUnit) {
@@ -2198,7 +2207,7 @@ var CurrencyInput = React17.forwardRef(function CurrencyInput2(inProps, ref) {
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
   const isOverLimit = useMemo7(() => max != null && value != null && value > max, [max, value]);
-  const handleChange = useCallback8(
+  const handleChange = useCallback9(
     (event) => {
       if (event.target.value === "") {
         setValue(null);
@@ -2247,9 +2256,9 @@ var CurrencyInput_default = CurrencyInput;
 
 // src/components/DataTable/DataTable.tsx
 import React26, {
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useMemo as useMemo12,
-  useRef as useRef7,
+  useRef as useRef8,
   useId,
   forwardRef as forwardRef7,
   useImperativeHandle as useImperativeHandle2,
@@ -2482,8 +2491,11 @@ function computeAutoFitWidth(params) {
   if (!isNaN(maxPx) && maxPx > 0) finalWidth = Math.min(finalWidth, maxPx);
   return finalWidth;
 }
-function getHeaderCellId(tableId, columnId) {
-  return `${tableId}_header_${columnId}`.trim().replace(/\s+/g, "_");
+function getHeaderCellId(tableId, field) {
+  return `${tableId}_header_${sanitizeColumnId(field)}`;
+}
+function sanitizeColumnId(field) {
+  return String(field).trim().replace(/\s+/g, "_");
 }
 
 // src/components/DataTable/styled.tsx
@@ -2673,11 +2685,11 @@ var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PU
 
 // src/components/DataTable/components.tsx
 import React23, {
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState8,
   useLayoutEffect,
   useMemo as useMemo10,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useEffect as useEffect5,
   memo,
   createElement
@@ -2686,7 +2698,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
 import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // src/components/DatePicker/DatePicker.tsx
-import React19, { forwardRef as forwardRef6, useCallback as useCallback9, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState7 } from "react";
+import React19, { forwardRef as forwardRef6, useCallback as useCallback10, useEffect as useEffect4, useImperativeHandle, useRef as useRef5, useState as useState7 } from "react";
 import { IMaskInput, IMask } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import { styled as styled10, useThemeProps as useThemeProps5 } from "@mui/joy";
@@ -2903,12 +2915,12 @@ var DatePicker = forwardRef6((inProps, ref) => {
     presets,
     ...innerProps
   } = props;
-  const innerRef = useRef4(null);
-  const buttonRef = useRef4(null);
+  const innerRef = useRef5(null);
+  const buttonRef = useRef5(null);
   const [rawValue, setValue] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback9(
+    useCallback10(
       (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
       [props.name, onChange]
     )
@@ -2936,7 +2948,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     }
   }, [displayFormat, displayValue, format, locale, value]);
   useImperativeHandle(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback9(
+  const handleChange = useCallback10(
     (event) => {
       const value2 = event.target.value;
       setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat, locale) : value2);
@@ -2944,7 +2956,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [displayFormat, format, locale, setValue]
   );
-  const handleDisplayInputChange = useCallback9(
+  const handleDisplayInputChange = useCallback10(
     (event) => {
       if (event.target.value === "") {
         handleChange({
@@ -2969,7 +2981,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [displayFormat, format, handleChange, props.name]
   );
-  const handleCalendarToggle = useCallback9(
+  const handleCalendarToggle = useCallback10(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       setTimeout(() => {
@@ -2978,7 +2990,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleInputMouseDown = useCallback9(
+  const handleInputMouseDown = useCallback10(
     (event) => {
       if (inputReadOnly || isAlphabeticDisplay) {
         event.preventDefault();
@@ -2987,7 +2999,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [inputReadOnly, isAlphabeticDisplay, buttonRef]
   );
-  const handleInputClick = useCallback9(
+  const handleInputClick = useCallback10(
     (event) => {
       if (inputReadOnly && !readOnly) {
         handleCalendarToggle(event);
@@ -2995,7 +3007,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [inputReadOnly, readOnly, handleCalendarToggle]
   );
-  const handlePresetClick = useCallback9(
+  const handlePresetClick = useCallback10(
     (presetValue) => {
       handleChange({
         target: {
@@ -3007,7 +3019,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [handleChange, props.name]
   );
-  const isPresetDisabled = useCallback9(
+  const isPresetDisabled = useCallback10(
     (presetValue) => {
       try {
         const date = parseDate(presetValue, format);
@@ -3375,7 +3387,7 @@ var TextEllipsis = ({
   lineClamp,
   ...rest
 }) => {
-  const textRef = useRef5(null);
+  const textRef = useRef6(null);
   const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
     const element = textRef.current;
@@ -3392,7 +3404,7 @@ var TextEllipsis = ({
   return /* @__PURE__ */ React23.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ React23.createElement(EllipsisDiv, { ref: textRef, lineClamp, ...rest }, children));
 };
 var CellTextEllipsis = ({ children }) => {
-  const textRef = useRef5(null);
+  const textRef = useRef6(null);
   const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
     const element = textRef.current;
@@ -3442,20 +3454,19 @@ var HeadCell = (props) => {
     tableColRef,
     headerClassName,
     headerLineClamp,
-    onAutoFit,
-    columnId
+    onAutoFit
   } = props;
   const theme = useTheme();
   const ref = headerRef;
   const colRef = tableColRef;
-  const localRef = useRef5(null);
+  const localRef = useRef6(null);
   useLayoutEffect(() => {
     ref.current = localRef.current;
   }, [ref]);
   const [isHovered, setIsHovered] = useState8(false);
   const sortable = type === "actions" ? false : _sortable;
-  const headId = useMemo10(() => getHeaderCellId(tableId, columnId), [tableId, columnId]);
-  const isResizingRef = useRef5(false);
+  const headId = useMemo10(() => getHeaderCellId(tableId, field), [tableId, field]);
+  const isResizingRef = useRef6(false);
   const resizer = useMemo10(
     () => resizable ?? true ? Resizer(
       ref,
@@ -3463,9 +3474,9 @@ var HeadCell = (props) => {
       (isResizing) => {
         isResizingRef.current = isResizing;
       },
-      onAutoFit ? () => onAutoFit(columnId) : void 0
+      onAutoFit ? () => onAutoFit(field) : void 0
     ) : null,
-    [resizable, ref, colRef, onAutoFit, columnId]
+    [resizable, ref, colRef, onAutoFit, field]
   );
   const style = useMemo10(
     () => ({
@@ -3539,7 +3550,7 @@ var HeadCell = (props) => {
       ref: localRef,
       key: field,
       style,
-      onClick: useCallback10(
+      onClick: useCallback11(
         (e) => {
           if (isResizingRef.current) return;
           if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
@@ -3579,7 +3590,7 @@ var BodyCell = (props) => {
   } = props;
   const theme = useTheme();
   const [value, setValue] = useState8(row[field]);
-  const cellRef = useRef5(null);
+  const cellRef = useRef6(null);
   const params = useMemo10(
     () => ({
       row,
@@ -3735,7 +3746,7 @@ var BodyCell = (props) => {
     {
       ref: cellRef,
       key: field,
-      headers: getHeaderCellId(tableId, props.columnId),
+      headers: getHeaderCellId(tableId, field),
       sx: {
         textAlign: getTextAlign({ type }),
         verticalAlign: editMode ? "top" : "middle",
@@ -3800,10 +3811,10 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
 });
 
 // src/components/DataTable/hooks.ts
-import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useMemo as useMemo11, useCallback as useCallback11, useEffect as useEffect6, createRef } from "react";
-function useColumnWidths(columnsById) {
+import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useMemo as useMemo11, useCallback as useCallback12, useEffect as useEffect6, createRef } from "react";
+function useColumnWidths(columnsByField) {
   const [widths, setWidths] = useState9({});
-  const roRef = useRef6();
+  const roRef = useRef7();
   useLayoutEffect2(() => {
     if (roRef.current) roRef.current.disconnect();
     roRef.current = new ResizeObserver((entries) => {
@@ -3811,11 +3822,11 @@ function useColumnWidths(columnsById) {
         let changed = false;
         const next = { ...prev };
         entries.forEach((entry) => {
-          const columnId = entry.target.dataset.hdsColumnId;
+          const field = entry.target.dataset.field;
           const w = Math.round(entry.target.getBoundingClientRect().width);
           if (w === 0) return;
-          if (next[columnId] !== w) {
-            next[columnId] = w;
+          if (next[field] !== w) {
+            next[field] = w;
             changed = true;
           }
         });
@@ -3823,23 +3834,22 @@ function useColumnWidths(columnsById) {
       });
     });
     const measured = {};
-    Object.entries(columnsById).forEach(([columnId, def]) => {
+    Object.entries(columnsByField).forEach(([field, def]) => {
       const el = def.headerRef.current;
       if (el) {
-        el.dataset.hdsColumnId = columnId;
-        el.dataset.field = String(def.field);
+        el.dataset.field = field;
         const w = Math.round(el.getBoundingClientRect().width);
-        if (w > 0) measured[columnId] = w;
+        if (w > 0) measured[field] = w;
         roRef.current.observe(el);
       }
     });
     setWidths((prev) => {
       const keys = Object.keys(measured);
-      const same = keys.length === Object.keys(prev).length && keys.every((key) => prev[key] === measured[key]);
-      return same ? prev : measured;
+      const same = keys.every((key) => prev[key] === measured[key]);
+      return same ? prev : { ...prev, ...measured };
     });
     return () => roRef.current?.disconnect();
-  }, [columnsById]);
+  }, [columnsByField]);
   return widths;
 }
 function useDataTableRenderer({
@@ -3871,19 +3881,26 @@ function useDataTableRenderer({
       "You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
     );
   }
-  const onSelectionModelChangeRef = useRef6(onSelectionModelChange);
+  const duplicatedField = useMemo11(() => {
+    const ids = columnsProp.map((column) => sanitizeColumnId(column.field));
+    const index = ids.findIndex((id, i) => ids.indexOf(id) !== i);
+    return index === -1 ? void 0 : columnsProp[index].field;
+  }, [columnsProp]);
+  if (duplicatedField !== void 0)
+    throw new Error(`DataTable: column \`field\` must be unique. Duplicated: "${String(duplicatedField)}"`);
+  const onSelectionModelChangeRef = useRef7(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = useState9(null);
   const [selectionAnchor, setSelectionAnchor] = useState9(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
-    useCallback11((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
+    useCallback12((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
   );
   const [visibilityModel] = useControlledState(
     columnVisibilityModel,
     initialState?.columns?.columnVisibilityModel ?? {},
-    useCallback11(
+    useCallback12(
       (model) => onColumnVisibilityModelChange?.(model),
       [onColumnVisibilityModelChange]
     )
@@ -3892,16 +3909,9 @@ function useDataTableRenderer({
     if (!columnGroupingModel) return columnsProp;
     return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
   }, [columnsProp, columnGroupingModel]);
-  const visibleColumnIndexes = useMemo11(
-    () => reorderedColumns.reduce((acc, col, index) => {
-      if (visibilityModel[col.field] !== false) acc.push(index);
-      return acc;
-    }, []),
-    [reorderedColumns, visibilityModel]
-  );
   const visibleColumns = useMemo11(
-    () => visibleColumnIndexes.map((index) => reorderedColumns[index]),
-    [visibleColumnIndexes, reorderedColumns]
+    () => reorderedColumns.filter((col) => visibilityModel[col.field] !== false),
+    [reorderedColumns, visibilityModel]
   );
   const visibleFieldSet = useMemo11(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
   const tableMinWidth = useMemo11(() => {
@@ -3922,29 +3932,10 @@ function useDataTableRenderer({
     ),
     [reorderedColumns]
   );
-  const allColumnIds = useMemo11(() => {
-    const taken = new Set(reorderedColumns.map((column) => String(column.field)));
-    const assigned = /* @__PURE__ */ new Set();
-    return reorderedColumns.map((column) => {
-      const field = String(column.field);
-      if (!assigned.has(field)) {
-        assigned.add(field);
-        return field;
-      }
-      let n = 2;
-      while (taken.has(`${field}__${n}`)) n += 1;
-      taken.add(`${field}__${n}`);
-      return `${field}__${n}`;
-    });
-  }, [reorderedColumns]);
-  const columnIds = useMemo11(
-    () => visibleColumnIndexes.map((index) => allColumnIds[index]),
-    [visibleColumnIndexes, allColumnIds]
-  );
-  const visibleColumnsById = useMemo11(
+  const visibleColumnsByField = useMemo11(
     () => Object.fromEntries(
-      visibleColumns.map((column, index) => [
-        columnIds[index],
+      visibleColumns.map((column) => [
+        column.field,
         {
           ...column,
           headerRef: createRef(),
@@ -3952,9 +3943,9 @@ function useDataTableRenderer({
         }
       ])
     ),
-    [visibleColumns, columnIds]
+    [visibleColumns]
   );
-  const sortComparator = useCallback11(
+  const sortComparator = useCallback12(
     (rowA, rowB) => {
       for (const sort of sortModel) {
         const { field, sort: direction } = sort;
@@ -3993,7 +3984,7 @@ function useDataTableRenderer({
   );
   const [page, setPage] = useState9(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
-  const getId = useCallback11(
+  const getId = useCallback12(
     (row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
     [_getId, page, pageSize]
   );
@@ -4009,7 +4000,7 @@ function useDataTableRenderer({
     }),
     [dataInPage, isRowSelectable, getId]
   );
-  const handleRangeSelection = useCallback11(
+  const handleRangeSelection = useCallback12(
     (anchor, targetIndex) => {
       const startIndex = Math.min(anchor.rowIndex, targetIndex);
       const endIndex = Math.max(anchor.rowIndex, targetIndex);
@@ -4045,18 +4036,12 @@ function useDataTableRenderer({
     () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
     [_isTotalSelected, selectionModel, selectableRowCount]
   );
-  const columnWidths = useColumnWidths(visibleColumnsById);
-  const measuredWidthByField = useMemo11(
-    () => Object.fromEntries(
-      Object.entries(visibleColumnsById).map(([columnId, column]) => [column.field, columnWidths[columnId]])
-    ),
-    [visibleColumnsById, columnWidths]
-  );
-  const getWidth = useCallback11(
+  const columnWidths = useColumnWidths(visibleColumnsByField);
+  const getWidth = useCallback12(
     // 반환값은 pinned offset으로 더해지므로 반드시 숫자여야 한다. width/minWidth는 '500px' 같은 문자열.
-    (f) => measuredWidthByField[f] ?? parsePxValue(allColumnsByField[f]?.width) ?? // Column prop 으로 지정된 width
+    (f) => columnWidths[f] ?? parsePxValue(allColumnsByField[f]?.width) ?? // Column prop 으로 지정된 width
     parsePxValue(allColumnsByField[f]?.minWidth) ?? 0,
-    [measuredWidthByField, allColumnsByField]
+    [columnWidths, allColumnsByField]
   );
   const processedColumnGroups = useMemo11(() => {
     if (!columnGroupingModel) return null;
@@ -4076,16 +4061,14 @@ function useDataTableRenderer({
     const baseColumns = visibleColumns.length > 0 ? visibleColumns : reorderedColumns.length > 0 ? [] : inferredFields.map((key) => ({
       field: key
     }));
-    return baseColumns.map((column, index) => {
-      const columnId = columnIds[index] ?? String(column.field);
+    return baseColumns.map((column) => {
       const isLeftPinned = effectivePinnedLeft?.includes(column.field);
       const isRightPinned = effectivePinnedRight?.includes(column.field);
       const isPinned = isLeftPinned || isRightPinned;
       return {
         ...column,
-        columnId,
-        headerRef: visibleColumnsById[columnId]?.headerRef,
-        tableColRef: visibleColumnsById[columnId]?.tableColRef,
+        headerRef: visibleColumnsByField[column.field]?.headerRef,
+        tableColRef: visibleColumnsByField[column.field]?.tableColRef,
         isCellEditable: editMode && (typeof column.isCellEditable === "function" ? column.isCellEditable : column.isCellEditable ?? true),
         sort: sortModel.find((sort) => sort.field === column.field)?.sort,
         sortOrder: allColumnsByField[column.field]?.sortOrder || sortOrder,
@@ -4102,22 +4085,21 @@ function useDataTableRenderer({
     inferredFields,
     effectivePinnedLeft,
     effectivePinnedRight,
-    columnIds,
-    visibleColumnsById,
+    visibleColumnsByField,
     allColumnsByField,
     editMode,
     sortModel,
     sortOrder,
     getWidth
   ]);
-  const handlePageChange = useCallback11(
+  const handlePageChange = useCallback12(
     (newPage) => {
       setPage(newPage);
       onPaginationModelChange?.({ page: newPage, pageSize });
     },
     [onPaginationModelChange, pageSize]
   );
-  const handleSortChange = useCallback11(
+  const handleSortChange = useCallback12(
     (props) => {
       const { field, currentSort, multiple } = props;
       const column = allColumnsByField[field];
@@ -4155,16 +4137,16 @@ function useDataTableRenderer({
     onSelectionModelChangeRef.current?.([]);
     setSelectionAnchor(null);
   }, [page]);
-  const prevRowsRef = useRef6(_rows);
+  const prevRowsRef = useRef7(_rows);
   useEffect6(() => {
     if (prevRowsRef.current !== _rows) {
       setSelectionAnchor(null);
       prevRowsRef.current = _rows;
     }
   }, [_rows]);
-  const handleAutoFit = useCallback11(
-    (columnId) => {
-      const colDef = visibleColumnsById[columnId];
+  const handleAutoFit = useCallback12(
+    (field) => {
+      const colDef = visibleColumnsByField[field];
       if (!colDef?.headerRef.current) return;
       const columnType = "type" in colDef ? colDef.type : void 0;
       if (columnType === "actions") return;
@@ -4178,7 +4160,7 @@ function useDataTableRenderer({
       colDef.headerRef.current.style.width = widthPx;
       if (colDef.tableColRef.current) colDef.tableColRef.current.style.width = widthPx;
     },
-    [visibleColumnsById, dataInPage]
+    [visibleColumnsByField, dataInPage]
   );
   return {
     rowCount,
@@ -4194,8 +4176,8 @@ function useDataTableRenderer({
     handleAutoFit,
     isAllSelected,
     isTotalSelected,
-    isSelectedRow: useCallback11((model) => selectedModelSet.has(model), [selectedModelSet]),
-    isRowSelectable: useCallback11(
+    isSelectedRow: useCallback12((model) => selectedModelSet.has(model), [selectedModelSet]),
+    isRowSelectable: useCallback12(
       (rowId, row) => {
         if (!isRowSelectable) return true;
         return isRowSelectable({ row, id: rowId });
@@ -4203,13 +4185,13 @@ function useDataTableRenderer({
       [isRowSelectable]
     ),
     focusedRowId,
-    onRowFocus: useCallback11((rowId) => {
+    onRowFocus: useCallback12((rowId) => {
       setFocusedRowId(rowId);
     }, []),
-    onAllCheckboxChange: useCallback11(() => {
+    onAllCheckboxChange: useCallback12(() => {
       onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
     }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
-    onCheckboxChange: useCallback11(
+    onCheckboxChange: useCallback12(
       (event, selectedModel) => {
         const isShiftClick = "shiftKey" in event && event.shiftKey;
         const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
@@ -4243,7 +4225,7 @@ function useDataTableRenderer({
     columns,
     tableMinWidth,
     processedColumnGroups,
-    onTotalSelect: useCallback11(() => {
+    onTotalSelect: useCallback12(() => {
       const selectableRows = rows.filter((row, i) => {
         if (!isRowSelectable) return true;
         return isRowSelectable({ row, id: getId(row, i) });
@@ -4328,7 +4310,7 @@ function TableBody(props) {
 TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
-import React25, { useCallback as useCallback12, useEffect as useEffect7 } from "react";
+import React25, { useCallback as useCallback13, useEffect as useEffect7 } from "react";
 import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
 import NextIcon from "@mui/icons-material/ChevronRightRounded";
 import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
@@ -4398,7 +4380,7 @@ function Pagination(inProps) {
   const [paginationModel, setPaginationModel] = useControlledState(
     _paginationModel,
     defaultPaginationModel,
-    useCallback12(
+    useCallback13(
       (newPage) => {
         onPageChange(newPage.page);
       },
@@ -4616,8 +4598,8 @@ function Component(props, apiRef) {
     ...innerProps
   } = props;
   const tableId = useId();
-  const parentRef = useRef7(null);
-  const tableBodyRef = useRef7(null);
+  const parentRef = useRef8(null);
+  const tableBodyRef = useRef8(null);
   const {
     columns,
     processedColumnGroups,
@@ -4681,20 +4663,20 @@ function Component(props, apiRef) {
   const showNoRowsOverlay = !loading && rowCount === 0;
   const showFillerColumn = columns.length > 0 && columns.every((c) => !!c.width);
   const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0) + (showFillerColumn ? 1 : 0));
-  const getRowClickHandler = useCallback13(
+  const getRowClickHandler = useCallback14(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
       checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
     },
     [onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
   );
-  const getRowFocusHandler = useCallback13(
+  const getRowFocusHandler = useCallback14(
     (rowId) => () => {
       onRowFocus(rowId);
     },
     [onRowFocus]
   );
-  const getCheckboxClickHandler = useCallback13(
+  const getCheckboxClickHandler = useCallback14(
     (rowId, row) => (e) => {
       e.stopPropagation();
       if (isRowSelectableCheck(rowId, row)) {
@@ -4704,7 +4686,7 @@ function Component(props, apiRef) {
     },
     [onCheckboxChange, isRowSelectableCheck, onRowFocus]
   );
-  const handleTableKeyDown = useCallback13(
+  const handleTableKeyDown = useCallback14(
     (e) => {
       const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
       if (!supportedKeys.includes(e.key)) return;
@@ -4865,7 +4847,7 @@ function Component(props, apiRef) {
         "col",
         {
           ref: c.tableColRef,
-          key: c.columnId,
+          key: c.field.toString(),
           style: {
             width: c.width,
             minWidth: c.minWidth ?? "50px"
@@ -4915,13 +4897,13 @@ function Component(props, apiRef) {
           }
         },
         headerCheckboxElement
-      ), columns.map((c, i) => (
+      ), columns.map((c) => (
         // @ts-ignore
         /* @__PURE__ */ React26.createElement(
           HeadCell2,
           {
             tableId,
-            key: `${c.field.toString()}_${i}`,
+            key: c.field.toString(),
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,
@@ -5051,7 +5033,7 @@ var DataTable = forwardRef7(Component);
 DataTable.displayName = "DataTable";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import React27, { forwardRef as forwardRef8, useCallback as useCallback14, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo13, useRef as useRef8, useState as useState10 } from "react";
+import React27, { forwardRef as forwardRef8, useCallback as useCallback15, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo13, useRef as useRef9, useState as useState10 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
 import { styled as styled14, useThemeProps as useThemeProps7 } from "@mui/joy";
@@ -5256,12 +5238,12 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     numberOfMonths,
     ...innerProps
   } = props;
-  const innerRef = useRef8(null);
-  const buttonRef = useRef8(null);
+  const innerRef = useRef9(null);
+  const buttonRef = useRef9(null);
   const [rawValue, setValue] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback14(
+    useCallback15(
       (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
       [props.name, onChange]
     )
@@ -5295,7 +5277,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle3(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback14(
+  const handleChange = useCallback15(
     (event) => {
       const value2 = event.target.value;
       setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat, locale) : value2);
@@ -5303,7 +5285,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [displayFormat, format, locale, setValue]
   );
-  const handleDisplayInputChange = useCallback14(
+  const handleDisplayInputChange = useCallback15(
     (event) => {
       if (event.target.value === "") {
         handleChange({
@@ -5328,14 +5310,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [displayFormat, format, handleChange, props.name]
   );
-  const handleCalendarToggle = useCallback14(
+  const handleCalendarToggle = useCallback15(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleCalendarChange = useCallback14(
+  const handleCalendarChange = useCallback15(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
       const formattedValue = formatValueString2([date1, date2], format);
@@ -5349,7 +5331,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat, locale]
   );
-  const handleInputMouseDown = useCallback14(
+  const handleInputMouseDown = useCallback15(
     (event) => {
       if (inputReadOnly || isAlphabeticDisplay) {
         event.preventDefault();
@@ -5358,7 +5340,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [inputReadOnly, isAlphabeticDisplay, buttonRef]
   );
-  const handleInputClick = useCallback14(
+  const handleInputClick = useCallback15(
     (event) => {
       if (inputReadOnly && !readOnly) {
         handleCalendarToggle(event);
@@ -5366,7 +5348,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [inputReadOnly, readOnly, handleCalendarToggle]
   );
-  const handlePresetClick = useCallback14(
+  const handlePresetClick = useCallback15(
     (presetValue) => {
       if (props.value !== void 0) {
         onChange?.({ target: { name: props.name, value: presetValue } });
@@ -5379,7 +5361,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat, locale]
   );
-  const isPresetDisabled = useCallback14(
+  const isPresetDisabled = useCallback15(
     (presetValue) => {
       try {
         const dates = parseDates(presetValue, format);
@@ -5638,14 +5620,14 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
 }));
 
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
-import React32, { useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef9, useState as useState11 } from "react";
+import React32, { useCallback as useCallback16, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef10, useState as useState11 } from "react";
 import SearchIcon from "@mui/icons-material/Search";
 import { useThemeProps as useThemeProps8 } from "@mui/joy";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 var EMPTY_VALUE = [];
 function LabelWithTooltip(props) {
   const { label, size } = props;
-  const labelContentRef = useRef9(null);
+  const labelContentRef = useRef10(null);
   const [isOverflowing, setIsOverflowing] = useState11(false);
   const labelContent = /* @__PURE__ */ React32.createElement(
     "span",
@@ -5693,12 +5675,12 @@ function FilterableCheckboxGroup(inProps) {
   const [rawValue, setInternalValue] = useControlledState(
     value,
     value ?? EMPTY_VALUE,
-    useCallback15((newValue) => onChange?.(newValue ?? []), [onChange])
+    useCallback16((newValue) => onChange?.(newValue ?? []), [onChange])
   );
   const internalValue = rawValue ?? EMPTY_VALUE;
-  const parentRef = useRef9(null);
-  const isInitialSortRef = useRef9(false);
-  const prevOptionsRef = useRef9([...options]);
+  const parentRef = useRef10(null);
+  const isInitialSortRef = useRef10(false);
+  const prevOptionsRef = useRef10([...options]);
   const filteredOptions = useMemo14(() => {
     if (!searchTerm) return sortedOptions;
     return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -5750,10 +5732,10 @@ function FilterableCheckboxGroup(inProps) {
   useEffect9(() => {
     virtualizer.measure();
   }, [virtualizer, filteredOptions, size]);
-  const handleSearchChange = useCallback15((event) => {
+  const handleSearchChange = useCallback16((event) => {
     setSearchTerm(event.target.value);
   }, []);
-  const handleCheckboxChange = useCallback15(
+  const handleCheckboxChange = useCallback16(
     (optionValue) => (event) => {
       const checked = event.target.checked;
       const newValue = checked ? [...internalValue, optionValue] : internalValue.filter((v) => v !== optionValue);
@@ -5761,7 +5743,7 @@ function FilterableCheckboxGroup(inProps) {
     },
     [internalValue, setInternalValue]
   );
-  const handleSelectAll = useCallback15(
+  const handleSelectAll = useCallback16(
     (event) => {
       const checked = event.target.checked;
       const enabledOptions = filteredOptions.filter((option) => !option.disabled);
@@ -6119,7 +6101,7 @@ function MenuButton2(props) {
 MenuButton2.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-import React36, { forwardRef as forwardRef9, useCallback as useCallback16, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState13 } from "react";
+import React36, { forwardRef as forwardRef9, useCallback as useCallback17, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef11, useState as useState13 } from "react";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
 import { styled as styled21, useThemeProps as useThemeProps9 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
@@ -6202,18 +6184,18 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     locale,
     ...innerProps
   } = props;
-  const innerRef = useRef10(null);
-  const buttonRef = useRef10(null);
+  const innerRef = useRef11(null);
+  const buttonRef = useRef11(null);
   const [rawValue, setValue, isControlled] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback16(
+    useCallback17(
       (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
       [props.name, onChange]
     )
   );
   const value = rawValue ?? "";
-  const getFormattedDisplayValue = useCallback16(
+  const getFormattedDisplayValue = useCallback17(
     (inputValue) => {
       if (!inputValue) return "";
       try {
@@ -6236,7 +6218,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
   useEffect11(() => {
     setDisplayValue(getFormattedDisplayValue(value));
   }, [value, getFormattedDisplayValue]);
-  const handleChange = useCallback16(
+  const handleChange = useCallback17(
     (event) => {
       const newValue = event.target.value;
       setValue(newValue);
@@ -6246,14 +6228,14 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [setValue, getFormattedDisplayValue, isControlled]
   );
-  const handleCalendarToggle = useCallback16(
+  const handleCalendarToggle = useCallback17(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleInputMouseDown = useCallback16(
+  const handleInputMouseDown = useCallback17(
     (event) => {
       event.preventDefault();
       buttonRef.current?.focus();
@@ -6377,7 +6359,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
 });
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React37, { forwardRef as forwardRef10, useCallback as useCallback17, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo15, useRef as useRef11, useState as useState14 } from "react";
+import React37, { forwardRef as forwardRef10, useCallback as useCallback18, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo15, useRef as useRef12, useState as useState14 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled22, useThemeProps as useThemeProps10 } from "@mui/joy";
@@ -6492,12 +6474,12 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
   } = props;
   const displayFormat = displayFormatProp ?? format;
   const isAlphabeticDisplay = hasAlphabeticMonth3(displayFormat);
-  const innerRef = useRef11(null);
-  const buttonRef = useRef11(null);
+  const innerRef = useRef12(null);
+  const buttonRef = useRef12(null);
   const [rawValue, setValue] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback17(
+    useCallback18(
       (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
       [props.name, onChange]
     )
@@ -6527,7 +6509,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback17(
+  const handleChange = useCallback18(
     (event) => {
       setDisplayValue(
         event.target.value ? formatValueString4(parseDates2(event.target.value), displayFormat, locale) : ""
@@ -6536,7 +6518,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     },
     [displayFormat, locale, setValue]
   );
-  const handleInputMouseDown = useCallback17(
+  const handleInputMouseDown = useCallback18(
     (event) => {
       if (isAlphabeticDisplay) {
         event.preventDefault();
@@ -6545,14 +6527,14 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     },
     [isAlphabeticDisplay, buttonRef]
   );
-  const handleCalendarToggle = useCallback17(
+  const handleCalendarToggle = useCallback18(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleCalendarChange = useCallback17(
+  const handleCalendarChange = useCallback18(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
       const formattedValue = formatValueString4([date1, date2], format);
@@ -6791,7 +6773,7 @@ function Navigator(props) {
 Navigator.displayName = "Navigator";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React41, { useCallback as useCallback18, useMemo as useMemo16 } from "react";
+import React41, { useCallback as useCallback19, useMemo as useMemo16 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled25, useThemeProps as useThemeProps11 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -6848,7 +6830,7 @@ var PercentageInput = React41.forwardRef(
     const [_value, setValue] = useControlledState(
       props.value,
       props.defaultValue ?? null,
-      useCallback18((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
+      useCallback19((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
     const value = useMemo16(() => {
       if (_value && useMinorUnit) {
@@ -6860,7 +6842,7 @@ var PercentageInput = React41.forwardRef(
       () => value != null && (max != null && value > max || min != null && value < min),
       [max, min, value]
     );
-    const handleChange = useCallback18(
+    const handleChange = useCallback19(
       (event) => {
         if (event.target.value === "") {
           setValue(null);
@@ -7622,7 +7604,7 @@ function ThemeProvider(props) {
 ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Uploader/Uploader.tsx
-import React49, { useCallback as useCallback19, useEffect as useEffect13, useMemo as useMemo17, useRef as useRef12, useState as useState16 } from "react";
+import React49, { useCallback as useCallback20, useEffect as useEffect13, useMemo as useMemo17, useRef as useRef13, useState as useState16 } from "react";
 import { styled as styled31, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
@@ -7756,8 +7738,8 @@ var Uploader = React49.memo((props) => {
     error: errorProp,
     helperText: helperTextProp
   } = props;
-  const dropZoneRef = useRef12(null);
-  const inputRef = useRef12(null);
+  const dropZoneRef = useRef13(null);
+  const inputRef = useRef13(null);
   const [errorText, setErrorText] = useState16();
   const [files, setFiles] = useState16([]);
   const [uploaded, setUploaded] = useState16(props.uploaded || []);
@@ -7807,7 +7789,7 @@ var Uploader = React49.memo((props) => {
     () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
     [files, maxCount, uploaded]
   );
-  const addFiles = useCallback19(
+  const addFiles = useCallback20(
     (uploads) => {
       try {
         const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
@@ -7889,14 +7871,14 @@ var Uploader = React49.memo((props) => {
       }
     }
   }, [inputRef, files, minCount]);
-  const handleFileChanged = useCallback19(
+  const handleFileChanged = useCallback20(
     (event) => {
       const files2 = Array.from(event.target.files || []);
       addFiles(files2);
     },
     [addFiles]
   );
-  const handleDeleteFile = useCallback19(
+  const handleDeleteFile = useCallback20(
     (deletedFile) => {
       if (deletedFile instanceof File) {
         setFiles((current) => {
@@ -7916,7 +7898,7 @@ var Uploader = React49.memo((props) => {
     },
     [name, onChange, onDelete]
   );
-  const handleUploaderButtonClick = useCallback19(() => {
+  const handleUploaderButtonClick = useCallback20(() => {
     inputRef.current?.click();
   }, []);
   const uploader = /* @__PURE__ */ React49.createElement(