@ceed/cds 1.40.3-next.4 → 1.40.3

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 useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
 import {
   Autocomplete as JoyAutocomplete,
   AutocompleteOption as JoyAutocompleteOption,
@@ -294,37 +294,6 @@ function useControlledState(controlledValue, defaultValue, onChange) {
   return [displayValue, handleChange, isControlled];
 }
 
-// src/libs/slot-props.ts
-import { useMemo } from "react";
-function assignRef(ref, value) {
-  if (typeof ref === "function") ref(value);
-  else if (ref) ref.current = value;
-}
-function mergeRefs(...refs) {
-  const live = refs.filter((r) => r != null);
-  if (live.length === 0) return void 0;
-  if (live.length === 1) return live[0];
-  return (value) => live.forEach((r) => assignRef(r, value));
-}
-function useMergedRef(a, b) {
-  return useMemo(() => mergeRefs(a, b), [a, b]);
-}
-function useSlotRef(slotProp, ref) {
-  const isFunctionForm = typeof slotProp === "function";
-  const slotRef = isFunctionForm ? void 0 : slotProp?.ref;
-  const mergedRef = useMergedRef(slotRef, ref);
-  return useMemo(() => {
-    if (isFunctionForm) {
-      return ((ownerState) => {
-        const resolved = slotProp(ownerState) ?? {};
-        const merged = mergeRefs(resolved.ref, ref);
-        return merged ? { ...resolved, ref: merged } : { ...resolved };
-      });
-    }
-    return mergedRef ? { ...slotProp, ref: mergedRef } : { ...slotProp };
-  }, [isFunctionForm, slotProp, mergedRef, ref]);
-}
-
 // src/components/Autocomplete/Autocomplete.tsx
 var AutocompletePopper = styled3(Popper, {
   name: "Autocomplete",
@@ -349,11 +318,11 @@ var AutocompleteListBox = React5.forwardRef((props, ref) => {
   } = props;
   const parentRef = useRef2(null);
   const isGrouped = children[0].every((child) => child.hasOwnProperty("group"));
-  const itemHeight = useMemo2(() => {
+  const itemHeight = useMemo(() => {
     const heights = itemHeightMap[fontSize ?? "md"];
     return hasSecondaryText ? heights.secondary : heights.default;
   }, [fontSize, hasSecondaryText]);
-  const renderTargets = useMemo2(() => {
+  const renderTargets = useMemo(() => {
     if (loading) {
       return [children[1]];
     }
@@ -445,7 +414,7 @@ var autocompleteFilterOptions = createFilterOptions({
   }
 });
 var getOptionLabel = (option) => `${option.label ?? ""}`;
-function AutocompleteInner(props, ref) {
+function Autocomplete(props) {
   const {
     label,
     error,
@@ -475,7 +444,7 @@ function AutocompleteInner(props, ref) {
     )
   );
   const _value = rawValue ?? (props.multiple ? EMPTY_MULTIPLE_VALUE : "");
-  const options = useMemo2(
+  const options = useMemo(
     () => props.options.map((option) => {
       if (typeof option !== "object") {
         return {
@@ -487,14 +456,14 @@ function AutocompleteInner(props, ref) {
     }),
     [props.options]
   );
-  const optionMap = useMemo2(() => {
+  const optionMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     options.forEach((option) => {
       map.set(option.value, option);
     });
     return map;
   }, [options]);
-  const value = useMemo2(() => {
+  const value = useMemo(() => {
     if (props.loading) {
       return {
         value: "",
@@ -513,25 +482,23 @@ function AutocompleteInner(props, ref) {
     },
     [size, props.loading]
   );
-  const startDecorator = useMemo2(
+  const startDecorator = useMemo(
     () => applySize(value?.startDecorator || props.startDecorator),
     [value, applySize, props.startDecorator]
   );
-  const endDecorator = useMemo2(
+  const endDecorator = useMemo(
     () => applySize(value?.endDecorator || props.endDecorator),
     [value, applySize, props.endDecorator]
   );
-  const inputSlotProps = useSlotRef(props.slotProps?.input, ref);
-  const slotProps = useMemo2(
+  const slotProps = useMemo(
     () => ({
       ...props.slotProps,
       listbox: {
         ...props.slotProps?.listbox,
         hasSecondaryText: options.some((opt) => opt.secondaryText)
-      },
-      input: inputSlotProps
+      }
     }),
-    [options, props.slotProps, inputSlotProps]
+    [options, props.slotProps]
   );
   const handleChange = useCallback2(
     (event, value2) => {
@@ -565,9 +532,9 @@ function AutocompleteInner(props, ref) {
       endDecorator,
       getOptionLabel,
       renderTags: (tags, getTagProps) => tags.map((tag, index) => {
-        const { onClick, key, ...rest } = getTagProps({ index });
+        const { onClick, ...rest } = getTagProps({ index });
         return applySize(
-          /* @__PURE__ */ React5.createElement(Chip_default, { key, color: "primary", ...rest }, /* @__PURE__ */ React5.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2, py: 0.5 }, tag.value, applySize(
+          /* @__PURE__ */ React5.createElement(Chip_default, { color: "primary", ...rest }, /* @__PURE__ */ React5.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2, py: 0.5 }, tag.value, applySize(
             /* @__PURE__ */ React5.createElement(AutocompleteTagDelete, { color: "primary", variant: "soft", onClick }, /* @__PURE__ */ React5.createElement(CloseIcon, null))
           )))
         );
@@ -577,29 +544,26 @@ function AutocompleteInner(props, ref) {
       },
       slotProps,
       filterOptions: autocompleteFilterOptions,
-      renderOption: (props2, option) => {
-        const { key, ...optionProps } = props2;
-        return /* @__PURE__ */ React5.createElement(JoyAutocompleteOption, { key, ...optionProps }, option.startDecorator && /* @__PURE__ */ React5.createElement(
-          ListItemDecorator,
-          {
-            sx: (theme) => ({
-              marginInlineEnd: `var(--Input-gap, ${theme.spacing(1)})`
-            })
-          },
-          applySize(option.startDecorator)
-        ), option.secondaryText ? /* @__PURE__ */ React5.createElement(ListItemContent, { sx: { gap: 0.5 } }, /* @__PURE__ */ React5.createElement(Typography2, { level: "inherit" }, applySize(option.label)), /* @__PURE__ */ React5.createElement(Typography2, { level: secondaryTextLevelMap[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : (
-          // TODO: haulla에서 사용할 때, label을 ReactNode로 넘기면 에러가 발생함....
-          applySize(option.label)
-        ), option.endDecorator && /* @__PURE__ */ React5.createElement(
-          ListItemDecorator,
-          {
-            sx: (theme) => ({
-              marginInlineStart: `var(--Input-gap, ${theme.spacing(1)})`
-            })
-          },
-          applySize(option.endDecorator)
-        ));
-      },
+      renderOption: (props2, option) => /* @__PURE__ */ React5.createElement(JoyAutocompleteOption, { ...props2 }, option.startDecorator && /* @__PURE__ */ React5.createElement(
+        ListItemDecorator,
+        {
+          sx: (theme) => ({
+            marginInlineEnd: `var(--Input-gap, ${theme.spacing(1)})`
+          })
+        },
+        applySize(option.startDecorator)
+      ), option.secondaryText ? /* @__PURE__ */ React5.createElement(ListItemContent, { sx: { gap: 0.5 } }, /* @__PURE__ */ React5.createElement(Typography2, { level: "inherit" }, applySize(option.label)), /* @__PURE__ */ React5.createElement(Typography2, { level: secondaryTextLevelMap[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : (
+        // TODO: haulla에서 사용할 때, label을 ReactNode로 넘기면 에러가 발생함....
+        applySize(option.label)
+      ), option.endDecorator && /* @__PURE__ */ React5.createElement(
+        ListItemDecorator,
+        {
+          sx: (theme) => ({
+            marginInlineStart: `var(--Input-gap, ${theme.spacing(1)})`
+          })
+        },
+        applySize(option.endDecorator)
+      )),
       renderGroup: (params) => params
     }
   );
@@ -619,14 +583,13 @@ function AutocompleteInner(props, ref) {
     helperText && /* @__PURE__ */ React5.createElement(FormHelperText_default, null, helperText)
   );
 }
-var Autocomplete = React5.forwardRef(AutocompleteInner);
 Autocomplete.displayName = "Autocomplete";
 
 // src/components/Autocomplete/index.ts
 var Autocomplete_default = Autocomplete;
 
 // src/components/Avatar/Avatar.tsx
-import React6, { forwardRef as forwardRef2, useMemo as useMemo3 } from "react";
+import React6, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
 import { Avatar as JoyAvatar, AvatarGroup, styled as styled4, useThemeProps as useThemeProps2 } from "@mui/joy";
 var StyledAvatar = styled4(JoyAvatar, {
   name: "Avatar",
@@ -654,7 +617,7 @@ var Avatar = forwardRef2(function Avatar2(inProps, ref) {
     name: "Avatar"
   });
   const { children, getInitial = defaultGetInitial, ...inheritProps } = props;
-  const calcChildren = useMemo3(() => {
+  const calcChildren = useMemo2(() => {
     if (typeof children === "string") {
       return getInitial?.(children) ?? "";
     }
@@ -696,7 +659,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 useCallback3, useMemo as useMemo3, useState as useState2 } from "react";
 import { Dropdown as JoyDropdown } from "@mui/joy";
 import { MenuButton } from "@mui/joy";
 import { useMenuButton } from "@mui/base/useMenuButton";
@@ -704,7 +667,7 @@ var DropdownNestedRegistryContext = createContext(null);
 function Dropdown({ open: openProp, defaultOpen = false, onOpenChange, ...rest }) {
   const [nestedCount, setNestedCount] = useState2(0);
   const [open, setOpen] = useControlledState(openProp, defaultOpen);
-  const registry = useMemo4(
+  const registry = useMemo3(
     () => ({
       register: () => setNestedCount((c) => c + 1),
       unregister: () => setNestedCount((c) => Math.max(0, c - 1))
@@ -774,7 +737,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 useCallback6, useEffect as useEffect3, useMemo as useMemo5, useRef as useRef3, 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 +831,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 useCallback4, useMemo as useMemo4, useState as useState3 } from "react";
 import { useThemeProps as useThemeProps3 } from "@mui/joy";
 var resolveView = (view, views) => {
   return views.includes(view) ? view : views[0];
@@ -888,12 +851,12 @@ var useCalendarProps = (inProps) => {
   });
   const [[page, direction], setPage] = useState3([0, 0]);
   const resolvedView = inProps.view ?? uncontrolledView;
-  const resolvedMinDate = useMemo5(() => {
+  const resolvedMinDate = useMemo4(() => {
     const minDate = inProps.minDate || /* @__PURE__ */ new Date(0);
     minDate.setHours(0, 0, 0, 0);
     return minDate;
   }, [inProps.minDate]);
-  const resolvedMaxDate = useMemo5(() => {
+  const resolvedMaxDate = useMemo4(() => {
     const maxDate = inProps.maxDate || /* @__PURE__ */ new Date(864e13);
     maxDate.setHours(0, 0, 0, 0);
     return maxDate;
@@ -952,7 +915,7 @@ var useCalendarProps = (inProps) => {
     },
     name: "Calendar"
   });
-  const ownerState = useMemo5(() => ({ ...props, viewMonth, direction }), [props, viewMonth, direction]);
+  const ownerState = useMemo4(() => ({ ...props, viewMonth, direction }), [props, viewMonth, direction]);
   return [props, ownerState];
 };
 
@@ -1384,8 +1347,8 @@ var swipePower = (offset, velocity) => {
 var PickerDays = (props) => {
   const { ownerState } = props;
   const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
-  const calendarDates = useMemo6(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
-  const weekdayNames = useMemo6(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+  const calendarDates = useMemo5(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+  const weekdayNames = useMemo5(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
   return /* @__PURE__ */ React13.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ React13.createElement(AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ React13.createElement(
     CalendarViewTable,
     {
@@ -1469,8 +1432,8 @@ var PickerMonths = (props) => {
 };
 var PlainPickerDays = ({ ownerState }) => {
   const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
-  const calendarDates = useMemo6(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
-  const weekdayNames = useMemo6(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+  const calendarDates = useMemo5(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+  const weekdayNames = useMemo5(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
   return /* @__PURE__ */ React13.createElement(StaticCalendarViewTable, null, /* @__PURE__ */ React13.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React13.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React13.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React13.createElement("th", null, /* @__PURE__ */ React13.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React13.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))), /* @__PURE__ */ React13.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React13.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React13.createElement("tr", null, weekDates.map(
     (date, i) => date ? /* @__PURE__ */ React13.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React13.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React13.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React13.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React13.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React13.createElement("td", null), i < 6 && /* @__PURE__ */ React13.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
   )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React13.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React13.createElement("td", { colSpan: 13, style: { height: 4 } }))))));
@@ -1849,7 +1812,7 @@ 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 useCallback8, useMemo as useMemo6 } from "react";
 import { NumericFormat } from "react-number-format";
 
 // src/components/Input/Input.tsx
@@ -2183,19 +2146,19 @@ var CurrencyInput = React17.forwardRef(function CurrencyInput2(inProps, ref) {
     props.defaultValue ?? null,
     useCallback8((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
   );
-  const value = useMemo7(() => {
+  const value = useMemo6(() => {
     if (_value && useMinorUnit) {
       return _value / Math.pow(10, decimalScale);
     }
     return _value;
   }, [_value, useMinorUnit, decimalScale]);
-  const max = useMemo7(() => {
+  const max = useMemo6(() => {
     if (props.max && useMinorUnit) {
       return props.max / Math.pow(10, decimalScale);
     }
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
-  const isOverLimit = useMemo7(() => max != null && value != null && value > max, [max, value]);
+  const isOverLimit = useMemo6(() => max != null && value != null && value > max, [max, value]);
   const handleChange = useCallback8(
     (event) => {
       if (event.target.value === "") {
@@ -2246,7 +2209,7 @@ var CurrencyInput_default = CurrencyInput;
 // src/components/DataTable/DataTable.tsx
 import React26, {
   useCallback as useCallback13,
-  useMemo as useMemo12,
+  useMemo as useMemo11,
   useRef as useRef7,
   useId,
   forwardRef as forwardRef7,
@@ -2480,9 +2443,6 @@ function computeAutoFitWidth(params) {
   if (!isNaN(maxPx) && maxPx > 0) finalWidth = Math.min(finalWidth, maxPx);
   return finalWidth;
 }
-function getHeaderCellId(tableId, columnId) {
-  return `${tableId}_header_${columnId}`.trim();
-}
 
 // src/components/DataTable/styled.tsx
 import React18 from "react";
@@ -2674,7 +2634,7 @@ import React23, {
   useRef as useRef5,
   useState as useState8,
   useLayoutEffect,
-  useMemo as useMemo10,
+  useMemo as useMemo9,
   useCallback as useCallback10,
   useEffect as useEffect5,
   memo,
@@ -3158,7 +3118,7 @@ import React20 from "react";
 import { Textarea as JoyTextarea } from "@mui/joy";
 import { motion as motion19 } from "framer-motion";
 var MotionTextarea = motion19(JoyTextarea);
-var TextareaBase = (props) => {
+var Textarea = (props) => {
   const {
     label,
     error,
@@ -3202,17 +3162,13 @@ var TextareaBase = (props) => {
     helperText && /* @__PURE__ */ React20.createElement(FormHelperText_default, null, helperText)
   );
 };
-var Textarea = React20.forwardRef((props, ref) => {
-  const textareaSlotProps = useSlotRef(props.slotProps?.textarea, ref);
-  return /* @__PURE__ */ React20.createElement(TextareaBase, { ...props, slotProps: { ...props.slotProps, textarea: textareaSlotProps } });
-});
 Textarea.displayName = "Textarea";
 
 // src/components/Textarea/index.ts
 var Textarea_default = Textarea;
 
 // src/components/Select/Select.tsx
-import React21, { useMemo as useMemo9 } from "react";
+import React21, { useMemo as useMemo8 } from "react";
 import {
   Select as JoySelect,
   Option as JoyOption,
@@ -3228,7 +3184,7 @@ var secondaryTextLevelMap2 = {
   lg: "body-md"
 };
 Option.displayName = "Option";
-function SelectInner(props, ref) {
+function Select(props) {
   const {
     label,
     helperText,
@@ -3254,7 +3210,7 @@ function SelectInner(props, ref) {
     formHelperText: formHelperTextProps,
     ...joySlotProps
   } = slotProps ?? {};
-  const options = useMemo9(
+  const options = useMemo8(
     () => props.options.map((option) => {
       if (option.hasOwnProperty("value") && option.hasOwnProperty("label")) {
         return option;
@@ -3279,14 +3235,13 @@ function SelectInner(props, ref) {
     };
     onChange?.(newEvent, newValue);
   };
-  const optionMap = useMemo9(() => {
+  const optionMap = useMemo8(() => {
     const map = /* @__PURE__ */ new Map();
     options.forEach((option) => {
       map.set(option.value, option);
     });
     return map;
   }, [options]);
-  const buttonSlotProps = useSlotRef(joySlotProps.button, ref);
   const select = /* @__PURE__ */ React21.createElement(
     JoySelect,
     {
@@ -3295,7 +3250,7 @@ function SelectInner(props, ref) {
       disabled,
       size,
       color: error ? "danger" : color,
-      slotProps: { ...joySlotProps, button: buttonSlotProps },
+      slotProps: joySlotProps,
       onChange: handleChange,
       renderValue: (selected) => {
         if (!selected) return null;
@@ -3325,7 +3280,6 @@ function SelectInner(props, ref) {
     helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default, { ...formHelperTextProps }, helperText)
   );
 }
-var Select = React21.forwardRef(SelectInner);
 Select.displayName = "Select";
 
 // src/components/Select/index.ts
@@ -3440,8 +3394,7 @@ var HeadCell = (props) => {
     tableColRef,
     headerClassName,
     headerLineClamp,
-    onAutoFit,
-    columnId
+    onAutoFit
   } = props;
   const theme = useTheme();
   const ref = headerRef;
@@ -3452,20 +3405,23 @@ var HeadCell = (props) => {
   }, [ref]);
   const [isHovered, setIsHovered] = useState8(false);
   const sortable = type === "actions" ? false : _sortable;
-  const headId = useMemo10(() => getHeaderCellId(tableId, columnId ?? field), [tableId, columnId, field]);
+  const headId = useMemo9(
+    () => `${tableId}_header_${headerName ?? field}`.trim(),
+    [tableId, headerName, field]
+  );
   const isResizingRef = useRef5(false);
-  const resizer = useMemo10(
+  const resizer = useMemo9(
     () => resizable ?? true ? Resizer(
       ref,
       colRef,
       (isResizing) => {
         isResizingRef.current = isResizing;
       },
-      onAutoFit ? () => onAutoFit(columnId ?? String(field)) : void 0
+      onAutoFit ? () => onAutoFit(field) : void 0
     ) : null,
-    [resizable, ref, colRef, onAutoFit, columnId, field]
+    [resizable, ref, colRef, onAutoFit, field]
   );
-  const style = useMemo10(
+  const style = useMemo9(
     () => ({
       width,
       minWidth: minWidth ?? "50px",
@@ -3483,7 +3439,7 @@ var HeadCell = (props) => {
   );
   const textAlign = getTextAlign(props);
   const initialSort = sortOrder[0];
-  const sortIcon = useMemo10(() => {
+  const sortIcon = useMemo9(() => {
     const isSorted = !!sort;
     const isVisible = sortable && (isSorted || isHovered);
     return /* @__PURE__ */ React23.createElement(AnimatePresence2, { mode: "wait" }, isVisible && /* @__PURE__ */ React23.createElement(
@@ -3514,17 +3470,17 @@ var HeadCell = (props) => {
       }
     ));
   }, [headId, initialSort, sort, sortable, isHovered]);
-  const infoSign = useMemo10(
+  const infoSign = useMemo9(
     () => description ? /* @__PURE__ */ React23.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null,
     [description]
   );
-  const params = useMemo10(
+  const params = useMemo9(
     () => ({
       field
     }),
     [field]
   );
-  const computedHeaderClassName = useMemo10(
+  const computedHeaderClassName = useMemo9(
     () => (typeof headerClassName === "function" ? headerClassName(params) : headerClassName) || void 0,
     [headerClassName, params]
   );
@@ -3578,7 +3534,7 @@ var BodyCell = (props) => {
   const theme = useTheme();
   const [value, setValue] = useState8(row[field]);
   const cellRef = useRef5(null);
-  const params = useMemo10(
+  const params = useMemo9(
     () => ({
       row,
       value,
@@ -3587,20 +3543,20 @@ var BodyCell = (props) => {
     }),
     [row, rowId, value, field]
   );
-  const editMode = useMemo10(
+  const editMode = useMemo9(
     () => !!(props.editMode && (typeof isCellEditable === "function" ? isCellEditable(params) : isCellEditable ?? true)),
     [props.editMode, isCellEditable, params]
   );
   const propsComponentProps = "componentProps" in props ? props.componentProps : null;
   const hasComponentProps = "componentProps" in props;
-  const componentProps = useMemo10(
+  const componentProps = useMemo9(
     () => ({
       ...hasComponentProps && (typeof propsComponentProps === "function" ? propsComponentProps(params) : propsComponentProps || {}),
       size: "sm"
     }),
     [hasComponentProps, propsComponentProps, params]
   );
-  const editModeComponentProps = useMemo10(
+  const editModeComponentProps = useMemo9(
     () => ({
       ...componentProps,
       onChange: (e) => {
@@ -3662,9 +3618,9 @@ var BodyCell = (props) => {
     }),
     [params, row, field, value, componentProps, type, onCellEditStop, onCellEditStart]
   );
-  const MemoizedRenderEditCell = useMemo10(() => renderEditCell ? memo(renderEditCell) : null, [renderEditCell]);
-  const MemoizedRenderCell = useMemo10(() => renderCell ? memo(renderCell) : null, [renderCell]);
-  const EditModeComponent = useMemo10(() => {
+  const MemoizedRenderEditCell = useMemo9(() => renderEditCell ? memo(renderEditCell) : null, [renderEditCell]);
+  const MemoizedRenderCell = useMemo9(() => renderCell ? memo(renderCell) : null, [renderCell]);
+  const EditModeComponent = useMemo9(() => {
     if (MemoizedRenderEditCell) {
       return createElement(MemoizedRenderEditCell, params);
     }
@@ -3699,7 +3655,7 @@ var BodyCell = (props) => {
     }[type || "text"];
   }, [value, editModeComponentProps, type, MemoizedRenderEditCell, params]);
   const linkComponentFromProps = props.component;
-  const ReadModeComponent = useMemo10(() => {
+  const ReadModeComponent = useMemo9(() => {
     if (MemoizedRenderCell) {
       return createElement(MemoizedRenderCell, params);
     }
@@ -3713,15 +3669,15 @@ var BodyCell = (props) => {
     return typedComponent || innerText;
   }, [value, MemoizedRenderCell, params, type, componentProps, linkComponentFromProps]);
   const getActions = props.getActions;
-  const CellComponent = useMemo10(() => {
+  const CellComponent = useMemo9(() => {
     if (type === "actions") {
       return /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", gap: 1, justifyContent: "center", alignItems: "center" }, getActions?.(params));
     }
     return editMode && EditModeComponent ? EditModeComponent : ReadModeComponent;
   }, [type, getActions, params, editMode, EditModeComponent, ReadModeComponent]);
-  const showTooltip = useMemo10(() => noWrap && type === "longText", [noWrap, type]);
+  const showTooltip = useMemo9(() => noWrap && type === "longText", [noWrap, type]);
   const isBoundary = props.isLastStartPinnedColumn || props.isLastEndPinnedColumn;
-  const computedCellClassName = useMemo10(
+  const computedCellClassName = useMemo9(
     () => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
     [cellClassName, params]
   );
@@ -3733,7 +3689,7 @@ var BodyCell = (props) => {
     {
       ref: cellRef,
       key: field,
-      headers: getHeaderCellId(tableId, props.columnId ?? field),
+      headers: `${tableId}_header_${props.headerName ?? field}`,
       sx: {
         textAlign: getTextAlign({ type }),
         verticalAlign: editMode ? "top" : "middle",
@@ -3745,7 +3701,7 @@ var BodyCell = (props) => {
       },
       className: [isLastStartPinnedColumn && "is-last-left", isLastEndPinnedColumn && "is-last-right", computedCellClassName].filter(Boolean).join(" ") || ""
     },
-    useMemo10(
+    useMemo9(
       () => showTooltip ? /* @__PURE__ */ React23.createElement(CellTextEllipsis, null, CellComponent) : CellComponent,
       [CellComponent, showTooltip]
     )
@@ -3798,46 +3754,36 @@ 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 useRef6, useMemo as useMemo10, useCallback as useCallback11, useEffect as useEffect6, createRef } from "react";
+function useColumnWidths(columnsByField) {
   const [widths, setWidths] = useState9({});
   const roRef = useRef6();
   useLayoutEffect2(() => {
     if (roRef.current) roRef.current.disconnect();
     roRef.current = new ResizeObserver((entries) => {
+      let changed = false;
       setWidths((prev) => {
-        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;
           }
         });
         return changed ? next : prev;
       });
     });
-    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);
-        const w = Math.round(el.getBoundingClientRect().width);
-        if (w > 0) measured[columnId] = w;
+        el.dataset.field = field;
         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;
-    });
     return () => roRef.current?.disconnect();
-  }, [columnsById]);
+  }, [columnsByField]);
   return widths;
 }
 function useDataTableRenderer({
@@ -3886,23 +3832,16 @@ function useDataTableRenderer({
       [onColumnVisibilityModelChange]
     )
   );
-  const reorderedColumns = useMemo11(() => {
+  const reorderedColumns = useMemo10(() => {
     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;
-    }, []),
+  const visibleColumns = useMemo10(
+    () => reorderedColumns.filter((col) => visibilityModel[col.field] !== false),
     [reorderedColumns, visibilityModel]
   );
-  const visibleColumns = useMemo11(
-    () => visibleColumnIndexes.map((index) => reorderedColumns[index]),
-    [visibleColumnIndexes, reorderedColumns]
-  );
-  const visibleFieldSet = useMemo11(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
-  const tableMinWidth = useMemo11(() => {
+  const visibleFieldSet = useMemo10(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
+  const tableMinWidth = useMemo10(() => {
     const DEFAULT_MIN = 50;
     let total = checkboxSelection ? 40 : 0;
     for (const col of visibleColumns) {
@@ -3910,7 +3849,7 @@ function useDataTableRenderer({
     }
     return total;
   }, [visibleColumns, checkboxSelection]);
-  const allColumnsByField = useMemo11(
+  const allColumnsByField = useMemo10(
     () => reorderedColumns.reduce(
       (acc, curr) => ({
         ...acc,
@@ -3920,37 +3859,19 @@ 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(
-    () => Object.fromEntries(
-      visibleColumns.map((column, index) => [
-        columnIds[index],
-        {
-          ...column,
+  const visibleColumnsByField = useMemo10(
+    () => visibleColumns.reduce(
+      (acc, curr) => ({
+        ...acc,
+        [curr.field]: {
+          ...curr,
           headerRef: createRef(),
           tableColRef: createRef()
         }
-      ])
+      }),
+      {}
     ),
-    [visibleColumns, columnIds]
+    [visibleColumns]
   );
   const sortComparator = useCallback11(
     (rowA, rowB) => {
@@ -3981,11 +3902,11 @@ function useDataTableRenderer({
     },
     [sortModel, allColumnsByField]
   );
-  const rows = useMemo11(
+  const rows = useMemo10(
     () => sortModel.length ? [..._rows].sort(sortComparator) : _rows,
     [_rows, sortModel, sortComparator]
   );
-  const sortOrder = useMemo11(
+  const sortOrder = useMemo10(
     () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
@@ -3995,12 +3916,12 @@ function useDataTableRenderer({
     (row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
     [_getId, page, pageSize]
   );
-  const selectedModelSet = useMemo11(() => new Set(selectionModel || []), [selectionModel]);
-  const dataInPage = useMemo11(
+  const selectedModelSet = useMemo10(() => new Set(selectionModel || []), [selectionModel]);
+  const dataInPage = useMemo10(
     () => !pagination || paginationMode === "server" ? rows : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
     [rows, page, pageSize, paginationMode, pagination]
   );
-  const selectableDataInPage = useMemo11(
+  const selectableDataInPage = useMemo10(
     () => dataInPage.filter((row, i) => {
       if (!isRowSelectable) return true;
       return isRowSelectable({ row, id: getId(row, i) });
@@ -4030,60 +3951,51 @@ function useDataTableRenderer({
     },
     [dataInPage, getId, isRowSelectable, selectionModel, onSelectionModelChange]
   );
-  const isAllSelected = useMemo11(
+  const isAllSelected = useMemo10(
     () => selectableDataInPage.length > 0 && selectableDataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
     [selectableDataInPage, selectedModelSet, getId]
   );
   const rowCount = totalRowsProp || rows.length;
-  const selectableRowCount = useMemo11(() => {
+  const selectableRowCount = useMemo10(() => {
     if (!isRowSelectable) return rowCount;
     return rows.filter((row, i) => isRowSelectable({ row, id: getId(row, i) })).length;
   }, [rows, isRowSelectable, getId, rowCount]);
-  const isTotalSelected = useMemo11(
+  const isTotalSelected = useMemo10(
     () => _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 columnWidths = useColumnWidths(visibleColumnsByField);
   const getWidth = useCallback11(
-    // 반환값은 pinned offset으로 더해지므로 반드시 숫자여야 한다. width/minWidth는 '500px' 같은 문자열.
-    (f) => measuredWidthByField[f] ?? parsePxValue(allColumnsByField[f]?.width) ?? // Column prop 으로 지정된 width
-    parsePxValue(allColumnsByField[f]?.minWidth) ?? 0,
-    [measuredWidthByField, allColumnsByField]
+    (f) => columnWidths[f] ?? allColumnsByField[f]?.width ?? // Column prop 으로 지정된 width
+    allColumnsByField[f]?.minWidth ?? 0,
+    [columnWidths, allColumnsByField]
   );
-  const processedColumnGroups = useMemo11(() => {
+  const processedColumnGroups = useMemo10(() => {
     if (!columnGroupingModel) return null;
     return calculateColumnGroups(columnGroupingModel, visibleColumns, visibleFieldSet);
   }, [columnGroupingModel, visibleColumns, visibleFieldSet]);
-  const effectivePinnedLeft = useMemo11(
+  const effectivePinnedLeft = useMemo10(
     () => pinnedColumns?.left?.filter((f) => visibleFieldSet.has(f)),
     [pinnedColumns?.left, visibleFieldSet]
   );
-  const effectivePinnedRight = useMemo11(
+  const effectivePinnedRight = useMemo10(
     () => pinnedColumns?.right?.filter((f) => visibleFieldSet.has(f)),
     [pinnedColumns?.right, visibleFieldSet]
   );
   const inferredFieldsKey = JSON.stringify(Object.keys(rows[0] || {}));
-  const inferredFields = useMemo11(() => JSON.parse(inferredFieldsKey), [inferredFieldsKey]);
-  const columns = useMemo11(() => {
+  const inferredFields = useMemo10(() => JSON.parse(inferredFieldsKey), [inferredFieldsKey]);
+  const columns = useMemo10(() => {
     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,
@@ -4100,8 +4012,7 @@ function useDataTableRenderer({
     inferredFields,
     effectivePinnedLeft,
     effectivePinnedRight,
-    columnIds,
-    visibleColumnsById,
+    visibleColumnsByField,
     allColumnsByField,
     editMode,
     sortModel,
@@ -4161,14 +4072,15 @@ function useDataTableRenderer({
     }
   }, [_rows]);
   const handleAutoFit = useCallback11(
-    (columnId) => {
-      const colDef = visibleColumnsById[columnId];
+    (field) => {
+      const colDef = visibleColumnsByField[field];
       if (!colDef?.headerRef.current) return;
-      const columnType = "type" in colDef ? colDef.type : void 0;
+      const column = allColumnsByField[field];
+      const columnType = column && "type" in column ? column.type : void 0;
       if (columnType === "actions") return;
       const optimalWidth = computeAutoFitWidth({
         headerEl: colDef.headerRef.current,
-        field: colDef.field,
+        field,
         dataInPage
       });
       if (optimalWidth == null) return;
@@ -4176,7 +4088,7 @@ function useDataTableRenderer({
       colDef.headerRef.current.style.width = widthPx;
       if (colDef.tableColRef.current) colDef.tableColRef.current.style.width = widthPx;
     },
-    [visibleColumnsById, dataInPage]
+    [visibleColumnsByField, allColumnsByField, dataInPage]
   );
   return {
     rowCount,
@@ -4651,9 +4563,9 @@ function Component(props, apiRef) {
     measureElement: (element) => element.clientHeight,
     overscan: 10
   });
-  const paginationModel = useMemo12(() => ({ page, pageSize }), [page, pageSize]);
+  const paginationModel = useMemo11(() => ({ page, pageSize }), [page, pageSize]);
   const columnsKey = getObjectVersion(columns);
-  const headerCheckboxElement = useMemo12(
+  const headerCheckboxElement = useMemo11(
     () => /* @__PURE__ */ React26.createElement(
       RenderCheckbox,
       {
@@ -4863,7 +4775,7 @@ function Component(props, apiRef) {
         "col",
         {
           ref: c.tableColRef,
-          key: c.columnId,
+          key: `${c.field.toString()}_${c.width}`,
           style: {
             width: c.width,
             minWidth: c.minWidth ?? "50px"
@@ -5049,7 +4961,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 useCallback14, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo12, useRef as useRef8, 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";
@@ -5271,7 +5183,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
   );
   const [anchorEl, setAnchorEl] = useState10(null);
   const open = Boolean(anchorEl);
-  const calendarValue = useMemo13(
+  const calendarValue = useMemo12(
     () => value ? parseDates(value, format) : void 0,
     [value, format]
   );
@@ -5588,10 +5500,10 @@ var ModalClose = JoyModalClose;
 var MotionModalOverflow = motion24(JoyModalOverflow);
 var ModalOverflow = MotionModalOverflow;
 ModalOverflow.displayName = "ModalOverflow";
-var ModalFrame = React29.forwardRef((props, ref) => {
+function ModalFrame(props) {
   const { title, children, titleStartDecorator, onClose, ...innerProps } = props;
-  return /* @__PURE__ */ React29.createElement(StyledModalDialog, { ref, ...innerProps }, /* @__PURE__ */ React29.createElement(ModalClose, { onClick: onClose }), /* @__PURE__ */ React29.createElement(DialogTitle_default, null, titleStartDecorator, title), /* @__PURE__ */ React29.createElement(DialogContent_default, null, children));
-});
+  return /* @__PURE__ */ React29.createElement(StyledModalDialog, { ...innerProps }, /* @__PURE__ */ React29.createElement(ModalClose, { onClick: onClose }), /* @__PURE__ */ React29.createElement(DialogTitle_default, null, titleStartDecorator, title), /* @__PURE__ */ React29.createElement(DialogContent_default, null, children));
+}
 ModalFrame.displayName = "ModalFrame";
 
 // src/components/DialogFrame/DialogFrame.tsx
@@ -5636,7 +5548,7 @@ 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 useCallback15, useEffect as useEffect9, useMemo as useMemo13, useRef as useRef9, 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";
@@ -5697,11 +5609,11 @@ function FilterableCheckboxGroup(inProps) {
   const parentRef = useRef9(null);
   const isInitialSortRef = useRef9(false);
   const prevOptionsRef = useRef9([...options]);
-  const filteredOptions = useMemo14(() => {
+  const filteredOptions = useMemo13(() => {
     if (!searchTerm) return sortedOptions;
     return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
   }, [sortedOptions, searchTerm]);
-  const itemSize = useMemo14(() => {
+  const itemSize = useMemo13(() => {
     switch (size) {
       case "sm":
         return 28;
@@ -5775,7 +5687,7 @@ function FilterableCheckboxGroup(inProps) {
     },
     [filteredOptions, internalValue, setInternalValue]
   );
-  const enabledFilteredOptions = useMemo14(() => filteredOptions.filter((option) => !option.disabled), [filteredOptions]);
+  const enabledFilteredOptions = useMemo13(() => filteredOptions.filter((option) => !option.disabled), [filteredOptions]);
   const isAllSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => internalValue.includes(option.value));
   const isIndeterminate = !isAllSelected && enabledFilteredOptions.some((option) => internalValue.includes(option.value));
   return /* @__PURE__ */ React32.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React32.createElement(
@@ -5871,10 +5783,7 @@ import {
   MenuButton as JoyMenuButton2,
   IconButton as JoyIconButton2
 } from "@mui/joy";
-var MenuButtonRootSlot = React33.forwardRef(function MenuButtonRootSlot2({ as, ...rest }, ref) {
-  return /* @__PURE__ */ React33.createElement(JoyIconButton2, { ...rest, component: as ?? "button", ref });
-});
-function IconMenuButtonInner(props, ref) {
+function IconMenuButton(props) {
   const {
     size,
     icon,
@@ -5885,8 +5794,6 @@ function IconMenuButtonInner(props, ref) {
     variant = "plain",
     placement = "bottom"
   } = props;
-  const { ref: buttonComponentRef, ...buttonComponentProps } = props.buttonComponentProps ?? {};
-  const mergedButtonRef = useMergedRef(buttonComponentRef, ref);
   if (!items.length) {
     return /* @__PURE__ */ React33.createElement(
       JoyIconButton2,
@@ -5897,8 +5804,7 @@ function IconMenuButtonInner(props, ref) {
         color,
         disabled,
         loading,
-        ...buttonComponentProps,
-        ref: mergedButtonRef
+        ...props.buttonComponentProps ?? {}
       },
       icon
     );
@@ -5906,7 +5812,7 @@ function IconMenuButtonInner(props, ref) {
   return /* @__PURE__ */ React33.createElement(Dropdown_default, null, /* @__PURE__ */ React33.createElement(
     JoyMenuButton2,
     {
-      slots: { root: MenuButtonRootSlot },
+      slots: { root: JoyIconButton2 },
       slotProps: {
         root: {
           component: props.buttonComponent ?? "button",
@@ -5915,16 +5821,13 @@ function IconMenuButtonInner(props, ref) {
           color,
           disabled,
           loading,
-          ...buttonComponentProps,
-          // Joy의 useSlot이 내부 ref와 이 ref를 합쳐준다. 위 no-items 분기와 같은 경로로 ref를 넘긴다.
-          ref: mergedButtonRef
+          ...props.buttonComponentProps ?? {}
         }
       }
     },
     icon
   ), /* @__PURE__ */ React33.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ React33.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
 }
-var IconMenuButton = React33.forwardRef(IconMenuButtonInner);
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
@@ -6374,7 +6277,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 useCallback17, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo14, useRef as useRef11, 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";
@@ -6505,7 +6408,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
   );
   const [anchorEl, setAnchorEl] = useState14(null);
   const open = Boolean(anchorEl);
-  const calendarValue = useMemo15(() => value ? parseDates2(value) : void 0, [value]);
+  const calendarValue = useMemo14(() => value ? parseDates2(value) : void 0, [value]);
   useEffect12(() => {
     if (value) {
       try {
@@ -6788,7 +6691,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 useCallback18, useMemo as useMemo15 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled25, useThemeProps as useThemeProps11 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -6847,13 +6750,13 @@ var PercentageInput = React41.forwardRef(
       props.defaultValue ?? null,
       useCallback18((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const value = useMemo16(() => {
+    const value = useMemo15(() => {
       if (_value && useMinorUnit) {
         return _value / Math.pow(10, maxDecimalScale);
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
-    const internalError = useMemo16(
+    const internalError = useMemo15(
       () => value != null && (max != null && value > max || min != null && value < min),
       [max, min, value]
     );
@@ -7619,7 +7522,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 useCallback19, useEffect as useEffect13, useMemo as useMemo16, useRef as useRef12, 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";
@@ -7759,8 +7662,8 @@ var Uploader = React49.memo((props) => {
   const [files, setFiles] = useState16([]);
   const [uploaded, setUploaded] = useState16(props.uploaded || []);
   const [previewState, setPreviewState] = useState16("idle");
-  const accepts = useMemo17(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
-  const parsedAccepts = useMemo17(
+  const accepts = useMemo16(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
+  const parsedAccepts = useMemo16(
     () => accepts.flatMap((type) => {
       if (["image/*", "video/*", "audio/*"].includes(type)) {
         return ALL_EXTENSIONS_BY_TYPE[type];
@@ -7769,7 +7672,7 @@ var Uploader = React49.memo((props) => {
     }),
     [accepts]
   );
-  const helperText = useMemo17(() => {
+  const helperText = useMemo16(() => {
     if (helperTextProp) {
       return helperTextProp;
     }
@@ -7799,8 +7702,8 @@ var Uploader = React49.memo((props) => {
     }
     return helperTexts.join(", ");
   }, [accepts, maxFileTotalSize, maxCount, helperTextProp]);
-  const error = useMemo17(() => !!errorText || errorProp, [errorProp, errorText]);
-  const showDropZone = useMemo17(
+  const error = useMemo16(() => !!errorText || errorProp, [errorProp, errorText]);
+  const showDropZone = useMemo16(
     () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
     [files, maxCount, uploaded]
   );