@onesy/ui-react 1.0.172 → 1.0.173

package/esm/Calendar/Calendar.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "start", "end", "menu", "range", "now", "calendars", "min", "max", "validate", "menu_month_previous_unit", "menu_month_next_unit", "valid", "getMonths", "getYears", "belowCalendars", "disabled", "IconPrevious", "IconNext", "IconDropDown", "CalendarMonthProps", "OptionButtonProps", "PaginationItemsProps", "renderDay", "renderDayName", "className"];
+const _excluded = ["ref", "tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "start", "end", "menu", "range", "now", "calendars", "min", "max", "validate", "menu_month_previous_unit", "menu_month_next_unit", "valid", "getMonths", "getYears", "belowCalendars", "disabled", "IconPrevious", "IconNext", "IconDropDown", "CalendarMonthProps", "OptionButtonProps", "PaginationItemsProps", "renderDay", "renderDayName", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -25,6 +24,7 @@ import CarouselElement from '../Carousel';
 import PaginationItemElement from '../PaginationItem';
 import { IconDoneAnimated } from '../Buttons/Buttons';
 import { iconFontSize, staticClassName } from '../utils';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = style(theme => ({
   root: {
     borderRadius: theme.methods.shape.radius.value(4, 'px'),
@@ -143,7 +143,7 @@ const useStyle = style(theme => ({
 // [l('Monday'), l('Tuesday'), l('Wednesday'), l('Thursday'), l('Friday'), l('Saturday'), l('Sunday'];
 // ['Mon'), l('Tue'), l('Wed'), l('Thu'), l('Fri'), l('Sat'), l('Sun')];
 
-const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
+const Calendar = props__ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendar?.props?.default), props__);
@@ -160,6 +160,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const Carousel = theme?.elements?.Carousel || CarouselElement;
   const PaginationItem = theme?.elements?.PaginationItem || PaginationItemElement;
   const {
+      ref,
       tonal = true,
       color = 'default',
       version = 'regular',
@@ -318,7 +319,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const main = () => {
     switch (version) {
       case 'year':
-        return /*#__PURE__*/React.createElement(Carousel, {
+        return /*#__PURE__*/_jsx(Carousel, {
           color: "default",
           id: value[0]?.milliseconds + (value[1]?.milliseconds || 0) + year,
           value: carousel,
@@ -334,40 +335,41 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
             length: 12
           }).map((item_3, index_2) => {
             const calendarOnesyDate_0 = set(index_2, 'month', calendar);
-            return /*#__PURE__*/React.createElement(Line, {
-              key: index_2,
+            return /*#__PURE__*/_jsxs(Line, {
               gap: 1.5,
               direction: "column",
-              className: classNames([classes.carousel_item])
-            }, /*#__PURE__*/React.createElement(Type, {
-              version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
-              className: classNames([classes.carousel_item_label])
-            }, format(calendarOnesyDate_0, 'MMMM', {
-              l
-            }), " ", format(calendarOnesyDate_0, 'YYYY', {
-              l
-            })), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
-              color: "default",
-              value: value,
-              calendar: calendarOnesyDate_0,
-              valid: valid,
-              now: now,
-              size: size,
-              range: range,
-              offset: index_2,
-              min: min,
-              max: max,
-              validate: validate,
-              outside: false,
-              noTransition: true
-            }, calendarMonthProps, {
-              onChange: onCalendarMonthChange,
-              onChangeCalendar: onCalendarMonthChangeCalendar,
-              TransitionProps: {
-                onTransition
-              },
-              className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps?.className, classes.calendar])
-            })));
+              className: classNames([classes.carousel_item]),
+              children: [/*#__PURE__*/_jsxs(Type, {
+                version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
+                className: classNames([classes.carousel_item_label]),
+                children: [format(calendarOnesyDate_0, 'MMMM', {
+                  l
+                }), " ", format(calendarOnesyDate_0, 'YYYY', {
+                  l
+                })]
+              }), /*#__PURE__*/_jsx(CalendarMonth, _objectSpread(_objectSpread({
+                color: "default",
+                value: value,
+                calendar: calendarOnesyDate_0,
+                valid: valid,
+                now: now,
+                size: size,
+                range: range,
+                offset: index_2,
+                min: min,
+                max: max,
+                validate: validate,
+                outside: false,
+                noTransition: true
+              }, calendarMonthProps), {}, {
+                onChange: onCalendarMonthChange,
+                onChangeCalendar: onCalendarMonthChangeCalendar,
+                TransitionProps: {
+                  onTransition
+                },
+                className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps?.className, classes.calendar])
+              }))]
+            }, index_2);
           }),
           ItemWrapperProps: {
             style: {
@@ -377,56 +379,59 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
           className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-carousel'], classes.carousel])
         });
       default:
-        return /*#__PURE__*/React.createElement(Line, {
+        return /*#__PURE__*/_jsxs(Line, {
           gap: 0,
           direction: "column",
           align: "center",
           style: {
             width: '100%'
-          }
-        }, /*#__PURE__*/React.createElement(Line, {
-          direction: "row",
-          align: "center",
-          className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendars'], classes.calendars])
-        }, Array.from({
-          length: calendars
-        }).map((item_2, index_1) => {
-          const calendarOnesyDate = add(index_1, 'month', calendar);
-          return /*#__PURE__*/React.createElement(Line, {
-            key: index_1,
-            gap: 1,
-            direction: "column",
-            style: {
-              width: '100%'
-            }
-          }, calendars > 1 && /*#__PURE__*/React.createElement(Type, {
-            version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
-            style: {
-              paddingInlineStart: '16px'
-            }
-          }, format(calendarOnesyDate, 'MMMM', {
-            l
-          })), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
-            color: "default",
-            value: value,
-            calendar: calendarOnesyDate,
-            valid: valid,
-            now: now,
-            size: size,
-            range: range,
-            offset: index_1,
-            min: min,
-            max: max,
-            validate: validate
-          }, calendarMonthProps, {
-            onChange: onCalendarMonthChange,
-            onChangeCalendar: onCalendarMonthChangeCalendar,
-            TransitionProps: {
-              onTransition
-            },
-            className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps?.className, classes.calendar])
-          })));
-        })), belowCalendars);
+          },
+          children: [/*#__PURE__*/_jsx(Line, {
+            direction: "row",
+            align: "center",
+            className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendars'], classes.calendars]),
+            children: Array.from({
+              length: calendars
+            }).map((item_2, index_1) => {
+              const calendarOnesyDate = add(index_1, 'month', calendar);
+              return /*#__PURE__*/_jsxs(Line, {
+                gap: 1,
+                direction: "column",
+                style: {
+                  width: '100%'
+                },
+                children: [calendars > 1 && /*#__PURE__*/_jsx(Type, {
+                  version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
+                  style: {
+                    paddingInlineStart: '16px'
+                  },
+                  children: format(calendarOnesyDate, 'MMMM', {
+                    l
+                  })
+                }), /*#__PURE__*/_jsx(CalendarMonth, _objectSpread(_objectSpread({
+                  color: "default",
+                  value: value,
+                  calendar: calendarOnesyDate,
+                  valid: valid,
+                  now: now,
+                  size: size,
+                  range: range,
+                  offset: index_1,
+                  min: min,
+                  max: max,
+                  validate: validate
+                }, calendarMonthProps), {}, {
+                  onChange: onCalendarMonthChange,
+                  onChangeCalendar: onCalendarMonthChangeCalendar,
+                  TransitionProps: {
+                    onTransition
+                  },
+                  className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps?.className, classes.calendar])
+                }))]
+              }, index_1);
+            })
+          }), belowCalendars]
+        });
     }
   };
   const month = format(calendar, 'MMM');
@@ -435,7 +440,7 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
     color: 'inherit',
     version: 'text'
   }, OptionButtonProps);
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     ref: item_4 => {
       if (ref) {
         if (is('function', ref)) ref(item_4);else ref.current = item_4;
@@ -443,240 +448,277 @@ const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
       refs.root.current = item_4;
     },
     className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-root', `onesy-Calendar-version-${version}`, `onesy-Calendar-size-${size}`], className, classes.root, classes[`size_${size}`], range && classes.range])
-  }, other), start, /*#__PURE__*/React.createElement(Line, {
-    gap: 0.5,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-header'], classes.header])
-  }, menu === 'month-year' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => move(false),
-    size: size,
-    "aria-label": l('Previous month'),
-    disabled: open || +year <= 1970 && month === 'Jan'
-  }, optionButtonProps), /*#__PURE__*/React.createElement(IconPrevious, {
-    size: size
-  }))), /*#__PURE__*/React.createElement(Button, _extends({
-    version: "text",
-    onClick: () => onOpen(),
-    fontSize: iconFontSize,
-    size: size,
-    end: /*#__PURE__*/React.createElement(Fade, {
-      in: open !== 'year'
-    }, /*#__PURE__*/React.createElement(IconDropDown, {
-      size: size,
-      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'month' && classes.arrow_open])
-    })),
-    "aria-label": `${l('Select month')}, ${l('current')} ${l(month)}`
-  }, optionButtonProps, {
-    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'year' && classes.option_secondary])
-  }), l(month)), /*#__PURE__*/React.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => move(),
-    size: size,
-    "aria-label": l('Next month'),
-    disabled: open || +year === 2099 && month === 'Dec'
-  }, optionButtonProps), /*#__PURE__*/React.createElement(IconNext, {
-    size: size
-  })))), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => move(false, 'year'),
-    size: size,
-    "aria-label": l('Previous year'),
-    disabled: open || +year <= 1970
-  }, optionButtonProps), /*#__PURE__*/React.createElement(IconPrevious, {
-    size: size
-  }))), /*#__PURE__*/React.createElement(Button, _extends({
-    version: "text",
-    onClick: () => onOpen('year'),
-    fontSize: iconFontSize,
-    size: size,
-    end: /*#__PURE__*/React.createElement(Fade, {
-      in: open !== 'month'
-    }, /*#__PURE__*/React.createElement(IconDropDown, {
-      size: size,
-      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
-    })),
-    "aria-label": `${l('Select year')}, ${l('current')} ${year}`
-  }, optionButtonProps, {
-    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'month' && classes.option_secondary])
-  }), year), /*#__PURE__*/React.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => move(true, 'year'),
-    size: size,
-    "aria-label": l('Next year'),
-    disabled: open || +year === 2099
-  }, optionButtonProps), /*#__PURE__*/React.createElement(IconNext, {
-    size: size
-  }))))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
-    tonal: tonal,
-    color: "inherit",
-    size: size,
-    version: "text",
-    onClick: () => onOpen('year'),
-    fontSize: iconFontSize,
-    end: /*#__PURE__*/React.createElement(IconDropDown, {
-      size: size,
-      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
-    })
-  }, optionButtonProps, {
-    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option])
-  }), format(calendar, 'MMMM', {
-    l
-  }), " ", format(calendar, 'YYYY', {
-    l
-  })), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    tonal: tonal,
-    color: "inherit",
-    size: size,
-    onClick: () => move(false, menu_month_previous_unit || 'month'),
-    "aria-label": l('Previous month'),
-    disabled: !!(open || +year === 1970 && month === 'Jan')
-  }, /*#__PURE__*/React.createElement(IconPrevious, {
-    size: size
-  }))), /*#__PURE__*/React.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    tonal: tonal,
-    color: "inherit",
-    size: size,
-    onClick: () => move(true, menu_month_next_unit || 'month'),
-    "aria-label": l('Next month'),
-    disabled: !!(open || +year === 2099 && month === 'Dec')
-  }, /*#__PURE__*/React.createElement(IconNext, {
-    size: size
-  })))))), !open && /*#__PURE__*/React.createElement(Fade, {
-    in: true
-  }, main()), open && /*#__PURE__*/React.createElement(Divider, {
-    tonal: false,
-    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-divider'], classes.divider])
-  }), open === 'month' && /*#__PURE__*/React.createElement(Fade, {
-    in: true
-  }, /*#__PURE__*/React.createElement(List, {
-    ref: refs.month,
-    color: "default",
-    size: "large",
-    menu: true,
-    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list])
-  }, getMonths(value, calendar, props).map((item_5, index_3) => {
-    const onesyDate = item_5.value;
-    const selected = calendar.month === onesyDate.month;
-    return /*#__PURE__*/React.createElement(ListItem, {
-      key: index_3,
-      onClick: () => onUpdateCalendarOption(onesyDate),
-      primary: format(onesyDate, 'MMMM', {
-        l
-      }),
-      inset: !selected,
-      startAlign: "center",
-      size: size,
-      start: selected ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
+  }, other), {}, {
+    children: [start, /*#__PURE__*/_jsx(Line, {
+      gap: 0.5,
+      direction: "row",
+      align: "center",
+      justify: "space-between",
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-header'], classes.header]),
+      children: menu === 'month-year' ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(Line, {
+          gap: 0,
+          direction: "row",
+          align: "center",
+          children: [/*#__PURE__*/_jsx(Fade, {
+            in: !open,
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: () => move(false),
+              size: size,
+              "aria-label": l('Previous month'),
+              disabled: open || +year <= 1970 && month === 'Jan'
+            }, optionButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconPrevious, {
+                size: size
+              })
+            }))
+          }), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+            version: "text",
+            onClick: () => onOpen(),
+            fontSize: iconFontSize,
+            size: size,
+            end: /*#__PURE__*/_jsx(Fade, {
+              in: open !== 'year',
+              children: /*#__PURE__*/_jsx(IconDropDown, {
+                size: size,
+                className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'month' && classes.arrow_open])
+              })
+            }),
+            "aria-label": `${l('Select month')}, ${l('current')} ${l(month)}`
+          }, optionButtonProps), {}, {
+            className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'year' && classes.option_secondary]),
+            children: l(month)
+          })), /*#__PURE__*/_jsx(Fade, {
+            in: !open,
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: () => move(),
+              size: size,
+              "aria-label": l('Next month'),
+              disabled: open || +year === 2099 && month === 'Dec'
+            }, optionButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconNext, {
+                size: size
+              })
+            }))
+          })]
+        }), /*#__PURE__*/_jsxs(Line, {
+          gap: 0,
+          direction: "row",
+          align: "center",
+          children: [/*#__PURE__*/_jsx(Fade, {
+            in: !open,
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: () => move(false, 'year'),
+              size: size,
+              "aria-label": l('Previous year'),
+              disabled: open || +year <= 1970
+            }, optionButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconPrevious, {
+                size: size
+              })
+            }))
+          }), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+            version: "text",
+            onClick: () => onOpen('year'),
+            fontSize: iconFontSize,
+            size: size,
+            end: /*#__PURE__*/_jsx(Fade, {
+              in: open !== 'month',
+              children: /*#__PURE__*/_jsx(IconDropDown, {
+                size: size,
+                className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
+              })
+            }),
+            "aria-label": `${l('Select year')}, ${l('current')} ${year}`
+          }, optionButtonProps), {}, {
+            className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'month' && classes.option_secondary]),
+            children: year
+          })), /*#__PURE__*/_jsx(Fade, {
+            in: !open,
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: () => move(true, 'year'),
+              size: size,
+              "aria-label": l('Next year'),
+              disabled: open || +year === 2099
+            }, optionButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconNext, {
+                size: size
+              })
+            }))
+          })]
+        })]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({
+          tonal: tonal,
+          color: "inherit",
+          size: size,
+          version: "text",
+          onClick: () => onOpen('year'),
+          fontSize: iconFontSize,
+          end: /*#__PURE__*/_jsx(IconDropDown, {
+            size: size,
+            className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
+          })
+        }, optionButtonProps), {}, {
+          className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option]),
+          children: [format(calendar, 'MMMM', {
+            l
+          }), " ", format(calendar, 'YYYY', {
+            l
+          })]
+        })), /*#__PURE__*/_jsxs(Line, {
+          gap: 0,
+          direction: "row",
+          align: "center",
+          children: [/*#__PURE__*/_jsx(Fade, {
+            in: !open,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              tonal: tonal,
+              color: "inherit",
+              size: size,
+              onClick: () => move(false, menu_month_previous_unit || 'month'),
+              "aria-label": l('Previous month'),
+              disabled: !!(open || +year === 1970 && month === 'Jan'),
+              children: /*#__PURE__*/_jsx(IconPrevious, {
+                size: size
+              })
+            })
+          }), /*#__PURE__*/_jsx(Fade, {
+            in: !open,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              tonal: tonal,
+              color: "inherit",
+              size: size,
+              onClick: () => move(true, menu_month_next_unit || 'month'),
+              "aria-label": l('Next month'),
+              disabled: !!(open || +year === 2099 && month === 'Dec'),
+              children: /*#__PURE__*/_jsx(IconNext, {
+                size: size
+              })
+            })
+          })]
+        })]
+      })
+    }), !open && /*#__PURE__*/_jsx(Fade, {
+      in: true,
+      children: main()
+    }), open && /*#__PURE__*/_jsx(Divider, {
+      tonal: false,
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-divider'], classes.divider])
+    }), open === 'month' && /*#__PURE__*/_jsx(Fade, {
+      in: true,
+      children: /*#__PURE__*/_jsx(List, {
+        ref: refs.month,
+        color: "default",
+        size: "large",
+        menu: true,
+        className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list]),
+        children: getMonths(value, calendar, props).map((item_5, index_3) => {
+          const onesyDate = item_5.value;
+          const selected = calendar.month === onesyDate.month;
+          return /*#__PURE__*/_jsx(ListItem, {
+            onClick: () => onUpdateCalendarOption(onesyDate),
+            primary: format(onesyDate, 'MMMM', {
+              l
+            }),
+            inset: !selected,
+            startAlign: "center",
+            size: size,
+            start: selected ? /*#__PURE__*/_jsx(IconDoneAnimated, {
+              in: true,
+              add: true,
+              simple: true,
+              size: size
+            }) : undefined,
+            disabled: !valid(onesyDate, 'month'),
+            selected: selected,
+            button: true,
+            PrimaryProps: {
+              version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
+            },
+            "data-value": index_3,
+            className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
+          }, index_3);
+        })
+      })
+    }), open === 'year' && /*#__PURE__*/_jsx(Surface, {
+      color: "default",
+      children: ({
+        palette
+      }) => menu === 'month-year' ? /*#__PURE__*/_jsx(Fade, {
         in: true,
-        add: true,
-        simple: true,
-        size: size
-      }) : undefined,
-      disabled: !valid(onesyDate, 'month'),
-      selected: selected,
-      button: true,
-      PrimaryProps: {
-        version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
-      },
-      "data-value": index_3,
-      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
-    });
-  }))), open === 'year' && /*#__PURE__*/React.createElement(Surface, {
-    color: "default"
-  }, ({
-    palette
-  }) => menu === 'month-year' ? /*#__PURE__*/React.createElement(Fade, {
-    in: true
-  }, /*#__PURE__*/React.createElement(List, {
-    ref: refs.year,
-    color: "default",
-    size: size,
-    menu: true,
-    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list])
-  }, getYears(value, calendar, props).map((item_6, index_4) => {
-    const onesyDate_0 = item_6.value;
-    const yearValue = format(onesyDate_0, 'YYYY');
-    const selected_0 = calendar.year === onesyDate_0.year;
-    return /*#__PURE__*/React.createElement(ListItem, {
-      key: index_4,
-      onClick: () => onUpdateCalendarOption(onesyDate_0),
-      primary: yearValue,
-      inset: !selected_0,
-      startAlign: "center",
-      size: size,
-      start: selected_0 ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
+        children: /*#__PURE__*/_jsx(List, {
+          ref: refs.year,
+          color: "default",
+          size: size,
+          menu: true,
+          className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list]),
+          children: getYears(value, calendar, props).map((item_6, index_4) => {
+            const onesyDate_0 = item_6.value;
+            const yearValue = format(onesyDate_0, 'YYYY');
+            const selected_0 = calendar.year === onesyDate_0.year;
+            return /*#__PURE__*/_jsx(ListItem, {
+              onClick: () => onUpdateCalendarOption(onesyDate_0),
+              primary: yearValue,
+              inset: !selected_0,
+              startAlign: "center",
+              size: size,
+              start: selected_0 ? /*#__PURE__*/_jsx(IconDoneAnimated, {
+                in: true,
+                add: true,
+                simple: true,
+                size: size
+              }) : undefined,
+              selected: selected_0,
+              disabled: !valid(onesyDate_0, 'year'),
+              button: true,
+              PrimaryProps: {
+                version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
+              },
+              "data-value": yearValue,
+              className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
+            }, index_4);
+          })
+        })
+      }) : /*#__PURE__*/_jsx(Fade, {
         in: true,
-        add: true,
-        simple: true,
-        size: size
-      }) : undefined,
-      selected: selected_0,
-      disabled: !valid(onesyDate_0, 'year'),
-      button: true,
-      PrimaryProps: {
-        version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
-      },
-      "data-value": yearValue,
-      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
-    });
-  }))) : /*#__PURE__*/React.createElement(Fade, {
-    in: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    ref: refs.year,
-    direction: "row",
-    wrap: "wrap",
-    justify: "space-evenly",
-    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-version-year'], classes.list_version_year])
-  }, getYears(value, calendar, props).map((item_7, index_5) => {
-    const onesyDate_1 = item_7.value;
-    const yearValue_0 = format(onesyDate_1, 'YYYY');
-    const selected_1 = calendar.year === onesyDate_1.year;
-    return /*#__PURE__*/React.createElement(PaginationItem, _extends({
-      key: index_5,
-      tonal: tonal,
-      color: "inherit",
-      size: size,
-      InteractionProps: {
-        background: false
-      },
-      TypeProps: {
-        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-        tone: !selected_1 ? 'primary' : undefined
-      },
-      onClick: () => onUpdateCalendarOption(onesyDate_1),
-      "data-value": yearValue_0,
-      disabled: !valid(onesyDate_1, 'year')
-    }, PaginationItemsProps, {
-      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps?.className, classes.day_version_year]),
-      style: _objectSpread(_objectSpread({}, selected_1 ? {
-        color: theme.methods.palette.color.value(undefined, 90, true, palette),
-        backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
-      } : undefined), PaginationItemsProps?.style)
-    }), yearValue_0);
-  })))), end);
-});
+        children: /*#__PURE__*/_jsx(Line, {
+          ref: refs.year,
+          direction: "row",
+          wrap: "wrap",
+          justify: "space-evenly",
+          className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-version-year'], classes.list_version_year]),
+          children: getYears(value, calendar, props).map((item_7, index_5) => {
+            const onesyDate_1 = item_7.value;
+            const yearValue_0 = format(onesyDate_1, 'YYYY');
+            const selected_1 = calendar.year === onesyDate_1.year;
+            return /*#__PURE__*/_jsx(PaginationItem, _objectSpread(_objectSpread({
+              tonal: tonal,
+              color: "inherit",
+              size: size,
+              InteractionProps: {
+                background: false
+              },
+              TypeProps: {
+                version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+                tone: !selected_1 ? 'primary' : undefined
+              },
+              onClick: () => onUpdateCalendarOption(onesyDate_1),
+              "data-value": yearValue_0,
+              disabled: !valid(onesyDate_1, 'year')
+            }, PaginationItemsProps), {}, {
+              className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps?.className, classes.day_version_year]),
+              style: _objectSpread(_objectSpread({}, selected_1 ? {
+                color: theme.methods.palette.color.value(undefined, 90, true, palette),
+                backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
+              } : undefined), PaginationItemsProps?.style),
+              children: yearValue_0
+            }), index_5);
+          })
+        })
+      })
+    }), end]
+  }));
+};
 Calendar.displayName = 'onesy-Calendar';
 export default Calendar;