@ceed/cds 1.8.6 → 1.9.0

package/dist/index.cjs

@@ -323,16 +323,7 @@ var MotionAlert = (0, import_joy4.styled)((0, import_framer_motion3.motion)(impo
 function Alert(props) {
   const { title, content, actions, color = "primary", ...innerProps } = props;
   const invertedColors = props.invertedColors || props.variant === "solid";
-  return /* @__PURE__ */ import_react3.default.createElement(
-    MotionAlert,
-    {
-      ...innerProps,
-      color,
-      endDecorator: actions,
-      invertedColors
-    },
-    /* @__PURE__ */ import_react3.default.createElement(Stack_default, null, title && /* @__PURE__ */ import_react3.default.createElement(Typography_default, { level: "title-md", fontWeight: "bold", color }, title), /* @__PURE__ */ import_react3.default.createElement(Typography_default, { level: "body-sm", fontWeight: 500, color }, content))
-  );
+  return /* @__PURE__ */ import_react3.default.createElement(MotionAlert, { ...innerProps, color, endDecorator: actions, invertedColors }, /* @__PURE__ */ import_react3.default.createElement(Stack_default, null, title && /* @__PURE__ */ import_react3.default.createElement(Typography_default, { level: "title-md", fontWeight: "bold", color }, title), /* @__PURE__ */ import_react3.default.createElement(Typography_default, { level: "body-sm", fontWeight: 500, color }, content)));
 }
 Alert.displayName = "Alert";
 
@@ -409,9 +400,7 @@ var IconButton_default = IconButton;
 var import_react5 = require("react");
 function useControlledState(controlledValue, defaultValue, onChange) {
   const { current: isControlled } = (0, import_react5.useRef)(controlledValue !== void 0);
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(
-    controlledValue ?? defaultValue
-  );
+  const [internalValue, setInternalValue] = (0, import_react5.useState)(controlledValue ?? defaultValue);
   const displayValue = isControlled ? controlledValue : internalValue;
   (0, import_react5.useEffect)(() => {
     if (isControlled) {
@@ -785,33 +774,13 @@ function Breadcrumbs(props) {
     }
   };
   if (!collapsed) {
-    return /* @__PURE__ */ import_react9.default.createElement(
-      import_joy15.Breadcrumbs,
-      {
-        size,
-        slots: restSlots,
-        slotProps: restSlotProps,
-        ...innerProps
-      },
-      crumbs.map((crumb, index) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { key: `breadcrumb-${index}`, ...crumb }))
-    );
+    return /* @__PURE__ */ import_react9.default.createElement(import_joy15.Breadcrumbs, { size, slots: restSlots, slotProps: restSlotProps, ...innerProps }, crumbs.map((crumb, index) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { key: `breadcrumb-${index}`, ...crumb })));
   }
   const _endCrumbCount = Math.max(1, endCrumbCount);
   const frontCrumbs = crumbs.slice(0, startCrumbCount).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { key: `breadcrumb-${crumb.label}`, ...crumb }));
   const backCrumbs = (startCrumbCount + _endCrumbCount > crumbs.length ? crumbs.slice(startCrumbCount) : crumbs.slice(-_endCrumbCount)).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { key: `breadcrumb-${crumb.label}`, ...crumb }));
   const collapsedCrumbs = crumbs.slice(startCrumbCount, -_endCrumbCount).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(MenuItem, { key: `breadcrumb-${crumb.label}` }, /* @__PURE__ */ import_react9.default.createElement(Crumb, { ...crumb })));
-  return /* @__PURE__ */ import_react9.default.createElement(
-    import_joy15.Breadcrumbs,
-    {
-      size,
-      slots: restSlots,
-      slotProps: restSlotProps,
-      ...innerProps
-    },
-    frontCrumbs,
-    collapsedCrumbs.length && /* @__PURE__ */ import_react9.default.createElement(Dropdown_default, null, /* @__PURE__ */ import_react9.default.createElement(import_joy15.MenuButton, { size, variant: "plain" }, "..."), /* @__PURE__ */ import_react9.default.createElement(Menu_default, { size }, collapsedCrumbs)),
-    backCrumbs
-  );
+  return /* @__PURE__ */ import_react9.default.createElement(import_joy15.Breadcrumbs, { size, slots: restSlots, slotProps: restSlotProps, ...innerProps }, frontCrumbs, collapsedCrumbs.length && /* @__PURE__ */ import_react9.default.createElement(Dropdown_default, null, /* @__PURE__ */ import_react9.default.createElement(import_joy15.MenuButton, { size, variant: "plain" }, "..."), /* @__PURE__ */ import_react9.default.createElement(Menu_default, { size }, collapsedCrumbs)), backCrumbs);
 }
 Breadcrumbs.displayName = "Breadcrumbs";
 
@@ -820,11 +789,9 @@ var import_react10 = __toESM(require("react"));
 var import_joy16 = require("@mui/joy");
 var import_framer_motion11 = require("framer-motion");
 var MotionButton = (0, import_framer_motion11.motion)(import_joy16.Button);
-var Button = (0, import_react10.forwardRef)(
-  ({ ...props }, ref) => {
-    return /* @__PURE__ */ import_react10.default.createElement(MotionButton, { ref, ...props });
-  }
-);
+var Button = (0, import_react10.forwardRef)(({ ...props }, ref) => {
+  return /* @__PURE__ */ import_react10.default.createElement(MotionButton, { ref, ...props });
+});
 Button.displayName = "Button";
 
 // src/components/Button/index.ts
@@ -843,9 +810,7 @@ var getCalendarDates = (date) => {
   const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
   const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
   const firstWeekInThisMonth = Math.ceil((firstDay.getDay() + 1) / 7);
-  const lastWeekInThisMonth = Math.ceil(
-    (lastDay.getDate() + firstDay.getDay()) / 7
-  );
+  const lastWeekInThisMonth = Math.ceil((lastDay.getDate() + firstDay.getDay()) / 7);
   let day = 1;
   for (let i = 1; i <= lastWeekInThisMonth; i++) {
     const week = [];
@@ -920,7 +885,9 @@ var useCalendarProps = (inProps) => {
   const [uncontrolledView, setUncontrolledView] = (0, import_react11.useState)(
     () => resolveView(inProps.view || "day", inProps.views || ["day", "month"])
   );
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react11.useState)(inProps.defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react11.useState)(
+    inProps.defaultValue
+  );
   const [viewMonth, setViewMonth] = (0, import_react11.useState)(() => {
     const today = /* @__PURE__ */ new Date();
     today.setDate(1);
@@ -993,10 +960,7 @@ var useCalendarProps = (inProps) => {
     },
     name: "Calendar"
   });
-  const ownerState = (0, import_react11.useMemo)(
-    () => ({ ...props, viewMonth, direction }),
-    [props, viewMonth, direction]
-  );
+  const ownerState = (0, import_react11.useMemo)(() => ({ ...props, viewMonth, direction }), [props, viewMonth, direction]);
   return [props, ownerState];
 };
 
@@ -1014,11 +978,7 @@ var useCalendar = (ownerState) => {
         const currentMonth = currentDate.getMonth();
         const currentDay = currentDate.getDate();
         const prevMonth = new Date(currentYear, currentMonth - 1, 1);
-        const lastDayOfPrevMonth = new Date(
-          currentYear,
-          currentMonth,
-          0
-        ).getDate();
+        const lastDayOfPrevMonth = new Date(currentYear, currentMonth, 0).getDate();
         const prevMonthDay = Math.min(currentDay, lastDayOfPrevMonth);
         prevMonth.setDate(prevMonthDay);
         ownerState.onMonthChange?.(prevMonth);
@@ -1035,11 +995,7 @@ var useCalendar = (ownerState) => {
         const currentMonth = currentDate.getMonth();
         const currentDay = currentDate.getDate();
         const nextMonth = new Date(currentYear, currentMonth + 1, 1);
-        const lastDayOfNextMonth = new Date(
-          currentYear,
-          currentMonth + 2,
-          0
-        ).getDate();
+        const lastDayOfNextMonth = new Date(currentYear, currentMonth + 2, 0).getDate();
         const nextMonthDay = Math.min(currentDay, lastDayOfNextMonth);
         nextMonth.setDate(nextMonthDay);
         ownerState.onMonthChange?.(nextMonth);
@@ -1056,22 +1012,13 @@ var useCalendar = (ownerState) => {
         thisDay.setDate(day);
         const inRange = ownerState.rangeSelection && ownerState.value && ownerState.value[0] && // NOTE: hover day is not included in the range
         (hoverDay && isWithinRange(ownerState.value[0], hoverDay, thisDay) || // NOTE: Selected range is included in the range
-        ownerState.value[1] && isWithinRange(
-          ownerState.value[0],
-          ownerState.value[1],
-          thisDay
-        ));
+        ownerState.value[1] && isWithinRange(ownerState.value[0], ownerState.value[1], thisDay));
         return {
           "aria-label": thisDay.toLocaleDateString(),
           "aria-current": inRange ? "date" : void 0
         };
       },
-      [
-        ownerState.rangeSelection,
-        ownerState.value,
-        ownerState.viewMonth,
-        hoverDay
-      ]
+      [ownerState.rangeSelection, ownerState.value, ownerState.viewMonth, hoverDay]
     ),
     getMonthCellProps: (0, import_react12.useCallback)(
       (monthIndex) => {
@@ -1082,22 +1029,13 @@ var useCalendar = (ownerState) => {
         const isMonthRangeSelection = !ownerState.views?.find((view) => view === "day") && ownerState.rangeSelection;
         const inRange = isMonthRangeSelection && ownerState.value && ownerState.value[0] && // NOTE: hover day is not included in the range
         (hoverMonth && isWithinRange(ownerState.value[0], hoverMonth, thisMonth) || // NOTE: Selected range is included in the range
-        ownerState.value[1] && isWithinRange(
-          ownerState.value[0],
-          ownerState.value[1],
-          thisMonth
-        ));
+        ownerState.value[1] && isWithinRange(ownerState.value[0], ownerState.value[1], thisMonth));
         return {
           "aria-label": thisMonth.toLocaleDateString(),
           "aria-current": inRange ? "date" : void 0
         };
       },
-      [
-        ownerState.rangeSelection,
-        ownerState.value,
-        ownerState.viewMonth,
-        hoverMonth
-      ]
+      [ownerState.rangeSelection, ownerState.value, ownerState.viewMonth, hoverMonth]
     ),
     getPickerDayProps: (0, import_react12.useCallback)(
       (day) => {
@@ -1107,23 +1045,15 @@ var useCalendar = (ownerState) => {
         const isSelected = !!ownerState.value && (isSameDay(thisDay, ownerState.value[0]) || ownerState.value[1] && isSameDay(thisDay, ownerState.value[1]));
         const inRange = ownerState.rangeSelection && ownerState.value && ownerState.value[0] && // NOTE: hover day is not included in the range
         (hoverDay && isWithinRange(ownerState.value[0], hoverDay, thisDay) || // NOTE: Selected range is included in the range
-        ownerState.value[1] && isWithinRange(
-          ownerState.value[0],
-          ownerState.value[1],
-          thisDay
-        ));
+        ownerState.value[1] && isWithinRange(ownerState.value[0], ownerState.value[1], thisDay));
         const handleDayClick = () => {
           if (ownerState.rangeSelection) {
             if (!ownerState.value) {
               ownerState.onChange?.([thisDay, void 0]);
             } else if (ownerState.value[0] && !ownerState.value[1]) {
               ownerState.onChange?.([
-                new Date(
-                  Math.min(ownerState.value[0].getTime(), thisDay.getTime())
-                ),
-                new Date(
-                  Math.max(ownerState.value[0].getTime(), thisDay.getTime())
-                )
+                new Date(Math.min(ownerState.value[0].getTime(), thisDay.getTime())),
+                new Date(Math.max(ownerState.value[0].getTime(), thisDay.getTime()))
               ]);
             } else {
               ownerState.onChange?.([thisDay, void 0]);
@@ -1172,23 +1102,15 @@ var useCalendar = (ownerState) => {
         const isSelected = !!ownerState.value && (isSameMonth(thisMonth, ownerState.value[0]) || ownerState.value[1] && isSameMonth(thisMonth, ownerState.value[1]));
         const inRange = isMonthRangeSelection && ownerState.value && ownerState.value[0] && // NOTE: hover day is not included in the range
         (hoverMonth && isWithinRange(ownerState.value[0], hoverMonth, thisMonth) || // NOTE: Selected range is included in the range
-        ownerState.value[1] && isWithinRange(
-          ownerState.value[0],
-          ownerState.value[1],
-          thisMonth
-        ));
+        ownerState.value[1] && isWithinRange(ownerState.value[0], ownerState.value[1], thisMonth));
         const handleMonthClick = () => {
           if (isMonthRangeSelection) {
             if (!ownerState.value) {
               ownerState.onChange?.([thisMonth, void 0]);
             } else if (ownerState.value[0] && !ownerState.value[1]) {
               ownerState.onChange?.([
-                new Date(
-                  Math.min(ownerState.value[0].getTime(), thisMonth.getTime())
-                ),
-                new Date(
-                  Math.max(ownerState.value[0].getTime(), thisMonth.getTime())
-                )
+                new Date(Math.min(ownerState.value[0].getTime(), thisMonth.getTime())),
+                new Date(Math.max(ownerState.value[0].getTime(), thisMonth.getTime()))
               ]);
             } else {
               ownerState.onChange?.([thisMonth, void 0]);
@@ -1258,15 +1180,13 @@ var CalendarViewContainer = (0, import_joy18.styled)("div", {
   name: "Calendar",
   slot: "viewContainer",
   shouldForwardProp: (prop) => prop !== "calendarType"
-})(
-  ({ theme, calendarType }) => ({
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    position: "relative",
-    overflow: "hidden",
-    minHeight: calendarType === "datePicker" ? "250px" : "unset"
-  })
-);
+})(({ theme, calendarType }) => ({
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  position: "relative",
+  overflow: "hidden",
+  minHeight: calendarType === "datePicker" ? "250px" : "unset"
+}));
 var CalendarViewTable = (0, import_joy18.styled)(import_framer_motion12.motion.table, {
   name: "Calendar",
   slot: "viewTable"
@@ -1445,14 +1365,8 @@ var swipePower = (offset, velocity) => {
 var PickerDays = (props) => {
   const { ownerState } = props;
   const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
-  const calendarDates = (0, import_react13.useMemo)(
-    () => getCalendarDates(ownerState.viewMonth),
-    [ownerState.viewMonth]
-  );
-  const weekdayNames = (0, import_react13.useMemo)(
-    () => getWeekdayNames(ownerState.locale || "default"),
-    [ownerState.locale]
-  );
+  const calendarDates = (0, import_react13.useMemo)(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+  const weekdayNames = (0, import_react13.useMemo)(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
   return /* @__PURE__ */ import_react13.default.createElement(CalendarViewContainer, { calendarType: "datePicker" }, /* @__PURE__ */ import_react13.default.createElement(import_framer_motion12.AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ import_react13.default.createElement(
     CalendarViewTable,
     {
@@ -1482,25 +1396,9 @@ var PickerDays = (props) => {
         }
       }
     },
-    /* @__PURE__ */ import_react13.default.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ import_react13.default.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ import_react13.default.createElement("th", null, /* @__PURE__ */ import_react13.default.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ import_react13.default.createElement(
-      "th",
-      {
-        style: { width: 4 },
-        "aria-hidden": "true",
-        "aria-description": "cell-gap"
-      }
-    ))))),
+    /* @__PURE__ */ import_react13.default.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ import_react13.default.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ import_react13.default.createElement("th", null, /* @__PURE__ */ import_react13.default.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ import_react13.default.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))),
     /* @__PURE__ */ import_react13.default.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ import_react13.default.createElement("tr", null, weekDates.map(
-      (date, i) => date ? /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ import_react13.default.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ import_react13.default.createElement(
-        CalendarDay,
-        {
-          size: "sm",
-          variant: "plain",
-          color: "neutral",
-          ...getPickerDayProps(date)
-        },
-        date
-      )), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ import_react13.default.createElement("td", null), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
+      (date, i) => date ? /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ import_react13.default.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ import_react13.default.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ import_react13.default.createElement("td", null), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
     )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ import_react13.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react13.default.createElement("td", { colSpan: 13, style: { height: 4 } })))))
   )));
 };
@@ -1518,62 +1416,37 @@ var PickerMonths = (props) => {
     [[]]
   );
   const isMonthPicker = !ownerState.views?.find((view) => view === "day");
-  return /* @__PURE__ */ import_react13.default.createElement(
-    CalendarViewContainer,
+  return /* @__PURE__ */ import_react13.default.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" }, /* @__PURE__ */ import_react13.default.createElement(import_framer_motion12.AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ import_react13.default.createElement(
+    CalendarViewTable,
     {
-      calendarType: isMonthPicker ? "monthPicker" : "datePicker"
-    },
-    /* @__PURE__ */ import_react13.default.createElement(import_framer_motion12.AnimatePresence, { initial: false, custom: ownerState.direction }, /* @__PURE__ */ import_react13.default.createElement(
-      CalendarViewTable,
-      {
-        key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
-        custom: ownerState.direction,
-        variants,
-        initial: "enter",
-        animate: "center",
-        exit: "exit",
-        transition: {
-          x: { type: "spring", stiffness: 300, damping: 30 },
-          opacity: { duration: 0.2 }
-        },
-        drag: "x",
-        dragConstraints: { left: 0, right: 0 },
-        dragElastic: 1,
-        onDragEnd: (e, { offset, velocity }) => {
-          const swipe = swipePower(offset.x, velocity.x);
-          if (swipe < -swipeConfidenceThreshold) {
-            const date = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
-            date.setMonth(date.getMonth() + 1);
-            ownerState.onMonthChange?.(date);
-          } else if (swipe > swipeConfidenceThreshold) {
-            const date = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
-            date.setMonth(date.getMonth() - 1);
-            ownerState.onMonthChange?.(date);
-          }
-        }
+      key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`,
+      custom: ownerState.direction,
+      variants,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      transition: {
+        x: { type: "spring", stiffness: 300, damping: 30 },
+        opacity: { duration: 0.2 }
       },
-      /* @__PURE__ */ import_react13.default.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: months.join("_") }, /* @__PURE__ */ import_react13.default.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: monthIndex }, /* @__PURE__ */ import_react13.default.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ import_react13.default.createElement(
-        CalendarMonth,
-        {
-          size: "sm",
-          variant: "plain",
-          color: "neutral",
-          ...getPickerMonthProps(monthIndex)
-        },
-        getMonthNameFromIndex(
-          monthIndex,
-          ownerState.locale
-        )
-      )), j < 3 && /* @__PURE__ */ import_react13.default.createElement(
-        "td",
-        {
-          style: { width: 4 },
-          "aria-hidden": "true",
-          "aria-description": "cell-gap"
+      drag: "x",
+      dragConstraints: { left: 0, right: 0 },
+      dragElastic: 1,
+      onDragEnd: (e, { offset, velocity }) => {
+        const swipe = swipePower(offset.x, velocity.x);
+        if (swipe < -swipeConfidenceThreshold) {
+          const date = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
+          date.setMonth(date.getMonth() + 1);
+          ownerState.onMonthChange?.(date);
+        } else if (swipe > swipeConfidenceThreshold) {
+          const date = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
+          date.setMonth(date.getMonth() - 1);
+          ownerState.onMonthChange?.(date);
         }
-      )))), i < chunkedMonths.length - 1 && /* @__PURE__ */ import_react13.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react13.default.createElement("td", { colSpan: 7, style: { height: 4 } })))))
-    ))
-  );
+      }
+    },
+    /* @__PURE__ */ import_react13.default.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: months.join("_") }, /* @__PURE__ */ import_react13.default.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: monthIndex }, /* @__PURE__ */ import_react13.default.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ import_react13.default.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ import_react13.default.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ import_react13.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react13.default.createElement("td", { colSpan: 7, style: { height: 4 } })))))
+  )));
 };
 var Calendar = (0, import_react13.forwardRef)((inProps, ref) => {
   const [props, ownerState] = useCalendarProps(inProps);
@@ -1594,15 +1467,7 @@ var Calendar = (0, import_react13.forwardRef)((inProps, ref) => {
     ...others
   } = props;
   const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
-  return /* @__PURE__ */ import_react13.default.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ import_react13.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react13.default.createElement(
-    IconButton_default,
-    {
-      size: "sm",
-      onClick: onPrev,
-      "aria-label": `Previous ${view === "day" ? "Month" : "Year"}`
-    },
-    /* @__PURE__ */ import_react13.default.createElement(import_ChevronLeft.default, null)
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ import_react13.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react13.default.createElement(IconButton_default, { size: "sm", onClick: onPrev, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react13.default.createElement(import_ChevronLeft.default, null)), /* @__PURE__ */ import_react13.default.createElement(
     CalendarSwitchViewButton,
     {
       ownerState,
@@ -1612,15 +1477,7 @@ var Calendar = (0, import_react13.forwardRef)((inProps, ref) => {
       "aria-label": "Switch Calendar View"
     },
     calendarTitle
-  ), /* @__PURE__ */ import_react13.default.createElement(
-    IconButton_default,
-    {
-      size: "sm",
-      onClick: onNext,
-      "aria-label": `Next ${view === "day" ? "Month" : "Year"}`
-    },
-    /* @__PURE__ */ import_react13.default.createElement(import_ChevronRight.default, null)
-  )), view === "day" && /* @__PURE__ */ import_react13.default.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ import_react13.default.createElement(PickerMonths, { ownerState }));
+  ), /* @__PURE__ */ import_react13.default.createElement(IconButton_default, { size: "sm", onClick: onNext, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react13.default.createElement(import_ChevronRight.default, null))), view === "day" && /* @__PURE__ */ import_react13.default.createElement(PickerDays, { ownerState }), view === "month" && /* @__PURE__ */ import_react13.default.createElement(PickerMonths, { ownerState }));
 });
 Calendar.displayName = "Calendar";
 
@@ -1758,23 +1615,15 @@ var Input = import_react16.default.forwardRef((props, ref) => {
         ...innerProps.slotProps
       },
       ...innerProps,
-      endDecorator: enableClearable ? /* @__PURE__ */ import_react16.default.createElement(
-        Stack_default,
+      endDecorator: enableClearable ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ import_react16.default.createElement(
+        IconButton_default,
         {
-          gap: 1,
-          direction: "row"
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleClear,
+          "aria-label": "Clear"
         },
-        innerProps.endDecorator,
-        value && /* @__PURE__ */ import_react16.default.createElement(
-          IconButton_default,
-          {
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: handleClear,
-            "aria-label": "Clear"
-          },
-          /* @__PURE__ */ import_react16.default.createElement(import_Close2.default, null)
-        )
-      ) : innerProps.endDecorator
+        /* @__PURE__ */ import_react16.default.createElement(import_Close2.default, null)
+      )) : innerProps.endDecorator
     }
   );
   return /* @__PURE__ */ import_react16.default.createElement(
@@ -1962,25 +1811,23 @@ var useCurrencySetting = (props) => {
 };
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-var TextMaskAdapter = import_react17.default.forwardRef(
-  function TextMaskAdapter2(props, ref) {
-    const { onChange, ...innerProps } = props;
-    return /* @__PURE__ */ import_react17.default.createElement(
-      import_react_number_format.NumericFormat,
-      {
-        ...innerProps,
-        onValueChange: ({ value }) => {
-          onChange?.({
-            target: { name: props.name, value }
-          });
-        },
-        valueIsNumericString: true,
-        getInputRef: ref,
-        allowNegative: true
-      }
-    );
-  }
-);
+var TextMaskAdapter = import_react17.default.forwardRef(function TextMaskAdapter2(props, ref) {
+  const { onChange, ...innerProps } = props;
+  return /* @__PURE__ */ import_react17.default.createElement(
+    import_react_number_format.NumericFormat,
+    {
+      ...innerProps,
+      onValueChange: ({ value }) => {
+        onChange?.({
+          target: { name: props.name, value }
+        });
+      },
+      valueIsNumericString: true,
+      getInputRef: ref,
+      allowNegative: true
+    }
+  );
+});
 var CurrencyInputRoot = (0, import_joy23.styled)(Input_default, {
   name: "CurrencyInput",
   slot: "root",
@@ -2003,21 +1850,11 @@ var CurrencyInput = import_react17.default.forwardRef(function CurrencyInput2(in
     className,
     ...innerProps
   } = props;
-  const {
-    symbol,
-    thousandSeparator,
-    decimalSeparator,
-    placeholder,
-    fixedDecimalScale,
-    decimalScale
-  } = useCurrencySetting(props);
+  const { symbol, thousandSeparator, decimalSeparator, placeholder, fixedDecimalScale, decimalScale } = useCurrencySetting(props);
   const [_value, setValue] = useControlledState(
     props.value,
     props.defaultValue,
-    (0, import_react17.useCallback)(
-      (value2) => onChange?.({ target: { name, value: value2 } }),
-      [onChange, name]
-    )
+    (0, import_react17.useCallback)((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
   );
   const value = (0, import_react17.useMemo)(() => {
     if (_value && useMinorUnit) {
@@ -2031,9 +1868,7 @@ var CurrencyInput = import_react17.default.forwardRef(function CurrencyInput2(in
     }
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
-  const [isOverLimit, setIsOverLimit] = (0, import_react17.useState)(
-    !!max && !!value && value > max
-  );
+  const [isOverLimit, setIsOverLimit] = (0, import_react17.useState)(!!max && !!value && value > max);
   const handleChange = (0, import_react17.useCallback)(
     (event) => {
       if (event.target.value === "") {
@@ -2063,9 +1898,9 @@ var CurrencyInput = import_react17.default.forwardRef(function CurrencyInput2(in
       required,
       color: error || isOverLimit ? "danger" : props.color,
       label,
-      helperText: isOverLimit ? new import_intl_messageformat2.IntlMessageFormat(
-        `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
-      ).format({ amount: max }) : helperText,
+      helperText: isOverLimit ? new import_intl_messageformat2.IntlMessageFormat(`limit: {amount, number, ::currency/${currency} unit-width-narrow}`).format({
+        amount: max
+      }) : helperText,
       slotProps: {
         input: {
           component: TextMaskAdapter,
@@ -2161,13 +1996,7 @@ function TableBody(props) {
         textAlign: "center"
       }
     },
-    /* @__PURE__ */ import_react18.default.createElement(
-      RenderCheckbox,
-      {
-        onChange: (event) => onCheckboxChange?.(event, rowIndex),
-        ...checkboxProps
-      }
-    )
+    /* @__PURE__ */ import_react18.default.createElement(RenderCheckbox, { onChange: (event) => onCheckboxChange?.(event, rowIndex), ...checkboxProps })
   ), cellOrder.map((cellKey) => /* @__PURE__ */ import_react18.default.createElement(
     "td",
     {
@@ -2212,9 +2041,7 @@ var CalendarButton = (0, import_joy27.styled)(IconButton_default, {
   "&:focus": {
     "--Icon-color": "currentColor",
     outlineOffset: `${theme.getCssVar("focus-thickness")}`,
-    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar(
-      "palette-focusVisible"
-    )}`
+    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
   }
 }));
 var StyledPopper = (0, import_joy27.styled)(import_base2.Popper, {
@@ -2248,9 +2075,7 @@ var validValueFormat = (value, format) => {
     if (value !== formatValueString(parsedValue, format)) {
       return false;
     }
-    const regex = new RegExp(
-      `^${format.replace(/Y/g, "\\d").replace(/M/g, "\\d").replace(/D/g, "\\d")}$`
-    );
+    const regex = new RegExp(`^${format.replace(/Y/g, "\\d").replace(/M/g, "\\d").replace(/D/g, "\\d")}$`);
     return regex.test(value);
   } catch (e) {
     return false;
@@ -2291,310 +2116,293 @@ function parseDate(dateString, format) {
 var formatToPattern = (format) => {
   return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter3 = import_react19.default.forwardRef(
-  function TextMaskAdapter4(props, ref) {
-    const { onChange, format, ...other } = props;
-    return /* @__PURE__ */ import_react19.default.createElement(
-      import_react_imask.IMaskInput,
-      {
-        ...other,
-        inputRef: ref,
-        onAccept: (value) => onChange({ target: { name: props.name, value } }),
-        mask: Date,
-        pattern: formatToPattern(format),
-        blocks: {
-          D: {
-            mask: import_react_imask.IMask.MaskedRange,
-            from: 1,
-            to: 31,
-            maxLength: 2
-          },
-          M: {
-            mask: import_react_imask.IMask.MaskedRange,
-            from: 1,
-            to: 12,
-            maxLength: 2
-          },
-          Y: {
-            mask: import_react_imask.IMask.MaskedRange,
-            from: 1900,
-            to: 9999,
-            maxLength: 4
-          }
+var TextMaskAdapter3 = import_react19.default.forwardRef(function TextMaskAdapter4(props, ref) {
+  const { onChange, format, ...other } = props;
+  return /* @__PURE__ */ import_react19.default.createElement(
+    import_react_imask.IMaskInput,
+    {
+      ...other,
+      inputRef: ref,
+      onAccept: (value) => onChange({ target: { name: props.name, value } }),
+      mask: Date,
+      pattern: formatToPattern(format),
+      blocks: {
+        D: {
+          mask: import_react_imask.IMask.MaskedRange,
+          from: 1,
+          to: 31,
+          maxLength: 2
         },
-        format: (date) => formatValueString(date, format),
-        parse: (str) => parseDate(str, format),
-        autofix: "pad",
-        overwrite: true
-      }
-    );
-  }
-);
-var DatePicker = (0, import_react19.forwardRef)(
-  (inProps, ref) => {
-    const props = (0, import_joy27.useThemeProps)({ props: inProps, name: "DatePicker" });
-    const {
-      onChange,
-      disabled,
-      label,
-      error,
-      helperText,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      required,
-      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-      sx,
-      className,
-      format = "YYYY/MM/DD",
-      displayFormat = "YYYY/MM/DD",
-      size,
-      inputReadOnly,
-      hideClearButton,
-      readOnly,
-      shouldDisableDate,
-      ...innerProps
-    } = props;
-    const innerRef = (0, import_react19.useRef)(null);
-    const buttonRef = (0, import_react19.useRef)(null);
-    const [value, setValue] = useControlledState(
-      props.value,
-      props.defaultValue || "",
-      (0, import_react19.useCallback)(
-        (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
-        [props.name, onChange]
-      )
-    );
-    const [displayValue, setDisplayValue] = (0, import_react19.useState)(
-      () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
-    );
-    const [anchorEl, setAnchorEl] = (0, import_react19.useState)(null);
-    const open = Boolean(anchorEl);
-    (0, import_react19.useEffect)(() => {
-      if (!anchorEl) {
-        innerRef.current?.blur();
-      }
-    }, [anchorEl, innerRef]);
-    (0, import_react19.useEffect)(() => {
-      if (value === "") {
-        setDisplayValue("");
-        return;
-      }
-      const formattedValue = formatValueString(
-        parseDate(value, format),
-        displayFormat
-      );
-      if (validValueFormat(formattedValue, displayFormat) && formattedValue !== displayValue) {
-        setDisplayValue(formattedValue);
-      }
-    }, [displayFormat, displayValue, format, value]);
-    (0, import_react19.useImperativeHandle)(ref, () => innerRef.current, [
-      innerRef
-    ]);
-    const handleChange = (0, import_react19.useCallback)(
-      (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2
-        );
-        setValue(value2);
-      },
-      [displayFormat, format, setValue]
-    );
-    const handleDisplayInputChange = (0, import_react19.useCallback)(
-      (event) => {
-        if (event.target.value === "") {
-          handleChange({
-            target: {
-              name: props.name,
-              value: ""
-            }
-          });
-          return;
-        }
-        const isValidDisplayValue = validValueFormat(
-          event.target.value,
-          displayFormat
-        );
-        if (isValidDisplayValue) {
-          const parsedDate = parseDate(event.target.value, displayFormat);
-          const formattedValue = formatValueString(parsedDate, format);
-          handleChange({
-            target: {
-              name: props.name,
-              value: formattedValue
-            }
-          });
-        }
-      },
-      [displayFormat, format, handleChange, props.name]
-    );
-    const handleCalendarToggle = (0, import_react19.useCallback)(
-      (event) => {
-        setAnchorEl(anchorEl ? null : event.currentTarget);
-        setTimeout(() => {
-          innerRef.current?.focus();
-        }, 0);
-      },
-      [anchorEl, setAnchorEl, innerRef]
-    );
-    const handleInputMouseDown = (0, import_react19.useCallback)(
-      (event) => {
-        if (inputReadOnly) {
-          event.preventDefault();
-          buttonRef.current?.focus();
-        }
-      },
-      [inputReadOnly, buttonRef]
-    );
-    return /* @__PURE__ */ import_react19.default.createElement(DatePickerRoot, null, /* @__PURE__ */ import_react19.default.createElement(import_base2.FocusTrap, { open: true }, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
-      Input_default,
-      {
-        ...innerProps,
-        color: error ? "danger" : innerProps.color,
-        ref: innerRef,
-        size,
-        value: displayValue,
-        onChange: handleDisplayInputChange,
-        placeholder: displayFormat,
-        disabled,
-        required,
-        error,
-        slotProps: {
-          input: {
-            component: TextMaskAdapter3,
-            ref: innerRef,
-            format: displayFormat,
-            sx: {
-              "&:hover": {
-                cursor: inputReadOnly || readOnly ? "default" : "text"
-              }
-            },
-            onMouseDown: handleInputMouseDown
-          }
+        M: {
+          mask: import_react_imask.IMask.MaskedRange,
+          from: 1,
+          to: 12,
+          maxLength: 2
         },
-        className,
-        sx,
-        endDecorator: /* @__PURE__ */ import_react19.default.createElement(
-          CalendarButton,
-          {
-            ref: buttonRef,
-            variant: "plain",
-            onClick: readOnly ? void 0 : handleCalendarToggle,
-            "aria-label": "Toggle Calendar",
-            "aria-controls": "date-picker-popper",
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            disabled
-          },
-          /* @__PURE__ */ import_react19.default.createElement(import_CalendarToday.default, null)
-        ),
-        label,
-        helperText,
-        readOnly: readOnly || inputReadOnly
-      }
-    ), open && /* @__PURE__ */ import_react19.default.createElement(import_base2.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react19.default.createElement(
-      StyledPopper,
-      {
-        id: "date-picker-popper",
-        open: true,
-        anchorEl,
-        placement: "bottom-end",
-        onMouseDown: (e) => e.preventDefault(),
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [4, 4]
-            }
-          }
-        ],
-        "aria-label": "Calendar Tooltip",
-        "aria-expanded": open
-      },
-      /* @__PURE__ */ import_react19.default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react19.default.createElement(
-        Calendar_default,
-        {
-          value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
-          onChange: ([date]) => {
-            handleChange({
-              target: {
-                name: props.name,
-                value: formatValueString(date, format)
-              }
-            });
-            setAnchorEl(null);
-          },
-          minDate: minDate ? new Date(minDate) : void 0,
-          maxDate: maxDate ? new Date(maxDate) : void 0,
-          disableFuture,
-          disablePast,
-          shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
+        Y: {
+          mask: import_react_imask.IMask.MaskedRange,
+          from: 1900,
+          to: 9999,
+          maxLength: 4
         }
-      ), !hideClearButton && /* @__PURE__ */ import_react19.default.createElement(
-        DialogActions_default,
-        {
-          sx: {
-            p: 1
-          }
-        },
-        /* @__PURE__ */ import_react19.default.createElement(
-          Button_default,
-          {
-            size,
-            variant: "plain",
-            color: "neutral",
-            onClick: () => {
-              handleChange({
-                target: {
-                  name: props.name,
-                  value: ""
-                }
-              });
-              setAnchorEl(null);
-            }
-          },
-          "Clear"
-        )
-      ))
-    )))));
-  }
-);
-
-// src/components/DatePicker/index.ts
-var DatePicker_default = DatePicker;
-
-// src/components/Textarea/Textarea.tsx
-var import_react20 = __toESM(require("react"));
-var import_joy28 = require("@mui/joy");
-var import_framer_motion18 = require("framer-motion");
-var MotionTextarea = (0, import_framer_motion18.motion)(import_joy28.Textarea);
-var Textarea = (props) => {
+      },
+      format: (date) => formatValueString(date, format),
+      parse: (str) => parseDate(str, format),
+      autofix: "pad",
+      overwrite: true
+    }
+  );
+});
+var DatePicker = (0, import_react19.forwardRef)((inProps, ref) => {
+  const props = (0, import_joy27.useThemeProps)({ props: inProps, name: "DatePicker" });
   const {
+    onChange,
+    disabled,
     label,
     error,
     helperText,
-    color,
-    size,
-    disabled,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast,
     required,
-    minRows = 2,
-    maxRows = 4,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
+    format = "YYYY/MM/DD",
+    displayFormat = "YYYY/MM/DD",
+    size,
+    inputReadOnly,
+    hideClearButton,
+    readOnly,
+    shouldDisableDate,
     ...innerProps
   } = props;
-  const textarea = /* @__PURE__ */ import_react20.default.createElement(
-    MotionTextarea,
-    {
-      required,
-      disabled,
-      color: error ? "danger" : color,
-      size,
-      minRows,
-      maxRows,
+  const innerRef = (0, import_react19.useRef)(null);
+  const buttonRef = (0, import_react19.useRef)(null);
+  const [value, setValue] = useControlledState(
+    props.value,
+    props.defaultValue || "",
+    (0, import_react19.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+  );
+  const [displayValue, setDisplayValue] = (0, import_react19.useState)(
+    () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
+  );
+  const [anchorEl, setAnchorEl] = (0, import_react19.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react19.useEffect)(() => {
+    if (!anchorEl) {
+      innerRef.current?.blur();
+    }
+  }, [anchorEl, innerRef]);
+  (0, import_react19.useEffect)(() => {
+    if (value === "") {
+      setDisplayValue("");
+      return;
+    }
+    const formattedValue = formatValueString(parseDate(value, format), displayFormat);
+    if (validValueFormat(formattedValue, displayFormat) && formattedValue !== displayValue) {
+      setDisplayValue(formattedValue);
+    }
+  }, [displayFormat, displayValue, format, value]);
+  (0, import_react19.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
+  const handleChange = (0, import_react19.useCallback)(
+    (event) => {
+      const value2 = event.target.value;
+      setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
+      setValue(value2);
+    },
+    [displayFormat, format, setValue]
+  );
+  const handleDisplayInputChange = (0, import_react19.useCallback)(
+    (event) => {
+      if (event.target.value === "") {
+        handleChange({
+          target: {
+            name: props.name,
+            value: ""
+          }
+        });
+        return;
+      }
+      const isValidDisplayValue = validValueFormat(event.target.value, displayFormat);
+      if (isValidDisplayValue) {
+        const parsedDate = parseDate(event.target.value, displayFormat);
+        const formattedValue = formatValueString(parsedDate, format);
+        handleChange({
+          target: {
+            name: props.name,
+            value: formattedValue
+          }
+        });
+      }
+    },
+    [displayFormat, format, handleChange, props.name]
+  );
+  const handleCalendarToggle = (0, import_react19.useCallback)(
+    (event) => {
+      setAnchorEl(anchorEl ? null : event.currentTarget);
+      setTimeout(() => {
+        innerRef.current?.focus();
+      }, 0);
+    },
+    [anchorEl, setAnchorEl, innerRef]
+  );
+  const handleInputMouseDown = (0, import_react19.useCallback)(
+    (event) => {
+      if (inputReadOnly) {
+        event.preventDefault();
+        buttonRef.current?.focus();
+      }
+    },
+    [inputReadOnly, buttonRef]
+  );
+  return /* @__PURE__ */ import_react19.default.createElement(DatePickerRoot, null, /* @__PURE__ */ import_react19.default.createElement(import_base2.FocusTrap, { open: true }, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
+    Input_default,
+    {
+      ...innerProps,
+      color: error ? "danger" : innerProps.color,
+      ref: innerRef,
+      size,
+      value: displayValue,
+      onChange: handleDisplayInputChange,
+      placeholder: displayFormat,
+      disabled,
+      required,
+      error,
+      slotProps: {
+        input: {
+          component: TextMaskAdapter3,
+          ref: innerRef,
+          format: displayFormat,
+          sx: {
+            "&:hover": {
+              cursor: inputReadOnly || readOnly ? "default" : "text"
+            }
+          },
+          onMouseDown: handleInputMouseDown
+        }
+      },
+      className,
+      sx,
+      endDecorator: /* @__PURE__ */ import_react19.default.createElement(
+        CalendarButton,
+        {
+          ref: buttonRef,
+          variant: "plain",
+          onClick: readOnly ? void 0 : handleCalendarToggle,
+          "aria-label": "Toggle Calendar",
+          "aria-controls": "date-picker-popper",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          disabled
+        },
+        /* @__PURE__ */ import_react19.default.createElement(import_CalendarToday.default, null)
+      ),
+      label,
+      helperText,
+      readOnly: readOnly || inputReadOnly
+    }
+  ), open && /* @__PURE__ */ import_react19.default.createElement(import_base2.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react19.default.createElement(
+    StyledPopper,
+    {
+      id: "date-picker-popper",
+      open: true,
+      anchorEl,
+      placement: "bottom-end",
+      onMouseDown: (e) => e.preventDefault(),
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [4, 4]
+          }
+        }
+      ],
+      "aria-label": "Calendar Tooltip",
+      "aria-expanded": open
+    },
+    /* @__PURE__ */ import_react19.default.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react19.default.createElement(
+      Calendar_default,
+      {
+        value: value && !Number.isNaN(parseDate(value, format).getTime()) ? [parseDate(value, format), void 0] : void 0,
+        onChange: ([date]) => {
+          handleChange({
+            target: {
+              name: props.name,
+              value: formatValueString(date, format)
+            }
+          });
+          setAnchorEl(null);
+        },
+        minDate: minDate ? new Date(minDate) : void 0,
+        maxDate: maxDate ? new Date(maxDate) : void 0,
+        disableFuture,
+        disablePast,
+        shouldDisableDate: shouldDisableDate ? (date) => shouldDisableDate(formatValueString(date, format)) : void 0
+      }
+    ), !hideClearButton && /* @__PURE__ */ import_react19.default.createElement(
+      DialogActions_default,
+      {
+        sx: {
+          p: 1
+        }
+      },
+      /* @__PURE__ */ import_react19.default.createElement(
+        Button_default,
+        {
+          size,
+          variant: "plain",
+          color: "neutral",
+          onClick: () => {
+            handleChange({
+              target: {
+                name: props.name,
+                value: ""
+              }
+            });
+            setAnchorEl(null);
+          }
+        },
+        "Clear"
+      )
+    ))
+  )))));
+});
+
+// src/components/DatePicker/index.ts
+var DatePicker_default = DatePicker;
+
+// src/components/Textarea/Textarea.tsx
+var import_react20 = __toESM(require("react"));
+var import_joy28 = require("@mui/joy");
+var import_framer_motion18 = require("framer-motion");
+var MotionTextarea = (0, import_framer_motion18.motion)(import_joy28.Textarea);
+var Textarea = (props) => {
+  const {
+    label,
+    error,
+    helperText,
+    color,
+    size,
+    disabled,
+    required,
+    minRows = 2,
+    maxRows = 4,
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx,
+    className,
+    ...innerProps
+  } = props;
+  const textarea = /* @__PURE__ */ import_react20.default.createElement(
+    MotionTextarea,
+    {
+      required,
+      disabled,
+      color: error ? "danger" : color,
+      size,
+      minRows,
+      maxRows,
       ...innerProps
     }
   );
@@ -2793,18 +2601,9 @@ function Pagination(props) {
     setPaginationModel({ ...paginationModel, page: newPage });
   };
   const firstPage = 1;
-  const lastPage = Math.max(
-    firstPage,
-    Math.ceil(rowCount / paginationModel.pageSize)
-  );
-  const beforePages = [
-    paginationModel.page - 2,
-    paginationModel.page - 1
-  ].filter((p) => p > 1);
-  const afterPages = [
-    paginationModel.page + 1,
-    paginationModel.page + 2
-  ].filter((p) => p <= lastPage - 1);
+  const lastPage = Math.max(firstPage, Math.ceil(rowCount / paginationModel.pageSize));
+  const beforePages = [paginationModel.page - 2, paginationModel.page - 1].filter((p) => p > 1);
+  const afterPages = [paginationModel.page + 1, paginationModel.page + 2].filter((p) => p <= lastPage - 1);
   const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
   const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
   (0, import_react23.useEffect)(() => {
@@ -2823,16 +2622,7 @@ function Pagination(props) {
       "aria-label": "Previous page"
     },
     /* @__PURE__ */ import_react23.default.createElement(import_ChevronLeft2.default, null)
-  ), paginationModel.page !== firstPage && /* @__PURE__ */ import_react23.default.createElement(
-    PaginationButton,
-    {
-      size,
-      variant: "plain",
-      color: "neutral",
-      onClick: () => handlePageChange(firstPage)
-    },
-    firstPage
-  ), isMoreBeforePages && /* @__PURE__ */ import_react23.default.createElement(
+  ), paginationModel.page !== firstPage && /* @__PURE__ */ import_react23.default.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(firstPage) }, firstPage), isMoreBeforePages && /* @__PURE__ */ import_react23.default.createElement(
     PaginationButton,
     {
       size,
@@ -2842,27 +2632,7 @@ function Pagination(props) {
       "aria-label": "More previous pages"
     },
     "..."
-  ), beforePages.map((p) => /* @__PURE__ */ import_react23.default.createElement(
-    PaginationButton,
-    {
-      key: p,
-      size,
-      variant: "plain",
-      color: "neutral",
-      onClick: () => handlePageChange(p)
-    },
-    p
-  )), /* @__PURE__ */ import_react23.default.createElement(PaginationButton, { active: "active", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ import_react23.default.createElement(
-    PaginationButton,
-    {
-      key: p,
-      size,
-      variant: "plain",
-      color: "neutral",
-      onClick: () => handlePageChange(p)
-    },
-    p
-  )), isMoreAfterPages && /* @__PURE__ */ import_react23.default.createElement(
+  ), beforePages.map((p) => /* @__PURE__ */ import_react23.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ import_react23.default.createElement(PaginationButton, { active: "active", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ import_react23.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ import_react23.default.createElement(
     PaginationButton,
     {
       size,
@@ -2872,16 +2642,7 @@ function Pagination(props) {
       onClick: () => handlePageChange(paginationModel.page + 3)
     },
     "..."
-  ), paginationModel.page !== lastPage && /* @__PURE__ */ import_react23.default.createElement(
-    PaginationButton,
-    {
-      size,
-      variant: "plain",
-      color: "neutral",
-      onClick: () => handlePageChange(lastPage)
-    },
-    lastPage
-  ), /* @__PURE__ */ import_react23.default.createElement(
+  ), paginationModel.page !== lastPage && /* @__PURE__ */ import_react23.default.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(lastPage) }, lastPage), /* @__PURE__ */ import_react23.default.createElement(
     PaginationIconButton,
     {
       size,
@@ -2933,6 +2694,118 @@ function InfoSign(props) {
 var InfoSign_default = InfoSign;
 
 // src/components/DataTable/DataTable.tsx
+function extractFieldsFromGroupingModel(items) {
+  const fields = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if ("groupId" in item) {
+      const children = Array.isArray(item.children) ? item.children : [item.children];
+      const childFields = extractFieldsFromGroupingModel(children);
+      childFields.forEach((field) => fields.add(field));
+    } else {
+      fields.add(item.field);
+    }
+  }
+  return fields;
+}
+function reorderColumnsByGroupingModel(columns, columnGroupingModel) {
+  const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
+  const orderedFields = [];
+  function collectFieldsInOrder(items) {
+    for (const item of items) {
+      if ("groupId" in item) {
+        const children = Array.isArray(item.children) ? item.children : [item.children];
+        collectFieldsInOrder(children);
+      } else {
+        if (!orderedFields.includes(item.field)) {
+          orderedFields.push(item.field);
+        }
+      }
+    }
+  }
+  collectFieldsInOrder(columnGroupingModel);
+  const columnMap = new Map(columns.map((col) => [col.field, col]));
+  const reorderedColumns = [];
+  for (const field of orderedFields) {
+    const column = columnMap.get(field);
+    if (column) {
+      reorderedColumns.push(column);
+    }
+  }
+  for (const column of columns) {
+    if (!fieldsInGroupingModel.has(column.field)) {
+      reorderedColumns.push(column);
+    }
+  }
+  return reorderedColumns;
+}
+function flattenColumnGroups(items, groupPath = [], columnIndex = { current: 0 }) {
+  const result = [];
+  for (const item of items) {
+    if ("groupId" in item) {
+      const newPath = [...groupPath, item.groupId];
+      const children = Array.isArray(item.children) ? item.children : [item.children];
+      result.push(...flattenColumnGroups(children, newPath, columnIndex));
+    } else {
+      result.push({
+        ...item,
+        groupPath,
+        columnIndex: columnIndex.current++
+      });
+    }
+  }
+  return result;
+}
+function calculateColumnGroups(columnGroupingModel, columns) {
+  const fieldsInGroupingModel = extractFieldsFromGroupingModel(columnGroupingModel);
+  const flattenedColumns = flattenColumnGroups(columnGroupingModel);
+  const columnIndexMap = new Map(flattenedColumns.map((col) => [col.field, col.columnIndex]));
+  const processedGroups = /* @__PURE__ */ new Map();
+  const groupsByLevel = [];
+  let maxLevel = 0;
+  function processGroup(items, level, parentGroupId) {
+    let minIndex = Infinity;
+    let maxIndex = -Infinity;
+    for (const item of items) {
+      if ("groupId" in item) {
+        const groupKey = parentGroupId ? `${parentGroupId}.${item.groupId}` : item.groupId;
+        if (!processedGroups.has(groupKey)) {
+          const children = Array.isArray(item.children) ? item.children : [item.children];
+          const { startIndex, colspan } = processGroup(children, level + 1, groupKey);
+          const group = {
+            groupId: item.groupId,
+            headerName: item.headerName,
+            colspan,
+            level,
+            startIndex
+          };
+          processedGroups.set(groupKey, group);
+          if (!groupsByLevel[level]) {
+            groupsByLevel[level] = [];
+          }
+          groupsByLevel[level].push(group);
+          maxLevel = Math.max(maxLevel, level);
+          minIndex = Math.min(minIndex, startIndex);
+          maxIndex = Math.max(maxIndex, startIndex + colspan - 1);
+        }
+      } else {
+        const columnIndex = columnIndexMap.get(item.field);
+        if (columnIndex !== void 0) {
+          minIndex = Math.min(minIndex, columnIndex);
+          maxIndex = Math.max(maxIndex, columnIndex);
+        }
+      }
+    }
+    return {
+      startIndex: minIndex === Infinity ? 0 : minIndex,
+      colspan: maxIndex === -Infinity ? 0 : maxIndex - minIndex + 1
+    };
+  }
+  processGroup(columnGroupingModel, 0);
+  groupsByLevel.forEach((level) => {
+    level.sort((a, b) => a.startIndex - b.startIndex);
+  });
+  return { groups: groupsByLevel, maxLevel, fieldsInGroupingModel };
+}
 function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
 }
@@ -2957,15 +2830,7 @@ var TextEllipsis = ({ children }) => {
   }, [children]);
   const content = /* @__PURE__ */ import_react25.default.createElement(EllipsisDiv, { ref: textRef }, children);
   if (showTooltip) {
-    return /* @__PURE__ */ import_react25.default.createElement(
-      Tooltip_default,
-      {
-        title: children,
-        placement: "top",
-        onClick: (e) => e.stopPropagation()
-      },
-      content
-    );
+    return /* @__PURE__ */ import_react25.default.createElement(Tooltip_default, { title: children, placement: "top", onClick: (e) => e.stopPropagation() }, content);
   }
   return content;
 };
@@ -3011,7 +2876,7 @@ var OverlayWrapper = (0, import_joy33.styled)("tr", {
   }
 });
 var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
-var Resizer = (ref) => /* @__PURE__ */ import_react25.default.createElement(
+var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react25.default.createElement(
   Box_default,
   {
     sx: {
@@ -3029,6 +2894,7 @@ var Resizer = (ref) => /* @__PURE__ */ import_react25.default.createElement(
       const onMouseMove = (e2) => {
         if (initialWidth && initialX) {
           ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
+          targetRef.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
         }
       };
       const onMouseUp = () => {
@@ -3139,20 +3005,19 @@ var HeadCell = (props) => {
     isPinned,
     pinnedStartPosition,
     pinnedEndPosition,
-    headerRef
+    headerRef,
+    tableColRef
   } = props;
   const theme = (0, import_joy33.useTheme)();
   const ref = headerRef;
+  const colRef = tableColRef;
   const [isHovered, setIsHovered] = (0, import_react25.useState)(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = (0, import_react25.useMemo)(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
   );
-  const resizer = (0, import_react25.useMemo)(
-    () => resizable ?? true ? Resizer(ref) : null,
-    [resizable, ref]
-  );
+  const resizer = (0, import_react25.useMemo)(() => resizable ?? true ? Resizer(ref, colRef) : null, [resizable, ref, colRef]);
   const style = (0, import_react25.useMemo)(
     () => ({
       width,
@@ -3167,17 +3032,7 @@ var HeadCell = (props) => {
       // TODO: multi-sort때문에 일단 추가한 property, joy-ui에서는 multi-sort시 th에 user-select: none을 적용하고 툴팁을 띄워준다.
       userSelect: "none"
     }),
-    [
-      isPinned,
-      maxWidth,
-      minWidth,
-      pinnedEndPosition,
-      pinnedStartPosition,
-      sortable,
-      stickyHeader,
-      theme,
-      width
-    ]
+    [isPinned, maxWidth, minWidth, pinnedEndPosition, pinnedStartPosition, sortable, stickyHeader, theme, width]
   );
   const textAlign = getTextAlign(props);
   const initialSort = sortOrder[0];
@@ -3234,20 +3089,7 @@ var HeadCell = (props) => {
       whileHover: "hover",
       initial: "initial"
     },
-    /* @__PURE__ */ import_react25.default.createElement(
-      Stack_default,
-      {
-        gap: 1,
-        direction: "row",
-        justifyContent: textAlign,
-        alignItems: "center"
-      },
-      textAlign === "end" && sortIcon,
-      textAlign === "end" && infoSign,
-      /* @__PURE__ */ import_react25.default.createElement(TextEllipsis, null, headerName ?? field, editMode && required && /* @__PURE__ */ import_react25.default.createElement(Asterisk, null, "*")),
-      textAlign === "start" && infoSign,
-      textAlign === "start" && sortIcon
-    ),
+    /* @__PURE__ */ import_react25.default.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center" }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ import_react25.default.createElement(TextEllipsis, null, headerName ?? field, editMode && required && /* @__PURE__ */ import_react25.default.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
     resizer
   );
 };
@@ -3266,7 +3108,10 @@ var BodyCell = (props) => {
     pinnedStartPosition,
     pinnedEndPosition,
     row,
-    rowId
+    rowId,
+    cellClassName,
+    onCellEditStart,
+    onCellEditStop
   } = props;
   const theme = (0, import_joy33.useTheme)();
   const [value, setValue] = (0, import_react25.useState)(row[field]);
@@ -3275,20 +3120,22 @@ var BodyCell = (props) => {
     () => ({
       row,
       value,
-      id: rowId
+      id: rowId,
+      field
     }),
-    [row, rowId, value]
+    [row, rowId, value, field]
   );
   const editMode = (0, import_react25.useMemo)(
     () => !!(props.editMode && (typeof isCellEditable === "function" ? isCellEditable(params) : isCellEditable ?? true)),
     [props.editMode, isCellEditable, params]
   );
+  const propsComponentProps = "componentProps" in props ? props.componentProps : null;
   const componentProps = (0, import_react25.useMemo)(
     () => ({
-      ..."componentProps" in props && (typeof props.componentProps === "function" ? props.componentProps(params) : props.componentProps || {}),
+      ..."componentProps" in props && (typeof propsComponentProps === "function" ? propsComponentProps(params) : propsComponentProps || {}),
       size: "sm"
     }),
-    ["componentProps" in props ? props.componentProps : null, params]
+    [props, propsComponentProps, params]
   );
   const editModeComponentProps = (0, import_react25.useMemo)(
     () => ({
@@ -3297,7 +3144,7 @@ var BodyCell = (props) => {
         componentProps.onChange?.(e);
         setValue(e.target.value);
         if (type === "select") {
-          props.onCellEditStop?.({
+          onCellEditStop?.({
             ...params,
             originalRow: row,
             row: {
@@ -3310,7 +3157,7 @@ var BodyCell = (props) => {
       },
       onFocus: (e) => {
         componentProps.onFocus?.(e);
-        props.onCellEditStart?.({
+        onCellEditStart?.({
           ...params,
           originalRow: row,
           row: {
@@ -3323,7 +3170,7 @@ var BodyCell = (props) => {
       onBlur: (e) => {
         componentProps.onBlur?.(e);
         if (type && ["number", "text", "longText", "currency", "date"].includes(type)) {
-          props.onCellEditStop?.({
+          onCellEditStop?.({
             ...params,
             originalRow: row,
             row: {
@@ -3338,7 +3185,7 @@ var BodyCell = (props) => {
         onChangeComplete: (e) => {
           componentProps.onChangeComplete?.(e);
           setValue(e.target.value);
-          props.onCellEditStop?.({
+          onCellEditStop?.({
             ...params,
             originalRow: row,
             row: {
@@ -3350,29 +3197,14 @@ var BodyCell = (props) => {
         }
       }
     }),
-    [
-      params,
-      row,
-      field,
-      value,
-      componentProps,
-      type,
-      props.onCellEditStop,
-      props.onCellEditStart
-    ]
+    [params, row, field, value, componentProps, type, onCellEditStop, onCellEditStart]
   );
   const EditModeComponent = (0, import_react25.useMemo)(() => {
     if (renderEditCell) {
       return (0, import_react25.createElement)((0, import_react25.memo)(renderEditCell), params);
     }
     return {
-      date: /* @__PURE__ */ import_react25.default.createElement(
-        DatePicker_default,
-        {
-          value,
-          ...editModeComponentProps
-        }
-      ),
+      date: /* @__PURE__ */ import_react25.default.createElement(DatePicker_default, { value, ...editModeComponentProps }),
       currency: /* @__PURE__ */ import_react25.default.createElement(
         CurrencyInput_default,
         {
@@ -3380,29 +3212,9 @@ var BodyCell = (props) => {
           ...editModeComponentProps
         }
       ),
-      number: /* @__PURE__ */ import_react25.default.createElement(
-        Input_default,
-        {
-          value,
-          type: "number",
-          ...editModeComponentProps
-        }
-      ),
-      text: /* @__PURE__ */ import_react25.default.createElement(
-        Input_default,
-        {
-          value,
-          type: "text",
-          ...editModeComponentProps
-        }
-      ),
-      longText: /* @__PURE__ */ import_react25.default.createElement(
-        Textarea_default,
-        {
-          value,
-          ...editModeComponentProps
-        }
-      ),
+      number: /* @__PURE__ */ import_react25.default.createElement(Input_default, { value, type: "number", ...editModeComponentProps }),
+      text: /* @__PURE__ */ import_react25.default.createElement(Input_default, { value, type: "text", ...editModeComponentProps }),
+      longText: /* @__PURE__ */ import_react25.default.createElement(Textarea_default, { value, ...editModeComponentProps }),
       autocomplete: /* @__PURE__ */ import_react25.default.createElement(
         Autocomplete_default,
         {
@@ -3420,50 +3232,34 @@ var BodyCell = (props) => {
         }
       )
     }[type || "text"];
-  }, [value, editModeComponentProps, type]);
+  }, [value, editModeComponentProps, type, renderEditCell, params]);
+  const linkComponentFromProps = props.component;
   const ReadModeComponent = (0, import_react25.useMemo)(() => {
     if (renderCell) {
       return (0, import_react25.createElement)((0, import_react25.memo)(renderCell), params);
     }
     const innerText = value;
     const typedComponent = {
-      link: import_react25.default.createElement(
-        props.component || import_joy33.Link,
-        {
-          children: innerText,
-          ...componentProps
-        }
-      )
+      link: import_react25.default.createElement(linkComponentFromProps || import_joy33.Link, {
+        children: innerText,
+        ...componentProps
+      })
     }[type || "text"];
     return typedComponent || innerText;
-  }, [value, renderCell, params, type, componentProps]);
+  }, [value, renderCell, params, type, componentProps, linkComponentFromProps]);
+  const getActions = props.getActions;
   const CellComponent = (0, import_react25.useMemo)(() => {
     if (type === "actions") {
-      return /* @__PURE__ */ import_react25.default.createElement(
-        Stack_default,
-        {
-          direction: "row",
-          gap: 1,
-          justifyContent: "center",
-          alignItems: "center"
-        },
-        props.getActions?.(params)
-      );
+      return /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", gap: 1, justifyContent: "center", alignItems: "center" }, getActions?.(params));
     }
     return editMode && EditModeComponent ? EditModeComponent : ReadModeComponent;
-  }, [
-    type,
-    props.getActions,
-    params,
-    editMode,
-    EditModeComponent,
-    ReadModeComponent
-  ]);
-  const showTooltip = (0, import_react25.useMemo)(
-    () => noWrap && type === "longText",
-    [noWrap, type]
-  );
+  }, [type, getActions, params, editMode, EditModeComponent, ReadModeComponent]);
+  const showTooltip = (0, import_react25.useMemo)(() => noWrap && type === "longText", [noWrap, type]);
   const isBoundary = props.isLastStartPinnedColumn || props.isLastEndPinnedColumn;
+  const computedCellClassName = (0, import_react25.useMemo)(
+    () => (typeof cellClassName === "function" ? cellClassName(params) : cellClassName) || "",
+    [cellClassName, params]
+  );
   (0, import_react25.useEffect)(() => {
     setValue(row[field]);
   }, [row, field]);
@@ -3482,11 +3278,11 @@ var BodyCell = (props) => {
         zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + ${isBoundary ? 2 : 3})` : void 0,
         "--TableCell-dataBackground": isPinned ? `var(--TableCell-headBackground)` : void 0
       },
-      className: isLastStartPinnedColumn && "is-last-left" || isLastEndPinnedColumn && "is-last-right" || ""
+      className: [isLastStartPinnedColumn && "is-last-left", isLastEndPinnedColumn && "is-last-right", computedCellClassName].filter(Boolean).join(" ") || ""
     },
     (0, import_react25.useMemo)(
       () => showTooltip ? /* @__PURE__ */ import_react25.default.createElement(CellTextEllipsis, null, CellComponent) : CellComponent,
-      [CellComponent, showTooltip, value]
+      [CellComponent, showTooltip]
     )
   );
 };
@@ -3556,31 +3352,40 @@ function useDataTableRenderer({
   editMode,
   getId: _getId,
   isTotalSelected: _isTotalSelected,
-  isRowSelectable
+  isRowSelectable,
+  columnGroupingModel
+  // Add this prop
 }) {
+  if (pinnedColumns && columnGroupingModel) {
+    throw new Error(
+      "You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
+    );
+  }
   const onSelectionModelChangeRef = (0, import_react25.useRef)(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = (0, import_react25.useState)(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
-    (0, import_react25.useCallback)(
-      (sortModel2) => onSortModelChange?.(sortModel2),
-      [onSortModelChange]
-    )
+    (0, import_react25.useCallback)((sortModel2) => onSortModelChange?.(sortModel2), [onSortModelChange])
   );
+  const reorderedColumns = (0, import_react25.useMemo)(() => {
+    if (!columnGroupingModel) return columnsProp;
+    return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
+  }, [columnsProp, columnGroupingModel]);
   const columnsByField = (0, import_react25.useMemo)(
-    () => columnsProp.reduce(
+    () => reorderedColumns.reduce(
       (acc, curr) => ({
         ...acc,
         [curr.field]: {
           ...curr,
-          headerRef: import_react25.default.createRef()
+          headerRef: import_react25.default.createRef(),
+          tableColRef: import_react25.default.createRef()
         }
       }),
       {}
     ),
-    [columnsProp]
+    [reorderedColumns]
   );
   const sortComparator = (0, import_react25.useCallback)(
     (rowA, rowB) => {
@@ -3642,9 +3447,7 @@ function useDataTableRenderer({
     [dataInPage, isRowSelectable, getId]
   );
   const isAllSelected = (0, import_react25.useMemo)(
-    () => selectableDataInPage.length > 0 && selectableDataInPage.every(
-      (row, i) => selectedModelSet.has(getId(row, i))
-    ),
+    () => selectableDataInPage.length > 0 && selectableDataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
     [selectableDataInPage, selectedModelSet, getId]
   );
   const rowCount = totalRowsProp || rows.length;
@@ -3662,22 +3465,25 @@ function useDataTableRenderer({
     columnsByField[f].minWidth ?? 0,
     [columnWidths, columnsByField]
   );
+  const processedColumnGroups = (0, import_react25.useMemo)(() => {
+    if (!columnGroupingModel) return null;
+    return calculateColumnGroups(columnGroupingModel, reorderedColumns);
+  }, [columnGroupingModel, reorderedColumns]);
   const columns = (0, import_react25.useMemo)(() => {
-    const baseColumns = columnsProp || // fallback
-    Object.keys(rows[0] || {}).map((key) => ({
-      field: key
-    }));
+    const baseColumns = reorderedColumns.length > 0 ? reorderedColumns : (
+      // fallback
+      Object.keys(rows[0] || {}).map((key) => ({
+        field: key
+      }))
+    );
     return baseColumns.map((column) => {
-      const isLeftPinned = pinnedColumns?.left?.includes(
-        column.field
-      );
-      const isRightPinned = pinnedColumns?.right?.includes(
-        column.field
-      );
+      const isLeftPinned = pinnedColumns?.left?.includes(column.field);
+      const isRightPinned = pinnedColumns?.right?.includes(column.field);
       const isPinned = isLeftPinned || isRightPinned;
       return {
         ...column,
         headerRef: columnsByField[column.field].headerRef,
+        tableColRef: columnsByField[column.field].tableColRef,
         isCellEditable: editMode && (typeof column.isCellEditable === "function" ? column.isCellEditable : column.isCellEditable ?? true),
         sort: sortModel.find((sort) => sort.field === column.field)?.sort,
         sortOrder: columnsByField[column.field]?.sortOrder || sortOrder,
@@ -3685,17 +3491,12 @@ function useDataTableRenderer({
         isLastStartPinnedColumn: isLeftPinned && [...pinnedColumns?.left || []].pop() === column.field,
         isLastEndPinnedColumn: isRightPinned && (pinnedColumns?.right?.[0] ?? null) === column.field,
         // pinned 관련 계산부
-        pinnedStartPosition: pinnedColumns?.left?.slice(
-          0,
-          isLeftPinned ? pinnedColumns.left.indexOf(column.field) : pinnedColumns.left.length
-        ).reduce((acc, curr) => acc + getWidth(curr), 0),
-        pinnedEndPosition: pinnedColumns?.right?.slice(
-          isRightPinned ? pinnedColumns.right.indexOf(column.field) + 1 : 0
-        ).reduce((acc, curr) => acc + getWidth(curr), 0)
+        pinnedStartPosition: pinnedColumns?.left?.slice(0, isLeftPinned ? pinnedColumns.left.indexOf(column.field) : pinnedColumns.left.length).reduce((acc, curr) => acc + getWidth(curr), 0),
+        pinnedEndPosition: pinnedColumns?.right?.slice(isRightPinned ? pinnedColumns.right.indexOf(column.field) + 1 : 0).reduce((acc, curr) => acc + getWidth(curr), 0)
       };
     });
   }, [
-    columnsProp,
+    reorderedColumns,
     rows,
     pinnedColumns?.left,
     pinnedColumns?.right,
@@ -3726,9 +3527,7 @@ function useDataTableRenderer({
           setSortModel(newSortModel2);
           return;
         }
-        const newSortModel = multiple ? sortModel.map(
-          (model) => model.field === field ? { field, sort: nextSortOrder } : model
-        ) : [{ field, sort: nextSortOrder }];
+        const newSortModel = multiple ? sortModel.map((model) => model.field === field ? { field, sort: nextSortOrder } : model) : [{ field, sort: nextSortOrder }];
         setSortModel(newSortModel);
       } else {
         const newSortModel = multiple ? [...sortModel, { field, sort: columnSortOrder[0] }] : [{ field, sort: columnSortOrder[0] }];
@@ -3765,10 +3564,7 @@ function useDataTableRenderer({
     isAllSelected,
     // all rows are selected on this page
     isTotalSelected,
-    isSelectedRow: (0, import_react25.useCallback)(
-      (model) => selectedModelSet.has(model),
-      [selectedModelSet]
-    ),
+    isSelectedRow: (0, import_react25.useCallback)((model) => selectedModelSet.has(model), [selectedModelSet]),
     isRowSelectable: (0, import_react25.useCallback)(
       (rowId, row) => {
         if (!isRowSelectable) return true;
@@ -3781,16 +3577,12 @@ function useDataTableRenderer({
       setFocusedRowId(rowId);
     }, []),
     onAllCheckboxChange: (0, import_react25.useCallback)(() => {
-      onSelectionModelChange?.(
-        isAllSelected ? [] : selectableDataInPage.map(getId)
-      );
+      onSelectionModelChange?.(isAllSelected ? [] : selectableDataInPage.map(getId));
     }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
     onCheckboxChange: (0, import_react25.useCallback)(
       (event, selectedModel) => {
         if (selectedModelSet.has(selectedModel)) {
-          const newSelectionModel = (selectionModel || []).filter(
-            (model) => model !== selectedModel
-          );
+          const newSelectionModel = (selectionModel || []).filter((model) => model !== selectedModel);
           onSelectionModelChange?.(newSelectionModel);
         } else {
           const newSelectionModel = [...selectionModel || [], selectedModel];
@@ -3800,15 +3592,13 @@ function useDataTableRenderer({
       [selectionModel, onSelectionModelChange, selectedModelSet]
     ),
     columns,
+    processedColumnGroups,
     onTotalSelect: (0, import_react25.useCallback)(() => {
       const selectableRows = rows.filter((row, i) => {
         if (!isRowSelectable) return true;
         return isRowSelectable({ row, id: getId(row, i) });
       });
-      onSelectionModelChange?.(
-        isTotalSelected ? [] : selectableRows.map(getId),
-        !isTotalSelected
-      );
+      onSelectionModelChange?.(isTotalSelected ? [] : selectableRows.map(getId), !isTotalSelected);
     }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable])
   };
 }
@@ -3845,17 +3635,15 @@ function Component(props, apiRef) {
     getId: ____________,
     // getId is used in useDataTableRenderer
     loading,
+    columnGroupingModel: _________________,
+    // columnGroupingModel is used in useDataTableRenderer
     slots: {
       checkbox: RenderCheckbox = Checkbox_default,
       toolbar: Toolbar,
       footer: Footer,
       loadingOverlay: LoadingOverlay = DefaultLoadingOverlay
     } = {},
-    slotProps: {
-      checkbox: checkboxProps = {},
-      toolbar: toolbarProps,
-      background: backgroundProps = {}
-    } = {},
+    slotProps: { checkbox: checkboxProps = {}, toolbar: toolbarProps, background: backgroundProps = {} } = {},
     stripe,
     isTotalSelected: ___________,
     ...innerProps
@@ -3865,6 +3653,7 @@ function Component(props, apiRef) {
   const tableBodyRef = (0, import_react25.useRef)(null);
   const {
     columns,
+    processedColumnGroups,
     isAllSelected,
     isSelectedRow,
     isRowSelectable: isRowSelectableCheck,
@@ -3900,13 +3689,7 @@ function Component(props, apiRef) {
       onRowClick?.({ row, rowId }, e);
       checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
     },
-    [
-      onRowClick,
-      checkboxSelection,
-      disableSelectionOnClick,
-      onCheckboxChange,
-      isRowSelectableCheck
-    ]
+    [onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange, isRowSelectableCheck]
   );
   const getRowFocusHandler = (0, import_react25.useCallback)(
     (rowId) => () => {
@@ -3964,16 +3747,7 @@ function Component(props, apiRef) {
         justifyContent: "space-between",
         alignItems: "center"
       },
-      !!checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ import_react25.default.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(selectableRowCount), " items")), isTotalSelected && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectableRowCount), " items are selected."), /* @__PURE__ */ import_react25.default.createElement(
-        Button_default,
-        {
-          size: "sm",
-          variant: "plain",
-          color: "danger",
-          onClick: onTotalSelect
-        },
-        "Cancel"
-      ))),
+      !!checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ import_react25.default.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(selectableRowCount), " items")), isTotalSelected && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectableRowCount), " items are selected."), /* @__PURE__ */ import_react25.default.createElement(Button_default, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel"))),
       Toolbar && /* @__PURE__ */ import_react25.default.createElement(Toolbar, { ...toolbarProps || {} })
     ),
     /* @__PURE__ */ import_react25.default.createElement(
@@ -3987,7 +3761,8 @@ function Component(props, apiRef) {
           boxShadow: "sm",
           borderRadius: "sm",
           "--DataTableSheet-width": parentRef.current?.clientWidth + "px",
-          backgroundColor: "white"
+          backgroundColor: "white",
+          "--TableCell-cornerRadius": "0px"
         },
         className: [
           ...(parentRef.current?.scrollLeft || 0) > 0 ? ["ScrollableRight"] : [],
@@ -3996,16 +3771,34 @@ function Component(props, apiRef) {
         ref: parentRef,
         ...backgroundProps
       },
-      /* @__PURE__ */ import_react25.default.createElement(Table, { ...innerProps }, /* @__PURE__ */ import_react25.default.createElement("thead", null, /* @__PURE__ */ import_react25.default.createElement("tr", null, checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(
-        "th",
+      /* @__PURE__ */ import_react25.default.createElement(Table, { ...innerProps }, /* @__PURE__ */ import_react25.default.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(
+        "col",
         {
           style: {
-            width: "40px",
-            textAlign: "center"
+            width: "40px"
           }
-        },
-        /* @__PURE__ */ import_react25.default.createElement(
-          RenderCheckbox,
+        }
+      ), columns.map((c) => /* @__PURE__ */ import_react25.default.createElement(
+        "col",
+        {
+          ref: c.tableColRef,
+          key: `${c.field.toString()}_${c.width}`,
+          style: {
+            width: c.width
+          }
+        }
+      ))), /* @__PURE__ */ import_react25.default.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ import_react25.default.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ import_react25.default.createElement(
+        "th",
+        {
+          rowSpan: processedColumnGroups.maxLevel + 2,
+          style: {
+            width: "40px",
+            textAlign: "center",
+            verticalAlign: "middle"
+          }
+        },
+        /* @__PURE__ */ import_react25.default.createElement(
+          RenderCheckbox,
           {
             onChange: onAllCheckboxChange,
             checked: isAllSelected,
@@ -4014,16 +3807,52 @@ function Component(props, apiRef) {
             ...checkboxProps
           }
         )
-      ), columns.map((c, i) => /* @__PURE__ */ import_react25.default.createElement(
-        HeadCell2,
+      ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ import_react25.default.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.map((group, groupIndex) => {
+        const nextGroup = levelGroups[groupIndex + 1];
+        const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
+        return /* @__PURE__ */ import_react25.default.createElement(import_react25.Fragment, { key: group.groupId }, /* @__PURE__ */ import_react25.default.createElement(
+          "th",
+          {
+            colSpan: group.colspan,
+            style: {
+              textAlign: "center",
+              fontWeight: "bold",
+              verticalAlign: "middle"
+            }
+          },
+          group.headerName ?? group.groupId
+        ), emptyCells > 0 && Array.from({ length: emptyCells }).map((_2, i) => /* @__PURE__ */ import_react25.default.createElement("th", { key: `empty-between-${level}-${groupIndex}-${i}`, colSpan: 1 })));
+      }))), /* @__PURE__ */ import_react25.default.createElement("tr", null, !processedColumnGroups && checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(
+        "th",
         {
-          tableId,
-          key: `${c.field.toString()}_${i}`,
-          stickyHeader: props.stickyHeader,
-          editMode: !!c.isCellEditable,
-          onSortChange: handleSortChange,
-          ...c
-        }
+          style: {
+            width: "40px",
+            textAlign: "center"
+          }
+        },
+        /* @__PURE__ */ import_react25.default.createElement(
+          RenderCheckbox,
+          {
+            onChange: onAllCheckboxChange,
+            checked: isAllSelected,
+            indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+            disabled: dataInPage.length > 0 && !selectableRowCount,
+            ...checkboxProps
+          }
+        )
+      ), columns.map((c, i) => (
+        // @ts-ignore
+        /* @__PURE__ */ import_react25.default.createElement(
+          HeadCell2,
+          {
+            tableId,
+            key: `${c.field.toString()}_${i}`,
+            stickyHeader: props.stickyHeader,
+            editMode: !!c.isCellEditable,
+            onSortChange: handleSortChange,
+            ...c
+          }
+        )
       )))), /* @__PURE__ */ import_react25.default.createElement(
         VirtualizedTableBody,
         {
@@ -4142,9 +3971,7 @@ var CalendarButton2 = (0, import_joy34.styled)(IconButton_default, {
   "&:focus": {
     "--Icon-color": "currentColor",
     outlineOffset: `${theme.getCssVar("focus-thickness")}`,
-    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar(
-      "palette-focusVisible"
-    )}`
+    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
   }
 }));
 var StyledPopper2 = (0, import_joy34.styled)(import_base3.Popper, {
@@ -4181,10 +4008,7 @@ var validValueFormat2 = (value, format) => {
     if (parsedDate1.toString() === "Invalid Date" || parsedDate2.toString() === "Invalid Date") {
       return false;
     }
-    const formattedValue = formatValueString2(
-      [parsedDate1, parsedDate2],
-      format
-    );
+    const formattedValue = formatValueString2([parsedDate1, parsedDate2], format);
     if (value !== formattedValue) {
       return false;
     }
@@ -4236,287 +4060,263 @@ var parseDates = (str, format) => {
 var formatToPattern2 = (format) => {
   return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/DD/g, "D").replace(/[^YMD\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter5 = import_react26.default.forwardRef(
-  function TextMaskAdapter6(props, ref) {
-    const { onChange, format, ...other } = props;
-    return /* @__PURE__ */ import_react26.default.createElement(
-      import_react_imask2.IMaskInput,
-      {
-        ...other,
-        inputRef: ref,
-        onAccept: (value) => onChange({ target: { name: props.name, value } }),
-        mask: Date,
-        pattern: formatToPattern2(format),
-        blocks: {
-          D: {
-            mask: import_react_imask2.IMask.MaskedRange,
-            from: 1,
-            to: 31,
-            maxLength: 2
-          },
-          M: {
-            mask: import_react_imask2.IMask.MaskedRange,
-            from: 1,
-            to: 12,
-            maxLength: 2
-          },
-          Y: {
-            mask: import_react_imask2.IMask.MaskedRange,
-            from: 1900,
-            to: 9999
-          }
+var TextMaskAdapter5 = import_react26.default.forwardRef(function TextMaskAdapter6(props, ref) {
+  const { onChange, format, ...other } = props;
+  return /* @__PURE__ */ import_react26.default.createElement(
+    import_react_imask2.IMaskInput,
+    {
+      ...other,
+      inputRef: ref,
+      onAccept: (value) => onChange({ target: { name: props.name, value } }),
+      mask: Date,
+      pattern: formatToPattern2(format),
+      blocks: {
+        D: {
+          mask: import_react_imask2.IMask.MaskedRange,
+          from: 1,
+          to: 31,
+          maxLength: 2
         },
-        format: (dates) => formatValueString2(dates, format),
-        parse: (str) => parseDates(str, format),
-        autofix: "pad",
-        overwrite: true
-      }
-    );
-  }
-);
-var DateRangePicker = (0, import_react26.forwardRef)(
-  (inProps, ref) => {
-    const props = (0, import_joy34.useThemeProps)({ props: inProps, name: "DateRangePicker" });
-    const {
-      onChange,
-      disabled,
-      label,
-      error,
-      helperText,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      required,
-      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-      sx,
-      className,
-      format = "YYYY/MM/DD",
-      displayFormat = "YYYY/MM/DD",
-      size,
-      inputReadOnly,
-      hideClearButton,
-      readOnly,
-      ...innerProps
-    } = props;
-    const innerRef = (0, import_react26.useRef)(null);
-    const buttonRef = (0, import_react26.useRef)(null);
-    const [value, setValue] = useControlledState(
-      props.value,
-      props.defaultValue || "",
-      (0, import_react26.useCallback)(
-        (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
-        [props.name, onChange]
-      )
-    );
-    const [displayValue, setDisplayValue] = (0, import_react26.useState)(
-      () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
-    );
-    const [anchorEl, setAnchorEl] = (0, import_react26.useState)(null);
-    const open = Boolean(anchorEl);
-    const calendarValue = (0, import_react26.useMemo)(
-      () => value ? parseDates(value, format) : void 0,
-      [value, format]
-    );
-    (0, import_react26.useEffect)(() => {
-      if (value) {
-        try {
-          const dates = parseDates(value, format);
-          const newDisplayValue = formatValueString2(dates, displayFormat);
-          setDisplayValue(newDisplayValue);
-        } catch (error2) {
+        M: {
+          mask: import_react_imask2.IMask.MaskedRange,
+          from: 1,
+          to: 12,
+          maxLength: 2
+        },
+        Y: {
+          mask: import_react_imask2.IMask.MaskedRange,
+          from: 1900,
+          to: 9999
         }
+      },
+      format: (dates) => formatValueString2(dates, format),
+      parse: (str) => parseDates(str, format),
+      autofix: "pad",
+      overwrite: true
+    }
+  );
+});
+var DateRangePicker = (0, import_react26.forwardRef)((inProps, ref) => {
+  const props = (0, import_joy34.useThemeProps)({ props: inProps, name: "DateRangePicker" });
+  const {
+    onChange,
+    disabled,
+    label,
+    error,
+    helperText,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast,
+    required,
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx,
+    className,
+    format = "YYYY/MM/DD",
+    displayFormat = "YYYY/MM/DD",
+    size,
+    inputReadOnly,
+    hideClearButton,
+    readOnly,
+    ...innerProps
+  } = props;
+  const innerRef = (0, import_react26.useRef)(null);
+  const buttonRef = (0, import_react26.useRef)(null);
+  const [value, setValue] = useControlledState(
+    props.value,
+    props.defaultValue || "",
+    (0, import_react26.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+  );
+  const [displayValue, setDisplayValue] = (0, import_react26.useState)(
+    () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
+  );
+  const [anchorEl, setAnchorEl] = (0, import_react26.useState)(null);
+  const open = Boolean(anchorEl);
+  const calendarValue = (0, import_react26.useMemo)(
+    () => value ? parseDates(value, format) : void 0,
+    [value, format]
+  );
+  (0, import_react26.useEffect)(() => {
+    if (value) {
+      try {
+        const dates = parseDates(value, format);
+        const newDisplayValue = formatValueString2(dates, displayFormat);
+        setDisplayValue(newDisplayValue);
+      } catch (error2) {
+      }
+    } else {
+      setDisplayValue("");
+    }
+  }, [displayFormat, value, format]);
+  (0, import_react26.useEffect)(() => {
+    if (!anchorEl) {
+      innerRef.current?.blur();
+    }
+  }, [anchorEl, innerRef]);
+  (0, import_react26.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
+  const handleChange = (0, import_react26.useCallback)(
+    (event) => {
+      const value2 = event.target.value;
+      setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
+      setValue(value2);
+    },
+    [displayFormat, format, setValue]
+  );
+  const handleDisplayInputChange = (0, import_react26.useCallback)(
+    (event) => {
+      if (event.target.value === "") {
+        handleChange({
+          target: {
+            name: props.name,
+            value: ""
+          }
+        });
+        return;
+      }
+      const isValidDisplayValue = validValueFormat2(event.target.value, displayFormat);
+      if (isValidDisplayValue) {
+        const dates = parseDates(event.target.value, displayFormat);
+        const formattedValue = formatValueString2(dates, format);
+        handleChange({
+          target: {
+            name: props.name,
+            value: formattedValue
+          }
+        });
+      }
+    },
+    [displayFormat, format, handleChange, props.name]
+  );
+  const handleCalendarToggle = (0, import_react26.useCallback)(
+    (event) => {
+      setAnchorEl(anchorEl ? null : event.currentTarget);
+      innerRef.current?.focus();
+    },
+    [anchorEl, setAnchorEl, innerRef]
+  );
+  const handleCalendarChange = (0, import_react26.useCallback)(
+    ([date1, date2]) => {
+      if (!date1 || !date2) return;
+      const formattedValue = formatValueString2([date1, date2], format);
+      if (props.value !== void 0) {
+        onChange?.({ target: { name: props.name, value: formattedValue } });
       } else {
-        setDisplayValue("");
+        setDisplayValue(formatValueString2([date1, date2], displayFormat));
+        setValue(formattedValue);
       }
-    }, [displayFormat, value, format]);
-    (0, import_react26.useEffect)(() => {
-      if (!anchorEl) {
-        innerRef.current?.blur();
+      setAnchorEl(null);
+    },
+    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
+  );
+  const handleInputMouseDown = (0, import_react26.useCallback)(
+    (event) => {
+      if (inputReadOnly) {
+        event.preventDefault();
+        buttonRef.current?.focus();
       }
-    }, [anchorEl, innerRef]);
-    (0, import_react26.useImperativeHandle)(ref, () => innerRef.current, [
-      innerRef
-    ]);
-    const handleChange = (0, import_react26.useCallback)(
-      (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2
-        );
-        setValue(value2);
-      },
-      [displayFormat, format, setValue]
-    );
-    const handleDisplayInputChange = (0, import_react26.useCallback)(
-      (event) => {
-        if (event.target.value === "") {
-          handleChange({
-            target: {
-              name: props.name,
-              value: ""
-            }
-          });
-          return;
-        }
-        const isValidDisplayValue = validValueFormat2(
-          event.target.value,
-          displayFormat
-        );
-        if (isValidDisplayValue) {
-          const dates = parseDates(event.target.value, displayFormat);
-          const formattedValue = formatValueString2(dates, format);
-          handleChange({
-            target: {
-              name: props.name,
-              value: formattedValue
+    },
+    [inputReadOnly, buttonRef]
+  );
+  return /* @__PURE__ */ import_react26.default.createElement(DateRangePickerRoot, null, /* @__PURE__ */ import_react26.default.createElement(import_base3.FocusTrap, { open: true }, /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(
+    Input_default,
+    {
+      ...innerProps,
+      color: error ? "danger" : innerProps.color,
+      ref,
+      size,
+      value: displayValue,
+      onChange: handleDisplayInputChange,
+      disabled,
+      required,
+      placeholder: `${displayFormat} - ${displayFormat}`,
+      slotProps: {
+        input: {
+          component: TextMaskAdapter5,
+          ref: innerRef,
+          format: displayFormat,
+          sx: {
+            "&:hover": {
+              cursor: inputReadOnly || readOnly ? "default" : "text"
             }
-          });
-        }
-      },
-      [displayFormat, format, handleChange, props.name]
-    );
-    const handleCalendarToggle = (0, import_react26.useCallback)(
-      (event) => {
-        setAnchorEl(anchorEl ? null : event.currentTarget);
-        innerRef.current?.focus();
-      },
-      [anchorEl, setAnchorEl, innerRef]
-    );
-    const handleCalendarChange = (0, import_react26.useCallback)(
-      ([date1, date2]) => {
-        if (!date1 || !date2) return;
-        const formattedValue = formatValueString2([date1, date2], format);
-        if (props.value !== void 0) {
-          onChange?.({ target: { name: props.name, value: formattedValue } });
-        } else {
-          setDisplayValue(
-            formatValueString2([date1, date2], displayFormat)
-          );
-          setValue(formattedValue);
+          },
+          onMouseDown: handleInputMouseDown
         }
-        setAnchorEl(null);
       },
-      [
-        props.value,
-        props.name,
-        onChange,
-        setValue,
-        setAnchorEl,
-        format,
-        displayFormat
-      ]
-    );
-    const handleInputMouseDown = (0, import_react26.useCallback)(
-      (event) => {
-        if (inputReadOnly) {
-          event.preventDefault();
-          buttonRef.current?.focus();
+      error,
+      className,
+      sx,
+      endDecorator: /* @__PURE__ */ import_react26.default.createElement(
+        CalendarButton2,
+        {
+          ref: buttonRef,
+          variant: "plain",
+          onClick: readOnly ? void 0 : handleCalendarToggle,
+          "aria-label": "Toggle Calendar",
+          "aria-controls": "date-range-picker-popper",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          disabled
+        },
+        /* @__PURE__ */ import_react26.default.createElement(import_CalendarToday2.default, null)
+      ),
+      label,
+      helperText,
+      readOnly: readOnly || inputReadOnly
+    }
+  ), open && /* @__PURE__ */ import_react26.default.createElement(import_base3.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react26.default.createElement(
+    StyledPopper2,
+    {
+      id: "date-range-picker-popper",
+      open: true,
+      anchorEl,
+      placement: "bottom-end",
+      onMouseDown: (e) => e.preventDefault(),
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [4, 4]
+          }
         }
-      },
-      [inputReadOnly, buttonRef]
-    );
-    return /* @__PURE__ */ import_react26.default.createElement(DateRangePickerRoot, null, /* @__PURE__ */ import_react26.default.createElement(import_base3.FocusTrap, { open: true }, /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(
-      Input_default,
+      ],
+      "aria-label": "Calendar Tooltip",
+      "aria-expanded": open
+    },
+    /* @__PURE__ */ import_react26.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react26.default.createElement(
+      Calendar_default,
       {
-        ...innerProps,
-        color: error ? "danger" : innerProps.color,
-        ref,
-        size,
-        value: displayValue,
-        onChange: handleDisplayInputChange,
-        disabled,
-        required,
-        placeholder: `${displayFormat} - ${displayFormat}`,
-        slotProps: {
-          input: {
-            component: TextMaskAdapter5,
-            ref: innerRef,
-            format: displayFormat,
-            sx: {
-              "&:hover": {
-                cursor: inputReadOnly || readOnly ? "default" : "text"
-              }
-            },
-            onMouseDown: handleInputMouseDown
-          }
-        },
-        error,
-        className,
-        sx,
-        endDecorator: /* @__PURE__ */ import_react26.default.createElement(
-          CalendarButton2,
-          {
-            ref: buttonRef,
-            variant: "plain",
-            onClick: readOnly ? void 0 : handleCalendarToggle,
-            "aria-label": "Toggle Calendar",
-            "aria-controls": "date-range-picker-popper",
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            disabled
-          },
-          /* @__PURE__ */ import_react26.default.createElement(import_CalendarToday2.default, null)
-        ),
-        label,
-        helperText,
-        readOnly: readOnly || inputReadOnly
+        rangeSelection: true,
+        defaultValue: calendarValue,
+        onChange: handleCalendarChange,
+        minDate: minDate ? new Date(minDate) : void 0,
+        maxDate: maxDate ? new Date(maxDate) : void 0,
+        disableFuture,
+        disablePast
       }
-    ), open && /* @__PURE__ */ import_react26.default.createElement(import_base3.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react26.default.createElement(
-      StyledPopper2,
+    ), !hideClearButton && /* @__PURE__ */ import_react26.default.createElement(
+      DialogActions_default,
       {
-        id: "date-range-picker-popper",
-        open: true,
-        anchorEl,
-        placement: "bottom-end",
-        onMouseDown: (e) => e.preventDefault(),
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [4, 4]
-            }
-          }
-        ],
-        "aria-label": "Calendar Tooltip",
-        "aria-expanded": open
-      },
-      /* @__PURE__ */ import_react26.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react26.default.createElement(
-        Calendar_default,
-        {
-          rangeSelection: true,
-          defaultValue: calendarValue,
-          onChange: handleCalendarChange,
-          minDate: minDate ? new Date(minDate) : void 0,
-          maxDate: maxDate ? new Date(maxDate) : void 0,
-          disableFuture,
-          disablePast
+        sx: {
+          p: 1
         }
-      ), !hideClearButton && /* @__PURE__ */ import_react26.default.createElement(
-        DialogActions_default,
+      },
+      /* @__PURE__ */ import_react26.default.createElement(
+        Button_default,
         {
-          sx: {
-            p: 1
+          size,
+          variant: "plain",
+          color: "neutral",
+          onClick: () => {
+            setValue("");
+            setDisplayValue("");
+            setAnchorEl(null);
           }
         },
-        /* @__PURE__ */ import_react26.default.createElement(
-          Button_default,
-          {
-            size,
-            variant: "plain",
-            color: "neutral",
-            onClick: () => {
-              setValue("");
-              setDisplayValue("");
-              setAnchorEl(null);
-            }
-          },
-          "Clear"
-        )
-      ))
-    )))));
-  }
-);
+        "Clear"
+      )
+    ))
+  )))));
+});
 DateRangePicker.displayName = "DateRangePicker";
 
 // src/components/Drawer/Drawer.tsx
@@ -4603,17 +4403,7 @@ var StyledDialogFrame = (0, import_joy39.styled)(ModalDialog, {
 });
 var DialogFrame = import_react29.default.forwardRef((props, ref) => {
   const { title, children, actions, fullscreen, ...innerProps } = props;
-  return /* @__PURE__ */ import_react29.default.createElement(
-    StyledDialogFrame,
-    {
-      layout: fullscreen ? "fullscreen" : "center",
-      ref,
-      ...innerProps
-    },
-    /* @__PURE__ */ import_react29.default.createElement(DialogTitle_default, null, title),
-    /* @__PURE__ */ import_react29.default.createElement(DialogContent_default, null, children),
-    /* @__PURE__ */ import_react29.default.createElement(DialogActions_default, null, actions)
-  );
+  return /* @__PURE__ */ import_react29.default.createElement(StyledDialogFrame, { layout: fullscreen ? "fullscreen" : "center", ref, ...innerProps }, /* @__PURE__ */ import_react29.default.createElement(DialogTitle_default, null, title), /* @__PURE__ */ import_react29.default.createElement(DialogContent_default, null, children), /* @__PURE__ */ import_react29.default.createElement(DialogActions_default, null, actions));
 });
 DialogFrame.displayName = "DialogFrame";
 
@@ -4692,15 +4482,7 @@ function IconMenuButton(props) {
       }
     },
     icon
-  ), /* @__PURE__ */ import_react31.default.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ import_react31.default.createElement(
-    MenuItem,
-    {
-      key: i.text,
-      component: i.component,
-      ...i.componentProps ?? {}
-    },
-    i.text
-  ))));
+  ), /* @__PURE__ */ import_react31.default.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ import_react31.default.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
 }
 IconMenuButton.displayName = "IconMenuButton";
 
@@ -4734,52 +4516,33 @@ var Markdown = (props) => {
   if (!rehypeAccent2) {
     return null;
   }
-  return /* @__PURE__ */ import_react32.default.createElement(
-    Typography,
+  return /* @__PURE__ */ import_react32.default.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ import_react32.default.createElement(
+    import_react32.Suspense,
     {
-      component: "div",
-      color,
-      textColor,
-      level: defaultLevel,
-      ...innerProps
+      fallback: fallback || /* @__PURE__ */ import_react32.default.createElement(Typography, null, /* @__PURE__ */ import_react32.default.createElement(import_joy44.Skeleton, null, content || ""))
     },
     /* @__PURE__ */ import_react32.default.createElement(
-      import_react32.Suspense,
+      LazyReactMarkdown,
       {
-        fallback: fallback || /* @__PURE__ */ import_react32.default.createElement(Typography, null, /* @__PURE__ */ import_react32.default.createElement(import_joy44.Skeleton, null, content || ""))
-      },
-      /* @__PURE__ */ import_react32.default.createElement(
-        LazyReactMarkdown,
-        {
-          ...markdownOptions,
-          children: content,
-          rehypePlugins: [[rehypeAccent2, { accentColor }]],
-          remarkPlugins: [import_remark_gfm.default],
-          components: {
-            h1: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: "h1" }, children),
-            h2: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: "h2" }, children),
-            h3: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: "h3" }, children),
-            h4: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: "h4" }, children),
-            p: ({ children, node }) => /* @__PURE__ */ import_react32.default.createElement(
-              Typography,
-              {
-                color,
-                textColor,
-                level: defaultLevel,
-                ...node?.properties
-              },
-              children
-            ),
-            a: ({ children, href }) => /* @__PURE__ */ import_react32.default.createElement(import_joy45.Link, { href, target: defaultLinkAction }, children),
-            hr: () => /* @__PURE__ */ import_react32.default.createElement(Divider, null),
-            b: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
-            strong: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
-            ...markdownOptions?.components
-          }
+        ...markdownOptions,
+        children: content,
+        rehypePlugins: [[rehypeAccent2, { accentColor }]],
+        remarkPlugins: [import_remark_gfm.default],
+        components: {
+          h1: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: "h1" }, children),
+          h2: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: "h2" }, children),
+          h3: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: "h3" }, children),
+          h4: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: "h4" }, children),
+          p: ({ children, node }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { color, textColor, level: defaultLevel, ...node?.properties }, children),
+          a: ({ children, href }) => /* @__PURE__ */ import_react32.default.createElement(import_joy45.Link, { href, target: defaultLinkAction }, children),
+          hr: () => /* @__PURE__ */ import_react32.default.createElement(Divider, null),
+          b: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
+          strong: ({ children }) => /* @__PURE__ */ import_react32.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
+          ...markdownOptions?.components
         }
-      )
+      }
     )
-  );
+  ));
 };
 Markdown.displayName = "Markdown";
 
@@ -4832,15 +4595,7 @@ function MenuButton(props) {
       endDecorator: showIcon ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, endDecorator, /* @__PURE__ */ import_react33.default.createElement(import_ExpandMore.default, null)) : /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, endDecorator)
     },
     buttonText
-  ), /* @__PURE__ */ import_react33.default.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ import_react33.default.createElement(
-    MenuItem,
-    {
-      key: i.text,
-      component: i.component,
-      ...i.componentProps ?? {}
-    },
-    i.text
-  ))));
+  ), /* @__PURE__ */ import_react33.default.createElement(Menu, { placement, size }, items.map((i) => /* @__PURE__ */ import_react33.default.createElement(MenuItem, { key: i.text, component: i.component, ...i.componentProps ?? {} }, i.text))));
 }
 MenuButton.displayName = "MenuButton";
 
@@ -4900,215 +4655,202 @@ function parseDate3(dateString, format) {
   const result = new Date(year, month, day);
   return result;
 }
-var MonthPicker = (0, import_react34.forwardRef)(
-  (inProps, ref) => {
-    const props = (0, import_joy47.useThemeProps)({ props: inProps, name: "MonthPicker" });
-    const {
-      onChange,
+var MonthPicker = (0, import_react34.forwardRef)((inProps, ref) => {
+  const props = (0, import_joy47.useThemeProps)({ props: inProps, name: "MonthPicker" });
+  const {
+    onChange,
+    disabled,
+    label,
+    error,
+    helperText,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast,
+    required,
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx,
+    className,
+    /**
+     * NOTE: 현재 CalendarDate는 YYYY-MM-DD로 개발하고 있어 date를 포함하여 value를 관리한다.
+     * @see https://ecubelabs.atlassian.net/wiki/spaces/SW/pages/1938784349/Date#CalendarDate
+     * @see https://github.com/Ecube-Labs/hds/pull/145
+     */
+    format = "YYYY/MM/DD",
+    displayFormat = "YYYY/MM",
+    size,
+    locale,
+    ...innerProps
+  } = props;
+  const innerRef = (0, import_react34.useRef)(null);
+  const buttonRef = (0, import_react34.useRef)(null);
+  const [value, setValue, isControlled] = useControlledState(
+    props.value,
+    props.defaultValue || "",
+    (0, import_react34.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+  );
+  const getFormattedDisplayValue = (0, import_react34.useCallback)(
+    (inputValue) => {
+      if (!inputValue) return "";
+      try {
+        return formatValueString3(parseDate3(inputValue, format), displayFormat, locale);
+      } catch (e) {
+        return inputValue;
+      }
+    },
+    [format, displayFormat, locale]
+  );
+  const [displayValue, setDisplayValue] = (0, import_react34.useState)(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = (0, import_react34.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react34.useEffect)(() => {
+    if (!anchorEl) {
+      innerRef.current?.blur();
+    }
+  }, [anchorEl, innerRef]);
+  (0, import_react34.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
+  (0, import_react34.useEffect)(() => {
+    setDisplayValue(getFormattedDisplayValue(value));
+  }, [value, getFormattedDisplayValue]);
+  const handleChange = (0, import_react34.useCallback)(
+    (event) => {
+      const newValue = event.target.value;
+      setValue(newValue);
+      if (!isControlled) {
+        setDisplayValue(getFormattedDisplayValue(newValue));
+      }
+    },
+    [setValue, getFormattedDisplayValue, isControlled]
+  );
+  const handleCalendarToggle = (0, import_react34.useCallback)(
+    (event) => {
+      setAnchorEl(anchorEl ? null : event.currentTarget);
+      innerRef.current?.focus();
+    },
+    [anchorEl, setAnchorEl, innerRef]
+  );
+  const handleInputMouseDown = (0, import_react34.useCallback)(
+    (event) => {
+      event.preventDefault();
+      buttonRef.current?.focus();
+    },
+    [buttonRef]
+  );
+  return /* @__PURE__ */ import_react34.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react34.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
+    Input_default,
+    {
+      ...innerProps,
+      color: error ? "danger" : innerProps.color,
+      ref: innerRef,
+      size,
+      value: displayValue,
+      placeholder: displayFormat,
       disabled,
-      label,
-      error,
-      helperText,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
       required,
-      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-      sx,
-      className,
-      /**
-       * NOTE: 현재 CalendarDate는 YYYY-MM-DD로 개발하고 있어 date를 포함하여 value를 관리한다.
-       * @see https://ecubelabs.atlassian.net/wiki/spaces/SW/pages/1938784349/Date#CalendarDate
-       * @see https://github.com/Ecube-Labs/hds/pull/145
-       */
-      format = "YYYY/MM/DD",
-      displayFormat = "YYYY/MM",
-      size,
-      locale,
-      ...innerProps
-    } = props;
-    const innerRef = (0, import_react34.useRef)(null);
-    const buttonRef = (0, import_react34.useRef)(null);
-    const [value, setValue, isControlled] = useControlledState(
-      props.value,
-      props.defaultValue || "",
-      (0, import_react34.useCallback)(
-        (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
-        [props.name, onChange]
-      )
-    );
-    const getFormattedDisplayValue = (0, import_react34.useCallback)(
-      (inputValue) => {
-        if (!inputValue) return "";
-        try {
-          return formatValueString3(
-            parseDate3(inputValue, format),
-            displayFormat,
-            locale
-          );
-        } catch (e) {
-          return inputValue;
-        }
-      },
-      [format, displayFormat, locale]
-    );
-    const [displayValue, setDisplayValue] = (0, import_react34.useState)(
-      () => getFormattedDisplayValue(value)
-    );
-    const [anchorEl, setAnchorEl] = (0, import_react34.useState)(null);
-    const open = Boolean(anchorEl);
-    (0, import_react34.useEffect)(() => {
-      if (!anchorEl) {
-        innerRef.current?.blur();
-      }
-    }, [anchorEl, innerRef]);
-    (0, import_react34.useImperativeHandle)(ref, () => innerRef.current, [
-      innerRef
-    ]);
-    (0, import_react34.useEffect)(() => {
-      setDisplayValue(getFormattedDisplayValue(value));
-    }, [value, getFormattedDisplayValue]);
-    const handleChange = (0, import_react34.useCallback)(
-      (event) => {
-        const newValue = event.target.value;
-        setValue(newValue);
-        if (!isControlled) {
-          setDisplayValue(getFormattedDisplayValue(newValue));
+      slotProps: {
+        input: {
+          ref: innerRef,
+          format: displayFormat,
+          sx: {
+            "&:hover": {
+              cursor: "default"
+            }
+          },
+          onMouseDown: handleInputMouseDown
         }
       },
-      [setValue, getFormattedDisplayValue, isControlled]
-    );
-    const handleCalendarToggle = (0, import_react34.useCallback)(
-      (event) => {
-        setAnchorEl(anchorEl ? null : event.currentTarget);
-        innerRef.current?.focus();
-      },
-      [anchorEl, setAnchorEl, innerRef]
-    );
-    const handleInputMouseDown = (0, import_react34.useCallback)(
-      (event) => {
-        event.preventDefault();
-        buttonRef.current?.focus();
+      error,
+      className,
+      sx: {
+        ...sx,
+        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+        fontFamily: "monospace"
       },
-      [buttonRef]
-    );
-    return /* @__PURE__ */ import_react34.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react34.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
-      Input_default,
-      {
-        ...innerProps,
-        color: error ? "danger" : innerProps.color,
-        ref: innerRef,
-        size,
-        value: displayValue,
-        placeholder: displayFormat,
-        disabled,
-        required,
-        slotProps: {
-          input: {
-            ref: innerRef,
-            format: displayFormat,
-            sx: {
-              "&:hover": {
-                cursor: "default"
-              }
-            },
-            onMouseDown: handleInputMouseDown
-          }
+      endDecorator: /* @__PURE__ */ import_react34.default.createElement(
+        IconButton_default,
+        {
+          ref: buttonRef,
+          variant: "plain",
+          onClick: handleCalendarToggle,
+          "aria-label": "Toggle Calendar",
+          "aria-controls": "month-picker-popper",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          disabled
         },
-        error,
-        className,
-        sx: {
-          ...sx,
-          // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-          fontFamily: "monospace"
+        /* @__PURE__ */ import_react34.default.createElement(import_CalendarToday3.default, null)
+      ),
+      label,
+      helperText
+    }
+  ), open && /* @__PURE__ */ import_react34.default.createElement(import_base4.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react34.default.createElement(
+    StyledPopper3,
+    {
+      id: "month-picker-popper",
+      open: true,
+      anchorEl,
+      placement: "bottom-end",
+      onMouseDown: (e) => e.preventDefault(),
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [4, 4]
+          }
+        }
+      ],
+      "aria-label": "Calendar Tooltip",
+      "aria-expanded": open
+    },
+    /* @__PURE__ */ import_react34.default.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react34.default.createElement(
+      Calendar_default,
+      {
+        view: "month",
+        views: ["month"],
+        value: !Number.isNaN(new Date(value).getTime()) ? [new Date(value), void 0] : void 0,
+        onChange: ([date]) => {
+          handleChange({
+            target: {
+              name: props.name,
+              value: formatValueString3(date, format, locale)
+            }
+          });
+          setAnchorEl(null);
         },
-        endDecorator: /* @__PURE__ */ import_react34.default.createElement(
-          IconButton_default,
-          {
-            ref: buttonRef,
-            variant: "plain",
-            onClick: handleCalendarToggle,
-            "aria-label": "Toggle Calendar",
-            "aria-controls": "month-picker-popper",
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            disabled
-          },
-          /* @__PURE__ */ import_react34.default.createElement(import_CalendarToday3.default, null)
-        ),
-        label,
-        helperText
+        minDate: minDate ? new Date(minDate) : void 0,
+        maxDate: maxDate ? new Date(maxDate) : void 0,
+        disableFuture,
+        disablePast,
+        locale
       }
-    ), open && /* @__PURE__ */ import_react34.default.createElement(import_base4.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react34.default.createElement(
-      StyledPopper3,
+    ), /* @__PURE__ */ import_react34.default.createElement(
+      DialogActions_default,
       {
-        id: "month-picker-popper",
-        open: true,
-        anchorEl,
-        placement: "bottom-end",
-        onMouseDown: (e) => e.preventDefault(),
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [4, 4]
-            }
-          }
-        ],
-        "aria-label": "Calendar Tooltip",
-        "aria-expanded": open
+        sx: {
+          p: 1
+        }
       },
-      /* @__PURE__ */ import_react34.default.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react34.default.createElement(
-        Calendar_default,
+      /* @__PURE__ */ import_react34.default.createElement(
+        Button_default,
         {
-          view: "month",
-          views: ["month"],
-          value: !Number.isNaN(new Date(value).getTime()) ? [new Date(value), void 0] : void 0,
-          onChange: ([date]) => {
+          size,
+          variant: "plain",
+          color: "neutral",
+          onClick: () => {
             handleChange({
               target: {
                 name: props.name,
-                value: formatValueString3(date, format, locale)
+                value: ""
               }
             });
             setAnchorEl(null);
-          },
-          minDate: minDate ? new Date(minDate) : void 0,
-          maxDate: maxDate ? new Date(maxDate) : void 0,
-          disableFuture,
-          disablePast,
-          locale
-        }
-      ), /* @__PURE__ */ import_react34.default.createElement(
-        DialogActions_default,
-        {
-          sx: {
-            p: 1
           }
         },
-        /* @__PURE__ */ import_react34.default.createElement(
-          Button_default,
-          {
-            size,
-            variant: "plain",
-            color: "neutral",
-            onClick: () => {
-              handleChange({
-                target: {
-                  name: props.name,
-                  value: ""
-                }
-              });
-              setAnchorEl(null);
-            }
-          },
-          "Clear"
-        )
-      ))
-    )))));
-  }
-);
+        "Clear"
+      )
+    ))
+  )))));
+});
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
 var import_react35 = __toESM(require("react"));
@@ -5169,196 +4911,184 @@ var parseDates2 = (str) => {
 var formatToPattern3 = (format) => {
   return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "m").replace(/[^YMm\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter7 = import_react35.default.forwardRef(
-  function TextMaskAdapter8(props, ref) {
-    const { onChange, format, ...other } = props;
-    return /* @__PURE__ */ import_react35.default.createElement(
-      import_react_imask3.IMaskInput,
-      {
-        ...other,
-        inputRef: ref,
-        onAccept: (value) => onChange({ target: { name: props.name, value } }),
-        mask: Date,
-        pattern: formatToPattern3(format),
-        blocks: {
-          m: {
-            mask: import_react_imask3.IMask.MaskedRange,
-            from: 1,
-            to: 12,
-            maxLength: 2
-          },
-          Y: {
-            mask: import_react_imask3.IMask.MaskedRange,
-            from: 1900,
-            to: 9999
-          }
+var TextMaskAdapter7 = import_react35.default.forwardRef(function TextMaskAdapter8(props, ref) {
+  const { onChange, format, ...other } = props;
+  return /* @__PURE__ */ import_react35.default.createElement(
+    import_react_imask3.IMaskInput,
+    {
+      ...other,
+      inputRef: ref,
+      onAccept: (value) => onChange({ target: { name: props.name, value } }),
+      mask: Date,
+      pattern: formatToPattern3(format),
+      blocks: {
+        m: {
+          mask: import_react_imask3.IMask.MaskedRange,
+          from: 1,
+          to: 12,
+          maxLength: 2
         },
-        format: (dates) => formatValueString4(dates, format),
-        parse: parseDates2,
-        autofix: "pad",
-        overwrite: true
-      }
-    );
-  }
-);
-var MonthRangePicker = (0, import_react35.forwardRef)(
-  (inProps, ref) => {
-    const props = (0, import_joy48.useThemeProps)({ props: inProps, name: "MonthRangePicker" });
-    const {
-      onChange,
+        Y: {
+          mask: import_react_imask3.IMask.MaskedRange,
+          from: 1900,
+          to: 9999
+        }
+      },
+      format: (dates) => formatValueString4(dates, format),
+      parse: parseDates2,
+      autofix: "pad",
+      overwrite: true
+    }
+  );
+});
+var MonthRangePicker = (0, import_react35.forwardRef)((inProps, ref) => {
+  const props = (0, import_joy48.useThemeProps)({ props: inProps, name: "MonthRangePicker" });
+  const {
+    onChange,
+    disabled,
+    label,
+    error,
+    helperText,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast,
+    required,
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx,
+    className,
+    format = "YYYY/MM",
+    size,
+    ...innerProps
+  } = props;
+  const innerRef = (0, import_react35.useRef)(null);
+  const [value, setValue] = useControlledState(
+    props.value,
+    props.defaultValue || "",
+    (0, import_react35.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+  );
+  const [anchorEl, setAnchorEl] = (0, import_react35.useState)(null);
+  const open = Boolean(anchorEl);
+  const calendarValue = (0, import_react35.useMemo)(() => value ? parseDates2(value) : void 0, [value]);
+  (0, import_react35.useEffect)(() => {
+    if (!anchorEl) {
+      innerRef.current?.blur();
+    }
+  }, [anchorEl, innerRef]);
+  (0, import_react35.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
+  const handleChange = (0, import_react35.useCallback)(
+    (event) => {
+      setValue(event.target.value);
+    },
+    [setValue]
+  );
+  const handleCalendarToggle = (0, import_react35.useCallback)(
+    (event) => {
+      setAnchorEl(anchorEl ? null : event.currentTarget);
+      innerRef.current?.focus();
+    },
+    [anchorEl, setAnchorEl, innerRef]
+  );
+  const handleCalendarChange = (0, import_react35.useCallback)(
+    ([date1, date2]) => {
+      if (!date1 || !date2) return;
+      setValue(formatValueString4([date1, date2], format));
+      setAnchorEl(null);
+    },
+    [setValue, setAnchorEl, format]
+  );
+  return /* @__PURE__ */ import_react35.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react35.default.createElement(import_base5.FocusTrap, { open: true }, /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(
+    Input_default,
+    {
+      ...innerProps,
+      color: error ? "danger" : innerProps.color,
+      ref,
+      size,
+      value,
+      onChange: handleChange,
       disabled,
-      label,
-      error,
-      helperText,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
       required,
-      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-      sx,
-      className,
-      format = "YYYY/MM",
-      size,
-      ...innerProps
-    } = props;
-    const innerRef = (0, import_react35.useRef)(null);
-    const [value, setValue] = useControlledState(
-      props.value,
-      props.defaultValue || "",
-      (0, import_react35.useCallback)(
-        (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
-        [props.name, onChange]
-      )
-    );
-    const [anchorEl, setAnchorEl] = (0, import_react35.useState)(null);
-    const open = Boolean(anchorEl);
-    const calendarValue = (0, import_react35.useMemo)(
-      () => value ? parseDates2(value) : void 0,
-      [value]
-    );
-    (0, import_react35.useEffect)(() => {
-      if (!anchorEl) {
-        innerRef.current?.blur();
-      }
-    }, [anchorEl, innerRef]);
-    (0, import_react35.useImperativeHandle)(ref, () => innerRef.current, [
-      innerRef
-    ]);
-    const handleChange = (0, import_react35.useCallback)(
-      (event) => {
-        setValue(event.target.value);
-      },
-      [setValue]
-    );
-    const handleCalendarToggle = (0, import_react35.useCallback)(
-      (event) => {
-        setAnchorEl(anchorEl ? null : event.currentTarget);
-        innerRef.current?.focus();
+      placeholder: `${format} - ${format}`,
+      slotProps: {
+        input: { component: TextMaskAdapter7, ref: innerRef, format }
       },
-      [anchorEl, setAnchorEl, innerRef]
-    );
-    const handleCalendarChange = (0, import_react35.useCallback)(
-      ([date1, date2]) => {
-        if (!date1 || !date2) return;
-        setValue(formatValueString4([date1, date2], format));
-        setAnchorEl(null);
+      error,
+      className,
+      sx: {
+        ...sx,
+        // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+        fontFamily: "monospace"
       },
-      [setValue, setAnchorEl, format]
-    );
-    return /* @__PURE__ */ import_react35.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react35.default.createElement(import_base5.FocusTrap, { open: true }, /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(
-      Input_default,
-      {
-        ...innerProps,
-        color: error ? "danger" : innerProps.color,
-        ref,
-        size,
-        value,
-        onChange: handleChange,
-        disabled,
-        required,
-        placeholder: `${format} - ${format}`,
-        slotProps: {
-          input: { component: TextMaskAdapter7, ref: innerRef, format }
-        },
-        error,
-        className,
-        sx: {
-          ...sx,
-          // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-          fontFamily: "monospace"
+      endDecorator: /* @__PURE__ */ import_react35.default.createElement(
+        IconButton_default,
+        {
+          variant: "plain",
+          onClick: handleCalendarToggle,
+          "aria-label": "Toggle Calendar",
+          "aria-controls": "month-range-picker-popper",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open
         },
-        endDecorator: /* @__PURE__ */ import_react35.default.createElement(
-          IconButton_default,
-          {
-            variant: "plain",
-            onClick: handleCalendarToggle,
-            "aria-label": "Toggle Calendar",
-            "aria-controls": "month-range-picker-popper",
-            "aria-haspopup": "dialog",
-            "aria-expanded": open
-          },
-          /* @__PURE__ */ import_react35.default.createElement(import_CalendarToday4.default, null)
-        ),
-        label,
-        helperText
+        /* @__PURE__ */ import_react35.default.createElement(import_CalendarToday4.default, null)
+      ),
+      label,
+      helperText
+    }
+  ), open && /* @__PURE__ */ import_react35.default.createElement(import_base5.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react35.default.createElement(
+    StyledPopper4,
+    {
+      id: "month-range-picker-popper",
+      open: true,
+      anchorEl,
+      placement: "bottom-end",
+      onMouseDown: (e) => e.preventDefault(),
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [4, 4]
+          }
+        }
+      ],
+      "aria-label": "Calendar Tooltip",
+      "aria-expanded": open
+    },
+    /* @__PURE__ */ import_react35.default.createElement(CalendarSheet4, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react35.default.createElement(
+      Calendar_default,
+      {
+        view: "month",
+        views: ["month"],
+        rangeSelection: true,
+        defaultValue: calendarValue,
+        onChange: handleCalendarChange,
+        minDate: minDate ? new Date(minDate) : void 0,
+        maxDate: maxDate ? new Date(maxDate) : void 0,
+        disableFuture,
+        disablePast
       }
-    ), open && /* @__PURE__ */ import_react35.default.createElement(import_base5.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react35.default.createElement(
-      StyledPopper4,
+    ), /* @__PURE__ */ import_react35.default.createElement(
+      DialogActions_default,
       {
-        id: "month-range-picker-popper",
-        open: true,
-        anchorEl,
-        placement: "bottom-end",
-        onMouseDown: (e) => e.preventDefault(),
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [4, 4]
-            }
-          }
-        ],
-        "aria-label": "Calendar Tooltip",
-        "aria-expanded": open
-      },
-      /* @__PURE__ */ import_react35.default.createElement(CalendarSheet4, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react35.default.createElement(
-        Calendar_default,
-        {
-          view: "month",
-          views: ["month"],
-          rangeSelection: true,
-          defaultValue: calendarValue,
-          onChange: handleCalendarChange,
-          minDate: minDate ? new Date(minDate) : void 0,
-          maxDate: maxDate ? new Date(maxDate) : void 0,
-          disableFuture,
-          disablePast
+        sx: {
+          p: 1
         }
-      ), /* @__PURE__ */ import_react35.default.createElement(
-        DialogActions_default,
+      },
+      /* @__PURE__ */ import_react35.default.createElement(
+        Button_default,
         {
-          sx: {
-            p: 1
+          size,
+          variant: "plain",
+          color: "neutral",
+          onClick: () => {
+            setValue("");
+            setAnchorEl(null);
           }
         },
-        /* @__PURE__ */ import_react35.default.createElement(
-          Button_default,
-          {
-            size,
-            variant: "plain",
-            color: "neutral",
-            onClick: () => {
-              setValue("");
-              setAnchorEl(null);
-            }
-          },
-          "Clear"
-        )
-      ))
-    )))));
-  }
-);
+        "Clear"
+      )
+    ))
+  )))));
+});
 MonthRangePicker.displayName = "MonthRangePicker";
 
 // src/components/NavigationGroup/NavigationGroup.tsx
@@ -5480,115 +5210,112 @@ var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
 };
-var TextMaskAdapter9 = import_react39.default.forwardRef(
-  function TextMaskAdapter10(props, ref) {
-    const { onChange, min, max, ...innerProps } = props;
-    return /* @__PURE__ */ import_react39.default.createElement(
-      import_react_number_format2.NumericFormat,
-      {
-        ...innerProps,
-        onValueChange: ({ value }) => {
-          onChange?.({
-            target: {
-              name: props.name,
-              value
-            }
-          });
-        },
-        valueIsNumericString: true,
-        thousandSeparator: true,
-        suffix: "%",
-        getInputRef: ref,
-        allowNegative: true
-      }
-    );
-  }
-);
+var TextMaskAdapter9 = import_react39.default.forwardRef(function TextMaskAdapter10(props, ref) {
+  const { onChange, min, max, ...innerProps } = props;
+  return /* @__PURE__ */ import_react39.default.createElement(
+    import_react_number_format2.NumericFormat,
+    {
+      ...innerProps,
+      onValueChange: ({ value }) => {
+        onChange?.({
+          target: {
+            name: props.name,
+            value
+          }
+        });
+      },
+      valueIsNumericString: true,
+      thousandSeparator: true,
+      suffix: "%",
+      getInputRef: ref,
+      allowNegative: true
+    }
+  );
+});
 var PercentageInputRoot = (0, import_joy51.styled)(Input_default, {
   name: "PercentageInput",
   slot: "Root",
   overridesResolver: (props, styles) => styles.root
 })({});
-var PercentageInput = import_react39.default.forwardRef(function PercentageInput2(inProps, ref) {
-  const props = (0, import_joy51.useThemeProps)({ props: inProps, name: "PercentageInput" });
-  const {
-    name,
-    onChange,
-    label,
-    error,
-    helperText,
-    required,
-    disabled,
-    useMinorUnit,
-    maxDecimalScale = 0,
-    min,
-    max,
-    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-    sx,
-    className,
-    ...innerProps
-  } = props;
-  const [_value, setValue] = useControlledState(
-    props.value,
-    props.defaultValue,
-    (0, import_react39.useCallback)(
-      (value2) => onChange?.({ target: { name, value: value2 } }),
-      [onChange, name]
-    )
-  );
-  const [internalError, setInternalError] = (0, import_react39.useState)(
-    max && _value && _value > max || min && _value && _value < min
-  );
-  const value = (0, import_react39.useMemo)(() => {
-    if (_value && useMinorUnit) {
-      return _value / Math.pow(10, maxDecimalScale);
-    }
-    return _value;
-  }, [_value, useMinorUnit, maxDecimalScale]);
-  const handleChange = (0, import_react39.useCallback)(
-    (event) => {
-      if (event.target.value === "") {
-        setValue(void 0);
-        return;
-      }
-      const originalAmount = Number(event.target.value);
-      if (min && originalAmount < min || max && originalAmount > max) {
-        setInternalError(true);
-      } else {
-        setInternalError(false);
-      }
-      const amount = useMinorUnit ? padDecimal(originalAmount, maxDecimalScale) : originalAmount;
-      setValue(amount);
-    },
-    [setValue, useMinorUnit, maxDecimalScale, min, max]
-  );
-  return /* @__PURE__ */ import_react39.default.createElement(
-    PercentageInputRoot,
-    {
-      ...innerProps,
-      ref,
-      value,
-      onChange: handleChange,
-      error: internalError || error,
-      disabled,
-      required,
-      color: internalError || error ? "danger" : props.color,
+var PercentageInput = import_react39.default.forwardRef(
+  function PercentageInput2(inProps, ref) {
+    const props = (0, import_joy51.useThemeProps)({ props: inProps, name: "PercentageInput" });
+    const {
+      name,
+      onChange,
       label,
+      error,
       helperText,
-      slotProps: {
-        input: {
-          component: TextMaskAdapter9,
-          "aria-label": innerProps["aria-label"],
-          decimalScale: maxDecimalScale
+      required,
+      disabled,
+      useMinorUnit,
+      maxDecimalScale = 0,
+      min,
+      max,
+      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+      sx,
+      className,
+      ...innerProps
+    } = props;
+    const [_value, setValue] = useControlledState(
+      props.value,
+      props.defaultValue,
+      (0, import_react39.useCallback)((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
+    );
+    const [internalError, setInternalError] = (0, import_react39.useState)(
+      max && _value && _value > max || min && _value && _value < min
+    );
+    const value = (0, import_react39.useMemo)(() => {
+      if (_value && useMinorUnit) {
+        return _value / Math.pow(10, maxDecimalScale);
+      }
+      return _value;
+    }, [_value, useMinorUnit, maxDecimalScale]);
+    const handleChange = (0, import_react39.useCallback)(
+      (event) => {
+        if (event.target.value === "") {
+          setValue(void 0);
+          return;
         }
+        const originalAmount = Number(event.target.value);
+        if (min && originalAmount < min || max && originalAmount > max) {
+          setInternalError(true);
+        } else {
+          setInternalError(false);
+        }
+        const amount = useMinorUnit ? padDecimal(originalAmount, maxDecimalScale) : originalAmount;
+        setValue(amount);
       },
-      sx: {
-        ...sx
-      },
-      className
-    }
-  );
-});
+      [setValue, useMinorUnit, maxDecimalScale, min, max]
+    );
+    return /* @__PURE__ */ import_react39.default.createElement(
+      PercentageInputRoot,
+      {
+        ...innerProps,
+        ref,
+        value,
+        onChange: handleChange,
+        error: internalError || error,
+        disabled,
+        required,
+        color: internalError || error ? "danger" : props.color,
+        label,
+        helperText,
+        slotProps: {
+          input: {
+            component: TextMaskAdapter9,
+            "aria-label": innerProps["aria-label"],
+            decimalScale: maxDecimalScale
+          }
+        },
+        sx: {
+          ...sx
+        },
+        className
+      }
+    );
+  }
+);
 PercentageInput.displayName = "PercentageInput";
 
 // src/components/Radio/Radio.tsx
@@ -6068,52 +5795,11 @@ var ClearIcon2 = (0, import_joy57.styled)(import_ClearRounded.default, {
   width: "18px",
   height: "18px"
 }));
-var UNITS = [
-  "byte",
-  "kilobyte",
-  "megabyte",
-  "gigabyte",
-  "terabyte",
-  "petabyte"
-];
+var UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"];
 var ALL_EXTENSIONS_BY_TYPE = {
-  "image/*": [
-    ".jpeg",
-    ".jpg",
-    ".png",
-    ".gif",
-    ".bmp",
-    ".tiff",
-    ".svg",
-    ".webp",
-    ".heic",
-    ".ico"
-  ],
-  "audio/*": [
-    ".mp3",
-    ".wav",
-    ".flac",
-    ".aac",
-    ".ogg",
-    ".m4a",
-    ".wma",
-    ".aiff",
-    ".alac",
-    ".midi",
-    ".mp4"
-  ],
-  "video/*": [
-    ".mp4",
-    ".avi",
-    ".mkv",
-    ".mov",
-    ".wmv",
-    ".flv",
-    ".webm",
-    ".mpeg",
-    ".3gp",
-    ".m4v"
-  ]
+  "image/*": [".jpeg", ".jpg", ".png", ".gif", ".bmp", ".tiff", ".svg", ".webp", ".heic", ".ico"],
+  "audio/*": [".mp3", ".wav", ".flac", ".aac", ".ogg", ".m4a", ".wma", ".aiff", ".alac", ".midi", ".mp4"],
+  "video/*": [".mp4", ".avi", ".mkv", ".mov", ".wmv", ".flv", ".webm", ".mpeg", ".3gp", ".m4v"]
 };
 var getFileSize = (n) => {
   const i = n == 0 ? 0 : Math.floor(Math.log(n) / Math.log(1024));
@@ -6127,16 +5813,7 @@ var getFileSize = (n) => {
 };
 var Preview = (props) => {
   const { files, uploaded, onDelete } = props;
-  return /* @__PURE__ */ import_react45.default.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ import_react45.default.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ import_react45.default.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ import_react45.default.createElement(UploadFileIcon, null), /* @__PURE__ */ import_react45.default.createElement(Stack_default, { flex: "1" }, /* @__PURE__ */ import_react45.default.createElement(Typography_default, { level: "body-sm", textColor: "common.black" }, file.name), !!file.size && /* @__PURE__ */ import_react45.default.createElement(
-    Typography_default,
-    {
-      level: "body-xs",
-      fontWeight: "300",
-      lineHeight: "1.33",
-      textColor: "text.tertiary"
-    },
-    getFileSize(file.size)
-  )), /* @__PURE__ */ import_react45.default.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ import_react45.default.createElement(ClearIcon2, null))))));
+  return /* @__PURE__ */ import_react45.default.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ import_react45.default.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ import_react45.default.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ import_react45.default.createElement(UploadFileIcon, null), /* @__PURE__ */ import_react45.default.createElement(Stack_default, { flex: "1" }, /* @__PURE__ */ import_react45.default.createElement(Typography_default, { level: "body-sm", textColor: "common.black" }, file.name), !!file.size && /* @__PURE__ */ import_react45.default.createElement(Typography_default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size))), /* @__PURE__ */ import_react45.default.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ import_react45.default.createElement(ClearIcon2, null))))));
 };
 var UploaderRoot = (0, import_joy57.styled)(Stack_default, {
   name: "Uploader",
@@ -6148,31 +5825,27 @@ var FileDropZone = (0, import_joy57.styled)(Sheet_default, {
   name: "Uploader",
   slot: "dropZone",
   shouldForwardProp: (prop) => prop !== "error"
-})(
-  ({ theme, state, error }) => ({
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: theme.spacing(5),
-    gap: theme.spacing(4),
-    cursor: "pointer",
-    backgroundColor: theme.palette.background.surface,
-    border: error ? `1px solid ${theme.palette.danger.outlinedBorder}` : state === "idle" ? `1px solid ${theme.palette.neutral.outlinedBorder}` : `1px solid ${theme.palette.primary.outlinedBorder}`
-  })
-);
+})(({ theme, state, error }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: theme.spacing(5),
+  gap: theme.spacing(4),
+  cursor: "pointer",
+  backgroundColor: theme.palette.background.surface,
+  border: error ? `1px solid ${theme.palette.danger.outlinedBorder}` : state === "idle" ? `1px solid ${theme.palette.neutral.outlinedBorder}` : `1px solid ${theme.palette.primary.outlinedBorder}`
+}));
 var UploaderIcon = (0, import_joy57.styled)(import_CloudUploadRounded.default, {
   name: "Uploader",
   slot: "iconContainer",
   shouldForwardProp: (prop) => prop !== "error"
-})(
-  ({ theme, state, error }) => ({
-    color: error ? `rgba(${theme.vars.palette.danger.mainChannel} / 0.6)` : state === "over" ? `rgba(${theme.palette.primary.mainChannel} / 0.6)` : theme.palette.neutral.softActiveBg,
-    width: "32px",
-    height: "32px"
-  })
-);
+})(({ theme, state, error }) => ({
+  color: error ? `rgba(${theme.vars.palette.danger.mainChannel} / 0.6)` : state === "over" ? `rgba(${theme.palette.primary.mainChannel} / 0.6)` : theme.palette.neutral.softActiveBg,
+  width: "32px",
+  height: "32px"
+}));
 var Uploader = import_react45.default.memo(
   (props) => {
     const {
@@ -6192,14 +5865,9 @@ var Uploader = import_react45.default.memo(
     const inputRef = (0, import_react45.useRef)(null);
     const [errorText, setErrorText] = (0, import_react45.useState)();
     const [files, setFiles] = (0, import_react45.useState)([]);
-    const [uploaded, setUploaded] = (0, import_react45.useState)(
-      props.uploaded || []
-    );
+    const [uploaded, setUploaded] = (0, import_react45.useState)(props.uploaded || []);
     const [previewState, setPreviewState] = (0, import_react45.useState)("idle");
-    const accepts = (0, import_react45.useMemo)(
-      () => accept.split(",").map((accept2) => accept2.trim()),
-      [accept]
-    );
+    const accepts = (0, import_react45.useMemo)(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
     const parsedAccepts = (0, import_react45.useMemo)(
       () => accepts.flatMap((type) => {
         if (["image/*", "video/*", "audio/*"].includes(type)) {
@@ -6211,15 +5879,11 @@ var Uploader = import_react45.default.memo(
     );
     const helperText = (0, import_react45.useMemo)(() => {
       const [allAcceptedTypes, acceptedTypes] = [
-        accepts.filter(
-          (accept2) => ["image/*", "video/*", "audio/*"].includes(accept2)
-        ).map((accept2) => {
+        accepts.filter((accept2) => ["image/*", "video/*", "audio/*"].includes(accept2)).map((accept2) => {
           const [type] = accept2.split("/");
           return type.toLowerCase();
         }),
-        accepts.filter(
-          (accept2) => !["image/*", "video/*", "audio/*"].includes(accept2)
-        ).map((accept2) => {
+        accepts.filter((accept2) => !["image/*", "video/*", "audio/*"].includes(accept2)).map((accept2) => {
           const [extensionOrType, subType] = accept2.split("/");
           if (!subType) {
             return extensionOrType.toUpperCase().replace(".", "");
@@ -6236,16 +5900,11 @@ var Uploader = import_react45.default.memo(
       }
       helperTexts.push(`Maximum ${getFileSize(maxFileTotalSize)}`);
       if (maxCount) {
-        helperTexts.push(
-          `Up to ${maxCount} ${maxCount === 1 ? "file" : "files"}`
-        );
+        helperTexts.push(`Up to ${maxCount} ${maxCount === 1 ? "file" : "files"}`);
       }
       return helperTexts.join(", ");
     }, [accepts, maxFileTotalSize, maxCount]);
-    const error = (0, import_react45.useMemo)(
-      () => !!errorText || props.error,
-      [props.error, errorText]
-    );
+    const error = (0, import_react45.useMemo)(() => !!errorText || props.error, [props.error, errorText]);
     const showDropZone = (0, import_react45.useMemo)(
       () => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
       [files, maxCount, uploaded]
@@ -6272,10 +5931,7 @@ var Uploader = import_react45.default.memo(
               }
             });
           }
-          const totalFileSize = [...files, ...uploads].reduce(
-            (acc, file) => acc + file.size,
-            0
-          );
+          const totalFileSize = [...files, ...uploads].reduce((acc, file) => acc + file.size, 0);
           if (totalFileSize > maxFileTotalSize) {
             throw new Error(`Total File size exceeded the maximum limit.`);
           }
@@ -6296,34 +5952,15 @@ var Uploader = import_react45.default.memo(
           setErrorText(err.message);
         }
       },
-      [
-        files,
-        uploaded,
-        maxCount,
-        parsedAccepts,
-        maxFileSize,
-        maxFileTotalSize,
-        name,
-        onChange
-      ]
+      [files, uploaded, maxCount, parsedAccepts, maxFileSize, maxFileTotalSize, name, onChange]
     );
     (0, import_react45.useEffect)(() => {
       if (!dropZoneRef.current || disabled) {
         return;
       }
       let cleanup;
-      Promise.all([
-        esmFiles.combine,
-        esmFiles.adapter,
-        esmFiles.file,
-        esmFiles.preventUnhandled
-      ]).then(
-        ([
-          combineModule,
-          adapterModule,
-          fileModule,
-          preventUnhandledModule
-        ]) => {
+      Promise.all([esmFiles.combine, esmFiles.adapter, esmFiles.file, esmFiles.preventUnhandled]).then(
+        ([combineModule, adapterModule, fileModule, preventUnhandledModule]) => {
           const { combine } = combineModule;
           const { dropTargetForExternal, monitorForExternal } = adapterModule;
           const { containsFiles, getFiles } = fileModule;
@@ -6358,9 +5995,7 @@ var Uploader = import_react45.default.memo(
     (0, import_react45.useEffect)(() => {
       if (inputRef.current && minCount) {
         if (files.length < minCount) {
-          inputRef.current.setCustomValidity(
-            `At least ${minCount} files are required.`
-          );
+          inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
         } else {
           inputRef.current.setCustomValidity("");
         }
@@ -6386,9 +6021,7 @@ var Uploader = import_react45.default.memo(
             return current.filter((file) => file !== deletedFile);
           });
         } else {
-          setUploaded(
-            (uploaded2) => uploaded2.filter((file) => file.id !== deletedFile.id)
-          );
+          setUploaded((uploaded2) => uploaded2.filter((file) => file.id !== deletedFile.id));
           onDelete?.(deletedFile);
         }
         setErrorText(void 0);
@@ -6414,9 +6047,7 @@ var Uploader = import_react45.default.memo(
           required: !!minCount,
           onInvalid: (e) => {
             if (minCount && files.length < minCount) {
-              setErrorText(
-                `Please choose ${minCount} ${minCount === 1 ? "file" : "files"} to upload.`
-              );
+              setErrorText(`Please choose ${minCount} ${minCount === 1 ? "file" : "files"} to upload.`);
             }
           },
           slotProps: {
@@ -6432,25 +6063,7 @@ var Uploader = import_react45.default.memo(
         }
       )
     );
-    return /* @__PURE__ */ import_react45.default.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ import_react45.default.createElement(
-      FormControl_default,
-      {
-        size,
-        error: !!(error || errorText),
-        disabled,
-        required: !!minCount
-      },
-      label && /* @__PURE__ */ import_react45.default.createElement(FormLabel_default, null, label),
-      uploader,
-      /* @__PURE__ */ import_react45.default.createElement(FormHelperText_default, null, /* @__PURE__ */ import_react45.default.createElement(Stack_default, null, errorText && /* @__PURE__ */ import_react45.default.createElement("div", null, errorText), /* @__PURE__ */ import_react45.default.createElement("div", null, helperText)))
-    ), [...uploaded, ...files].length > 0 && /* @__PURE__ */ import_react45.default.createElement(
-      Preview,
-      {
-        files,
-        uploaded,
-        onDelete: handleDeleteFile
-      }
-    ));
+    return /* @__PURE__ */ import_react45.default.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ import_react45.default.createElement(FormControl_default, { size, error: !!(error || errorText), disabled, required: !!minCount }, label && /* @__PURE__ */ import_react45.default.createElement(FormLabel_default, null, label), uploader, /* @__PURE__ */ import_react45.default.createElement(FormHelperText_default, null, /* @__PURE__ */ import_react45.default.createElement(Stack_default, null, errorText && /* @__PURE__ */ import_react45.default.createElement("div", null, errorText), /* @__PURE__ */ import_react45.default.createElement("div", null, helperText)))), [...uploaded, ...files].length > 0 && /* @__PURE__ */ import_react45.default.createElement(Preview, { files, uploaded, onDelete: handleDeleteFile }));
   }
 );
 Uploader.displayName = "Uploader";