@ceed/ads 0.0.53 → 0.0.55

package/dist/index.js

@@ -173,8 +173,8 @@ var Button_default = Button;
 // src/components/Calendar/Calendar.tsx
 import React6, { Fragment, forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
 import { styled } from "@mui/joy/styles";
-import ChevronLeftIcon from "@mui/icons-material/esm/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/esm/ChevronRight";
+import ChevronLeftIcon from "@mui/icons-material/esm/ChevronLeft.js";
+import ChevronRightIcon from "@mui/icons-material/esm/ChevronRight.js";
 import { AnimatePresence, motion as motion6 } from "framer-motion";
 
 // src/components/Typography/Typography.tsx
@@ -223,7 +223,7 @@ var getMonthName = (date, locale) => {
   return date.toLocaleString(locale, { year: "numeric", month: "long" });
 };
 var getMonthNameFromIndex = (index, locale) => {
-  return new Date(0, index).toLocaleString(locale, { month: "long" });
+  return new Date(0, index).toLocaleString(locale, { month: "short" });
 };
 var getWeekdayNames = (locale) => {
   const currentDay = (/* @__PURE__ */ new Date()).getDay();
@@ -353,6 +353,7 @@ var useCalendarProps = (inProps) => {
 import { useCallback as useCallback2, useState as useState2 } from "react";
 var useCalendar = (ownerState) => {
   const [hoverDay, setHoverDay] = useState2(null);
+  const [hoverMonth, setHoverMonth] = useState2(null);
   return {
     calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
     onPrev: useCallback2(() => {
@@ -401,6 +402,32 @@ var useCalendar = (ownerState) => {
         hoverDay
       ]
     ),
+    getMonthCellProps: useCallback2(
+      (monthIndex) => {
+        const thisMonth = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
+        thisMonth.setDate(1);
+        thisMonth.setHours(0, 0, 0, 0);
+        thisMonth.setMonth(monthIndex);
+        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
+        ));
+        return {
+          "aria-label": thisMonth.toLocaleDateString(),
+          "aria-current": inRange ? "date" : void 0
+        };
+      },
+      [
+        ownerState.rangeSelection,
+        ownerState.value,
+        ownerState.viewMonth,
+        hoverMonth
+      ]
+    ),
     getPickerDayProps: useCallback2(
       (day) => {
         const thisDay = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
@@ -469,13 +496,40 @@ var useCalendar = (ownerState) => {
         thisMonth.setDate(1);
         thisMonth.setHours(0, 0, 0, 0);
         thisMonth.setMonth(monthIndex);
+        const isMonthRangeSelection = !ownerState.views?.find((view) => view === "day") && ownerState.rangeSelection;
         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
+        ));
         const handleMonthClick = () => {
-          ownerState.onViewChange?.("day");
-          ownerState.onMonthChange?.(thisMonth);
+          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())
+                )
+              ]);
+            } else {
+              ownerState.onChange?.([thisMonth, void 0]);
+            }
+          } else {
+            ownerState.onViewChange?.("day");
+            ownerState.onMonthChange?.(thisMonth);
+          }
+          setHoverMonth(null);
         };
         return {
           isSelected,
+          onMouseEnter: isMonthRangeSelection && ownerState.value?.[0] && !ownerState.value?.[1] ? () => setHoverMonth(thisMonth) : void 0,
           disabled: ownerState.minDate && (() => {
             const lastDay = new Date(thisMonth);
             lastDay.setMonth(lastDay.getMonth() + 1);
@@ -485,10 +539,12 @@ var useCalendar = (ownerState) => {
             const lastDay = new Date(thisMonth);
             lastDay.setDate(0);
             return lastDay > ownerState.maxDate;
-          })() || ownerState.disableFuture && thisMonth > /* @__PURE__ */ new Date() || ownerState.disablePast && thisMonth < /* @__PURE__ */ new Date(),
+          })() || ownerState.disableFuture && thisMonth > /* @__PURE__ */ new Date() || ownerState.disablePast && thisMonth < /* @__PURE__ */ new Date() && !isSameMonth(thisMonth, /* @__PURE__ */ new Date()),
           onClick: handleMonthClick,
           tabIndex: -1,
-          "aria-label": getMonthName(thisMonth, ownerState.locale || "default")
+          "aria-label": getMonthName(thisMonth, ownerState.locale || "default"),
+          "aria-selected": isSelected ? "true" : void 0,
+          "aria-current": inRange ? "date" : void 0
         };
       },
       [
@@ -501,7 +557,8 @@ var useCalendar = (ownerState) => {
         ownerState.minDate,
         ownerState.maxDate,
         ownerState.disableFuture,
-        ownerState.disablePast
+        ownerState.disablePast,
+        hoverMonth
       ]
     )
   };
@@ -585,6 +642,28 @@ var CalendarDayCell = styled("td", {
     }
   }
 }));
+var CalendarMonthCell = styled("td", {
+  name: "Calendar",
+  slot: "monthCell"
+})(({ theme }) => ({
+  // aria-current=date === range에 포함된 버튼
+  "&[aria-current=date]": {
+    position: "relative",
+    "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
+      backgroundColor: `rgb(${theme.palette.primary.lightChannel})`
+    },
+    '& + td[aria-hidden] + td[aria-current="date"]::before': {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: "-10px",
+      bottom: 0,
+      width: "16px",
+      backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+      zIndex: -1
+    }
+  }
+}));
 var CalendarMonth = styled(Button_default, {
   name: "Calendar",
   slot: "month"
@@ -747,7 +826,7 @@ var PickerDays = (props) => {
 };
 var PickerMonths = (props) => {
   const { ownerState } = props;
-  const { getPickerMonthProps } = useCalendar(ownerState);
+  const { getPickerMonthProps, getMonthCellProps } = useCalendar(ownerState);
   const chunkedMonths = Array.from({ length: 12 }, (_, i) => i).reduce(
     (acc, month) => {
       if (acc[acc.length - 1].length === 4) {
@@ -787,7 +866,7 @@ var PickerMonths = (props) => {
         }
       }
     },
-    /* @__PURE__ */ React6.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React6.createElement(Fragment, { key: i }, /* @__PURE__ */ React6.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React6.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React6.createElement("td", null, /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React6.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React6.createElement(Fragment, { key: i }, /* @__PURE__ */ React6.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React6.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React6.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React6.createElement(
       CalendarMonth,
       {
         size: "sm",
@@ -1416,7 +1495,7 @@ DataTable.displayName = "DataTable";
 // src/components/DatePicker/DatePicker.tsx
 import React12, { forwardRef as forwardRef4, useCallback as useCallback4, useState as useState4 } from "react";
 import { IMaskInput, IMask } from "react-imask";
-import CalendarTodayIcon from "@mui/icons-material/esm/CalendarToday";
+import CalendarTodayIcon from "@mui/icons-material/esm/CalendarToday.js";
 import { styled as styled3 } from "@mui/joy/styles";
 import { FocusTrap } from "@mui/base/FocusTrap";
 import { ClickAwayListener } from "@mui/base/ClickAwayListener";
@@ -1425,12 +1504,44 @@ import { Popper } from "@mui/base/Popper";
 // src/components/Input/Input.tsx
 import React11 from "react";
 import { Input as JoyInput } from "@mui/joy";
+import { motion as motion13 } from "framer-motion";
+
+// src/components/FormControl/FormControl.tsx
+import { FormControl as JoyFormControl } from "@mui/joy";
 import { motion as motion10 } from "framer-motion";
-var MotionInput = motion10(JoyInput);
+var MotionFormControl = motion10(JoyFormControl);
+var FormControl = MotionFormControl;
+FormControl.displayName = "FormControl";
+
+// src/components/FormControl/index.ts
+var FormControl_default = FormControl;
+
+// src/components/FormLabel/FormLabel.tsx
+import { FormLabel as JoyFormLabel } from "@mui/joy";
+import { motion as motion11 } from "framer-motion";
+var MotionFormLabel = motion11(JoyFormLabel);
+var FormLabel = MotionFormLabel;
+FormLabel.displayName = "FormLabel";
+
+// src/components/FormLabel/index.ts
+var FormLabel_default = FormLabel;
+
+// src/components/FormHelperText/FormHelperText.tsx
+import { FormHelperText as JoyFormHelperText } from "@mui/joy";
+import { motion as motion12 } from "framer-motion";
+var MotionFormHelperText = motion12(JoyFormHelperText);
+var FormHelperText = MotionFormHelperText;
+FormHelperText.displayName = "FormHelperText";
+
+// src/components/FormHelperText/index.ts
+var FormHelperText_default = FormHelperText;
+
+// src/components/Input/Input.tsx
+var MotionInput = motion13(JoyInput);
 var Input = (props) => {
   const { label, helperText, error, style, ...innerProps } = props;
   if (label) {
-    return /* @__PURE__ */ React11.createElement(FormControl, { error }, /* @__PURE__ */ React11.createElement(FormLabel, null, label), /* @__PURE__ */ React11.createElement(MotionInput, { ...innerProps, color: error ? "danger" : innerProps.color }), helperText && /* @__PURE__ */ React11.createElement(FormHelperText, null, helperText));
+    return /* @__PURE__ */ React11.createElement(FormControl_default, { error }, /* @__PURE__ */ React11.createElement(FormLabel_default, null, label), /* @__PURE__ */ React11.createElement(MotionInput, { ...innerProps, color: error ? "danger" : innerProps.color }), helperText && /* @__PURE__ */ React11.createElement(FormHelperText_default, null, helperText));
   }
   return /* @__PURE__ */ React11.createElement(MotionInput, { ...innerProps });
 };
@@ -1441,34 +1552,14 @@ var Input_default = Input;
 
 // src/components/DialogActions/DialogActions.tsx
 import { DialogActions as JoyDialogActions } from "@mui/joy";
-import { motion as motion11 } from "framer-motion";
-var MotionDialogActions = motion11(JoyDialogActions);
+import { motion as motion14 } from "framer-motion";
+var MotionDialogActions = motion14(JoyDialogActions);
 var DialogActions = MotionDialogActions;
 DialogActions.displayName = "DialogActions";
 
 // src/components/DialogActions/index.ts
 var DialogActions_default = DialogActions;
 
-// src/components/FormControl/FormControl.tsx
-import { FormControl as JoyFormControl } from "@mui/joy";
-import { motion as motion12 } from "framer-motion";
-var MotionFormControl = motion12(JoyFormControl);
-var FormControl = MotionFormControl;
-FormControl.displayName = "FormControl";
-
-// src/components/FormControl/index.ts
-var FormControl_default = FormControl;
-
-// src/components/FormLabel/FormLabel.tsx
-import { FormLabel as JoyFormLabel } from "@mui/joy";
-import { motion as motion13 } from "framer-motion";
-var MotionFormLabel = motion13(JoyFormLabel);
-var FormLabel = MotionFormLabel;
-FormLabel.displayName = "FormLabel";
-
-// src/components/FormLabel/index.ts
-var FormLabel_default = FormLabel;
-
 // src/components/DatePicker/DatePicker.tsx
 var StyledPopper = styled3(Popper, {
   name: "DatePicker",
@@ -1543,7 +1634,7 @@ var TextMaskAdapter = React12.forwardRef(
 );
 var DatePicker = forwardRef4(
   (props, ref) => {
-    const { onChange, disabled, label } = props;
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
     const [value, setValue] = useState4(props.value || "");
     const [anchorEl, setAnchorEl] = useState4(null);
     const open = Boolean(anchorEl);
@@ -1599,7 +1690,11 @@ var DatePicker = forwardRef4(
           onChange: ([date]) => {
             setValue(formatValueString(date));
             setAnchorEl(null);
-          }
+          },
+          minDate,
+          maxDate,
+          disableFuture,
+          disablePast
         }
       ), /* @__PURE__ */ React12.createElement(
         DialogActions_default,
@@ -1624,7 +1719,7 @@ var DatePicker = forwardRef4(
       )))
     )));
     if (label) {
-      return /* @__PURE__ */ React12.createElement(FormControl_default, { size: "sm" }, /* @__PURE__ */ React12.createElement(FormLabel_default, null, label), picker);
+      return /* @__PURE__ */ React12.createElement(FormControl_default, { error, size: "sm" }, /* @__PURE__ */ React12.createElement(FormLabel_default, null, label), picker, helperText && /* @__PURE__ */ React12.createElement(FormHelperText_default, null, helperText));
     }
     return picker;
   }
@@ -1634,7 +1729,7 @@ DatePicker.displayName = "DatePicker";
 // src/components/DateRangePicker/DateRangePicker.tsx
 import React13, { forwardRef as forwardRef5, useCallback as useCallback5, useMemo as useMemo4, useState as useState5 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
-import CalendarTodayIcon2 from "@mui/icons-material/esm/CalendarToday";
+import CalendarTodayIcon2 from "@mui/icons-material/esm/CalendarToday.js";
 import { styled as styled4 } from "@mui/joy/styles";
 import { FocusTrap as FocusTrap2 } from "@mui/base/FocusTrap";
 import { ClickAwayListener as ClickAwayListener2 } from "@mui/base/ClickAwayListener";
@@ -1727,7 +1822,7 @@ var TextMaskAdapter3 = React13.forwardRef(
 );
 var DateRangePicker = forwardRef5(
   (props, ref) => {
-    const { onChange, disabled, label } = props;
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
     const [value, setValue] = useState5(props.value || "");
     const [anchorEl, setAnchorEl] = useState5(null);
     const open = Boolean(anchorEl);
@@ -1794,7 +1889,11 @@ var DateRangePicker = forwardRef5(
         {
           rangeSelection: true,
           defaultValue: calendarValue,
-          onChange: handleCalendarChange
+          onChange: handleCalendarChange,
+          minDate,
+          maxDate,
+          disableFuture,
+          disablePast
         }
       ), /* @__PURE__ */ React13.createElement(
         DialogActions_default,
@@ -1819,7 +1918,7 @@ var DateRangePicker = forwardRef5(
       )))
     )));
     if (label) {
-      return /* @__PURE__ */ React13.createElement(FormControl_default, { size: "sm" }, /* @__PURE__ */ React13.createElement(FormLabel_default, null, label), picker);
+      return /* @__PURE__ */ React13.createElement(FormControl_default, { error, size: "sm" }, /* @__PURE__ */ React13.createElement(FormLabel_default, null, label), picker, helperText && /* @__PURE__ */ React13.createElement(FormHelperText_default, null, helperText));
     }
     return picker;
   }
@@ -1828,8 +1927,8 @@ DateRangePicker.displayName = "DateRangePicker";
 
 // src/components/DialogContent/DialogContent.tsx
 import { DialogContent as JoyDialogContent } from "@mui/joy";
-import { motion as motion14 } from "framer-motion";
-var MotionDialogContent = motion14(JoyDialogContent);
+import { motion as motion15 } from "framer-motion";
+var MotionDialogContent = motion15(JoyDialogContent);
 var DialogContent = MotionDialogContent;
 DialogContent.displayName = "DialogContent";
 
@@ -1838,8 +1937,8 @@ var DialogContent_default = DialogContent;
 
 // src/components/DialogTitle/DialogTitle.tsx
 import { DialogTitle as JoyDialogTitle } from "@mui/joy";
-import { motion as motion15 } from "framer-motion";
-var MotionDialogTitle = motion15(JoyDialogTitle);
+import { motion as motion16 } from "framer-motion";
+var MotionDialogTitle = motion16(JoyDialogTitle);
 var DialogTitle = MotionDialogTitle;
 DialogTitle.displayName = "DialogTitle";
 
@@ -1857,17 +1956,17 @@ import {
   ModalClose as JoyModalClose,
   ModalOverflow as JoyModalOverflow
 } from "@mui/joy";
-import { motion as motion16 } from "framer-motion";
-var MotionModal = motion16(JoyModal);
+import { motion as motion17 } from "framer-motion";
+var MotionModal = motion17(JoyModal);
 var Modal = MotionModal;
 Modal.displayName = "Modal";
-var MotionModalDialog = motion16(JoyModalDialog);
+var MotionModalDialog = motion17(JoyModalDialog);
 var ModalDialog = MotionModalDialog;
 ModalDialog.displayName = "ModalDialog";
-var MotionModalClose = motion16(JoyModalClose);
+var MotionModalClose = motion17(JoyModalClose);
 var ModalClose = MotionModalClose;
 ModalClose.displayName = "ModalClose";
-var MotionModalOverflow = motion16(JoyModalOverflow);
+var MotionModalOverflow = motion17(JoyModalOverflow);
 var ModalOverflow = MotionModalOverflow;
 ModalOverflow.displayName = "ModalOverflow";
 function ModalFrame(props) {
@@ -1886,8 +1985,8 @@ DialogFrame.displayName = "DialogFrame";
 // src/components/Divider/Divider.tsx
 import React16 from "react";
 import { Divider as JoyDivider } from "@mui/joy";
-import { motion as motion17 } from "framer-motion";
-var MotionDivider = motion17(JoyDivider);
+import { motion as motion18 } from "framer-motion";
+var MotionDivider = motion18(JoyDivider);
 var Divider = (props) => {
   return /* @__PURE__ */ React16.createElement(MotionDivider, { ...props });
 };
@@ -1896,8 +1995,8 @@ Divider.displayName = "Divider";
 // src/components/InsetDrawer/InsetDrawer.tsx
 import React17 from "react";
 import { Drawer as JoyDrawer } from "@mui/joy";
-import { motion as motion18 } from "framer-motion";
-var MotionDrawer = motion18(JoyDrawer);
+import { motion as motion19 } from "framer-motion";
+var MotionDrawer = motion19(JoyDrawer);
 var InsetDrawer = (props) => {
   const { children, ...innerProps } = props;
   return /* @__PURE__ */ React17.createElement(
@@ -1923,18 +2022,11 @@ InsetDrawer.displayName = "InsetDrawer";
 
 // src/components/Dropdown/Dropdown.tsx
 import { Dropdown as JoyDropdown } from "@mui/joy";
-import { motion as motion19 } from "framer-motion";
-var MotionDropdown = motion19(JoyDropdown);
+import { motion as motion20 } from "framer-motion";
+var MotionDropdown = motion20(JoyDropdown);
 var Dropdown = MotionDropdown;
 Dropdown.displayName = "Dropdown";
 
-// src/components/FormHelperText/FormHelperText.tsx
-import { FormHelperText as JoyFormHelperText } from "@mui/joy";
-import { motion as motion20 } from "framer-motion";
-var MotionFormHelperText = motion20(JoyFormHelperText);
-var FormHelperText = MotionFormHelperText;
-FormHelperText.displayName = "FormHelperText";
-
 // src/components/Grid/Grid.tsx
 import { Grid as JoyGrid } from "@mui/joy";
 import { motion as motion21 } from "framer-motion";
@@ -1966,6 +2058,196 @@ var MenuItem = (props) => {
 };
 MenuItem.displayName = "MenuItem";
 
+// src/components/MonthRangePicker/MonthRangePicker.tsx
+import React19, { forwardRef as forwardRef6, useCallback as useCallback6, useMemo as useMemo5, useState as useState6 } from "react";
+import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
+import CalendarTodayIcon3 from "@mui/icons-material/esm/CalendarToday";
+import { styled as styled5 } from "@mui/joy/styles";
+import { FocusTrap as FocusTrap3 } from "@mui/base/FocusTrap";
+import { ClickAwayListener as ClickAwayListener3 } from "@mui/base/ClickAwayListener";
+import { Popper as Popper3 } from "@mui/base/Popper";
+var StyledPopper3 = styled5(Popper3, {
+  name: "MonthRangePicker",
+  slot: "popper"
+})(({ theme }) => ({
+  zIndex: theme.zIndex.popup
+}));
+var CalendarSheet3 = styled5(Sheet_default, {
+  name: "MonthRangePicker",
+  slot: "sheet",
+  overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+  zIndex: theme.zIndex.popup,
+  width: "264px",
+  boxShadow: theme.shadow.md,
+  borderRadius: theme.radius.md
+}));
+var formatValueString3 = ([date1, date2]) => {
+  const getStr = (date) => {
+    let month = `${date.getMonth() + 1}`;
+    const year = date.getFullYear();
+    if (Number(month) < 10)
+      month = "0" + month;
+    return [year, month].join("/");
+  };
+  return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
+};
+var parseDate2 = (str) => {
+  const date1 = str.split(" - ")[0] || "";
+  const date2 = str.split(" - ")[1] || "";
+  const yearMonthDay1 = date1.split("/");
+  const yearMonthDay2 = date2.split("/");
+  return [
+    new Date(
+      Number(yearMonthDay1[0]),
+      Number(yearMonthDay1[1]) - 1
+    ),
+    new Date(
+      Number(yearMonthDay2[0]),
+      Number(yearMonthDay2[1]) - 1
+    )
+  ];
+};
+var TextMaskAdapter5 = React19.forwardRef(
+  function TextMaskAdapter6(props, ref) {
+    const { onChange, ...other } = props;
+    return /* @__PURE__ */ React19.createElement(
+      IMaskInput3,
+      {
+        ...other,
+        inputRef: ref,
+        onAccept: (value) => onChange({ target: { name: props.name, value } }),
+        mask: Date,
+        pattern: "Y/`m - Y/`m",
+        blocks: {
+          m: {
+            mask: IMask3.MaskedRange,
+            from: 1,
+            to: 12,
+            maxLength: 2
+          },
+          Y: {
+            mask: IMask3.MaskedRange,
+            from: 1900,
+            to: 9999
+          }
+        },
+        format: formatValueString3,
+        parse: parseDate2,
+        autofix: "pad",
+        overwrite: true,
+        placeholderChar: " "
+      }
+    );
+  }
+);
+var MonthRangePicker = forwardRef6(
+  (props, ref) => {
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
+    const [value, setValue] = useState6(props.value || "");
+    const [anchorEl, setAnchorEl] = useState6(null);
+    const open = Boolean(anchorEl);
+    const calendarValue = useMemo5(
+      () => value ? parseDate2(value) : void 0,
+      [value]
+    );
+    const handleChange = useCallback6(
+      (event) => {
+        setValue(event.target.value);
+        onChange?.(event);
+      },
+      [onChange]
+    );
+    const handleCalendarToggle = useCallback6(
+      (event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+      },
+      [anchorEl, setAnchorEl]
+    );
+    const handleCalendarChange = useCallback6(
+      ([date1, date2]) => {
+        if (!date1 || !date2)
+          return;
+        setValue(formatValueString3([date1, date2]));
+        setAnchorEl(null);
+      },
+      [setValue, setAnchorEl]
+    );
+    const picker = /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+      Input_default,
+      {
+        ref,
+        size: "sm",
+        value,
+        onChange: handleChange,
+        disabled,
+        placeholder: "YYYY/MM - YYYY/MM",
+        slotProps: { input: { component: TextMaskAdapter5 } },
+        sx: {
+          // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
+          fontFamily: "monospace"
+        },
+        endDecorator: /* @__PURE__ */ React19.createElement(IconButton_default, { variant: "plain", onClick: handleCalendarToggle }, /* @__PURE__ */ React19.createElement(CalendarTodayIcon3, null))
+      }
+    ), open && /* @__PURE__ */ React19.createElement(ClickAwayListener3, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React19.createElement(
+      StyledPopper3,
+      {
+        id: "date-range-picker-popper",
+        open: true,
+        anchorEl,
+        placement: "bottom-end",
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [4, 4]
+            }
+          }
+        ]
+      },
+      /* @__PURE__ */ React19.createElement(FocusTrap3, { open: true }, /* @__PURE__ */ React19.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React19.createElement(
+        Calendar_default,
+        {
+          view: "month",
+          views: ["month"],
+          rangeSelection: true,
+          defaultValue: calendarValue,
+          onChange: handleCalendarChange,
+          minDate,
+          maxDate,
+          disableFuture,
+          disablePast
+        }
+      ), /* @__PURE__ */ React19.createElement(
+        DialogActions_default,
+        {
+          sx: {
+            p: 1
+          }
+        },
+        /* @__PURE__ */ React19.createElement(
+          Button_default,
+          {
+            size: "sm",
+            variant: "plain",
+            color: "neutral",
+            onClick: () => {
+              setValue("");
+              setAnchorEl(null);
+            }
+          },
+          "Clear"
+        )
+      )))
+    )));
+    if (label) {
+      return /* @__PURE__ */ React19.createElement(FormControl_default, { error, size: "sm" }, /* @__PURE__ */ React19.createElement(FormLabel_default, null, label), picker, helperText && /* @__PURE__ */ React19.createElement(FormHelperText_default, null, helperText));
+    }
+    return picker;
+  }
+);
+MonthRangePicker.displayName = "MonthRangePicker";
+
 // src/components/Radio/Radio.tsx
 import { Radio as JoyRadio, RadioGroup as JoyRadioGroup } from "@mui/joy";
 import { motion as motion23 } from "framer-motion";
@@ -1977,15 +2259,15 @@ var RadioGroup = MotionRadioGroup;
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/RadioList/RadioList.tsx
-import React19 from "react";
+import React20 from "react";
 function RadioList(props) {
   const { items, ...innerProps } = props;
-  return /* @__PURE__ */ React19.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React19.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
+  return /* @__PURE__ */ React20.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React20.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
 }
 RadioList.displayName = "RadioList";
 
 // src/components/Select/Select.tsx
-import React20 from "react";
+import React21 from "react";
 import {
   Select as JoySelect,
   Option as JoyOption
@@ -1997,22 +2279,28 @@ Option.displayName = "Option";
 function Select(props) {
   const { label, helperText, error, ...innerProps } = props;
   if (label) {
-    return /* @__PURE__ */ React20.createElement(FormControl, { error }, /* @__PURE__ */ React20.createElement(FormLabel, null, label), /* @__PURE__ */ React20.createElement(JoySelect, { ...innerProps, color: error ? "danger" : innerProps.color }), helperText && /* @__PURE__ */ React20.createElement(FormHelperText, null, helperText));
+    return /* @__PURE__ */ React21.createElement(FormControl_default, { error }, /* @__PURE__ */ React21.createElement(FormLabel_default, null, label), /* @__PURE__ */ React21.createElement(
+      JoySelect,
+      {
+        ...innerProps,
+        color: error ? "danger" : innerProps.color
+      }
+    ), helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default, null, helperText));
   }
-  return /* @__PURE__ */ React20.createElement(JoySelect, { ...innerProps });
+  return /* @__PURE__ */ React21.createElement(JoySelect, { ...innerProps });
 }
 Select.displayName = "Select";
 
 // src/components/Switch/Switch.tsx
-import React21 from "react";
+import React22 from "react";
 import {
   Switch as JoySwitch,
-  styled as styled5,
+  styled as styled6,
   switchClasses
 } from "@mui/joy";
 import { motion as motion25 } from "framer-motion";
 var MotionSwitch = motion25(JoySwitch);
-var StyledThumb = styled5(motion25.div)({
+var StyledThumb = styled6(motion25.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",
@@ -2030,14 +2318,14 @@ var StyledThumb = styled5(motion25.div)({
     right: "var(--Switch-thumbOffset)"
   }
 });
-var Thumb = (props) => /* @__PURE__ */ React21.createElement(StyledThumb, { ...props, layout: true, transition: spring });
+var Thumb = (props) => /* @__PURE__ */ React22.createElement(StyledThumb, { ...props, layout: true, transition: spring });
 var spring = {
   type: "spring",
   stiffness: 700,
   damping: 30
 };
 var Switch = (props) => {
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     MotionSwitch,
     {
       ...props,
@@ -2067,17 +2355,17 @@ var TabPanel = MotionTabPanel;
 TabPanel.displayName = "TabPanel";
 
 // src/components/Textarea/Textarea.tsx
-import React22 from "react";
+import React23 from "react";
 import { Textarea as JoyTextarea } from "@mui/joy";
 import { motion as motion27 } from "framer-motion";
 var MotionTextarea = motion27(JoyTextarea);
 var Textarea = (props) => {
-  return /* @__PURE__ */ React22.createElement(MotionTextarea, { ...props });
+  return /* @__PURE__ */ React23.createElement(MotionTextarea, { ...props });
 };
 Textarea.displayName = "Textarea";
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-import React23 from "react";
+import React24 from "react";
 import {
   CssBaseline,
   CssVarsProvider,
@@ -2124,17 +2412,17 @@ var defaultTheme = extendTheme({
   }
 });
 function ThemeProvider(props) {
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(CssVarsProvider, { theme: defaultTheme }, /* @__PURE__ */ React23.createElement(CssBaseline, null), props.children));
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(CssVarsProvider, { theme: defaultTheme }, /* @__PURE__ */ React24.createElement(CssBaseline, null), props.children));
 }
 ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Tooltip/Tooltip.tsx
-import React24 from "react";
+import React25 from "react";
 import { Tooltip as JoyTooltip } from "@mui/joy";
 import { motion as motion28 } from "framer-motion";
 var MotionTooltip = motion28(JoyTooltip);
 var Tooltip = (props) => {
-  return /* @__PURE__ */ React24.createElement(MotionTooltip, { ...props });
+  return /* @__PURE__ */ React25.createElement(MotionTooltip, { ...props });
 };
 Tooltip.displayName = "Tooltip";
 export {
@@ -2196,6 +2484,7 @@ export {
   ModalDialog,
   ModalFrame,
   ModalOverflow,
+  MonthRangePicker,
   Option,
   Radio,
   RadioGroup,