@ceed/ads 0.0.53 → 0.0.55

package/framer/index.js

@@ -35634,7 +35634,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();
@@ -35765,6 +35765,7 @@ var useCalendarProps = (inProps) => {
 import { useCallback as useCallback25, useState as useState24 } from "react";
 var useCalendar = (ownerState) => {
   const [hoverDay, setHoverDay] = useState24(null);
+  const [hoverMonth, setHoverMonth] = useState24(null);
   return {
     calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
     onPrev: useCallback25(() => {
@@ -35815,6 +35816,33 @@ var useCalendar = (ownerState) => {
         hoverDay
       ]
     ),
+    getMonthCellProps: useCallback25(
+      (monthIndex) => {
+        var _a;
+        const thisMonth = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
+        thisMonth.setDate(1);
+        thisMonth.setHours(0, 0, 0, 0);
+        thisMonth.setMonth(monthIndex);
+        const isMonthRangeSelection = !((_a = ownerState.views) == null ? void 0 : _a.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: useCallback25(
       (day) => {
         var _a, _b;
@@ -35881,18 +35909,46 @@ var useCalendar = (ownerState) => {
     ),
     getPickerMonthProps: useCallback25(
       (monthIndex) => {
+        var _a, _b, _c;
         const thisMonth = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
         thisMonth.setDate(1);
         thisMonth.setHours(0, 0, 0, 0);
         thisMonth.setMonth(monthIndex);
+        const isMonthRangeSelection = !((_a = ownerState.views) == null ? void 0 : _a.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 = () => {
-          var _a, _b;
-          (_a = ownerState.onViewChange) == null ? void 0 : _a.call(ownerState, "day");
-          (_b = ownerState.onMonthChange) == null ? void 0 : _b.call(ownerState, thisMonth);
+          var _a2, _b2, _c2, _d, _e;
+          if (isMonthRangeSelection) {
+            if (!ownerState.value) {
+              (_a2 = ownerState.onChange) == null ? void 0 : _a2.call(ownerState, [thisMonth, void 0]);
+            } else if (ownerState.value[0] && !ownerState.value[1]) {
+              (_b2 = ownerState.onChange) == null ? void 0 : _b2.call(ownerState, [
+                new Date(
+                  Math.min(ownerState.value[0].getTime(), thisMonth.getTime())
+                ),
+                new Date(
+                  Math.max(ownerState.value[0].getTime(), thisMonth.getTime())
+                )
+              ]);
+            } else {
+              (_c2 = ownerState.onChange) == null ? void 0 : _c2.call(ownerState, [thisMonth, void 0]);
+            }
+          } else {
+            (_d = ownerState.onViewChange) == null ? void 0 : _d.call(ownerState, "day");
+            (_e = ownerState.onMonthChange) == null ? void 0 : _e.call(ownerState, thisMonth);
+          }
+          setHoverMonth(null);
         };
         return {
           isSelected,
+          onMouseEnter: isMonthRangeSelection && ((_b = ownerState.value) == null ? void 0 : _b[0]) && !((_c = ownerState.value) == null ? void 0 : _c[1]) ? () => setHoverMonth(thisMonth) : void 0,
           disabled: ownerState.minDate && (() => {
             const lastDay = new Date(thisMonth);
             lastDay.setMonth(lastDay.getMonth() + 1);
@@ -35902,10 +35958,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
         };
       },
       [
@@ -35918,7 +35976,8 @@ var useCalendar = (ownerState) => {
         ownerState.minDate,
         ownerState.maxDate,
         ownerState.disableFuture,
-        ownerState.disablePast
+        ownerState.disablePast,
+        hoverMonth
       ]
     )
   };
@@ -36002,6 +36061,28 @@ var CalendarDayCell = styled_default2("td", {
     }
   }
 }));
+var CalendarMonthCell = styled_default2("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_default2(Button_default2, {
   name: "Calendar",
   slot: "month"
@@ -36179,7 +36260,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 }, (_4, i) => i).reduce(
     (acc, month) => {
       if (acc[acc.length - 1].length === 4) {
@@ -36220,7 +36301,7 @@ var PickerMonths = (props) => {
       },
       children: /* @__PURE__ */ jsx2("tbody", { children: chunkedMonths.map((months, i) => /* @__PURE__ */ jsxs2(Fragment17, { children: [
         /* @__PURE__ */ jsx2("tr", { children: months.map((monthIndex, j) => /* @__PURE__ */ jsxs2(Fragment17, { children: [
-          /* @__PURE__ */ jsx2("td", { children: /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx2(CalendarMonthCell, __spreadProps(__spreadValues({}, getMonthCellProps(monthIndex)), { children: /* @__PURE__ */ jsx2(
             CalendarMonth,
             __spreadProps(__spreadValues({
               size: "sm",
@@ -36232,7 +36313,7 @@ var PickerMonths = (props) => {
                 ownerState.locale
               )
             })
-          ) }),
+          ) })),
           j < 3 && /* @__PURE__ */ jsx2(
             "td",
             {
@@ -40528,15 +40609,44 @@ var CalendarToday_default = createSvgIcon2(/* @__PURE__ */ _jsx106("path", {
 }), "CalendarToday");
 
 // src/components/Input/Input.tsx
+import { motion as motion13 } from "framer-motion";
+
+// src/components/FormControl/FormControl.tsx
 import { motion as motion10 } from "framer-motion";
-var MotionInput = motion10(Input_default);
+var MotionFormControl = motion10(FormControl_default);
+var FormControl3 = MotionFormControl;
+FormControl3.displayName = "FormControl";
+
+// src/components/FormControl/index.ts
+var FormControl_default2 = FormControl3;
+
+// src/components/FormLabel/FormLabel.tsx
+import { motion as motion11 } from "framer-motion";
+var MotionFormLabel = motion11(FormLabel_default);
+var FormLabel3 = MotionFormLabel;
+FormLabel3.displayName = "FormLabel";
+
+// src/components/FormLabel/index.ts
+var FormLabel_default2 = FormLabel3;
+
+// src/components/FormHelperText/FormHelperText.tsx
+import { motion as motion12 } from "framer-motion";
+var MotionFormHelperText = motion12(FormHelperText_default);
+var FormHelperText3 = MotionFormHelperText;
+FormHelperText3.displayName = "FormHelperText";
+
+// src/components/FormHelperText/index.ts
+var FormHelperText_default2 = FormHelperText3;
+
+// src/components/Input/Input.tsx
+var MotionInput = motion13(Input_default);
 var Input3 = (props) => {
   const _a = props, { label, helperText, error, style: style4 } = _a, innerProps = __objRest(_a, ["label", "helperText", "error", "style"]);
   if (label) {
-    return /* @__PURE__ */ jsxs2(FormControl3, { error, children: [
-      /* @__PURE__ */ jsx2(FormLabel3, { children: label }),
+    return /* @__PURE__ */ jsxs2(FormControl_default2, { error, children: [
+      /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
       /* @__PURE__ */ jsx2(MotionInput, __spreadProps(__spreadValues({}, innerProps), { color: error ? "danger" : innerProps.color })),
-      helperText && /* @__PURE__ */ jsx2(FormHelperText3, { children: helperText })
+      helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
     ] });
   }
   return /* @__PURE__ */ jsx2(MotionInput, __spreadValues({}, innerProps));
@@ -40547,32 +40657,14 @@ Input3.displayName = "Input";
 var Input_default2 = Input3;
 
 // src/components/DialogActions/DialogActions.tsx
-import { motion as motion11 } from "framer-motion";
-var MotionDialogActions = motion11(DialogActions_default);
+import { motion as motion14 } from "framer-motion";
+var MotionDialogActions = motion14(DialogActions_default);
 var DialogActions3 = MotionDialogActions;
 DialogActions3.displayName = "DialogActions";
 
 // src/components/DialogActions/index.ts
 var DialogActions_default2 = DialogActions3;
 
-// src/components/FormControl/FormControl.tsx
-import { motion as motion12 } from "framer-motion";
-var MotionFormControl = motion12(FormControl_default);
-var FormControl3 = MotionFormControl;
-FormControl3.displayName = "FormControl";
-
-// src/components/FormControl/index.ts
-var FormControl_default2 = FormControl3;
-
-// src/components/FormLabel/FormLabel.tsx
-import { motion as motion13 } from "framer-motion";
-var MotionFormLabel = motion13(FormLabel_default);
-var FormLabel3 = MotionFormLabel;
-FormLabel3.displayName = "FormLabel";
-
-// src/components/FormLabel/index.ts
-var FormLabel_default2 = FormLabel3;
-
 // src/components/DatePicker/DatePicker.tsx
 var StyledPopper = styled_default2(Popper, {
   name: "DatePicker",
@@ -40646,7 +40738,7 @@ var TextMaskAdapter = React178.forwardRef(
 );
 var DatePicker = forwardRef84(
   (props, ref) => {
-    const { onChange, disabled, label } = props;
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
     const [value, setValue] = useState27(props.value || "");
     const [anchorEl, setAnchorEl] = useState27(null);
     const open = Boolean(anchorEl);
@@ -40704,7 +40796,11 @@ var DatePicker = forwardRef84(
                 onChange: ([date]) => {
                   setValue(formatValueString(date));
                   setAnchorEl(null);
-                }
+                },
+                minDate,
+                maxDate,
+                disableFuture,
+                disablePast
               }
             ),
             /* @__PURE__ */ jsx2(
@@ -40733,9 +40829,10 @@ var DatePicker = forwardRef84(
       ) })
     ] });
     if (label) {
-      return /* @__PURE__ */ jsxs2(FormControl_default2, { size: "sm", children: [
+      return /* @__PURE__ */ jsxs2(FormControl_default2, { error, size: "sm", children: [
         /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
-        picker
+        picker,
+        helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
       ] });
     }
     return picker;
@@ -40832,7 +40929,7 @@ var TextMaskAdapter3 = React179.forwardRef(
 );
 var DateRangePicker = forwardRef85(
   (props, ref) => {
-    const { onChange, disabled, label } = props;
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
     const [value, setValue] = useState28(props.value || "");
     const [anchorEl, setAnchorEl] = useState28(null);
     const open = Boolean(anchorEl);
@@ -40901,7 +40998,11 @@ var DateRangePicker = forwardRef85(
               {
                 rangeSelection: true,
                 defaultValue: calendarValue,
-                onChange: handleCalendarChange
+                onChange: handleCalendarChange,
+                minDate,
+                maxDate,
+                disableFuture,
+                disablePast
               }
             ),
             /* @__PURE__ */ jsx2(
@@ -40930,9 +41031,10 @@ var DateRangePicker = forwardRef85(
       ) })
     ] });
     if (label) {
-      return /* @__PURE__ */ jsxs2(FormControl_default2, { size: "sm", children: [
+      return /* @__PURE__ */ jsxs2(FormControl_default2, { error, size: "sm", children: [
         /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
-        picker
+        picker,
+        helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
       ] });
     }
     return picker;
@@ -40941,8 +41043,8 @@ var DateRangePicker = forwardRef85(
 DateRangePicker.displayName = "DateRangePicker";
 
 // src/components/DialogContent/DialogContent.tsx
-import { motion as motion14 } from "framer-motion";
-var MotionDialogContent = motion14(DialogContent_default);
+import { motion as motion15 } from "framer-motion";
+var MotionDialogContent = motion15(DialogContent_default);
 var DialogContent3 = MotionDialogContent;
 DialogContent3.displayName = "DialogContent";
 
@@ -40950,8 +41052,8 @@ DialogContent3.displayName = "DialogContent";
 var DialogContent_default2 = DialogContent3;
 
 // src/components/DialogTitle/DialogTitle.tsx
-import { motion as motion15 } from "framer-motion";
-var MotionDialogTitle = motion15(DialogTitle_default);
+import { motion as motion16 } from "framer-motion";
+var MotionDialogTitle = motion16(DialogTitle_default);
 var DialogTitle3 = MotionDialogTitle;
 DialogTitle3.displayName = "DialogTitle";
 
@@ -40959,17 +41061,17 @@ DialogTitle3.displayName = "DialogTitle";
 var DialogTitle_default2 = DialogTitle3;
 
 // src/components/Modal/Modal.tsx
-import { motion as motion16 } from "framer-motion";
-var MotionModal = motion16(Modal_default);
+import { motion as motion17 } from "framer-motion";
+var MotionModal = motion17(Modal_default);
 var Modal3 = MotionModal;
 Modal3.displayName = "Modal";
-var MotionModalDialog = motion16(ModalDialog_default);
+var MotionModalDialog = motion17(ModalDialog_default);
 var ModalDialog3 = MotionModalDialog;
 ModalDialog3.displayName = "ModalDialog";
-var MotionModalClose = motion16(ModalClose_default);
+var MotionModalClose = motion17(ModalClose_default);
 var ModalClose3 = MotionModalClose;
 ModalClose3.displayName = "ModalClose";
-var MotionModalOverflow = motion16(ModalOverflow_default);
+var MotionModalOverflow = motion17(ModalOverflow_default);
 var ModalOverflow3 = MotionModalOverflow;
 ModalOverflow3.displayName = "ModalOverflow";
 function ModalFrame(props) {
@@ -40994,16 +41096,16 @@ function DialogFrame(props) {
 DialogFrame.displayName = "DialogFrame";
 
 // src/components/Divider/Divider.tsx
-import { motion as motion17 } from "framer-motion";
-var MotionDivider = motion17(Divider_default);
+import { motion as motion18 } from "framer-motion";
+var MotionDivider = motion18(Divider_default);
 var Divider3 = (props) => {
   return /* @__PURE__ */ jsx2(MotionDivider, __spreadValues({}, props));
 };
 Divider3.displayName = "Divider";
 
 // src/components/InsetDrawer/InsetDrawer.tsx
-import { motion as motion18 } from "framer-motion";
-var MotionDrawer = motion18(Drawer_default);
+import { motion as motion19 } from "framer-motion";
+var MotionDrawer = motion19(Drawer_default);
 var InsetDrawer = (props) => {
   var _b;
   const _a = props, { children } = _a, innerProps = __objRest(_a, ["children"]);
@@ -41026,17 +41128,11 @@ var InsetDrawer = (props) => {
 InsetDrawer.displayName = "InsetDrawer";
 
 // src/components/Dropdown/Dropdown.tsx
-import { motion as motion19 } from "framer-motion";
-var MotionDropdown = motion19(Dropdown);
+import { motion as motion20 } from "framer-motion";
+var MotionDropdown = motion20(Dropdown);
 var Dropdown2 = MotionDropdown;
 Dropdown2.displayName = "Dropdown";
 
-// src/components/FormHelperText/FormHelperText.tsx
-import { motion as motion20 } from "framer-motion";
-var MotionFormHelperText = motion20(FormHelperText_default);
-var FormHelperText3 = MotionFormHelperText;
-FormHelperText3.displayName = "FormHelperText";
-
 // src/components/Grid/Grid.tsx
 import { motion as motion21 } from "framer-motion";
 var MotionGrid = motion21(Grid_default);
@@ -41061,6 +41157,199 @@ var MenuItem3 = (props) => {
 };
 MenuItem3.displayName = "MenuItem";
 
+// src/components/MonthRangePicker/MonthRangePicker.tsx
+import React180, { forwardRef as forwardRef86, useCallback as useCallback30, useMemo as useMemo37, useState as useState29 } from "react";
+var StyledPopper3 = styled_default2(Popper, {
+  name: "MonthRangePicker",
+  slot: "popper"
+})(({ theme }) => ({
+  zIndex: theme.zIndex.popup
+}));
+var CalendarSheet3 = styled_default2(Sheet_default2, {
+  name: "MonthRangePicker",
+  slot: "sheet",
+  overridesResolver: (props, styles2) => styles2.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 = React180.forwardRef(
+  function TextMaskAdapter6(props, ref) {
+    const _a = props, { onChange } = _a, other = __objRest(_a, ["onChange"]);
+    return /* @__PURE__ */ jsx2(
+      IMaskInput,
+      __spreadProps(__spreadValues({}, other), {
+        inputRef: ref,
+        onAccept: (value) => onChange({ target: { name: props.name, value } }),
+        mask: Date,
+        pattern: "Y/`m - Y/`m",
+        blocks: {
+          m: {
+            mask: IMask.MaskedRange,
+            from: 1,
+            to: 12,
+            maxLength: 2
+          },
+          Y: {
+            mask: IMask.MaskedRange,
+            from: 1900,
+            to: 9999
+          }
+        },
+        format: formatValueString3,
+        parse: parseDate2,
+        autofix: "pad",
+        overwrite: true,
+        placeholderChar: " "
+      })
+    );
+  }
+);
+var MonthRangePicker = forwardRef86(
+  (props, ref) => {
+    const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
+    const [value, setValue] = useState29(props.value || "");
+    const [anchorEl, setAnchorEl] = useState29(null);
+    const open = Boolean(anchorEl);
+    const calendarValue = useMemo37(
+      () => value ? parseDate2(value) : void 0,
+      [value]
+    );
+    const handleChange = useCallback30(
+      (event) => {
+        setValue(event.target.value);
+        onChange == null ? void 0 : onChange(event);
+      },
+      [onChange]
+    );
+    const handleCalendarToggle = useCallback30(
+      (event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+      },
+      [anchorEl, setAnchorEl]
+    );
+    const handleCalendarChange = useCallback30(
+      ([date1, date2]) => {
+        if (!date1 || !date2)
+          return;
+        setValue(formatValueString3([date1, date2]));
+        setAnchorEl(null);
+      },
+      [setValue, setAnchorEl]
+    );
+    const picker = /* @__PURE__ */ jsxs2(Fragment16, { children: [
+      /* @__PURE__ */ jsx2(
+        Input_default2,
+        {
+          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__ */ jsx2(IconButton_default2, { variant: "plain", onClick: handleCalendarToggle, children: /* @__PURE__ */ jsx2(CalendarToday_default, {}) })
+        }
+      ),
+      open && /* @__PURE__ */ jsx2(ClickAwayListener, { onClickAway: () => setAnchorEl(null), children: /* @__PURE__ */ jsx2(
+        StyledPopper3,
+        {
+          id: "date-range-picker-popper",
+          open: true,
+          anchorEl,
+          placement: "bottom-end",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [4, 4]
+              }
+            }
+          ],
+          children: /* @__PURE__ */ jsx2(FocusTrap, { open: true, children: /* @__PURE__ */ jsxs2(CalendarSheet3, { tabIndex: -1, role: "presentation", children: [
+            /* @__PURE__ */ jsx2(
+              Calendar_default,
+              {
+                view: "month",
+                views: ["month"],
+                rangeSelection: true,
+                defaultValue: calendarValue,
+                onChange: handleCalendarChange,
+                minDate,
+                maxDate,
+                disableFuture,
+                disablePast
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              DialogActions_default2,
+              {
+                sx: {
+                  p: 1
+                },
+                children: /* @__PURE__ */ jsx2(
+                  Button_default2,
+                  {
+                    size: "sm",
+                    variant: "plain",
+                    color: "neutral",
+                    onClick: () => {
+                      setValue("");
+                      setAnchorEl(null);
+                    },
+                    children: "Clear"
+                  }
+                )
+              }
+            )
+          ] }) })
+        }
+      ) })
+    ] });
+    if (label) {
+      return /* @__PURE__ */ jsxs2(FormControl_default2, { error, size: "sm", children: [
+        /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
+        picker,
+        helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
+      ] });
+    }
+    return picker;
+  }
+);
+MonthRangePicker.displayName = "MonthRangePicker";
+
 // src/components/Radio/Radio.tsx
 import { motion as motion23 } from "framer-motion";
 var MotionRadio = motion23(Radio_default);
@@ -41085,10 +41374,15 @@ Option3.displayName = "Option";
 function Select3(props) {
   const _a = props, { label, helperText, error } = _a, innerProps = __objRest(_a, ["label", "helperText", "error"]);
   if (label) {
-    return /* @__PURE__ */ jsxs2(FormControl3, { error, children: [
-      /* @__PURE__ */ jsx2(FormLabel3, { children: label }),
-      /* @__PURE__ */ jsx2(Select_default, __spreadProps(__spreadValues({}, innerProps), { color: error ? "danger" : innerProps.color })),
-      helperText && /* @__PURE__ */ jsx2(FormHelperText3, { children: helperText })
+    return /* @__PURE__ */ jsxs2(FormControl_default2, { error, children: [
+      /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
+      /* @__PURE__ */ jsx2(
+        Select_default,
+        __spreadProps(__spreadValues({}, innerProps), {
+          color: error ? "danger" : innerProps.color
+        })
+      ),
+      helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
     ] });
   }
   return /* @__PURE__ */ jsx2(Select_default, __spreadValues({}, innerProps));
@@ -41617,25 +41911,35 @@ var datePickerPropertyControls = {
     title: "Label",
     type: ControlType10.String,
     defaultValue: ""
+  },
+  error: {
+    title: "Error",
+    type: ControlType10.Boolean,
+    defaultValue: false
+  },
+  helperText: {
+    title: "Helper Text",
+    type: ControlType10.String,
+    defaultValue: ""
+  },
+  minDate: {
+    title: "Minimum Date",
+    type: ControlType10.Date
+  },
+  maxDate: {
+    title: "Maximum Date",
+    type: ControlType10.Date
+  },
+  disableFuture: {
+    title: "Disable Future",
+    type: ControlType10.Boolean,
+    defaultValue: false
+  },
+  disablePast: {
+    title: "Disable Past",
+    type: ControlType10.Boolean,
+    defaultValue: false
   }
-  // color: {
-  //   title: "Color",
-  //   type: ControlType.Enum,
-  //   options: ["primary", "neutral", "danger", "success", "warning"],
-  //   optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
-  // },
-  // variant: {
-  //   title: "Variant",
-  //   type: ControlType.Enum,
-  //   options: ["solid", "outlined", "soft", "plain"],
-  //   defaultValue: undefined,
-  // },
-  // size: {
-  //   title: "Size",
-  //   type: ControlType.Enum,
-  //   options: ["sm", "md", "lg"],
-  //   defaultValue: "md",
-  // },
 };
 
 // src/components/DateRangePicker/DateRangePicker.framer.ts
@@ -41659,25 +41963,35 @@ var dateRangePickerPropertyControls = {
     title: "Label",
     type: ControlType11.String,
     defaultValue: ""
+  },
+  error: {
+    title: "Error",
+    type: ControlType11.Boolean,
+    defaultValue: false
+  },
+  helperText: {
+    title: "Helper Text",
+    type: ControlType11.String,
+    defaultValue: ""
+  },
+  minDate: {
+    title: "Minimum Date",
+    type: ControlType11.Date
+  },
+  maxDate: {
+    title: "Maximum Date",
+    type: ControlType11.Date
+  },
+  disableFuture: {
+    title: "Disable Future",
+    type: ControlType11.Boolean,
+    defaultValue: false
+  },
+  disablePast: {
+    title: "Disable Past",
+    type: ControlType11.Boolean,
+    defaultValue: false
   }
-  // color: {
-  //   title: "Color",
-  //   type: ControlType.Enum,
-  //   options: ["primary", "neutral", "danger", "success", "warning"],
-  //   optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
-  // },
-  // variant: {
-  //   title: "Variant",
-  //   type: ControlType.Enum,
-  //   options: ["solid", "outlined", "soft", "plain"],
-  //   defaultValue: undefined,
-  // },
-  // size: {
-  //   title: "Size",
-  //   type: ControlType.Enum,
-  //   options: ["sm", "md", "lg"],
-  //   defaultValue: "md",
-  // },
 };
 
 // src/components/DialogFrame/DialogFrame.framer.ts
@@ -41827,6 +42141,11 @@ var menuButtonPropertyControls = {
     type: ControlType16.Boolean,
     defaultValue: false
   },
+  size: {
+    type: ControlType16.Enum,
+    options: ["sm", "md", "lg"],
+    defaultValue: "sm"
+  },
   items: {
     title: "Items",
     type: ControlType16.Array,
@@ -41861,34 +42180,86 @@ var modalFramePropertyControls = {
   }
 };
 
-// src/components/RadioList/RadioList.framer.ts
+// src/components/MonthRangePicker/MonthRangePicker.framer.ts
 import { ControlType as ControlType18 } from "framer";
+var monthRangePickerPropertyControls = {
+  onChange: {
+    title: "onChange",
+    type: ControlType18.EventHandler
+  },
+  disabled: {
+    title: "Disabled",
+    type: ControlType18.Boolean,
+    defaultValue: false
+  },
+  value: {
+    title: "Value",
+    type: ControlType18.String,
+    defaultValue: "2024/04 - 2024/07"
+  },
+  label: {
+    title: "Label",
+    type: ControlType18.String,
+    defaultValue: ""
+  },
+  error: {
+    title: "Error",
+    type: ControlType18.Boolean,
+    defaultValue: false
+  },
+  helperText: {
+    title: "Helper Text",
+    type: ControlType18.String,
+    defaultValue: ""
+  },
+  minDate: {
+    title: "Minimum Date",
+    type: ControlType18.Date
+  },
+  maxDate: {
+    title: "Maximum Date",
+    type: ControlType18.Date
+  },
+  disableFuture: {
+    title: "Disable Future",
+    type: ControlType18.Boolean,
+    defaultValue: false
+  },
+  disablePast: {
+    title: "Disable Past",
+    type: ControlType18.Boolean,
+    defaultValue: false
+  }
+};
+
+// src/components/RadioList/RadioList.framer.ts
+import { ControlType as ControlType19 } from "framer";
 var radioListPropertyControls = {
   orientation: {
     title: "Orientation",
-    type: ControlType18.Enum,
+    type: ControlType19.Enum,
     options: ["vertical", "horizontal"],
     defaultValue: "vertical"
   },
   defaultValue: {
     title: "Checked Value",
-    type: ControlType18.String,
+    type: ControlType19.String,
     defaultValue: "value1"
   },
   items: {
     title: "Items",
-    type: ControlType18.Array,
+    type: ControlType19.Array,
     control: {
-      type: ControlType18.Object,
+      type: ControlType19.Object,
       controls: {
         displayName: {
           title: "Display Name",
-          type: ControlType18.String
+          type: ControlType19.String
         },
-        value: { title: "Value", type: ControlType18.String },
+        value: { title: "Value", type: ControlType19.String },
         color: {
           title: "Color",
-          type: ControlType18.Enum,
+          type: ControlType19.Enum,
           options: ["primary", "neutral", "danger", "success", "warning"],
           optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"]
         }
@@ -41906,73 +42277,73 @@ var radioListPropertyControls = {
 };
 
 // src/components/Select/Select.framer.ts
-import { ControlType as ControlType19 } from "framer";
+import { ControlType as ControlType20 } from "framer";
 var selectPropertyControls = {
   label: {
     title: "Label",
-    type: ControlType19.String
+    type: ControlType20.String
   },
   helperText: {
     title: "Helper Text",
-    type: ControlType19.String
+    type: ControlType20.String
   },
   error: {
     title: "Error",
-    type: ControlType19.Boolean,
+    type: ControlType20.Boolean,
     defaultValue: false
   },
   onChange: {
     title: "onChange",
-    type: ControlType19.EventHandler
+    type: ControlType20.EventHandler
   },
   defaultListboxOpen: {
     title: "Opened",
-    type: ControlType19.Boolean,
+    type: ControlType20.Boolean,
     defaultValue: false
   },
   defaultValue: {
     title: "Selected Option",
-    type: ControlType19.String
+    type: ControlType20.String
   },
   disabled: {
     title: "Disabled",
-    type: ControlType19.Boolean,
+    type: ControlType20.Boolean,
     defaultValue: false
   },
   placeholder: {
     title: "Placeholder",
-    type: ControlType19.String,
+    type: ControlType20.String,
     defaultValue: "Choose one..."
   },
   color: {
     title: "Color",
-    type: ControlType19.Enum,
+    type: ControlType20.Enum,
     options: ["primary", "neutral", "danger", "success", "warning"],
     optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"]
   },
   size: {
     title: "Size",
-    type: ControlType19.Enum,
+    type: ControlType20.Enum,
     options: ["sm", "md", "lg"],
     defaultValue: "md"
   },
   variant: {
     title: "Variant",
-    type: ControlType19.Enum,
+    type: ControlType20.Enum,
     options: ["outlined", "plain", "solid", "soft"],
     defaultValue: void 0
   },
   options: {
     title: "Options",
-    type: ControlType19.Array,
+    type: ControlType20.Array,
     control: {
-      type: ControlType19.Object,
+      type: ControlType20.Object,
       controls: {
         text: {
           title: "Text",
-          type: ControlType19.String
+          type: ControlType20.String
         },
-        value: { title: "Value", type: ControlType19.String }
+        value: { title: "Value", type: ControlType20.String }
       }
     },
     defaultValue: [
@@ -41983,126 +42354,126 @@ var selectPropertyControls = {
 };
 
 // src/components/Sheet/Sheet.framer.ts
-import { ControlType as ControlType20 } from "framer";
+import { ControlType as ControlType21 } from "framer";
 var sheetPropertyControls = {
   color: {
     title: "Color",
-    type: ControlType20.Enum,
+    type: ControlType21.Enum,
     options: ["primary", "neutral", "danger", "success", "warning"],
     optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"]
   },
   variant: {
     title: "Variant",
-    type: ControlType20.Enum,
+    type: ControlType21.Enum,
     options: ["solid", "outlined", "soft", "plain"],
     defaultValue: "outlined"
   }
 };
 
 // src/components/Skeleton/Skeleton.framer.ts
-import { ControlType as ControlType21 } from "framer";
+import { ControlType as ControlType22 } from "framer";
 var skeletonPropertyControls = {
   animation: {
     title: "Animation type",
-    type: ControlType21.Enum,
+    type: ControlType22.Enum,
     options: ["wave", "pulse"]
   },
   variant: {
     title: "Variant",
-    type: ControlType21.Enum,
+    type: ControlType22.Enum,
     options: ["circular", "rectangular"],
     defaultValue: "rectangular"
   },
   target: {
     title: "Target",
-    type: ControlType21.ComponentInstance
+    type: ControlType22.ComponentInstance
   },
   loading: {
     title: "Loading",
-    type: ControlType21.Boolean,
+    type: ControlType22.Boolean,
     defaultValue: false
   }
 };
 
 // src/components/Switch/Switch.framer.ts
-import { ControlType as ControlType22 } from "framer";
+import { ControlType as ControlType23 } from "framer";
 var switchPropertyControls = {
   onChange: {
     title: "onChange",
-    type: ControlType22.EventHandler
+    type: ControlType23.EventHandler
   },
   disabled: {
     title: "Disabled",
-    type: ControlType22.Boolean,
+    type: ControlType23.Boolean,
     defaultValue: false
   },
   color: {
     title: "Color",
-    type: ControlType22.Enum,
+    type: ControlType23.Enum,
     options: ["primary", "neutral", "danger", "success", "warning"],
     optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"]
   },
   variant: {
     title: "Variant",
-    type: ControlType22.Enum,
+    type: ControlType23.Enum,
     options: ["solid", "outlined", "soft", "plain"],
     defaultValue: void 0
   },
   size: {
     title: "Size",
-    type: ControlType22.Enum,
+    type: ControlType23.Enum,
     options: ["sm", "md", "lg"],
     defaultValue: "md"
   }
 };
 
 // src/components/Tabs/Tabs.framer.ts
-import { ControlType as ControlType23 } from "framer";
+import { ControlType as ControlType24 } from "framer";
 var tabsPropertyControls = {
   color: {
     title: "Color",
-    type: ControlType23.Enum,
+    type: ControlType24.Enum,
     options: ["primary", "neutral", "danger", "success", "warning"],
     optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"]
   },
   size: {
     title: "Size",
-    type: ControlType23.Enum,
+    type: ControlType24.Enum,
     options: ["sm", "md", "lg"],
     defaultValue: "md"
   },
   variant: {
     title: "Variant",
-    type: ControlType23.Enum,
+    type: ControlType24.Enum,
     options: ["outlined", "plain", "solid", "soft"],
     defaultValue: "plain"
   },
   orientation: {
-    type: ControlType23.Enum,
+    type: ControlType24.Enum,
     options: ["horizontal", "vertical"]
   },
   disableUnderline: {
-    type: ControlType23.Boolean,
+    type: ControlType24.Boolean,
     defaultValue: false
   },
   disableIndicator: {
-    type: ControlType23.Boolean,
+    type: ControlType24.Boolean,
     defaultValue: false
   },
   indicatorInset: {
-    type: ControlType23.Boolean,
+    type: ControlType24.Boolean,
     defaultValue: false
   },
   tabs: {
-    type: ControlType23.Array,
+    type: ControlType24.Array,
     control: {
-      type: ControlType23.Object,
+      type: ControlType24.Object,
       controls: {
         title: {
-          type: ControlType23.String
+          type: ControlType24.String
         },
         disabled: {
-          type: ControlType23.Boolean,
+          type: ControlType24.Boolean,
           defaultValue: false
         }
       }
@@ -42110,65 +42481,65 @@ var tabsPropertyControls = {
   },
   contents: {
     title: "Contents",
-    type: ControlType23.Array,
+    type: ControlType24.Array,
     control: {
-      type: ControlType23.ComponentInstance
+      type: ControlType24.ComponentInstance
     }
   }
 };
 
 // src/components/Textarea/Textarea.framer.ts
-import { ControlType as ControlType24 } from "framer";
+import { ControlType as ControlType25 } from "framer";
 var textareaPropertyControls = {
   onChange: {
-    type: ControlType24.EventHandler
+    type: ControlType25.EventHandler
   },
   disabled: {
     title: "Disabled",
-    type: ControlType24.Boolean,
+    type: ControlType25.Boolean,
     defaultValue: false
   },
   color: {
     title: "Color",
-    type: ControlType24.Enum,
+    type: ControlType25.Enum,
     options: ["primary", "neutral", "danger", "success", "warning"],
     optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
     defaultValue: "neutral"
   },
   variant: {
     title: "Variant",
-    type: ControlType24.Enum,
+    type: ControlType25.Enum,
     options: ["solid", "outlined", "soft", "plain"],
     defaultValue: "outlined"
   },
   defaultValue: {
     title: "Value",
-    type: ControlType24.String,
+    type: ControlType25.String,
     defaultValue: ""
   },
   placeholder: {
     title: "Placeholder",
-    type: ControlType24.String,
+    type: ControlType25.String,
     defaultValue: "Type in here..."
   },
   endDecorator: {
     title: "End Decorator",
-    type: ControlType24.ComponentInstance
+    type: ControlType25.ComponentInstance
   },
   startDecorator: {
     title: "Start Decorator",
-    type: ControlType24.ComponentInstance
+    type: ControlType25.ComponentInstance
   },
   size: {
     title: "Size",
-    type: ControlType24.Enum,
+    type: ControlType25.Enum,
     options: ["sm", "md", "lg"],
     defaultValue: "md"
   }
 };
 
 // src/components/Typography/Typography.framer.ts
-import { ControlType as ControlType25 } from "framer";
+import { ControlType as ControlType26 } from "framer";
 var typographyPropertyControls = {
   // color: {
   //     title: "Color",
@@ -42178,7 +42549,7 @@ var typographyPropertyControls = {
   // },
   level: {
     title: "Level",
-    type: ControlType25.Enum,
+    type: ControlType26.Enum,
     options: [
       "h1",
       "h2",
@@ -42197,23 +42568,31 @@ var typographyPropertyControls = {
   },
   textColor: {
     title: "Text Color",
-    type: ControlType25.Enum,
-    options: ["text.tertiary", "inherit"],
+    type: ControlType26.Enum,
+    options: [
+      "text.primary",
+      "text.secondary",
+      "text.icon",
+      "text.tertiary",
+      "inherit",
+      "common.white",
+      "common.black"
+    ],
     defaultValue: "inherit"
   },
   text: {
     title: "Text",
-    type: ControlType25.String,
+    type: ControlType26.String,
     defaultValue: "Typography",
     displayTextArea: true
   },
   endDecorator: {
     title: "End Decorator",
-    type: ControlType25.ComponentInstance
+    type: ControlType26.ComponentInstance
   },
   startDecorator: {
     title: "Start Decorator",
-    type: ControlType25.ComponentInstance
+    type: ControlType26.ComponentInstance
   }
 };
 export {
@@ -42275,6 +42654,7 @@ export {
   ModalDialog3 as ModalDialog,
   ModalFrame,
   ModalOverflow3 as ModalOverflow,
+  MonthRangePicker,
   Option3 as Option,
   Radio3 as Radio,
   RadioGroup3 as RadioGroup,
@@ -42366,6 +42746,7 @@ export {
   modalDialogClasses_default as modalDialogClasses,
   modalFramePropertyControls,
   modalOverflowClasses_default as modalOverflowClasses,
+  monthRangePickerPropertyControls,
   optionClasses_default as optionClasses,
   radioClasses_default as radioClasses,
   radioGroupClasses_default as radioGroupClasses,