@onesy/ui-react 1.0.130 → 1.0.132

package/Calendar/Calendar.js

@@ -1,468 +1,731 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const date_1 = require("@onesy/date");
-const IconMaterialNavigateBeforeW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
-const IconMaterialNavigateNextW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
-const IconMaterialArrowDropDownW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowDropDownW100"));
-const Surface_1 = __importDefault(require("../Surface"));
-const Line_1 = __importDefault(require("../Line"));
-const Fade_1 = __importDefault(require("../Fade"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Button_1 = __importDefault(require("../Button"));
-const CalendarMonth_1 = __importDefault(require("../CalendarMonth"));
-const List_1 = __importDefault(require("../List"));
-const ListItem_1 = __importDefault(require("../ListItem"));
-const Divider_1 = __importDefault(require("../Divider"));
-const Type_1 = __importDefault(require("../Type"));
-const Carousel_1 = __importDefault(require("../Carousel"));
-const PaginationItem_1 = __importDefault(require("../PaginationItem"));
-const Buttons_1 = require("../Buttons/Buttons");
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        borderRadius: theme.methods.shape.radius.value(4, 'px'),
-        overflow: 'hidden'
-    },
-    size_small: {
-        width: '275px',
-        '& .onesy-ListItem-root': {
-            minHeight: '40px'
-        },
-        '& .onesy-ListItem-inset': {
-            paddingInlineStart: '44px'
-        }
-    },
-    size_regular: {
-        width: '320px',
-        '& .onesy-ListItem-root': {
-            minHeight: '50px'
-        },
-        '& .onesy-ListItem-inset': {
-            paddingInlineStart: '58px'
-        }
-    },
-    size_large: {
-        width: '375px',
-        '& .onesy-ListItem-root': {
-            minHeight: '60px'
-        },
-        '& .onesy-ListItem-inset': {
-            paddingInlineStart: '78px'
-        }
-    },
-    range: {
-        width: 'unset'
-    },
-    header: {
-        width: '100%',
-        padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(0.5, 'px')}`
-    },
-    calendars: {
-        width: '100%',
-        padding: `0 ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1, 'px')}`
-    },
-    calendar: {
-        width: '100%'
-    },
-    option: {
-        transition: theme.methods.transitions.make('opacity'),
-        '&.onesy-Button-root': {
-            paddingInline: `${theme.methods.space.value(1, 'px')} 0`
-        },
-        '& .onesy-Button-end': {
-            paddingInline: `${theme.methods.space.value(1, 'px')} 0`
-        }
-    },
-    option_secondary: {
-        opacity: '0.4'
-    },
-    list: {
-        width: '100%',
-        maxHeight: '307px',
-        overflowY: 'auto',
-        '&.onesy-List-root': {
-            maxWidth: 'unset !important',
-            boxShadow: 'none'
-        }
-    },
-    listItem: {},
-    list_version_year: {
-        width: '100%',
-        maxHeight: '299px',
-        overflowY: 'auto',
-        marginTop: '8px'
-    },
-    day_version_year: {
-        flex: '0 1 72px',
-        height: '36px',
-        '&:hover': {
-            boxShadow: 'inset 0px 0px 0px 1px currentColor'
-        }
-    },
-    carousel: {
-        '&.onesy-Carousel-root': {
-            height: '100vh',
-            maxHeight: '440px',
-            padding: `0 ${theme.methods.space.value(1, 'px')}`
-        }
-    },
-    carousel_item: {
-        width: '100%',
-        marginTop: '16px',
-        userSelect: 'none'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _date = require("@onesy/date");
+var _IconMaterialNavigateBeforeW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
+var _IconMaterialNavigateNextW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
+var _IconMaterialArrowDropDownW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowDropDownW100"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Fade = _interopRequireDefault(require("../Fade"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _CalendarMonth = _interopRequireDefault(require("../CalendarMonth"));
+var _List = _interopRequireDefault(require("../List"));
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _Type = _interopRequireDefault(require("../Type"));
+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"];
+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 => ({
+  root: {
+    borderRadius: theme.methods.shape.radius.value(4, 'px'),
+    overflow: 'hidden'
+  },
+  size_small: {
+    width: '275px',
+    '& .onesy-ListItem-root': {
+      minHeight: '40px'
     },
-    carousel_item_label: {
-        paddingInlineStart: theme.methods.space.value(2, 'px')
+    '& .onesy-ListItem-inset': {
+      paddingInlineStart: '44px'
+    }
+  },
+  size_regular: {
+    width: '320px',
+    '& .onesy-ListItem-root': {
+      minHeight: '50px'
     },
-    arrow: {
-        transition: theme.methods.transitions.make('transform')
+    '& .onesy-ListItem-inset': {
+      paddingInlineStart: '58px'
+    }
+  },
+  size_large: {
+    width: '375px',
+    '& .onesy-ListItem-root': {
+      minHeight: '60px'
     },
-    arrow_open: {
-        transform: 'rotate(-180deg)'
+    '& .onesy-ListItem-inset': {
+      paddingInlineStart: '78px'
+    }
+  },
+  range: {
+    width: 'unset'
+  },
+  header: {
+    width: '100%',
+    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(0.5, 'px')}`
+  },
+  calendars: {
+    width: '100%',
+    padding: `0 ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1, 'px')}`
+  },
+  calendar: {
+    width: '100%'
+  },
+  option: {
+    transition: theme.methods.transitions.make('opacity'),
+    '&.onesy-Button-root': {
+      paddingInline: `${theme.methods.space.value(1, 'px')} 0`
     },
-    divider: {
-        '&.onesy-Divider-root': {
-            margin: '0px'
-        }
+    '& .onesy-Button-end': {
+      paddingInline: `${theme.methods.space.value(1, 'px')} 0`
+    }
+  },
+  option_secondary: {
+    opacity: '0.4'
+  },
+  list: {
+    width: '100%',
+    maxHeight: '307px',
+    overflowY: 'auto',
+    '&.onesy-List-root': {
+      maxWidth: 'unset !important',
+      boxShadow: 'none'
+    }
+  },
+  listItem: {},
+  list_version_year: {
+    width: '100%',
+    maxHeight: '299px',
+    overflowY: 'auto',
+    marginTop: '8px'
+  },
+  day_version_year: {
+    flex: '0 1 72px',
+    height: '36px',
+    '&:hover': {
+      boxShadow: 'inset 0px 0px 0px 1px currentColor'
     }
-}), { name: 'onesy-Calendar' });
+  },
+  carousel: {
+    '&.onesy-Carousel-root': {
+      height: '100vh',
+      maxHeight: '440px',
+      padding: `0 ${theme.methods.space.value(1, 'px')}`
+    }
+  },
+  carousel_item: {
+    width: '100%',
+    marginTop: '16px',
+    userSelect: 'none'
+  },
+  carousel_item_label: {
+    paddingInlineStart: theme.methods.space.value(2, 'px')
+  },
+  arrow: {
+    transition: theme.methods.transitions.make('transform')
+  },
+  arrow_open: {
+    transform: 'rotate(-180deg)'
+  },
+  divider: {
+    '&.onesy-Divider-root': {
+      margin: '0px'
+    }
+  }
+}), {
+  name: 'onesy-Calendar'
+});
 // [l('millisecond'), l('milliseconds'), l('second'), l('minute'), l('minutes'), l('hour'), l('hours'), l('day'), l('days'), l('week'), l('weeks'), l('month'), l('months'), l('year')];
+
 // [l('January'), l('February'), l('March'), l('April'), l('May'), l('June'), l('July'), l('August'), l('September'), l('October'), l('November'), l('December')];
 // [l('Jan'), l('Feb'), l('Mar'), l('Apr'), l('May'), l('Jun'), l('Jul'), l('Aug'), l('Sep'), l('Oct'), l('Nov'), l('Dec')];
+
 // [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 = react_1.default.forwardRef((props__, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyCalendar) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
-    const CalendarMonth = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.CalendarMonth) || CalendarMonth_1.default; }, [theme]);
-    const List = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.List) || List_1.default; }, [theme]);
-    const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
-    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Carousel = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Carousel) || Carousel_1.default; }, [theme]);
-    const PaginationItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.PaginationItem) || PaginationItem_1.default; }, [theme]);
-    const { tonal = true, color = 'default', version = 'regular', size = 'regular', value: value_, valueDefault, onChange, calendar: calendar_, calendarDefault, onChangeCalendar, start, end, menu = 'month-year', range, now, calendars = props.range ? 2 : 1, min, max, validate, menu_month_previous_unit, menu_month_next_unit, valid: valid_, getMonths: getMonths_, getYears: getYears_, belowCalendars, disabled, IconPrevious = IconMaterialNavigateBeforeW100_1.default, IconNext = IconMaterialNavigateNextW100_1.default, IconDropDown = IconMaterialArrowDropDownW100_1.default, CalendarMonthProps, OptionButtonProps, PaginationItemsProps, renderDay, renderDayName, className } = props, other = __rest(props, ["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 { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(null),
-        month: react_1.default.useRef(null),
-        year: react_1.default.useRef(null),
-        inProgressTransition: react_1.default.useRef(null)
-    };
-    const [value, setValue] = react_1.default.useState(() => {
-        const valueResult = (valueDefault !== undefined ? valueDefault : value_) || (now && (range ? [new date_1.OnesyDate(), new date_1.OnesyDate()] : [new date_1.OnesyDate()]));
-        return ((0, utils_1.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+
+const Calendar = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const l = theme.l;
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCalendar) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props__);
+  }, [props__]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Surface = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  }, [theme]);
+  const Fade = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Fade) || _Fade.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Button = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Button) || _Button.default;
+  }, [theme]);
+  const CalendarMonth = _react.default.useMemo(() => {
+    var _theme$elements6;
+    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.CalendarMonth) || _CalendarMonth.default;
+  }, [theme]);
+  const List = _react.default.useMemo(() => {
+    var _theme$elements7;
+    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.List) || _List.default;
+  }, [theme]);
+  const ListItem = _react.default.useMemo(() => {
+    var _theme$elements8;
+    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ListItem) || _ListItem.default;
+  }, [theme]);
+  const Divider = _react.default.useMemo(() => {
+    var _theme$elements9;
+    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Divider) || _Divider.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements0;
+    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Type) || _Type.default;
+  }, [theme]);
+  const Carousel = _react.default.useMemo(() => {
+    var _theme$elements1;
+    return (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Carousel) || _Carousel.default;
+  }, [theme]);
+  const PaginationItem = _react.default.useMemo(() => {
+    var _theme$elements10;
+    return (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.PaginationItem) || _PaginationItem.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'default',
+      version = 'regular',
+      size = 'regular',
+      value: value_,
+      valueDefault,
+      onChange,
+      calendar: calendar_,
+      calendarDefault,
+      onChangeCalendar,
+      start,
+      end,
+      menu = 'month-year',
+      range,
+      now,
+      calendars = props.range ? 2 : 1,
+      min,
+      max,
+      validate,
+      menu_month_previous_unit,
+      menu_month_next_unit,
+      valid: valid_,
+      getMonths: getMonths_,
+      getYears: getYears_,
+      belowCalendars,
+      disabled,
+      IconPrevious = _IconMaterialNavigateBeforeW.default,
+      IconNext = _IconMaterialNavigateNextW.default,
+      IconDropDown = _IconMaterialArrowDropDownW.default,
+      CalendarMonthProps,
+      OptionButtonProps,
+      PaginationItemsProps,
+      renderDay,
+      renderDayName,
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(null),
+    month: _react.default.useRef(null),
+    year: _react.default.useRef(null),
+    inProgressTransition: _react.default.useRef(null)
+  };
+  const [value, setValue] = _react.default.useState(() => {
+    const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
+    return ((0, _utils.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+  });
+  const [calendar, setCalendar] = _react.default.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new _date.OnesyDate());
+  const [carousel, setCarousel] = _react.default.useState();
+  const [open, setOpen] = _react.default.useState();
+
+  // Value
+  _react.default.useEffect(() => {
+    if (value_ !== undefined && value_ !== value) setValue(((0, _utils.is)('array', value_) ? value_ : [value_]).filter(Boolean));
+  }, [value_]);
+
+  // Calendar
+  _react.default.useEffect(() => {
+    if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
+  }, [calendar_]);
+  const onUpdate = _react.default.useCallback(valueNew => {
+    // Inner update
+    if (!props.hasOwnProperty('value')) setValue(valueNew);
+    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
+  }, [range, onChange]);
+  const onUpdateCalendar = _react.default.useCallback(valueNew => {
+    // Inner update
+    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew);
+    if ((0, _utils.is)('function', onChangeCalendar)) onChangeCalendar(valueNew);
+  }, [onChangeCalendar]);
+  const onUpdateCalendarOption = _react.default.useCallback(valueNew => {
+    setOpen(null);
+    onUpdateCalendar(valueNew);
+  }, []);
+  const onCalendarMonthChange = _react.default.useCallback(valueNew_ => {
+    const valueNew = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
+    if (valueNew !== value) onUpdate(valueNew);
+  }, [value]);
+  const onCalendarMonthChangeCalendar = _react.default.useCallback(valueNew => {
+    onUpdateCalendar(valueNew);
+  }, [calendar]);
+  const valid = _react.default.useCallback((...args) => {
+    if ((0, _utils.is)('function', valid_)) return valid_(...args);
+    return true;
+  }, [valid_]);
+  const move = _react.default.useCallback((next = true, unit = 'month') => {
+    if (refs.inProgressTransition.current) return;
+    onUpdateCalendar((next ? _date.add : _date.remove)(1, unit, calendar));
+  }, [calendar]);
+  const onOpen = _react.default.useCallback((valueUpdate = 'month') => {
+    const valueNew = open === valueUpdate ? null : valueUpdate;
+    setOpen(valueNew);
+
+    // Scroll to the value
+    if (valueNew) setTimeout(() => {
+      var _refs$valueNew;
+      const list = (_refs$valueNew = refs[valueNew]) === null || _refs$valueNew === void 0 ? void 0 : _refs$valueNew.current;
+      if (list) {
+        const valueData = valueNew === 'month' ? calendar.month - 1 : calendar.year;
+        (0, _utils.Try)(() => {
+          const element = list.querySelector(`[data-value="${valueData}"]`);
+          if (element) list.scrollTo({
+            top: (0, _utils.clamp)(element.offsetTop - element.parentElement.offsetTop + (menu === 'month' ? -104 : 51), 0),
+            behavior: 'smooth'
+          });
+        });
+      }
     });
-    const [calendar, setCalendar] = react_1.default.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new date_1.OnesyDate());
-    const [carousel, setCarousel] = react_1.default.useState();
-    const [open, setOpen] = react_1.default.useState();
-    // Value
-    react_1.default.useEffect(() => {
-        if (value_ !== undefined && value_ !== value)
-            setValue((((0, utils_1.is)('array', value_) ? value_ : [value_]).filter(Boolean)));
-    }, [value_]);
-    // Calendar
-    react_1.default.useEffect(() => {
-        if (calendar_ !== undefined && calendar_ !== calendar)
-            setCalendar(calendar_);
-    }, [calendar_]);
-    const onUpdate = react_1.default.useCallback((valueNew) => {
-        // Inner update
-        if (!props.hasOwnProperty('value'))
-            setValue(valueNew);
-        if ((0, utils_1.is)('function', onChange))
-            onChange(!range ? valueNew[0] : valueNew);
-    }, [range, onChange]);
-    const onUpdateCalendar = react_1.default.useCallback((valueNew) => {
-        // Inner update
-        if (!props.hasOwnProperty('calendar'))
-            setCalendar(valueNew);
-        if ((0, utils_1.is)('function', onChangeCalendar))
-            onChangeCalendar(valueNew);
-    }, [onChangeCalendar]);
-    const onUpdateCalendarOption = react_1.default.useCallback((valueNew) => {
-        setOpen(null);
-        onUpdateCalendar(valueNew);
-    }, []);
-    const onCalendarMonthChange = react_1.default.useCallback((valueNew_) => {
-        const valueNew = (0, utils_1.is)('array', valueNew_) ? valueNew_ : [valueNew_];
-        if (valueNew !== value)
-            onUpdate(valueNew);
-    }, [value]);
-    const onCalendarMonthChangeCalendar = react_1.default.useCallback((valueNew) => {
-        onUpdateCalendar(valueNew);
-    }, [calendar]);
-    const valid = react_1.default.useCallback((...args) => {
-        if ((0, utils_1.is)('function', valid_))
-            return valid_(...args);
-        return true;
-    }, [valid_]);
-    const move = react_1.default.useCallback((next = true, unit = 'month') => {
-        if (refs.inProgressTransition.current)
-            return;
-        onUpdateCalendar((next ? date_1.add : date_1.remove)(1, unit, calendar));
-    }, [calendar]);
-    const onOpen = react_1.default.useCallback((valueUpdate = 'month') => {
-        const valueNew = open === valueUpdate ? null : valueUpdate;
-        setOpen(valueNew);
-        // Scroll to the value
-        if (valueNew)
-            setTimeout(() => {
-                var _a;
-                const list = (_a = refs[valueNew]) === null || _a === void 0 ? void 0 : _a.current;
-                if (list) {
-                    const valueData = valueNew === 'month' ? calendar.month - 1 : calendar.year;
-                    (0, utils_1.Try)(() => {
-                        const element = list.querySelector(`[data-value="${valueData}"]`);
-                        if (element)
-                            list.scrollTo({
-                                top: (0, utils_1.clamp)((element.offsetTop - element.parentElement.offsetTop) + (menu === 'month' ? -104 : 51), 0),
-                                behavior: 'smooth'
-                            });
-                    });
-                }
-            });
-    }, [open, menu, calendar]);
-    const getMonths = (0, utils_1.is)('function', getMonths_) ? getMonths_ : react_1.default.useCallback(() => {
-        const valueCalendar = (0, date_1.set)(14, 'day', calendar);
-        const result = Array.from({ length: 12 }).map((item, index) => ({ value: (0, date_1.set)(index, 'month', valueCalendar) }));
-        return result;
-    }, [calendar]);
-    const getYears = (0, utils_1.is)('function', getYears_) ? getYears_ : react_1.default.useCallback(() => {
-        const minYear = 1970;
-        const length = 130;
-        return Array.from({ length }).map((item, index) => ({ value: (0, date_1.set)(minYear + index, 'year', calendar) }));
-    }, []);
-    const onCarouselInit = react_1.default.useCallback(() => {
-        // Scroll to the value
-        setTimeout(() => {
-            (0, utils_1.Try)(() => {
-                var _a;
-                const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-                let item = rootDocument.body.querySelector('[data-month-from]');
-                if (item) {
-                    item = item.parentElement.parentElement;
-                    setCarousel({ y: item.offsetTop });
-                }
-            });
-        }, 140);
-    }, []);
-    // Prevent multiple moves of the calendar
-    // before the previous transition is done
-    const onTransition = react_1.default.useCallback((element, status) => {
-        refs.inProgressTransition.current = !['entered', 'exited', 'removed'].includes(status);
-    }, []);
-    const calendarMonthProps = Object.assign({ renderDay,
-        renderDayName,
-        disabled }, CalendarMonthProps);
-    const main = () => {
-        var _a;
-        switch (version) {
-            case 'year':
-                return ((0, jsx_runtime_1.jsx)(Carousel, { color: 'default', id: value[0].milliseconds + (((_a = value[1]) === null || _a === void 0 ? void 0 : _a.milliseconds) || 0) + year, value: carousel, arrows: false, progress: false, orientation: 'vertical', moveBeyondEdge: false, itemSize: 'auto', gap: 0, free: true, onInit: onCarouselInit, items: Array.from({ length: 12 }).map((item, index) => {
-                        const calendarOnesyDate = (0, date_1.set)(index, 'month', calendar);
-                        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'column', className: (0, style_react_1.classNames)([
-                                classes.carousel_item
-                            ]) }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3', className: (0, style_react_1.classNames)([
-                                        classes.carousel_item_label
-                                    ]) }, { children: [(0, date_1.format)(calendarOnesyDate, 'MMMM', { l }), " ", (0, date_1.format)(calendarOnesyDate, 'YYYY', { l })] })), (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ color: 'default', value: value, calendar: calendarOnesyDate, valid: valid, now: now, size: size, range: range, offset: index, min: min, max: max, validate: validate, outside: false, noTransition: true }, calendarMonthProps, { onChange: onCalendarMonthChange, onChangeCalendar: onCalendarMonthChangeCalendar, TransitionProps: {
-                                        onTransition
-                                    }, className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('Calendar', theme) && [
-                                            'onesy-Calendar-calendar-days'
-                                        ],
-                                        calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className,
-                                        classes.calendar
-                                    ]) }))] }), index));
-                    }), ItemWrapperProps: {
-                        style: {
-                            width: '100%'
-                        }
-                    }, className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('Calendar', theme) && [
-                            'onesy-Calendar-carousel'
-                        ],
-                        classes.carousel
-                    ]) }));
-            default:
-                return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', align: 'center', style: {
-                        width: '100%'
-                    } }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Calendar', theme) && [
-                                    'onesy-Calendar-calendars'
-                                ],
-                                classes.calendars
-                            ]) }, { children: Array.from({ length: calendars }).map((item, index) => {
-                                const calendarOnesyDate = (0, date_1.add)(index, 'month', calendar);
-                                return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'column', style: {
-                                        width: '100%'
-                                    } }, { children: [calendars > 1 && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3', style: {
-                                                paddingInlineStart: '16px'
-                                            } }, { children: (0, date_1.format)(calendarOnesyDate, 'MMMM', { l }) }))), (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ color: 'default', value: value, calendar: calendarOnesyDate, valid: valid, now: now, size: size, range: range, offset: index, min: min, max: max, validate: validate }, calendarMonthProps, { onChange: onCalendarMonthChange, onChangeCalendar: onCalendarMonthChangeCalendar, TransitionProps: {
-                                                onTransition
-                                            }, className: (0, style_react_1.classNames)([
-                                                (0, utils_2.staticClassName)('Calendar', theme) && [
-                                                    'onesy-Calendar-calendar-days'
-                                                ],
-                                                calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className,
-                                                classes.calendar
-                                            ]) }))] }), index));
-                            }) })), belowCalendars] })));
+  }, [open, menu, calendar]);
+  const getMonths = (0, _utils.is)('function', getMonths_) ? getMonths_ : _react.default.useCallback(() => {
+    const valueCalendar = (0, _date.set)(14, 'day', calendar);
+    const result = Array.from({
+      length: 12
+    }).map((item, index) => ({
+      value: (0, _date.set)(index, 'month', valueCalendar)
+    }));
+    return result;
+  }, [calendar]);
+  const getYears = (0, _utils.is)('function', getYears_) ? getYears_ : _react.default.useCallback(() => {
+    const minYear = 1970;
+    const length = 130;
+    return Array.from({
+      length
+    }).map((item, index) => ({
+      value: (0, _date.set)(minYear + index, 'year', calendar)
+    }));
+  }, []);
+  const onCarouselInit = _react.default.useCallback(() => {
+    // Scroll to the value
+    setTimeout(() => {
+      (0, _utils.Try)(() => {
+        var _refs$root$current;
+        const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+        let item = rootDocument.body.querySelector('[data-month-from]');
+        if (item) {
+          item = item.parentElement.parentElement;
+          setCarousel({
+            y: item.offsetTop
+          });
         }
-    };
-    const month = (0, date_1.format)(calendar, 'MMM');
-    const year = (0, date_1.format)(calendar, 'YYYY');
-    const optionButtonProps = Object.assign({ color: 'inherit', version: 'text' }, OptionButtonProps);
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
+      });
+    }, 140);
+  }, []);
+
+  // Prevent multiple moves of the calendar
+  // before the previous transition is done
+  const onTransition = _react.default.useCallback((element, status) => {
+    refs.inProgressTransition.current = !['entered', 'exited', 'removed'].includes(status);
+  }, []);
+  const calendarMonthProps = _objectSpread({
+    renderDay,
+    renderDayName,
+    disabled
+  }, CalendarMonthProps);
+  const main = () => {
+    var _value$;
+    switch (version) {
+      case 'year':
+        return /*#__PURE__*/_react.default.createElement(Carousel, {
+          color: "default",
+          id: value[0].milliseconds + (((_value$ = value[1]) === null || _value$ === void 0 ? void 0 : _value$.milliseconds) || 0) + year,
+          value: carousel,
+          arrows: false,
+          progress: false,
+          orientation: "vertical",
+          moveBeyondEdge: false,
+          itemSize: "auto",
+          gap: 0,
+          free: true,
+          onInit: onCarouselInit,
+          items: Array.from({
+            length: 12
+          }).map((item, index) => {
+            const calendarOnesyDate = (0, _date.set)(index, 'month', calendar);
+            return /*#__PURE__*/_react.default.createElement(Line, {
+              key: index,
+              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, 'MMMM', {
+              l
+            }), " ", (0, _date.format)(calendarOnesyDate, 'YYYY', {
+              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,
+              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])
+            })));
+          }),
+          ItemWrapperProps: {
+            style: {
+              width: '100%'
+            }
+          },
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-carousel'], classes.carousel])
+        });
+      default:
+        return /*#__PURE__*/_react.default.createElement(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, index) => {
+          const calendarOnesyDate = (0, _date.add)(index, 'month', calendar);
+          return /*#__PURE__*/_react.default.createElement(Line, {
+            key: index,
+            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'
             }
-            refs.root.current = item;
-        }, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Calendar', theme) && [
-                'onesy-Calendar-root',
-                `onesy-Calendar-version-${version}`,
-                `onesy-Calendar-size-${size}`
-            ],
-            className,
-            classes.root,
-            classes[`size_${size}`],
-            range && classes.range
-        ]) }, other, { children: [start, (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', justify: 'space-between', className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Calendar', theme) && [
-                        'onesy-Calendar-header'
-                    ],
-                    classes.header
-                ]) }, { children: menu === 'month-year' ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false), size: size, "aria-label": l('Previous month'), disabled: open || (+year <= 1970 && month === 'Jan') }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', onClick: () => onOpen(), fontSize: utils_2.iconFontSize, size: size, end: ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open !== 'year' }, { children: (0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
-                                                (0, utils_2.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, style_react_1.classNames)([
-                                        (0, utils_2.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) })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(), size: size, "aria-label": l('Next month'), disabled: open || (+year === 2099 && month === 'Dec') }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false, 'year'), size: size, "aria-label": l('Previous year'), disabled: open || +year <= 1970 }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', onClick: () => onOpen('year'), fontSize: utils_2.iconFontSize, size: size, end: ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open !== 'month' }, { children: (0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
-                                                (0, utils_2.staticClassName)('Calendar', theme) && [
-                                                    'onesy-Calendar-arrow'
-                                                ],
-                                                classes.arrow,
-                                                open === 'year' && classes.arrow_open
-                                            ]) }) }))), "aria-label": `${l('Select year')}, ${l('current')} ${year}` }, optionButtonProps, { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('Calendar', theme) && [
-                                            'onesy-Calendar-option'
-                                        ],
-                                        optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className,
-                                        classes.option,
-                                        open === 'month' && classes.option_secondary
-                                    ]) }, { children: year })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(true, 'year'), size: size, "aria-label": l('Next year'), disabled: open || +year === 2099 }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] }))] }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button, Object.assign({ tonal: tonal, color: 'inherit', size: size, version: 'text', onClick: () => onOpen('year'), fontSize: utils_2.iconFontSize, end: ((0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('Calendar', theme) && [
-                                        'onesy-Calendar-arrow'
-                                    ],
-                                    classes.arrow,
-                                    open === 'year' && classes.arrow_open
-                                ]) })) }, optionButtonProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Calendar', theme) && [
-                                    'onesy-Calendar-option'
-                                ],
-                                optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className,
-                                classes.option
-                            ]) }, { children: [(0, date_1.format)(calendar, 'MMMM', { l }), " ", (0, date_1.format)(calendar, 'YYYY', { l })] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ 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: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ 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: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] }))] }) })), !open && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: main() }))), open && ((0, jsx_runtime_1.jsx)(Divider, { tonal: false, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Calendar', theme) && [
-                        'onesy-Calendar-divider'
-                    ],
-                    classes.divider
-                ]) })), open === 'month' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsx)(List, Object.assign({ ref: refs.month, color: 'default', size: 'large', menu: true, className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('Calendar', theme) && [
-                            'onesy-Calendar-list'
-                        ],
-                        classes.list
-                    ]) }, { children: getMonths(value, calendar, props).map((item, index) => {
-                        const onesyDate = item.value;
-                        const selected = calendar.month === onesyDate.month;
-                        return ((0, jsx_runtime_1.jsx)(ListItem, { onClick: () => onUpdateCalendarOption(onesyDate), primary: (0, date_1.format)(onesyDate, 'MMMM', { l }), inset: !selected, startAlign: 'center', size: size, start: selected ? ((0, jsx_runtime_1.jsx)(Buttons_1.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, className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Calendar', theme) && [
-                                    'onesy-Calendar-list-item'
-                                ],
-                                classes.listItem
-                            ]) }, index));
-                    }) })) }))), open === 'year' && ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ color: 'default' }, { children: ({ palette }) => (menu === 'month-year' ?
-                    (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsx)(List, Object.assign({ ref: refs.year, color: 'default', size: size, menu: true, className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Calendar', theme) && [
-                                    'onesy-Calendar-list'
-                                ],
-                                classes.list
-                            ]) }, { children: getYears(value, calendar, props).map((item, index) => {
-                                const onesyDate = item.value;
-                                const yearValue = (0, date_1.format)(onesyDate, 'YYYY');
-                                const selected = calendar.year === onesyDate.year;
-                                return ((0, jsx_runtime_1.jsx)(ListItem, { onClick: () => onUpdateCalendarOption(onesyDate), primary: yearValue, inset: !selected, startAlign: 'center', size: size, start: selected ? ((0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { in: true, add: true, simple: true, size: size })) : undefined, selected: selected, disabled: (!valid(onesyDate, 'year')), button: true, PrimaryProps: {
-                                        version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
-                                    }, "data-value": yearValue, className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('Calendar', theme) && [
-                                            'onesy-Calendar-list-item'
-                                        ],
-                                        classes.listItem
-                                    ]) }, index));
-                            }) })) })) :
-                    (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: refs.year, direction: 'row', wrap: 'wrap', justify: 'space-evenly', className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Calendar', theme) && [
-                                    'onesy-Calendar-list-version-year'
-                                ],
-                                classes.list_version_year
-                            ]) }, { children: getYears(value, calendar, props).map((item, index) => {
-                                const onesyDate = item.value;
-                                const yearValue = (0, date_1.format)(onesyDate, 'YYYY');
-                                const selected = calendar.year === onesyDate.year;
-                                return ((0, jsx_runtime_1.jsx)(PaginationItem, Object.assign({ tonal: tonal, color: 'inherit', size: size, InteractionProps: {
-                                        background: false
-                                    }, TypeProps: {
-                                        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-                                        tone: !selected ? 'primary' : undefined
-                                    }, onClick: () => onUpdateCalendarOption(onesyDate), "data-value": yearValue, disabled: (!valid(onesyDate, 'year')) }, PaginationItemsProps, { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('Calendar', theme) && [
-                                            'onesy-Calendar-day-version-year'
-                                        ],
-                                        PaginationItemsProps === null || PaginationItemsProps === void 0 ? void 0 : PaginationItemsProps.className,
-                                        classes.day_version_year
-                                    ]), style: Object.assign(Object.assign({}, (selected ? {
-                                        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 }), index));
-                            }) })) }))) }))), end] })));
+          }, (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,
+            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);
+    }
+  };
+  const month = (0, _date.format)(calendar, 'MMM');
+  const year = (0, _date.format)(calendar, 'YYYY');
+  const optionButtonProps = _objectSpread({
+    color: 'inherit',
+    version: 'text'
+  }, OptionButtonProps);
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    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, index) => {
+    const onesyDate = item.value;
+    const selected = calendar.month === onesyDate.month;
+    return /*#__PURE__*/_react.default.createElement(ListItem, {
+      key: index,
+      onClick: () => onUpdateCalendarOption(onesyDate),
+      primary: (0, _date.format)(onesyDate, 'MMMM', {
+        l
+      }),
+      inset: !selected,
+      startAlign: "center",
+      size: size,
+      start: selected ? /*#__PURE__*/_react.default.createElement(_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,
+      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, index) => {
+    const onesyDate = item.value;
+    const yearValue = (0, _date.format)(onesyDate, 'YYYY');
+    const selected = calendar.year === onesyDate.year;
+    return /*#__PURE__*/_react.default.createElement(ListItem, {
+      key: index,
+      onClick: () => onUpdateCalendarOption(onesyDate),
+      primary: yearValue,
+      inset: !selected,
+      startAlign: "center",
+      size: size,
+      start: selected ? /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+        in: true,
+        add: true,
+        simple: true,
+        size: size
+      }) : undefined,
+      selected: selected,
+      disabled: !valid(onesyDate, '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, index) => {
+    const onesyDate = item.value;
+    const yearValue = (0, _date.format)(onesyDate, 'YYYY');
+    const selected = calendar.year === onesyDate.year;
+    return /*#__PURE__*/_react.default.createElement(PaginationItem, (0, _extends2.default)({
+      key: index,
+      tonal: tonal,
+      color: "inherit",
+      size: size,
+      InteractionProps: {
+        background: false
+      },
+      TypeProps: {
+        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+        tone: !selected ? 'primary' : undefined
+      },
+      onClick: () => onUpdateCalendarOption(onesyDate),
+      "data-value": yearValue,
+      disabled: !valid(onesyDate, '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 ? {
+        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);
+  })))), end);
 });
 Calendar.displayName = 'onesy-Calendar';
-exports.default = Calendar;
+var _default = exports.default = Calendar;