@ceed/ads 0.0.54 → 0.0.55

package/dist/components/Calendar/hooks/use-calendar.d.ts

@@ -7,6 +7,10 @@ export declare const useCalendar: (ownerState: CalendarOwnerState) => {
         readonly "aria-label": string;
         readonly "aria-current": "date" | undefined;
     };
+    getMonthCellProps: (monthIndex: number) => {
+        readonly "aria-label": string;
+        readonly "aria-current": "date" | undefined;
+    };
     getPickerDayProps: (day: number) => {
         readonly isToday: boolean;
         readonly isSelected: boolean | undefined;
@@ -20,9 +24,12 @@ export declare const useCalendar: (ownerState: CalendarOwnerState) => {
     };
     getPickerMonthProps: (monthIndex: number) => {
         readonly isSelected: boolean | undefined;
+        readonly onMouseEnter: (() => void) | undefined;
         readonly disabled: boolean | undefined;
         readonly onClick: () => void;
         readonly tabIndex: -1;
         readonly "aria-label": string;
+        readonly "aria-selected": "true" | undefined;
+        readonly "aria-current": "date" | undefined;
     };
 };

package/dist/components/MonthRangePicker/MonthRangePicker.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface MonthRangePickerProps {
+    value?: string;
+    onChange?: (event: {
+        target: {
+            name?: string;
+            value: string;
+        };
+    }) => void;
+    name?: string;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    error?: boolean;
+    helperText?: React.ReactNode;
+    minDate?: Date;
+    maxDate?: Date;
+    disableFuture?: boolean;
+    disablePast?: boolean;
+}
+declare const MonthRangePicker: React.ForwardRefExoticComponent<MonthRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+export { MonthRangePicker };

package/dist/components/MonthRangePicker/index.d.ts

@@ -0,0 +1,3 @@
+import { MonthRangePicker } from "./MonthRangePicker";
+export * from "./MonthRangePicker";
+export default MonthRangePicker;

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export { IconButton } from "./IconButton";
 export { Input } from "./Input";
 export { Menu, MenuButton, MenuItem } from "./Menu";
 export { Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, } from "./Modal";
+export { MonthRangePicker } from "./MonthRangePicker";
 export { Radio, RadioGroup } from "./Radio";
 export { RadioList } from "./RadioList";
 export { Select, Option } from "./Select";

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, Autocomplete, AutocompleteListbox, AutocompleteOption, autocompleteClasses, autocompleteListboxClasses, autocompleteOptionClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, Breadcrumbs, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, Step, stepClasses, StepButton, stepButtonClasses, StepIndicator, Stepper, stepperClasses, Skeleton, skeletonClasses, } from "@mui/joy";
-export { Accordion, Accordions, AccordionDetails, AccordionSummary, Box, Button, Calendar, Checkbox, Container, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
+export { Accordion, Accordions, AccordionDetails, AccordionSummary, Box, Button, Calendar, Checkbox, Container, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, MonthRangePicker, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";

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";
@@ -1650,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";
@@ -1979,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";
@@ -1990,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
@@ -2010,28 +2279,28 @@ Option.displayName = "Option";
 function Select(props) {
   const { label, helperText, error, ...innerProps } = props;
   if (label) {
-    return /* @__PURE__ */ React20.createElement(FormControl_default, { error }, /* @__PURE__ */ React20.createElement(FormLabel_default, null, label), /* @__PURE__ */ React20.createElement(
+    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__ */ React20.createElement(FormHelperText_default, null, helperText));
+    ), 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",
@@ -2049,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,
@@ -2086,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,
@@ -2143,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 {
@@ -2215,6 +2484,7 @@ export {
   ModalDialog,
   ModalFrame,
   ModalOverflow,
+  MonthRangePicker,
   Option,
   Radio,
   RadioGroup,