@onesy/ui-react 1.0.171 → 1.0.173

package/Calendar/Calendar.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -29,7 +28,8 @@ var _Carousel = _interopRequireDefault(require("../Carousel"));
 var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
 var _Buttons = require("../Buttons/Buttons");
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -150,7 +150,7 @@ const useStyle = (0, _styleReact.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.default.forwardRef((props__, ref) => {
+const Calendar = props__ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -168,6 +168,7 @@ const Calendar = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const Carousel = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Carousel) || _Carousel.default;
   const PaginationItem = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.PaginationItem) || _PaginationItem.default;
   const {
+      ref,
       tonal = true,
       color = 'default',
       version = 'regular',
@@ -329,7 +330,7 @@ const Calendar = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     var _value$, _value$2;
     switch (version) {
       case 'year':
-        return /*#__PURE__*/_react.default.createElement(Carousel, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Carousel, {
           color: "default",
           id: ((_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.milliseconds) + (((_value$2 = value[1]) === null || _value$2 === void 0 ? void 0 : _value$2.milliseconds) || 0) + year,
           value: carousel,
@@ -345,40 +346,41 @@ const Calendar = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
             length: 12
           }).map((item_3, index_2) => {
             const calendarOnesyDate_0 = (0, _date.set)(index_2, 'month', calendar);
-            return /*#__PURE__*/_react.default.createElement(Line, {
-              key: index_2,
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
               gap: 1.5,
               direction: "column",
-              className: (0, _styleReact.classNames)([classes.carousel_item])
-            }, /*#__PURE__*/_react.default.createElement(Type, {
-              version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
-              className: (0, _styleReact.classNames)([classes.carousel_item_label])
-            }, (0, _date.format)(calendarOnesyDate_0, 'MMMM', {
-              l
-            }), " ", (0, _date.format)(calendarOnesyDate_0, 'YYYY', {
-              l
-            })), /*#__PURE__*/_react.default.createElement(CalendarMonth, (0, _extends2.default)({
-              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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className, classes.calendar])
-            })));
+              className: (0, _styleReact.classNames)([classes.carousel_item]),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+                version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
+                className: (0, _styleReact.classNames)([classes.carousel_item_label]),
+                children: [(0, _date.format)(calendarOnesyDate_0, 'MMMM', {
+                  l
+                }), " ", (0, _date.format)(calendarOnesyDate_0, 'YYYY', {
+                  l
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className, classes.calendar])
+              }))]
+            }, index_2);
           }),
           ItemWrapperProps: {
             style: {
@@ -388,56 +390,59 @@ const Calendar = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
           className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-carousel'], classes.carousel])
         });
       default:
-        return /*#__PURE__*/_react.default.createElement(Line, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
           gap: 0,
           direction: "column",
           align: "center",
           style: {
             width: '100%'
-          }
-        }, /*#__PURE__*/_react.default.createElement(Line, {
-          direction: "row",
-          align: "center",
-          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendars'], classes.calendars])
-        }, Array.from({
-          length: calendars
-        }).map((item_2, index_1) => {
-          const calendarOnesyDate = (0, _date.add)(index_1, 'month', calendar);
-          return /*#__PURE__*/_react.default.createElement(Line, {
-            key: index_1,
-            gap: 1,
-            direction: "column",
-            style: {
-              width: '100%'
-            }
-          }, calendars > 1 && /*#__PURE__*/_react.default.createElement(Type, {
-            version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
-            style: {
-              paddingInlineStart: '16px'
-            }
-          }, (0, _date.format)(calendarOnesyDate, 'MMMM', {
-            l
-          })), /*#__PURE__*/_react.default.createElement(CalendarMonth, (0, _extends2.default)({
-            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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className, classes.calendar])
-          })));
-        })), belowCalendars);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+            direction: "row",
+            align: "center",
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendars'], classes.calendars]),
+            children: Array.from({
+              length: calendars
+            }).map((item_2, index_1) => {
+              const calendarOnesyDate = (0, _date.add)(index_1, 'month', calendar);
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+                gap: 1,
+                direction: "column",
+                style: {
+                  width: '100%'
+                },
+                children: [calendars > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                  version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
+                  style: {
+                    paddingInlineStart: '16px'
+                  },
+                  children: (0, _date.format)(calendarOnesyDate, 'MMMM', {
+                    l
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className, classes.calendar])
+                }))]
+              }, index_1);
+            })
+          }), belowCalendars]
+        });
     }
   };
   const month = (0, _date.format)(calendar, 'MMM');
@@ -446,7 +451,7 @@ const Calendar = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     color: 'inherit',
     version: 'text'
   }, OptionButtonProps);
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     ref: item_4 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_4);else ref.current = item_4;
@@ -454,240 +459,277 @@ const Calendar = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       refs.root.current = item_4;
     },
     className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(Line, {
-    gap: 0.5,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-header'], classes.header])
-  }, menu === 'month-year' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/_react.default.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: () => move(false),
-    size: size,
-    "aria-label": l('Previous month'),
-    disabled: open || +year <= 1970 && month === 'Jan'
-  }, optionButtonProps), /*#__PURE__*/_react.default.createElement(IconPrevious, {
-    size: size
-  }))), /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    version: "text",
-    onClick: () => onOpen(),
-    fontSize: _utils2.iconFontSize,
-    size: size,
-    end: /*#__PURE__*/_react.default.createElement(Fade, {
-      in: open !== 'year'
-    }, /*#__PURE__*/_react.default.createElement(IconDropDown, {
-      size: size,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'month' && classes.arrow_open])
-    })),
-    "aria-label": `${l('Select month')}, ${l('current')} ${l(month)}`
-  }, optionButtonProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option, open === 'year' && classes.option_secondary])
-  }), l(month)), /*#__PURE__*/_react.default.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: () => move(),
-    size: size,
-    "aria-label": l('Next month'),
-    disabled: open || +year === 2099 && month === 'Dec'
-  }, optionButtonProps), /*#__PURE__*/_react.default.createElement(IconNext, {
-    size: size
-  })))), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/_react.default.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: () => move(false, 'year'),
-    size: size,
-    "aria-label": l('Previous year'),
-    disabled: open || +year <= 1970
-  }, optionButtonProps), /*#__PURE__*/_react.default.createElement(IconPrevious, {
-    size: size
-  }))), /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    version: "text",
-    onClick: () => onOpen('year'),
-    fontSize: _utils2.iconFontSize,
-    size: size,
-    end: /*#__PURE__*/_react.default.createElement(Fade, {
-      in: open !== 'month'
-    }, /*#__PURE__*/_react.default.createElement(IconDropDown, {
-      size: size,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
-    })),
-    "aria-label": `${l('Select year')}, ${l('current')} ${year}`
-  }, optionButtonProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option, open === 'month' && classes.option_secondary])
-  }), year), /*#__PURE__*/_react.default.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: () => move(true, 'year'),
-    size: size,
-    "aria-label": l('Next year'),
-    disabled: open || +year === 2099
-  }, optionButtonProps), /*#__PURE__*/_react.default.createElement(IconNext, {
-    size: size
-  }))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    tonal: tonal,
-    color: "inherit",
-    size: size,
-    version: "text",
-    onClick: () => onOpen('year'),
-    fontSize: _utils2.iconFontSize,
-    end: /*#__PURE__*/_react.default.createElement(IconDropDown, {
-      size: size,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
-    })
-  }, optionButtonProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option])
-  }), (0, _date.format)(calendar, 'MMMM', {
-    l
-  }), " ", (0, _date.format)(calendar, 'YYYY', {
-    l
-  })), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/_react.default.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/_react.default.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.default.createElement(IconPrevious, {
-    size: size
-  }))), /*#__PURE__*/_react.default.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/_react.default.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.default.createElement(IconNext, {
-    size: size
-  })))))), !open && /*#__PURE__*/_react.default.createElement(Fade, {
-    in: true
-  }, main()), open && /*#__PURE__*/_react.default.createElement(Divider, {
-    tonal: false,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-divider'], classes.divider])
-  }), open === 'month' && /*#__PURE__*/_react.default.createElement(Fade, {
-    in: true
-  }, /*#__PURE__*/_react.default.createElement(List, {
-    ref: refs.month,
-    color: "default",
-    size: "large",
-    menu: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(ListItem, {
-      key: index_3,
-      onClick: () => onUpdateCalendarOption(onesyDate),
-      primary: (0, _date.format)(onesyDate, 'MMMM', {
-        l
-      }),
-      inset: !selected,
-      startAlign: "center",
-      size: size,
-      start: selected ? /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+  }, other), {}, {
+    children: [start, /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      gap: 0.5,
+      direction: "row",
+      align: "center",
+      justify: "space-between",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-header'], classes.header]),
+      children: menu === 'month-year' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0,
+          direction: "row",
+          align: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+            in: !open,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: () => move(false),
+              size: size,
+              "aria-label": l('Previous month'),
+              disabled: open || +year <= 1970 && month === 'Jan'
+            }, optionButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPrevious, {
+                size: size
+              })
+            }))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+            version: "text",
+            onClick: () => onOpen(),
+            fontSize: _utils2.iconFontSize,
+            size: size,
+            end: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+              in: open !== 'year',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDropDown, {
+                size: size,
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'month' && classes.arrow_open])
+              })
+            }),
+            "aria-label": `${l('Select month')}, ${l('current')} ${l(month)}`
+          }, optionButtonProps), {}, {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option, open === 'year' && classes.option_secondary]),
+            children: l(month)
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+            in: !open,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: () => move(),
+              size: size,
+              "aria-label": l('Next month'),
+              disabled: open || +year === 2099 && month === 'Dec'
+            }, optionButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconNext, {
+                size: size
+              })
+            }))
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0,
+          direction: "row",
+          align: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+            in: !open,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: () => move(false, 'year'),
+              size: size,
+              "aria-label": l('Previous year'),
+              disabled: open || +year <= 1970
+            }, optionButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPrevious, {
+                size: size
+              })
+            }))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+            version: "text",
+            onClick: () => onOpen('year'),
+            fontSize: _utils2.iconFontSize,
+            size: size,
+            end: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+              in: open !== 'month',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDropDown, {
+                size: size,
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
+              })
+            }),
+            "aria-label": `${l('Select year')}, ${l('current')} ${year}`
+          }, optionButtonProps), {}, {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option, open === 'month' && classes.option_secondary]),
+            children: year
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+            in: !open,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              onClick: () => move(true, 'year'),
+              size: size,
+              "aria-label": l('Next year'),
+              disabled: open || +year === 2099
+            }, optionButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconNext, {
+                size: size
+              })
+            }))
+          })]
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Button, _objectSpread(_objectSpread({
+          tonal: tonal,
+          color: "inherit",
+          size: size,
+          version: "text",
+          onClick: () => onOpen('year'),
+          fontSize: _utils2.iconFontSize,
+          end: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDropDown, {
+            size: size,
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
+          })
+        }, optionButtonProps), {}, {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option]),
+          children: [(0, _date.format)(calendar, 'MMMM', {
+            l
+          }), " ", (0, _date.format)(calendar, 'YYYY', {
+            l
+          })]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0,
+          direction: "row",
+          align: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+            in: !open,
+            children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(IconPrevious, {
+                size: size
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+            in: !open,
+            children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(IconNext, {
+                size: size
+              })
+            })
+          })]
+        })]
+      })
+    }), !open && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+      in: true,
+      children: main()
+    }), open && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+      tonal: false,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-divider'], classes.divider])
+    }), open === 'month' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+      in: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+        ref: refs.month,
+        color: "default",
+        size: "large",
+        menu: true,
+        className: (0, _styleReact.classNames)([(0, _utils2.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__*/(0, _jsxRuntime.jsx)(ListItem, {
+            onClick: () => onUpdateCalendarOption(onesyDate),
+            primary: (0, _date.format)(onesyDate, 'MMMM', {
+              l
+            }),
+            inset: !selected,
+            startAlign: "center",
+            size: size,
+            start: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
+          }, index_3);
+        })
+      })
+    }), open === 'year' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
+      color: "default",
+      children: ({
+        palette
+      }) => menu === 'month-year' ? /*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
-    });
-  }))), open === 'year' && /*#__PURE__*/_react.default.createElement(Surface, {
-    color: "default"
-  }, ({
-    palette
-  }) => menu === 'month-year' ? /*#__PURE__*/_react.default.createElement(Fade, {
-    in: true
-  }, /*#__PURE__*/_react.default.createElement(List, {
-    ref: refs.year,
-    color: "default",
-    size: size,
-    menu: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.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 = (0, _date.format)(onesyDate_0, 'YYYY');
-    const selected_0 = calendar.year === onesyDate_0.year;
-    return /*#__PURE__*/_react.default.createElement(ListItem, {
-      key: index_4,
-      onClick: () => onUpdateCalendarOption(onesyDate_0),
-      primary: yearValue,
-      inset: !selected_0,
-      startAlign: "center",
-      size: size,
-      start: selected_0 ? /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+          ref: refs.year,
+          color: "default",
+          size: size,
+          menu: true,
+          className: (0, _styleReact.classNames)([(0, _utils2.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 = (0, _date.format)(onesyDate_0, 'YYYY');
+            const selected_0 = calendar.year === onesyDate_0.year;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
+              onClick: () => onUpdateCalendarOption(onesyDate_0),
+              primary: yearValue,
+              inset: !selected_0,
+              startAlign: "center",
+              size: size,
+              start: selected_0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
+            }, index_4);
+          })
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
-    });
-  }))) : /*#__PURE__*/_react.default.createElement(Fade, {
-    in: true
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    ref: refs.year,
-    direction: "row",
-    wrap: "wrap",
-    justify: "space-evenly",
-    className: (0, _styleReact.classNames)([(0, _utils2.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 = (0, _date.format)(onesyDate_1, 'YYYY');
-    const selected_1 = calendar.year === onesyDate_1.year;
-    return /*#__PURE__*/_react.default.createElement(PaginationItem, (0, _extends2.default)({
-      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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps === null || PaginationItemsProps === void 0 ? void 0 : 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 === null || PaginationItemsProps === void 0 ? void 0 : PaginationItemsProps.style)
-    }), yearValue_0);
-  })))), end);
-});
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          ref: refs.year,
+          direction: "row",
+          wrap: "wrap",
+          justify: "space-evenly",
+          className: (0, _styleReact.classNames)([(0, _utils2.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 = (0, _date.format)(onesyDate_1, 'YYYY');
+            const selected_1 = calendar.year === onesyDate_1.year;
+            return /*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps === null || PaginationItemsProps === void 0 ? void 0 : 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 === null || PaginationItemsProps === void 0 ? void 0 : PaginationItemsProps.style),
+              children: yearValue_0
+            }), index_5);
+          })
+        })
+      })
+    }), end]
+  }));
+};
 Calendar.displayName = 'onesy-Calendar';
 var _default = exports.default = Calendar;