@ceed/ads 1.41.3 → 1.41.4

package/dist/index.js

@@ -182,7 +182,7 @@ function Alert(inProps) {
 Alert.displayName = "Alert";
 
 // src/components/Autocomplete/Autocomplete.tsx
-import React5, { useCallback as useCallback2, useEffect as useEffect2, useMemo, 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,
@@ -284,6 +284,46 @@ function useControlledState(controlledValue, defaultValue, onChange) {
   return [displayValue, handleChange, isControlled];
 }
 
+// src/libs/slot-props.ts
+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;
+}
+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);
+  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 resolvedRef = resolved.ref;
+        latestSlotRef.current = resolvedRef ?? null;
+        return resolvedRef || ref ? { ...resolved, ref: stableMergedRef } : { ...resolved };
+      });
+    }
+    return mergedRef ? { ...slotProp, ref: mergedRef } : { ...slotProp };
+  }, [isFunctionForm, slotProp, mergedRef, ref, stableMergedRef]);
+}
+
 // src/components/Autocomplete/Autocomplete.tsx
 var AutocompletePopper = styled3(Popper, {
   name: "Autocomplete",
@@ -306,13 +346,13 @@ var AutocompleteListBox = React5.forwardRef((props, ref) => {
     ownerState: { loading, size: fontSize },
     ...innerProps
   } = props;
-  const parentRef = useRef2(null);
+  const parentRef = useRef3(null);
   const isGrouped = children[0].every((child) => child.hasOwnProperty("group"));
-  const itemHeight = useMemo(() => {
+  const itemHeight = useMemo2(() => {
     const heights = itemHeightMap[fontSize ?? "md"];
     return hasSecondaryText ? heights.secondary : heights.default;
   }, [fontSize, hasSecondaryText]);
-  const renderTargets = useMemo(() => {
+  const renderTargets = useMemo2(() => {
     if (loading) {
       return [children[1]];
     }
@@ -404,7 +444,7 @@ var autocompleteFilterOptions = createFilterOptions({
   }
 });
 var getOptionLabel = (option) => `${option.label ?? ""}`;
-function Autocomplete(props) {
+function AutocompleteInner(props, ref) {
   const {
     label,
     error,
@@ -423,7 +463,7 @@ function Autocomplete(props) {
   const [rawValue, setValue] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback2(
+    useCallback3(
       (value2) => onChange?.({
         target: {
           value: value2,
@@ -434,7 +474,7 @@ function Autocomplete(props) {
     )
   );
   const _value = rawValue ?? (props.multiple ? EMPTY_MULTIPLE_VALUE : "");
-  const options = useMemo(
+  const options = useMemo2(
     () => props.options.map((option) => {
       if (typeof option !== "object") {
         return {
@@ -446,14 +486,14 @@ function Autocomplete(props) {
     }),
     [props.options]
   );
-  const optionMap = useMemo(() => {
+  const optionMap = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
     options.forEach((option) => {
       map.set(option.value, option);
     });
     return map;
   }, [options]);
-  const value = useMemo(() => {
+  const value = useMemo2(() => {
     if (props.loading) {
       return {
         value: "",
@@ -466,31 +506,33 @@ function Autocomplete(props) {
     }
     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;
     },
     [size, props.loading]
   );
-  const startDecorator = useMemo(
+  const startDecorator = useMemo2(
     () => applySize(value?.startDecorator || props.startDecorator),
     [value, applySize, props.startDecorator]
   );
-  const endDecorator = useMemo(
+  const endDecorator = useMemo2(
     () => applySize(value?.endDecorator || props.endDecorator),
     [value, applySize, props.endDecorator]
   );
-  const slotProps = useMemo(
+  const inputSlotProps = useSlotRef(props.slotProps?.input, ref);
+  const slotProps = useMemo2(
     () => ({
       ...props.slotProps,
       listbox: {
         ...props.slotProps?.listbox,
         hasSecondaryText: options.some((opt) => opt.secondaryText)
-      }
+      },
+      input: inputSlotProps
     }),
-    [options, props.slotProps]
+    [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;
@@ -522,9 +564,9 @@ function Autocomplete(props) {
       endDecorator,
       getOptionLabel,
       renderTags: (tags, getTagProps) => tags.map((tag, index) => {
-        const { onClick, ...rest } = getTagProps({ index });
+        const { onClick, key, ...rest } = getTagProps({ index });
         return 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(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(AutocompleteTagDelete, { color: "primary", variant: "soft", onClick, size }, /* @__PURE__ */ React5.createElement(CloseIcon, null))
           )))
         );
@@ -534,26 +576,29 @@ function Autocomplete(props) {
       },
       slotProps,
       filterOptions: autocompleteFilterOptions,
-      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)
-      )),
+      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)
+        ));
+      },
       renderGroup: (params) => params
     }
   );
@@ -573,13 +618,14 @@ function Autocomplete(props) {
     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 useMemo2 } from "react";
+import React6, { forwardRef as forwardRef2, useMemo as useMemo3 } from "react";
 import { Avatar as JoyAvatar, AvatarGroup, styled as styled4, useThemeProps as useThemeProps2 } from "@mui/joy";
 var StyledAvatar = styled4(JoyAvatar, {
   name: "Avatar",
@@ -607,7 +653,7 @@ var Avatar = forwardRef2(function Avatar2(inProps, ref) {
     name: "Avatar"
   });
   const { children, getInitial = defaultGetInitial, ...inheritProps } = props;
-  const calcChildren = useMemo2(() => {
+  const calcChildren = useMemo3(() => {
     if (typeof children === "string") {
       return getInitial?.(children) ?? "";
     }
@@ -649,7 +695,7 @@ var MenuItem = JoyMenuItem;
 var Menu_default = Menu;
 
 // src/components/Dropdown/Dropdown.tsx
-import React8, { createContext, useCallback as useCallback3, useMemo as useMemo3, 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";
@@ -657,14 +703,14 @@ 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 = useMemo3(
+  const registry = useMemo4(
     () => ({
       register: () => setNestedCount((c) => c + 1),
       unregister: () => setNestedCount((c) => Math.max(0, c - 1))
     }),
     []
   );
-  const handleOpenChange = useCallback3(
+  const handleOpenChange = useCallback4(
     (event, isOpen) => {
       if (nestedCount > 0 && !isOpen && event?.type === "blur") {
         return;
@@ -727,7 +773,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 useMemo5, 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";
@@ -821,7 +867,7 @@ var isSameMonth = (date1, date2) => {
 };
 
 // src/components/Calendar/hooks/use-calendar-props.ts
-import { useCallback as useCallback4, useMemo as useMemo4, 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];
@@ -841,23 +887,23 @@ var useCalendarProps = (inProps) => {
   });
   const [[page, direction], setPage] = useState3([0, 0]);
   const resolvedView = inProps.view ?? uncontrolledView;
-  const resolvedMinDate = useMemo4(() => {
+  const resolvedMinDate = useMemo5(() => {
     const minDate = inProps.minDate || /* @__PURE__ */ new Date(0);
     minDate.setHours(0, 0, 0, 0);
     return minDate;
   }, [inProps.minDate]);
-  const resolvedMaxDate = useMemo4(() => {
+  const resolvedMaxDate = useMemo5(() => {
     const maxDate = inProps.maxDate || /* @__PURE__ */ new Date(864e13);
     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") {
@@ -905,12 +951,12 @@ var useCalendarProps = (inProps) => {
     },
     name: "Calendar"
   });
-  const ownerState = useMemo4(() => ({ ...props, viewMonth, direction }), [props, viewMonth, direction]);
+  const ownerState = useMemo5(() => ({ ...props, viewMonth, direction }), [props, viewMonth, direction]);
   return [props, ownerState];
 };
 
 // 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);
@@ -920,7 +966,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();
@@ -937,7 +983,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();
@@ -954,7 +1000,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);
@@ -969,7 +1015,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);
@@ -986,7 +1032,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);
@@ -1040,7 +1086,7 @@ var useCalendar = (ownerState) => {
         hoverDay
       ]
     ),
-    getPickerMonthProps: useCallback5(
+    getPickerMonthProps: useCallback6(
       (monthIndex) => {
         const thisMonth = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
         thisMonth.setDate(1);
@@ -1337,8 +1383,8 @@ var swipePower = (offset, velocity) => {
 var PickerDays = (props) => {
   const { ownerState } = props;
   const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
-  const calendarDates = useMemo5(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
-  const weekdayNames = useMemo5(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+  const calendarDates = useMemo6(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+  const weekdayNames = useMemo6(() => 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,
     {
@@ -1422,8 +1468,8 @@ var PickerMonths = (props) => {
 };
 var PlainPickerDays = ({ ownerState }) => {
   const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
-  const calendarDates = useMemo5(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
-  const weekdayNames = useMemo5(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+  const calendarDates = useMemo6(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+  const weekdayNames = useMemo6(() => 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 } }))))));
@@ -1563,14 +1609,16 @@ var Calendar = forwardRef4((inProps, ref) => {
     maxDate,
     disableFuture,
     disablePast,
+    shouldDisableDate,
+    slots,
     numberOfMonths,
     ...others
   } = 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;
@@ -1591,14 +1639,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;
@@ -1613,7 +1661,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 = [
@@ -1624,15 +1672,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]);
@@ -1802,11 +1850,11 @@ var Container = forwardRef5(function Container2(props, ref) {
 Container.displayName = "Container";
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-import React17, { useCallback as useCallback8, useMemo as useMemo6 } 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";
@@ -1844,7 +1892,7 @@ var Input = React16.forwardRef((props, ref) => {
   const [value, setValue] = useControlledState(
     valueProp,
     defaultValueProp ?? null,
-    useCallback7(
+    useCallback8(
       (value2) => {
         onChange?.({
           /**
@@ -2134,22 +2182,22 @@ 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 = useMemo6(() => {
+  const value = useMemo7(() => {
     if (_value && useMinorUnit) {
       return _value / Math.pow(10, decimalScale);
     }
     return _value;
   }, [_value, useMinorUnit, decimalScale]);
-  const max = useMemo6(() => {
+  const max = useMemo7(() => {
     if (props.max && useMinorUnit) {
       return props.max / Math.pow(10, decimalScale);
     }
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
-  const isOverLimit = useMemo6(() => max != null && value != null && value > max, [max, value]);
-  const handleChange = useCallback8(
+  const isOverLimit = useMemo7(() => max != null && value != null && value > max, [max, value]);
+  const handleChange = useCallback9(
     (event) => {
       if (event.target.value === "") {
         setValue(null);
@@ -2198,9 +2246,9 @@ var CurrencyInput_default = CurrencyInput;
 
 // src/components/DataTable/DataTable.tsx
 import React26, {
-  useCallback as useCallback13,
-  useMemo as useMemo11,
-  useRef as useRef7,
+  useCallback as useCallback14,
+  useMemo as useMemo12,
+  useRef as useRef8,
   useId,
   forwardRef as forwardRef7,
   useImperativeHandle as useImperativeHandle2,
@@ -2433,6 +2481,12 @@ function computeAutoFitWidth(params) {
   if (!isNaN(maxPx) && maxPx > 0) finalWidth = Math.min(finalWidth, maxPx);
   return finalWidth;
 }
+function getHeaderCellId(tableId, field) {
+  return `${tableId}_header_${sanitizeColumnId(field)}`;
+}
+function sanitizeColumnId(field) {
+  return String(field).trim().replace(/\s+/g, "_");
+}
 
 // src/components/DataTable/styled.tsx
 import React18 from "react";
@@ -2621,11 +2675,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 useMemo9,
-  useCallback as useCallback10,
+  useMemo as useMemo10,
+  useCallback as useCallback11,
   useEffect as useEffect5,
   memo,
   createElement
@@ -2634,7 +2688,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";
@@ -2851,12 +2905,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]
     )
@@ -2884,7 +2938,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);
@@ -2892,7 +2946,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [displayFormat, format, locale, setValue]
   );
-  const handleDisplayInputChange = useCallback9(
+  const handleDisplayInputChange = useCallback10(
     (event) => {
       if (event.target.value === "") {
         handleChange({
@@ -2917,7 +2971,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [displayFormat, format, handleChange, props.name]
   );
-  const handleCalendarToggle = useCallback9(
+  const handleCalendarToggle = useCallback10(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       setTimeout(() => {
@@ -2926,7 +2980,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleInputMouseDown = useCallback9(
+  const handleInputMouseDown = useCallback10(
     (event) => {
       if (inputReadOnly || isAlphabeticDisplay) {
         event.preventDefault();
@@ -2935,7 +2989,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [inputReadOnly, isAlphabeticDisplay, buttonRef]
   );
-  const handleInputClick = useCallback9(
+  const handleInputClick = useCallback10(
     (event) => {
       if (inputReadOnly && !readOnly) {
         handleCalendarToggle(event);
@@ -2943,7 +2997,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [inputReadOnly, readOnly, handleCalendarToggle]
   );
-  const handlePresetClick = useCallback9(
+  const handlePresetClick = useCallback10(
     (presetValue) => {
       handleChange({
         target: {
@@ -2955,7 +3009,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     },
     [handleChange, props.name]
   );
-  const isPresetDisabled = useCallback9(
+  const isPresetDisabled = useCallback10(
     (presetValue) => {
       try {
         const date = parseDate(presetValue, format);
@@ -3108,7 +3162,7 @@ import React20 from "react";
 import { Textarea as JoyTextarea } from "@mui/joy";
 import { motion as motion19 } from "framer-motion";
 var MotionTextarea = motion19(JoyTextarea);
-var Textarea = (props) => {
+var TextareaBase = (props) => {
   const {
     label,
     error,
@@ -3152,13 +3206,17 @@ var Textarea = (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 useMemo8 } from "react";
+import React21, { useMemo as useMemo9 } from "react";
 import {
   Select as JoySelect,
   Option as JoyOption,
@@ -3174,7 +3232,7 @@ var secondaryTextLevelMap2 = {
   lg: "body-md"
 };
 Option.displayName = "Option";
-function Select(props) {
+function SelectInner(props, ref) {
   const {
     label,
     helperText,
@@ -3200,7 +3258,7 @@ function Select(props) {
     formHelperText: formHelperTextProps,
     ...joySlotProps
   } = slotProps ?? {};
-  const options = useMemo8(
+  const options = useMemo9(
     () => props.options.map((option) => {
       if (option.hasOwnProperty("value") && option.hasOwnProperty("label")) {
         return option;
@@ -3225,13 +3283,14 @@ function Select(props) {
     };
     onChange?.(newEvent, newValue);
   };
-  const optionMap = useMemo8(() => {
+  const optionMap = useMemo9(() => {
     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,
     {
@@ -3240,7 +3299,7 @@ function Select(props) {
       disabled,
       size,
       color: error ? "danger" : color,
-      slotProps: joySlotProps,
+      slotProps: { ...joySlotProps, button: buttonSlotProps },
       onChange: handleChange,
       renderValue: (selected) => {
         if (!selected) return null;
@@ -3270,6 +3329,7 @@ function Select(props) {
     helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default, { ...formHelperTextProps }, helperText)
   );
 }
+var Select = React21.forwardRef(SelectInner);
 Select.displayName = "Select";
 
 // src/components/Select/index.ts
@@ -3317,7 +3377,7 @@ var TextEllipsis = ({
   lineClamp,
   ...rest
 }) => {
-  const textRef = useRef5(null);
+  const textRef = useRef6(null);
   const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
     const element = textRef.current;
@@ -3334,7 +3394,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;
@@ -3389,18 +3449,15 @@ var HeadCell = (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 = useMemo9(
-    () => `${tableId}_header_${headerName ?? field}`.trim(),
-    [tableId, headerName, field]
-  );
-  const isResizingRef = useRef5(false);
-  const resizer = useMemo9(
+  const headId = useMemo10(() => getHeaderCellId(tableId, field), [tableId, field]);
+  const isResizingRef = useRef6(false);
+  const resizer = useMemo10(
     () => resizable ?? true ? Resizer(
       ref,
       colRef,
@@ -3411,7 +3468,7 @@ var HeadCell = (props) => {
     ) : null,
     [resizable, ref, colRef, onAutoFit, field]
   );
-  const style = useMemo9(
+  const style = useMemo10(
     () => ({
       width,
       minWidth: minWidth ?? "50px",
@@ -3429,7 +3486,7 @@ var HeadCell = (props) => {
   );
   const textAlign = getTextAlign(props);
   const initialSort = sortOrder[0];
-  const sortIcon = useMemo9(() => {
+  const sortIcon = useMemo10(() => {
     const isSorted = !!sort;
     const isVisible = sortable && (isSorted || isHovered);
     return /* @__PURE__ */ React23.createElement(AnimatePresence2, { mode: "wait" }, isVisible && /* @__PURE__ */ React23.createElement(
@@ -3460,17 +3517,17 @@ var HeadCell = (props) => {
       }
     ));
   }, [headId, initialSort, sort, sortable, isHovered]);
-  const infoSign = useMemo9(
+  const infoSign = useMemo10(
     () => description ? /* @__PURE__ */ React23.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null,
     [description]
   );
-  const params = useMemo9(
+  const params = useMemo10(
     () => ({
       field
     }),
     [field]
   );
-  const computedHeaderClassName = useMemo9(
+  const computedHeaderClassName = useMemo10(
     () => (typeof headerClassName === "function" ? headerClassName(params) : headerClassName) || void 0,
     [headerClassName, params]
   );
@@ -3483,7 +3540,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;
@@ -3523,8 +3580,8 @@ var BodyCell = (props) => {
   } = props;
   const theme = useTheme();
   const [value, setValue] = useState8(row[field]);
-  const cellRef = useRef5(null);
-  const params = useMemo9(
+  const cellRef = useRef6(null);
+  const params = useMemo10(
     () => ({
       row,
       value,
@@ -3533,20 +3590,20 @@ var BodyCell = (props) => {
     }),
     [row, rowId, value, field]
   );
-  const editMode = useMemo9(
+  const editMode = useMemo10(
     () => !!(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 = useMemo9(
+  const componentProps = useMemo10(
     () => ({
       ...hasComponentProps && (typeof propsComponentProps === "function" ? propsComponentProps(params) : propsComponentProps || {}),
       size: "sm"
     }),
     [hasComponentProps, propsComponentProps, params]
   );
-  const editModeComponentProps = useMemo9(
+  const editModeComponentProps = useMemo10(
     () => ({
       ...componentProps,
       onChange: (e) => {
@@ -3608,9 +3665,9 @@ var BodyCell = (props) => {
     }),
     [params, row, field, value, componentProps, type, onCellEditStop, onCellEditStart]
   );
-  const MemoizedRenderEditCell = useMemo9(() => renderEditCell ? memo(renderEditCell) : null, [renderEditCell]);
-  const MemoizedRenderCell = useMemo9(() => renderCell ? memo(renderCell) : null, [renderCell]);
-  const EditModeComponent = useMemo9(() => {
+  const MemoizedRenderEditCell = useMemo10(() => renderEditCell ? memo(renderEditCell) : null, [renderEditCell]);
+  const MemoizedRenderCell = useMemo10(() => renderCell ? memo(renderCell) : null, [renderCell]);
+  const EditModeComponent = useMemo10(() => {
     if (MemoizedRenderEditCell) {
       return createElement(MemoizedRenderEditCell, params);
     }
@@ -3645,7 +3702,7 @@ var BodyCell = (props) => {
     }[type || "text"];
   }, [value, editModeComponentProps, type, MemoizedRenderEditCell, params]);
   const linkComponentFromProps = props.component;
-  const ReadModeComponent = useMemo9(() => {
+  const ReadModeComponent = useMemo10(() => {
     if (MemoizedRenderCell) {
       return createElement(MemoizedRenderCell, params);
     }
@@ -3659,15 +3716,15 @@ var BodyCell = (props) => {
     return typedComponent || innerText;
   }, [value, MemoizedRenderCell, params, type, componentProps, linkComponentFromProps]);
   const getActions = props.getActions;
-  const CellComponent = useMemo9(() => {
+  const CellComponent = useMemo10(() => {
     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 = useMemo9(() => noWrap && type === "longText", [noWrap, type]);
+  const showTooltip = useMemo10(() => noWrap && type === "longText", [noWrap, type]);
   const isBoundary = props.isLastStartPinnedColumn || props.isLastEndPinnedColumn;
-  const computedCellClassName = useMemo9(
+  const computedCellClassName = useMemo10(
     () => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
     [cellClassName, params]
   );
@@ -3679,7 +3736,7 @@ var BodyCell = (props) => {
     {
       ref: cellRef,
       key: field,
-      headers: `${tableId}_header_${props.headerName ?? field}`,
+      headers: getHeaderCellId(tableId, field),
       sx: {
         textAlign: getTextAlign({ type }),
         verticalAlign: editMode ? "top" : "middle",
@@ -3691,7 +3748,7 @@ var BodyCell = (props) => {
       },
       className: [isLastStartPinnedColumn && "is-last-left", isLastEndPinnedColumn && "is-last-right", computedCellClassName].filter(Boolean).join(" ") || ""
     },
-    useMemo9(
+    useMemo10(
       () => showTooltip ? /* @__PURE__ */ React23.createElement(CellTextEllipsis, null, CellComponent) : CellComponent,
       [CellComponent, showTooltip]
     )
@@ -3744,19 +3801,20 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
 });
 
 // src/components/DataTable/hooks.ts
-import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useMemo as useMemo10, useCallback as useCallback11, useEffect as useEffect6, createRef } from "react";
+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) => {
-      let changed = false;
       setWidths((prev) => {
+        let changed = false;
         const next = { ...prev };
         entries.forEach((entry) => {
           const field = entry.target.dataset.field;
           const w = Math.round(entry.target.getBoundingClientRect().width);
+          if (w === 0) return;
           if (next[field] !== w) {
             next[field] = w;
             changed = true;
@@ -3765,13 +3823,21 @@ function useColumnWidths(columnsByField) {
         return changed ? next : prev;
       });
     });
+    const measured = {};
     Object.entries(columnsByField).forEach(([field, def]) => {
       const el = def.headerRef.current;
       if (el) {
         el.dataset.field = field;
+        const w = Math.round(el.getBoundingClientRect().width);
+        if (w > 0) measured[field] = w;
         roRef.current.observe(el);
       }
     });
+    setWidths((prev) => {
+      const keys = Object.keys(measured);
+      const same = keys.every((key) => prev[key] === measured[key]);
+      return same ? prev : { ...prev, ...measured };
+    });
     return () => roRef.current?.disconnect();
   }, [columnsByField]);
   return widths;
@@ -3805,33 +3871,40 @@ 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]
     )
   );
-  const reorderedColumns = useMemo10(() => {
+  const reorderedColumns = useMemo11(() => {
     if (!columnGroupingModel) return columnsProp;
     return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
   }, [columnsProp, columnGroupingModel]);
-  const visibleColumns = useMemo10(
+  const visibleColumns = useMemo11(
     () => reorderedColumns.filter((col) => visibilityModel[col.field] !== false),
     [reorderedColumns, visibilityModel]
   );
-  const visibleFieldSet = useMemo10(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
-  const tableMinWidth = useMemo10(() => {
+  const visibleFieldSet = useMemo11(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
+  const tableMinWidth = useMemo11(() => {
     const DEFAULT_MIN = 50;
     let total = checkboxSelection ? 40 : 0;
     for (const col of visibleColumns) {
@@ -3839,7 +3912,7 @@ function useDataTableRenderer({
     }
     return total;
   }, [visibleColumns, checkboxSelection]);
-  const allColumnsByField = useMemo10(
+  const allColumnsByField = useMemo11(
     () => reorderedColumns.reduce(
       (acc, curr) => ({
         ...acc,
@@ -3849,21 +3922,20 @@ function useDataTableRenderer({
     ),
     [reorderedColumns]
   );
-  const visibleColumnsByField = useMemo10(
-    () => visibleColumns.reduce(
-      (acc, curr) => ({
-        ...acc,
-        [curr.field]: {
-          ...curr,
+  const visibleColumnsByField = useMemo11(
+    () => Object.fromEntries(
+      visibleColumns.map((column) => [
+        column.field,
+        {
+          ...column,
           headerRef: createRef(),
           tableColRef: createRef()
         }
-      }),
-      {}
+      ])
     ),
     [visibleColumns]
   );
-  const sortComparator = useCallback11(
+  const sortComparator = useCallback12(
     (rowA, rowB) => {
       for (const sort of sortModel) {
         const { field, sort: direction } = sort;
@@ -3892,33 +3964,33 @@ function useDataTableRenderer({
     },
     [sortModel, allColumnsByField]
   );
-  const rows = useMemo10(
+  const rows = useMemo11(
     () => sortModel.length ? [..._rows].sort(sortComparator) : _rows,
     [_rows, sortModel, sortComparator]
   );
-  const sortOrder = useMemo10(
+  const sortOrder = useMemo11(
     () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
   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]
   );
-  const selectedModelSet = useMemo10(() => new Set(selectionModel || []), [selectionModel]);
-  const dataInPage = useMemo10(
+  const selectedModelSet = useMemo11(() => new Set(selectionModel || []), [selectionModel]);
+  const dataInPage = useMemo11(
     () => !pagination || paginationMode === "server" ? rows : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
     [rows, page, pageSize, paginationMode, pagination]
   );
-  const selectableDataInPage = useMemo10(
+  const selectableDataInPage = useMemo11(
     () => dataInPage.filter((row, i) => {
       if (!isRowSelectable) return true;
       return isRowSelectable({ row, id: getId(row, i) });
     }),
     [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);
@@ -3941,40 +4013,41 @@ function useDataTableRenderer({
     },
     [dataInPage, getId, isRowSelectable, selectionModel, onSelectionModelChange]
   );
-  const isAllSelected = useMemo10(
+  const isAllSelected = useMemo11(
     () => selectableDataInPage.length > 0 && selectableDataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
     [selectableDataInPage, selectedModelSet, getId]
   );
   const rowCount = totalRowsProp || rows.length;
-  const selectableRowCount = useMemo10(() => {
+  const selectableRowCount = useMemo11(() => {
     if (!isRowSelectable) return rowCount;
     return rows.filter((row, i) => isRowSelectable({ row, id: getId(row, i) })).length;
   }, [rows, isRowSelectable, getId, rowCount]);
-  const isTotalSelected = useMemo10(
+  const isTotalSelected = useMemo11(
     () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
     [_isTotalSelected, selectionModel, selectableRowCount]
   );
   const columnWidths = useColumnWidths(visibleColumnsByField);
-  const getWidth = useCallback11(
-    (f) => columnWidths[f] ?? allColumnsByField[f]?.width ?? // Column prop 으로 지정된 width
-    allColumnsByField[f]?.minWidth ?? 0,
+  const getWidth = useCallback12(
+    // 반환값은 pinned offset으로 더해지므로 반드시 숫자여야 한다. width/minWidth는 '500px' 같은 문자열.
+    (f) => columnWidths[f] ?? parsePxValue(allColumnsByField[f]?.width) ?? // Column prop 으로 지정된 width
+    parsePxValue(allColumnsByField[f]?.minWidth) ?? 0,
     [columnWidths, allColumnsByField]
   );
-  const processedColumnGroups = useMemo10(() => {
+  const processedColumnGroups = useMemo11(() => {
     if (!columnGroupingModel) return null;
     return calculateColumnGroups(columnGroupingModel, visibleColumns, visibleFieldSet);
   }, [columnGroupingModel, visibleColumns, visibleFieldSet]);
-  const effectivePinnedLeft = useMemo10(
+  const effectivePinnedLeft = useMemo11(
     () => pinnedColumns?.left?.filter((f) => visibleFieldSet.has(f)),
     [pinnedColumns?.left, visibleFieldSet]
   );
-  const effectivePinnedRight = useMemo10(
+  const effectivePinnedRight = useMemo11(
     () => pinnedColumns?.right?.filter((f) => visibleFieldSet.has(f)),
     [pinnedColumns?.right, visibleFieldSet]
   );
   const inferredFieldsKey = JSON.stringify(Object.keys(rows[0] || {}));
-  const inferredFields = useMemo10(() => JSON.parse(inferredFieldsKey), [inferredFieldsKey]);
-  const columns = useMemo10(() => {
+  const inferredFields = useMemo11(() => JSON.parse(inferredFieldsKey), [inferredFieldsKey]);
+  const columns = useMemo11(() => {
     const baseColumns = visibleColumns.length > 0 ? visibleColumns : reorderedColumns.length > 0 ? [] : inferredFields.map((key) => ({
       field: key
     }));
@@ -4009,14 +4082,14 @@ function useDataTableRenderer({
     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];
@@ -4054,23 +4127,22 @@ 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(
+  const handleAutoFit = useCallback12(
     (field) => {
       const colDef = visibleColumnsByField[field];
       if (!colDef?.headerRef.current) return;
-      const column = allColumnsByField[field];
-      const columnType = column && "type" in column ? column.type : void 0;
+      const columnType = "type" in colDef ? colDef.type : void 0;
       if (columnType === "actions") return;
       const optimalWidth = computeAutoFitWidth({
         headerEl: colDef.headerRef.current,
-        field,
+        field: colDef.field,
         dataInPage
       });
       if (optimalWidth == null) return;
@@ -4078,7 +4150,7 @@ function useDataTableRenderer({
       colDef.headerRef.current.style.width = widthPx;
       if (colDef.tableColRef.current) colDef.tableColRef.current.style.width = widthPx;
     },
-    [visibleColumnsByField, allColumnsByField, dataInPage]
+    [visibleColumnsByField, dataInPage]
   );
   return {
     rowCount,
@@ -4094,8 +4166,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 });
@@ -4103,13 +4175,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);
@@ -4143,7 +4215,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) });
@@ -4228,7 +4300,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";
@@ -4298,7 +4370,7 @@ function Pagination(inProps) {
   const [paginationModel, setPaginationModel] = useControlledState(
     _paginationModel,
     defaultPaginationModel,
-    useCallback12(
+    useCallback13(
       (newPage) => {
         onPageChange(newPage.page);
       },
@@ -4516,8 +4588,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,
@@ -4553,9 +4625,9 @@ function Component(props, apiRef) {
     measureElement: (element) => element.clientHeight,
     overscan: 10
   });
-  const paginationModel = useMemo11(() => ({ page, pageSize }), [page, pageSize]);
+  const paginationModel = useMemo12(() => ({ page, pageSize }), [page, pageSize]);
   const columnsKey = getObjectVersion(columns);
-  const headerCheckboxElement = useMemo11(
+  const headerCheckboxElement = useMemo12(
     () => /* @__PURE__ */ React26.createElement(
       RenderCheckbox,
       {
@@ -4581,20 +4653,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)) {
@@ -4604,7 +4676,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;
@@ -4765,7 +4837,7 @@ function Component(props, apiRef) {
         "col",
         {
           ref: c.tableColRef,
-          key: `${c.field.toString()}_${c.width}`,
+          key: c.field.toString(),
           style: {
             width: c.width,
             minWidth: c.minWidth ?? "50px"
@@ -4815,13 +4887,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,
@@ -4951,7 +5023,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 useMemo12, 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";
@@ -5156,12 +5228,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]
     )
@@ -5173,7 +5245,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
   );
   const [anchorEl, setAnchorEl] = useState10(null);
   const open = Boolean(anchorEl);
-  const calendarValue = useMemo12(
+  const calendarValue = useMemo13(
     () => value ? parseDates(value, format) : void 0,
     [value, format]
   );
@@ -5195,7 +5267,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);
@@ -5203,7 +5275,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [displayFormat, format, locale, setValue]
   );
-  const handleDisplayInputChange = useCallback14(
+  const handleDisplayInputChange = useCallback15(
     (event) => {
       if (event.target.value === "") {
         handleChange({
@@ -5228,14 +5300,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);
@@ -5249,7 +5321,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();
@@ -5258,7 +5330,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     },
     [inputReadOnly, isAlphabeticDisplay, buttonRef]
   );
-  const handleInputClick = useCallback14(
+  const handleInputClick = useCallback15(
     (event) => {
       if (inputReadOnly && !readOnly) {
         handleCalendarToggle(event);
@@ -5266,7 +5338,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 } });
@@ -5279,7 +5351,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);
@@ -5467,10 +5539,10 @@ var ModalClose = JoyModalClose;
 var MotionModalOverflow = motion23(JoyModalOverflow);
 var ModalOverflow = MotionModalOverflow;
 ModalOverflow.displayName = "ModalOverflow";
-function ModalFrame(props) {
+var ModalFrame = React28.forwardRef((props, ref) => {
   const { title, children, titleStartDecorator, onClose, ...innerProps } = props;
-  return /* @__PURE__ */ React28.createElement(StyledModalDialog, { ...innerProps }, /* @__PURE__ */ React28.createElement(ModalClose, { onClick: onClose }), /* @__PURE__ */ React28.createElement(DialogTitle_default, null, titleStartDecorator, title), /* @__PURE__ */ React28.createElement(DialogContent_default, null, children));
-}
+  return /* @__PURE__ */ React28.createElement(StyledModalDialog, { ...innerProps, ref }, /* @__PURE__ */ React28.createElement(ModalClose, { onClick: onClose }), /* @__PURE__ */ React28.createElement(DialogTitle_default, null, titleStartDecorator, title), /* @__PURE__ */ React28.createElement(DialogContent_default, null, children));
+});
 ModalFrame.displayName = "ModalFrame";
 
 // src/components/DialogFrame/DialogFrame.tsx
@@ -5515,14 +5587,14 @@ var InsetDrawer = styled19(JoyDrawer)(({ theme }) => ({
 }));
 
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
-import React31, { useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo13, useRef as useRef9, useState as useState11 } from "react";
+import React31, { 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__ */ React31.createElement(
     "span",
@@ -5570,17 +5642,17 @@ 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 filteredOptions = useMemo13(() => {
+  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()));
   }, [sortedOptions, searchTerm]);
-  const itemSize = useMemo13(() => {
+  const itemSize = useMemo14(() => {
     switch (size) {
       case "sm":
         return 28;
@@ -5627,10 +5699,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);
@@ -5638,7 +5710,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);
@@ -5654,7 +5726,7 @@ function FilterableCheckboxGroup(inProps) {
     },
     [filteredOptions, internalValue, setInternalValue]
   );
-  const enabledFilteredOptions = useMemo13(() => filteredOptions.filter((option) => !option.disabled), [filteredOptions]);
+  const enabledFilteredOptions = useMemo14(() => 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__ */ React31.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React31.createElement(
@@ -5742,16 +5814,16 @@ function FilterableCheckboxGroup(inProps) {
 FilterableCheckboxGroup.displayName = "FilterableCheckboxGroup";
 
 // src/components/FilterMenu/FilterMenu.tsx
-import React44, { useCallback as useCallback27, useContext, useEffect as useEffect12 } from "react";
+import React44, { useCallback as useCallback28, useContext, useEffect as useEffect12 } from "react";
 import { Button as Button2, Stack as Stack12 } from "@mui/joy";
 
 // src/components/FilterMenu/components/CheckboxGroup.tsx
-import React32, { useCallback as useCallback16 } from "react";
+import React32, { useCallback as useCallback17 } from "react";
 import { Stack as Stack2 } from "@mui/joy";
 function CheckboxGroup(props) {
   const { id, label, options, value, onChange, hidden } = props;
   const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
-  const handleCheckboxChange = useCallback16(
+  const handleCheckboxChange = useCallback17(
     (optionValue) => (event) => {
       const checked = event.target.checked;
       let newValue;
@@ -5780,12 +5852,12 @@ function CheckboxGroup(props) {
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FilterMenu/components/FilterableCheckboxGroup.tsx
-import React33, { useCallback as useCallback17 } from "react";
+import React33, { useCallback as useCallback18 } from "react";
 import { Stack as Stack3 } from "@mui/joy";
 function FilterableCheckboxGroup2(props) {
   const { id, label, options, value, onChange, hidden, placeholder, maxHeight } = props;
   const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
-  const handleChange = useCallback17(
+  const handleChange = useCallback18(
     (newValue) => {
       setInternalValue(newValue);
     },
@@ -5809,7 +5881,7 @@ function FilterableCheckboxGroup2(props) {
 FilterableCheckboxGroup2.displayName = "FilterableCheckboxGroup";
 
 // src/components/FilterMenu/components/RadioGroup.tsx
-import React34, { useCallback as useCallback18 } from "react";
+import React34, { useCallback as useCallback19 } from "react";
 
 // src/components/Radio/Radio.tsx
 import { Radio as JoyRadio, RadioGroup as JoyRadioGroup } from "@mui/joy";
@@ -5826,7 +5898,7 @@ import { Stack as Stack4 } from "@mui/joy";
 function RadioGroup2(props) {
   const { id, label, options, value, onChange, hidden } = props;
   const [internalValue, setInternalValue] = useControlledState(value, value ?? "", onChange);
-  const handleRadioChange = useCallback18(
+  const handleRadioChange = useCallback19(
     (event) => {
       const newValue = event.target.value;
       const option = options.find((opt) => opt.value.toString() === newValue);
@@ -5843,7 +5915,7 @@ function RadioGroup2(props) {
 RadioGroup2.displayName = "RadioGroup";
 
 // src/components/FilterMenu/components/DateRange.tsx
-import React35, { useCallback as useCallback19, useMemo as useMemo14, useState as useState12, useEffect as useEffect10 } from "react";
+import React35, { useCallback as useCallback20, useMemo as useMemo15, useState as useState12, useEffect as useEffect10 } from "react";
 import { Stack as Stack5 } from "@mui/joy";
 function DateRange(props) {
   const {
@@ -5862,7 +5934,7 @@ function DateRange(props) {
   } = props;
   const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
   const [selectedOption, setSelectedOption] = useState12("all-time");
-  const dateRangeOptions = useMemo14(
+  const dateRangeOptions = useMemo15(
     () => [
       { label: "All Time", value: "all-time" },
       { label: "This Month", value: "this-month" },
@@ -5872,7 +5944,7 @@ function DateRange(props) {
     ],
     []
   );
-  const getDateRangeForOption = useCallback19(
+  const getDateRangeForOption = useCallback20(
     (option) => {
       const now = /* @__PURE__ */ new Date();
       const currentYear = now.getFullYear();
@@ -5911,7 +5983,7 @@ function DateRange(props) {
     },
     [internalValue]
   );
-  const determineOptionFromValue = useCallback19(
+  const determineOptionFromValue = useCallback20(
     (value2) => {
       if (!value2) {
         return "all-time";
@@ -5927,7 +5999,7 @@ function DateRange(props) {
     },
     [getDateRangeForOption]
   );
-  const customDateRangeValue = useMemo14(() => {
+  const customDateRangeValue = useMemo15(() => {
     if (selectedOption === "custom" && internalValue) {
       return `${internalValue[0]} - ${internalValue[1]}`;
     }
@@ -5937,7 +6009,7 @@ function DateRange(props) {
     const newOption = determineOptionFromValue(internalValue);
     setSelectedOption(newOption);
   }, [internalValue, determineOptionFromValue]);
-  const handleOptionChange = useCallback19(
+  const handleOptionChange = useCallback20(
     (event) => {
       const newOption = event.target.value;
       setSelectedOption(newOption);
@@ -5946,7 +6018,7 @@ function DateRange(props) {
     },
     [getDateRangeForOption, setInternalValue]
   );
-  const handleCustomDateChange = useCallback19(
+  const handleCustomDateChange = useCallback20(
     (event) => {
       const dateRangeString = event.target.value;
       if (dateRangeString && dateRangeString.includes(" - ")) {
@@ -5986,11 +6058,11 @@ function DateRange(props) {
 DateRange.displayName = "DateRange";
 
 // src/components/FilterMenu/components/MonthRange.tsx
-import React37, { useCallback as useCallback21, useMemo as useMemo16 } from "react";
+import React37, { useCallback as useCallback22, useMemo as useMemo17 } from "react";
 import { Stack as Stack6 } from "@mui/joy";
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React36, { forwardRef as forwardRef9, useCallback as useCallback20, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useMemo as useMemo15, useRef as useRef10, useState as useState13 } from "react";
+import React36, { forwardRef as forwardRef9, useCallback as useCallback21, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useMemo as useMemo16, useRef as useRef11, useState as useState13 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
 import { styled as styled20, useThemeProps as useThemeProps9 } from "@mui/joy";
@@ -6105,12 +6177,12 @@ var MonthRangePicker = forwardRef9((inProps, ref) => {
   } = props;
   const displayFormat = displayFormatProp ?? format;
   const isAlphabeticDisplay = hasAlphabeticMonth3(displayFormat);
-  const innerRef = useRef10(null);
-  const buttonRef = useRef10(null);
+  const innerRef = useRef11(null);
+  const buttonRef = useRef11(null);
   const [rawValue, setValue] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback20(
+    useCallback21(
       (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
       [props.name, onChange]
     )
@@ -6121,7 +6193,7 @@ var MonthRangePicker = forwardRef9((inProps, ref) => {
   );
   const [anchorEl, setAnchorEl] = useState13(null);
   const open = Boolean(anchorEl);
-  const calendarValue = useMemo15(() => value ? parseDates2(value) : void 0, [value]);
+  const calendarValue = useMemo16(() => value ? parseDates2(value) : void 0, [value]);
   useEffect11(() => {
     if (value) {
       try {
@@ -6140,7 +6212,7 @@ var MonthRangePicker = forwardRef9((inProps, ref) => {
     }
   }, [anchorEl, innerRef]);
   useImperativeHandle4(ref, () => innerRef.current, [innerRef]);
-  const handleChange = useCallback20(
+  const handleChange = useCallback21(
     (event) => {
       setDisplayValue(
         event.target.value ? formatValueString3(parseDates2(event.target.value), displayFormat, locale) : ""
@@ -6149,7 +6221,7 @@ var MonthRangePicker = forwardRef9((inProps, ref) => {
     },
     [displayFormat, locale, setValue]
   );
-  const handleInputMouseDown = useCallback20(
+  const handleInputMouseDown = useCallback21(
     (event) => {
       if (isAlphabeticDisplay) {
         event.preventDefault();
@@ -6158,14 +6230,14 @@ var MonthRangePicker = forwardRef9((inProps, ref) => {
     },
     [isAlphabeticDisplay, buttonRef]
   );
-  const handleCalendarToggle = useCallback20(
+  const handleCalendarToggle = useCallback21(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleCalendarChange = useCallback20(
+  const handleCalendarChange = useCallback21(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
       const formattedValue = formatValueString3([date1, date2], format);
@@ -6296,11 +6368,11 @@ function MonthRange(props) {
     locale
   } = props;
   const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
-  const pickerValue = useMemo16(
+  const pickerValue = useMemo17(
     () => internalValue ? `${internalValue[0]} - ${internalValue[1]}` : "",
     [internalValue]
   );
-  const handleChange = useCallback21(
+  const handleChange = useCallback22(
     (event) => {
       const rangeString = event.target.value;
       if (rangeString && rangeString.includes(" - ")) {
@@ -6335,12 +6407,12 @@ function MonthRange(props) {
 MonthRange.displayName = "MonthRange";
 
 // src/components/FilterMenu/components/CurrencyInput.tsx
-import React38, { useCallback as useCallback22 } from "react";
+import React38, { useCallback as useCallback23 } from "react";
 import { Stack as Stack7 } from "@mui/joy";
 function CurrencyInput3(props) {
   const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
   const [internalValue, setInternalValue] = useControlledState(value, value, onChange);
-  const handleCurrencyChange = useCallback22(
+  const handleCurrencyChange = useCallback23(
     (event) => {
       const newValue = event.target.value ?? void 0;
       setInternalValue(newValue);
@@ -6366,14 +6438,14 @@ function CurrencyInput3(props) {
 CurrencyInput3.displayName = "CurrencyInput";
 
 // src/components/FilterMenu/components/CurrencyRange.tsx
-import React39, { useCallback as useCallback23 } from "react";
+import React39, { useCallback as useCallback24 } from "react";
 import { Stack as Stack8 } from "@mui/joy";
 function CurrencyRange(props) {
   const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
   const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
   const minValue = internalValue?.[0];
   const maxValue = internalValue?.[1];
-  const handleMinChange = useCallback23(
+  const handleMinChange = useCallback24(
     (event) => {
       const newMinValue = event.target.value ?? void 0;
       const currentMaxValue = maxValue;
@@ -6387,7 +6459,7 @@ function CurrencyRange(props) {
     },
     [maxValue, setInternalValue]
   );
-  const handleMaxChange = useCallback23(
+  const handleMaxChange = useCallback24(
     (event) => {
       const newMaxValue = event.target.value ?? void 0;
       const currentMinValue = minValue;
@@ -6439,7 +6511,7 @@ import React41 from "react";
 import { Stack as Stack9, Typography as Typography5 } from "@mui/joy";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React40, { useCallback as useCallback24, useMemo as useMemo17 } from "react";
+import React40, { useCallback as useCallback25, useMemo as useMemo18 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled21, useThemeProps as useThemeProps10 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -6496,19 +6568,19 @@ var PercentageInput = React40.forwardRef(
     const [_value, setValue] = useControlledState(
       props.value,
       props.defaultValue ?? null,
-      useCallback24((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
+      useCallback25((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const value = useMemo17(() => {
+    const value = useMemo18(() => {
       if (_value && useMinorUnit) {
         return _value / Math.pow(10, maxDecimalScale);
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
-    const internalError = useMemo17(
+    const internalError = useMemo18(
       () => value != null && (max != null && value > max || min != null && value < min),
       [max, min, value]
     );
-    const handleChange = useCallback24(
+    const handleChange = useCallback25(
       (event) => {
         if (event.target.value === "") {
           setValue(null);
@@ -6582,7 +6654,7 @@ var PercentageInput3 = ({
 };
 
 // src/components/FilterMenu/components/PercentageRange.tsx
-import React42, { useCallback as useCallback25 } from "react";
+import React42, { useCallback as useCallback26 } from "react";
 import { Stack as Stack10 } from "@mui/joy";
 function PercentageRange(props) {
   const { id, label, value, onChange, hidden, useMinorUnit, maxDecimalScale, min, max } = props;
@@ -6593,7 +6665,7 @@ function PercentageRange(props) {
   );
   const minValue = internalValue?.[0];
   const maxValue = internalValue?.[1];
-  const handleMinChange = useCallback25(
+  const handleMinChange = useCallback26(
     (event) => {
       const newMinValue = event.target.value ?? void 0;
       const currentMaxValue = maxValue;
@@ -6605,7 +6677,7 @@ function PercentageRange(props) {
     },
     [maxValue, setInternalValue]
   );
-  const handleMaxChange = useCallback25(
+  const handleMaxChange = useCallback26(
     (event) => {
       const newMaxValue = event.target.value ?? void 0;
       const currentMinValue = minValue;
@@ -6653,13 +6725,13 @@ function PercentageRange(props) {
 PercentageRange.displayName = "PercentageRange";
 
 // src/components/FilterMenu/components/Autocomplete.tsx
-import React43, { useCallback as useCallback26 } from "react";
+import React43, { useCallback as useCallback27 } from "react";
 import { Stack as Stack11 } from "@mui/joy";
 function Autocomplete2(props) {
   const { id, label, value, onChange, options, multiple, hidden, placeholder } = props;
   const [internalValue, setInternalValue] = useControlledState(value, void 0, onChange);
   const autocompleteValue = typeof internalValue === "string" || typeof internalValue === "number" ? String(internalValue) : void 0;
-  const handleChange = useCallback26(
+  const handleChange = useCallback27(
     (event) => {
       const val = event.target.value ?? void 0;
       if (val) {
@@ -6715,7 +6787,7 @@ function FilterMenu(props) {
     dropdownRegistry.register();
     return () => dropdownRegistry.unregister();
   }, [dropdownRegistry]);
-  const handleFilterChange = useCallback27(
+  const handleFilterChange = useCallback28(
     (filterId, value) => {
       setInternalValues((prev) => ({
         ...prev,
@@ -6724,11 +6796,11 @@ function FilterMenu(props) {
     },
     [setInternalValues]
   );
-  const handleApply = useCallback27(() => {
+  const handleApply = useCallback28(() => {
     onChange?.(internalValues);
     onClose?.();
   }, [onChange, onClose, internalValues]);
-  const handleClear = useCallback27(() => {
+  const handleClear = useCallback28(() => {
     const clearedValues = resetValues || {};
     setInternalValues(clearedValues);
     onChange?.(clearedValues);
@@ -6764,7 +6836,7 @@ function FilterMenu(props) {
 FilterMenu.displayName = "FilterMenu";
 
 // src/components/Uploader/Uploader.tsx
-import React45, { useCallback as useCallback28, useEffect as useEffect13, useMemo as useMemo18, useRef as useRef11, useState as useState14 } from "react";
+import React45, { useCallback as useCallback29, useEffect as useEffect13, useMemo as useMemo19, useRef as useRef12, useState as useState14 } from "react";
 import { styled as styled22, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
@@ -6898,14 +6970,14 @@ var Uploader = React45.memo((props) => {
     error: errorProp,
     helperText: helperTextProp
   } = props;
-  const dropZoneRef = useRef11(null);
-  const inputRef = useRef11(null);
+  const dropZoneRef = useRef12(null);
+  const inputRef = useRef12(null);
   const [errorText, setErrorText] = useState14();
   const [files, setFiles] = useState14([]);
   const [uploaded, setUploaded] = useState14(props.uploaded || []);
   const [previewState, setPreviewState] = useState14("idle");
-  const accepts = useMemo18(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
-  const parsedAccepts = useMemo18(
+  const accepts = useMemo19(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
+  const parsedAccepts = useMemo19(
     () => accepts.flatMap((type) => {
       if (["image/*", "video/*", "audio/*"].includes(type)) {
         return ALL_EXTENSIONS_BY_TYPE[type];
@@ -6914,7 +6986,7 @@ var Uploader = React45.memo((props) => {
     }),
     [accepts]
   );
-  const helperText = useMemo18(() => {
+  const helperText = useMemo19(() => {
     if (helperTextProp) {
       return helperTextProp;
     }
@@ -6944,12 +7016,12 @@ var Uploader = React45.memo((props) => {
     }
     return helperTexts.join(", ");
   }, [accepts, maxFileTotalSize, maxCount, helperTextProp]);
-  const error = useMemo18(() => !!errorText || errorProp, [errorProp, errorText]);
-  const showDropZone = useMemo18(
+  const error = useMemo19(() => !!errorText || errorProp, [errorProp, errorText]);
+  const showDropZone = useMemo19(
     () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
     [files, maxCount, uploaded]
   );
-  const addFiles = useCallback28(
+  const addFiles = useCallback29(
     (uploads) => {
       try {
         const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
@@ -7031,14 +7103,14 @@ var Uploader = React45.memo((props) => {
       }
     }
   }, [inputRef, files, minCount]);
-  const handleFileChanged = useCallback28(
+  const handleFileChanged = useCallback29(
     (event) => {
       const files2 = Array.from(event.target.files || []);
       addFiles(files2);
     },
     [addFiles]
   );
-  const handleDeleteFile = useCallback28(
+  const handleDeleteFile = useCallback29(
     (deletedFile) => {
       if (deletedFile instanceof File) {
         setFiles((current) => {
@@ -7058,7 +7130,7 @@ var Uploader = React45.memo((props) => {
     },
     [name, onChange, onDelete]
   );
-  const handleUploaderButtonClick = useCallback28(() => {
+  const handleUploaderButtonClick = useCallback29(() => {
     inputRef.current?.click();
   }, []);
   const uploader = /* @__PURE__ */ React45.createElement(
@@ -7107,7 +7179,10 @@ import {
   MenuButton as JoyMenuButton2,
   IconButton as JoyIconButton2
 } from "@mui/joy";
-function IconMenuButton(props) {
+var MenuButtonRootSlot = React46.forwardRef(function MenuButtonRootSlot2({ as, ownerState: _ownerState, ...rest }, ref) {
+  return /* @__PURE__ */ React46.createElement(JoyIconButton2, { ...rest, component: as ?? "button", ref });
+});
+function IconMenuButtonInner(props, ref) {
   const {
     size,
     icon,
@@ -7118,6 +7193,8 @@ function IconMenuButton(props) {
     variant = "plain",
     placement = "bottom"
   } = props;
+  const { ref: buttonComponentRef, ...buttonComponentProps } = props.buttonComponentProps ?? {};
+  const mergedButtonRef = useMergedRef(buttonComponentRef, ref);
   if (!items.length) {
     return /* @__PURE__ */ React46.createElement(
       JoyIconButton2,
@@ -7128,7 +7205,8 @@ function IconMenuButton(props) {
         color,
         disabled,
         loading,
-        ...props.buttonComponentProps ?? {}
+        ...buttonComponentProps,
+        ref: mergedButtonRef
       },
       icon
     );
@@ -7136,22 +7214,26 @@ function IconMenuButton(props) {
   return /* @__PURE__ */ React46.createElement(Dropdown_default, null, /* @__PURE__ */ React46.createElement(
     JoyMenuButton2,
     {
-      slots: { root: JoyIconButton2 },
+      slots: { root: MenuButtonRootSlot },
       slotProps: {
         root: {
-          component: props.buttonComponent ?? "button",
+          // 기본값 'button'은 MenuButtonRootSlot 한 곳에만 둔다.
+          component: props.buttonComponent,
           size,
           variant,
           color,
           disabled,
           loading,
-          ...props.buttonComponentProps ?? {}
+          ...buttonComponentProps,
+          // Joy의 useSlot이 내부 ref와 이 ref를 합쳐준다. 위 no-items 분기와 같은 경로로 ref를 넘긴다.
+          ref: mergedButtonRef
         }
       }
     },
     icon
   ), /* @__PURE__ */ React46.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ React46.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
 }
+var IconMenuButton = React46.forwardRef(IconMenuButtonInner);
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
@@ -7343,7 +7425,7 @@ function MenuButton2(props) {
 MenuButton2.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-import React49, { forwardRef as forwardRef10, useCallback as useCallback29, useEffect as useEffect15, useImperativeHandle as useImperativeHandle5, useRef as useRef12, useState as useState16 } from "react";
+import React49, { forwardRef as forwardRef10, useCallback as useCallback30, useEffect as useEffect15, useImperativeHandle as useImperativeHandle5, useRef as useRef13, useState as useState16 } from "react";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled23, useThemeProps as useThemeProps11 } from "@mui/joy";
 import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
@@ -7426,18 +7508,18 @@ var MonthPicker = forwardRef10((inProps, ref) => {
     locale,
     ...innerProps
   } = props;
-  const innerRef = useRef12(null);
-  const buttonRef = useRef12(null);
+  const innerRef = useRef13(null);
+  const buttonRef = useRef13(null);
   const [rawValue, setValue, isControlled] = useControlledState(
     props.value,
     props.defaultValue ?? null,
-    useCallback29(
+    useCallback30(
       (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
       [props.name, onChange]
     )
   );
   const value = rawValue ?? "";
-  const getFormattedDisplayValue = useCallback29(
+  const getFormattedDisplayValue = useCallback30(
     (inputValue) => {
       if (!inputValue) return "";
       try {
@@ -7460,7 +7542,7 @@ var MonthPicker = forwardRef10((inProps, ref) => {
   useEffect15(() => {
     setDisplayValue(getFormattedDisplayValue(value));
   }, [value, getFormattedDisplayValue]);
-  const handleChange = useCallback29(
+  const handleChange = useCallback30(
     (event) => {
       const newValue = event.target.value;
       setValue(newValue);
@@ -7470,14 +7552,14 @@ var MonthPicker = forwardRef10((inProps, ref) => {
     },
     [setValue, getFormattedDisplayValue, isControlled]
   );
-  const handleCalendarToggle = useCallback29(
+  const handleCalendarToggle = useCallback30(
     (event) => {
       setAnchorEl(anchorEl ? null : event.currentTarget);
       innerRef.current?.focus();
     },
     [anchorEl, setAnchorEl, innerRef]
   );
-  const handleInputMouseDown = useCallback29(
+  const handleInputMouseDown = useCallback30(
     (event) => {
       event.preventDefault();
       buttonRef.current?.focus();
@@ -7725,7 +7807,7 @@ function Navigator(props) {
 Navigator.displayName = "Navigator";
 
 // src/components/ProfileMenu/ProfileMenu.tsx
-import React53, { useCallback as useCallback30, useMemo as useMemo19 } from "react";
+import React53, { useCallback as useCallback31, useMemo as useMemo20 } from "react";
 import { Dropdown as Dropdown2, ListDivider, menuItemClasses, styled as styled26, MenuButton as MenuButton3, useThemeProps as useThemeProps12 } from "@mui/joy";
 import { ClickAwayListener as ClickAwayListener5 } from "@mui/base";
 import DropdownIcon from "@mui/icons-material/ArrowDropDown";
@@ -7735,8 +7817,8 @@ var StyledProfileCard = styled26(Stack, {
 })({});
 function ProfileCard(props) {
   const { children, chip, caption, size } = props;
-  const captionLevel = useMemo19(() => size === "sm" ? "body-xs" : "body-sm", [size]);
-  const nameLevel = useMemo19(() => size === "sm" ? "body-sm" : "body-md", [size]);
+  const captionLevel = useMemo20(() => size === "sm" ? "body-xs" : "body-sm", [size]);
+  const nameLevel = useMemo20(() => size === "sm" ? "body-sm" : "body-md", [size]);
   return /* @__PURE__ */ React53.createElement(StyledProfileCard, { px: 4, py: 2 }, /* @__PURE__ */ React53.createElement(Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React53.createElement(Typography, { level: nameLevel, fontWeight: "bold", textColor: "text.primary" }, children), chip && /* @__PURE__ */ React53.createElement(Chip, { size, color: "neutral", variant: "outlined" }, chip)), caption && /* @__PURE__ */ React53.createElement(Typography, { level: captionLevel, textColor: "text.tertiary" }, caption));
 }
 ProfileCard.displayName = "ProfileCard";
@@ -7778,7 +7860,7 @@ function ProfileMenu(inProps) {
   const [open, setOpen] = useControlledState(
     _open,
     defaultOpen ?? false,
-    useCallback30((value) => onOpenChange?.(value), [onOpenChange])
+    useCallback31((value) => onOpenChange?.(value), [onOpenChange])
   );
   return /* @__PURE__ */ React53.createElement(ClickAwayListener5, { onClickAway: () => setOpen(false) }, /* @__PURE__ */ React53.createElement("div", null, /* @__PURE__ */ React53.createElement(Dropdown2, { open }, /* @__PURE__ */ React53.createElement(
     ProfileMenuButton,