@onesy/ui-react 1.0.130 → 1.0.131

package/CalendarAvailability/CalendarAvailability.js

@@ -1,398 +1,719 @@
 "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 IconMaterialEditW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialEditW100"));
-const IconMaterialKeyboardArrowDownW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialKeyboardArrowDownW100"));
-const IconMaterialArrowForwardIosW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowForwardIosW100"));
-const IconMaterialArrowBackIosNewW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowBackIosNewW100"));
-const IconMaterialDeleteW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialDeleteW100"));
-const CalendarWeek_1 = __importDefault(require("../CalendarWeek"));
-const Select_1 = __importDefault(require("../Select"));
-const Button_1 = __importDefault(require("../Button"));
-const Line_1 = __importDefault(require("../Line"));
-const Modal_1 = __importDefault(require("../Modal"));
-const ModalHeader_1 = __importDefault(require("../ModalHeader"));
-const ModalMain_1 = __importDefault(require("../ModalMain"));
-const Type_1 = __importDefault(require("../Type"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Label_1 = __importDefault(require("../Label"));
-const Slide_1 = __importDefault(require("../Slide"));
-const Switch_1 = __importDefault(require("../Switch"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        padding: '16px',
-        paddingBottom: '24px',
-        color: theme.methods.palette.color.value('primary', 10),
-        background: theme.palette.background.default.primary,
-        '& .onesy-Label-text': {
-            whiteSpace: 'nowrap'
-        }
-    },
-    calendar: {
-        padding: '12px 8px',
-        background: theme.palette.background.default.primary
-    },
-    aside: {
-        width: 'auto',
-        maxWidth: '100%'
-    },
-    weekDay: {
-        width: '47px',
-        height: '47px',
-        borderRadius: '50%'
-    },
-    today: {
-        background: theme.palette.color.primary[40],
-        color: '#fff'
-    },
-    palettePreview: {
-        width: '17px',
-        height: '17px',
-        boxShadow: theme.palette.light ? '0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 2px 1px -1px rgba(0, 0, 0, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.11)' : '0px 1px 1px 0px rgba(255, 255, 255, 0.21), 0px 2px 1px -1px rgba(255, 255, 255, 0.12), 0px 1px 3px 0px rgba(255, 255, 255, 0.40)',
-        borderRadius: '50%',
-        cursor: 'default',
-        flex: '0 0 auto',
-        transition: theme.methods.transitions.make('transform'),
-        '& > *': {
-            width: '100% !important',
-            height: 'calc(100% + 12px) !important'
-        },
-        '&:active': {
-            transform: 'scale(0.94)'
-        }
-    },
-    dayWeekSimple: {
-        maxWidth: 184
-    },
-    simpleTimes: {
-        '&.onesy-Line-direction-row': {
-            '& > *': {
-                flex: '1 1 auto'
-            }
-        },
-        '&.onesy-Line-direction-column': {
-            '& > *': {
-                width: '100%'
-            }
-        }
+
+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 _IconMaterialEditW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialEditW100"));
+var _IconMaterialKeyboardArrowDownW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialKeyboardArrowDownW100"));
+var _IconMaterialArrowForwardIosW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowForwardIosW100"));
+var _IconMaterialArrowBackIosNewW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowBackIosNewW100"));
+var _IconMaterialDeleteW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDeleteW100"));
+var _CalendarWeek = _interopRequireDefault(require("../CalendarWeek"));
+var _Select = _interopRequireDefault(require("../Select"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Modal = _interopRequireDefault(require("../Modal"));
+var _ModalHeader = _interopRequireDefault(require("../ModalHeader"));
+var _ModalMain = _interopRequireDefault(require("../ModalMain"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Label = _interopRequireDefault(require("../Label"));
+var _Slide = _interopRequireDefault(require("../Slide"));
+var _Switch = _interopRequireDefault(require("../Switch"));
+var _utils2 = require("../utils");
+const _excluded = ["name", "date", "dateDefault", "times", "events", "meta", "views", "onUpdate", "onRemove", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "startLeftModal", "endLeftModal", "startRightModal", "endRightModal", "Component", "IconEdit", "IconPrevious", "IconNext", "IconRemove", "IconClose", "WeekProps", "DayProps", "IconProps", "IconButtonProps", "className", "children"];
+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: {
+    padding: '16px',
+    paddingBottom: '24px',
+    color: theme.methods.palette.color.value('primary', 10),
+    background: theme.palette.background.default.primary,
+    '& .onesy-Label-text': {
+      whiteSpace: 'nowrap'
+    }
+  },
+  calendar: {
+    padding: '12px 8px',
+    background: theme.palette.background.default.primary
+  },
+  aside: {
+    width: 'auto',
+    maxWidth: '100%'
+  },
+  weekDay: {
+    width: '47px',
+    height: '47px',
+    borderRadius: '50%'
+  },
+  today: {
+    background: theme.palette.color.primary[40],
+    color: '#fff'
+  },
+  palettePreview: {
+    width: '17px',
+    height: '17px',
+    boxShadow: theme.palette.light ? '0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 2px 1px -1px rgba(0, 0, 0, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.11)' : '0px 1px 1px 0px rgba(255, 255, 255, 0.21), 0px 2px 1px -1px rgba(255, 255, 255, 0.12), 0px 1px 3px 0px rgba(255, 255, 255, 0.40)',
+    borderRadius: '50%',
+    cursor: 'default',
+    flex: '0 0 auto',
+    transition: theme.methods.transitions.make('transform'),
+    '& > *': {
+      width: '100% !important',
+      height: 'calc(100% + 12px) !important'
     },
-    legend: {
-        padding: '2px',
-        alignSelf: 'center',
-        maxWidth: '100%',
-        overflow: 'auto hidden'
+    '&:active': {
+      transform: 'scale(0.94)'
+    }
+  },
+  dayWeekSimple: {
+    maxWidth: 184
+  },
+  simpleTimes: {
+    '&.onesy-Line-direction-row': {
+      '& > *': {
+        flex: '1 1 auto'
+      }
     },
-    itemLegend: {
-        cursor: 'pointer',
-        userSelect: 'none',
-        opacity: 0.5,
-        transition: theme.methods.transitions.make(['opacity', 'transform']),
-        '&:active': {
-            transform: 'scale(0.94)'
+    '&.onesy-Line-direction-column': {
+      '& > *': {
+        width: '100%'
+      }
+    }
+  },
+  legend: {
+    padding: '2px',
+    alignSelf: 'center',
+    maxWidth: '100%',
+    overflow: 'auto hidden'
+  },
+  itemLegend: {
+    cursor: 'pointer',
+    userSelect: 'none',
+    opacity: 0.5,
+    transition: theme.methods.transitions.make(['opacity', 'transform']),
+    '&:active': {
+      transform: 'scale(0.94)'
+    }
+  },
+  itemLegendActive: {
+    opacity: 1
+  },
+  overflowX: {
+    padding: '2px 0',
+    overflow: 'auto hidden'
+  }
+}), {
+  name: 'onesy-CalendarAvailability'
+});
+const CalendarAvailability = /*#__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.onesyCalendarAvailability) === 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 Type = _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.Type) || _Type.default;
+  }, [theme]);
+  const Tooltip = _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.Tooltip) || _Tooltip.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 Label = _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.Label) || _Label.default;
+  }, [theme]);
+  const Switch = _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.Switch) || _Switch.default;
+  }, [theme]);
+  const Modal = _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.Modal) || _Modal.default;
+  }, [theme]);
+  const ModalHeader = _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.ModalHeader) || _ModalHeader.default;
+  }, [theme]);
+  const ModalMain = _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.ModalMain) || _ModalMain.default;
+  }, [theme]);
+  const Slide = _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.Slide) || _Slide.default;
+  }, [theme]);
+  const Button = _react.default.useMemo(() => {
+    var _theme$elements11;
+    return (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.Button) || _Button.default;
+  }, [theme]);
+  const Select = _react.default.useMemo(() => {
+    var _theme$elements12;
+    return (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Select) || _Select.default;
+  }, [theme]);
+  const CalendarWeek = _react.default.useMemo(() => {
+    var _theme$elements13;
+    return (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.CalendarWeek) || _CalendarWeek.default;
+  }, [theme]);
+  const {
+      name,
+      date: date_,
+      dateDefault,
+      times: timesProps,
+      events,
+      meta,
+      views: viewsProps = [{
+        name: l('Week'),
+        value: 'week'
+      }, {
+        name: l('Day'),
+        value: 'day'
+      }, {
+        name: l('Simple'),
+        value: 'simple'
+      }],
+      onUpdate,
+      onRemove,
+      onChangeDate: onChangeDateProps,
+      startHeader,
+      endHeader,
+      startLeft,
+      endLeft,
+      startRight,
+      endRight,
+      startLeftModal,
+      endLeftModal,
+      startRightModal,
+      endRightModal,
+      Component = Line,
+      IconEdit = _IconMaterialEditW.default,
+      IconPrevious = _IconMaterialArrowBackIosNewW.default,
+      IconNext = _IconMaterialArrowForwardIosW.default,
+      IconRemove = _IconMaterialDeleteW.default,
+      IconClose = _IconMaterialKeyboardArrowDownW.default,
+      WeekProps,
+      DayProps,
+      IconProps,
+      IconButtonProps,
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [now, setNow] = _react.default.useState(new _date.OnesyDate());
+  const [date, setDate] = _react.default.useState(dateDefault || date_ || new _date.OnesyDate());
+  const [view, setView] = _react.default.useState('week');
+  const [displayTime, setDisplayTime] = _react.default.useState(true);
+  const [modal, setModal] = _react.default.useState();
+  const [statuses, setStatuses] = _react.default.useState({});
+  const refs = {
+    date: _react.default.useRef(date),
+    displayTime: _react.default.useRef(displayTime),
+    interval: _react.default.useRef(undefined),
+    calendar: _react.default.useRef(undefined),
+    days: _react.default.useRef({}),
+    overlaping: _react.default.useRef({}),
+    statuses: _react.default.useRef(statuses)
+  };
+  refs.date.current = date;
+  refs.displayTime.current = displayTime;
+  refs.statuses.current = statuses;
+  const times = _react.default.useMemo(() => {
+    if (events) {
+      return [{
+        dates: {
+          active: true,
+          values: ((0, _utils.is)('array', events) ? events : [events]).filter(Boolean)
         }
-    },
-    itemLegendActive: {
-        opacity: 1
-    },
-    overflowX: {
-        padding: '2px 0',
-        overflow: 'auto hidden'
+      }];
     }
-}), { name: 'onesy-CalendarAvailability' });
-const CalendarAvailability = 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.onesyCalendarAvailability) === 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 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 Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_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 Label = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Label) || Label_1.default; }, [theme]);
-    const Switch = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Switch) || Switch_1.default; }, [theme]);
-    const Modal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Modal) || Modal_1.default; }, [theme]);
-    const ModalHeader = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalHeader) || ModalHeader_1.default; }, [theme]);
-    const ModalMain = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalMain) || ModalMain_1.default; }, [theme]);
-    const Slide = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slide) || Slide_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 Select = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Select) || Select_1.default; }, [theme]);
-    const CalendarWeek = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.CalendarWeek) || CalendarWeek_1.default; }, [theme]);
-    const { name, date: date_, dateDefault, times: timesProps, events, meta, views: viewsProps = [
-        { name: l('Week'), value: 'week' },
-        { name: l('Day'), value: 'day' },
-        { name: l('Simple'), value: 'simple' }
-    ], onUpdate, onRemove, onChangeDate: onChangeDateProps, startHeader, endHeader, startLeft, endLeft, startRight, endRight, startLeftModal, endLeftModal, startRightModal, endRightModal, Component = Line, IconEdit = IconMaterialEditW100_1.default, IconPrevious = IconMaterialArrowBackIosNewW100_1.default, IconNext = IconMaterialArrowForwardIosW100_1.default, IconRemove = IconMaterialDeleteW100_1.default, IconClose = IconMaterialKeyboardArrowDownW100_1.default, WeekProps, DayProps, IconProps, IconButtonProps, className, children } = props, other = __rest(props, ["name", "date", "dateDefault", "times", "events", "meta", "views", "onUpdate", "onRemove", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "startLeftModal", "endLeftModal", "startRightModal", "endRightModal", "Component", "IconEdit", "IconPrevious", "IconNext", "IconRemove", "IconClose", "WeekProps", "DayProps", "IconProps", "IconButtonProps", "className", "children"]);
-    const { classes } = useStyle();
-    const [now, setNow] = react_1.default.useState(new date_1.OnesyDate());
-    const [date, setDate] = react_1.default.useState(dateDefault || date_ || new date_1.OnesyDate());
-    const [view, setView] = react_1.default.useState('week');
-    const [displayTime, setDisplayTime] = react_1.default.useState(true);
-    const [modal, setModal] = react_1.default.useState();
-    const [statuses, setStatuses] = react_1.default.useState({});
-    const refs = {
-        date: react_1.default.useRef(date),
-        displayTime: react_1.default.useRef(displayTime),
-        interval: react_1.default.useRef(undefined),
-        calendar: react_1.default.useRef(undefined),
-        days: react_1.default.useRef({}),
-        overlaping: react_1.default.useRef({}),
-        statuses: react_1.default.useRef(statuses)
+    return ((0, _utils.is)('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
+  }, [events, timesProps]);
+  const onStatusToggle = _react.default.useCallback((value = 'working') => {
+    setStatuses(previous => _objectSpread(_objectSpread({}, previous), {}, {
+      [value]: previous[value] === undefined ? false : !previous[value]
+    }));
+  }, []);
+  const rangeShade = theme.palette.light ? 70 : 40;
+  _react.default.useEffect(() => {
+    // 1 minute
+    refs.interval.current = setInterval(() => {
+      setNow(new _date.OnesyDate());
+    }, 60 * 1e3);
+    return () => {
+      clearInterval(refs.interval.current);
     };
-    refs.date.current = date;
-    refs.displayTime.current = displayTime;
-    refs.statuses.current = statuses;
-    const times = react_1.default.useMemo(() => {
-        if (events) {
-            return [
-                {
-                    dates: {
-                        active: true,
-                        values: ((0, utils_1.is)('array', events) ? events : [events]).filter(Boolean)
-                    }
-                }
-            ];
+  }, []);
+
+  // Date
+  _react.default.useEffect(() => {
+    if (date_ !== undefined && date_ !== date) setDate(date_);
+  }, [date_]);
+  const onOpen = _react.default.useCallback(item => {
+    setModal(_objectSpread(_objectSpread({}, item), {}, {
+      open: true
+    }));
+  }, []);
+  const onClose = _react.default.useCallback(() => {
+    setModal(item => _objectSpread(_objectSpread({}, item), {}, {
+      open: false
+    }));
+  }, []);
+  const onChangeDisplayTime = _react.default.useCallback(valueNew => {
+    setDisplayTime(valueNew);
+  }, []);
+  const onChangeView = _react.default.useCallback(valueNew => {
+    setView(valueNew);
+  }, []);
+  const optionsStatus = _react.default.useMemo(() => {
+    return [{
+      name: l('Working'),
+      value: 'working'
+    }, {
+      name: l('Not working'),
+      value: 'not-working'
+    }, {
+      name: l('On a break'),
+      value: 'break'
+    }, {
+      name: l('Scheduled'),
+      value: 'pending'
+    }, {
+      name: l('Rescheduled'),
+      value: 'rescheduled'
+    }, {
+      name: l('Cancelled'),
+      value: 'canceled'
+    }, {
+      name: l('Other'),
+      value: 'other'
+    }];
+  }, []);
+  const onToday = _react.default.useCallback(() => {
+    const valueNew = new _date.OnesyDate();
+    setDate(valueNew);
+    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew);
+  }, [onChangeDateProps]);
+  const onPrevious = _react.default.useCallback(() => {
+    let valueNew = new _date.OnesyDate();
+    setDate(previous => {
+      valueNew = (0, _date.remove)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous);
+      return valueNew;
+    });
+    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew);
+  }, [view, onChangeDateProps]);
+  const onNext = _react.default.useCallback(() => {
+    let valueNew = new _date.OnesyDate();
+    setDate(previous => {
+      valueNew = (0, _date.add)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous);
+      return valueNew;
+    });
+    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew);
+  }, [view, onChangeDateProps]);
+  const getDates = _react.default.useCallback(available => {
+    var _available$dates;
+    const values = ((_available$dates = available.dates) === null || _available$dates === void 0 ? void 0 : _available$dates.values) || [];
+    return values.map(item => {
+      if (item.entire) {
+        if (item.from) {
+          let from = new _date.OnesyDate(item.from);
+          let to;
+          if (['day', 'week', 'month', 'year'].includes(item.entire)) from = (0, _date.startOf)(from, 'day');
+          if (item.entire === 'minute') from = (0, _date.startOf)(from, 'minute');
+          if (item.entire === 'hour') from = (0, _date.startOf)(from, 'hour');
+          to = (0, _date.endOf)(from, item.entire);
+          item.from = from.milliseconds;
+          item.to = to.milliseconds;
         }
-        return ((0, utils_1.is)('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
-    }, [events, timesProps]);
-    const onStatusToggle = react_1.default.useCallback((value = 'working') => {
-        setStatuses(previous => (Object.assign(Object.assign({}, previous), { [value]: previous[value] === undefined ? false : !previous[value] })));
-    }, []);
-    const rangeShade = theme.palette.light ? 70 : 40;
-    react_1.default.useEffect(() => {
-        // 1 minute
-        refs.interval.current = setInterval(() => {
-            setNow(new date_1.OnesyDate());
-        }, 60 * 1e3);
-        return () => {
-            clearInterval(refs.interval.current);
-        };
-    }, []);
-    // Date
-    react_1.default.useEffect(() => {
-        if (date_ !== undefined && date_ !== date)
-            setDate(date_);
-    }, [date_]);
-    const onOpen = react_1.default.useCallback((item) => {
-        setModal(Object.assign(Object.assign({}, item), { open: true }));
-    }, []);
-    const onClose = react_1.default.useCallback(() => {
-        setModal((item) => (Object.assign(Object.assign({}, item), { open: false })));
-    }, []);
-    const onChangeDisplayTime = react_1.default.useCallback((valueNew) => {
-        setDisplayTime(valueNew);
-    }, []);
-    const onChangeView = react_1.default.useCallback((valueNew) => {
-        setView(valueNew);
-    }, []);
-    const optionsStatus = react_1.default.useMemo(() => {
-        return [
-            { name: l('Working'), value: 'working' },
-            { name: l('Not working'), value: 'not-working' },
-            { name: l('On a break'), value: 'break' },
-            { name: l('Scheduled'), value: 'pending' },
-            { name: l('Rescheduled'), value: 'rescheduled' },
-            { name: l('Cancelled'), value: 'canceled' },
-            { name: l('Other'), value: 'other' }
-        ];
-    }, []);
-    const onToday = react_1.default.useCallback(() => {
-        const valueNew = new date_1.OnesyDate();
-        setDate(valueNew);
-        if ((0, utils_1.is)('function', onChangeDateProps))
-            onChangeDateProps(valueNew);
-    }, [onChangeDateProps]);
-    const onPrevious = react_1.default.useCallback(() => {
-        let valueNew = new date_1.OnesyDate();
-        setDate(previous => {
-            valueNew = (0, date_1.remove)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous);
-            return valueNew;
-        });
-        if ((0, utils_1.is)('function', onChangeDateProps))
-            onChangeDateProps(valueNew);
-    }, [view, onChangeDateProps]);
-    const onNext = react_1.default.useCallback(() => {
-        let valueNew = new date_1.OnesyDate();
-        setDate(previous => {
-            valueNew = (0, date_1.add)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous);
-            return valueNew;
-        });
-        if ((0, utils_1.is)('function', onChangeDateProps))
-            onChangeDateProps(valueNew);
-    }, [view, onChangeDateProps]);
-    const getDates = react_1.default.useCallback((available) => {
-        var _a;
-        const values = ((_a = available.dates) === null || _a === void 0 ? void 0 : _a.values) || [];
-        return values.map((item) => {
-            if (item.entire) {
-                if (item.from) {
-                    let from = new date_1.OnesyDate(item.from);
-                    let to;
-                    if (['day', 'week', 'month', 'year'].includes(item.entire))
-                        from = (0, date_1.startOf)(from, 'day');
-                    if (item.entire === 'minute')
-                        from = (0, date_1.startOf)(from, 'minute');
-                    if (item.entire === 'hour')
-                        from = (0, date_1.startOf)(from, 'hour');
-                    to = (0, date_1.endOf)(from, item.entire);
-                    item.from = from.milliseconds;
-                    item.to = to.milliseconds;
-                }
-            }
-            return item;
-        });
-    }, [times]);
-    const getDatesWeek = react_1.default.useCallback((available) => {
-        const weekFrom = (0, date_1.startOf)(date, 'week');
-        const weekTo = (0, date_1.endOf)(date, 'week');
-        return getDates(available).filter((item) => {
-            const from = new date_1.OnesyDate(item.from);
-            const to = new date_1.OnesyDate(item.to);
-            return !(from.milliseconds >= weekTo.milliseconds || to.milliseconds <= weekFrom.milliseconds);
-        });
-    }, [date, getDates]);
-    const getColor = react_1.default.useCallback((item) => {
-        let palette = theme.palette.color.neutral;
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'working')
-            palette = theme.palette.color.success;
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'not-working')
-            palette = theme.palette.color.info;
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'break')
-            palette = theme.palette.color.warning;
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'pending')
-            palette = theme.methods.color(style_react_1.colors.yellow[50]);
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'rescheduled')
-            palette = theme.methods.color(style_react_1.colors.purple[50]);
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'canceled')
-            palette = theme.palette.color.error;
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'other')
-            palette = theme.palette.color.neutral;
-        return palette[rangeShade];
-    }, [rangeShade, style_react_1.colors, theme]);
-    const itemToText = react_1.default.useCallback((item) => {
-        var _a, _b;
-        if (item === 'pending')
-            return l('Scheduled');
-        if (item === 'not-count-workout-session')
-            return l(`Don't count workout session`);
-        return (_b = (_a = optionsStatus === null || optionsStatus === void 0 ? void 0 : optionsStatus.find(itemStatus => itemStatus.value === item)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : l(item);
-    }, []);
-    const viewOptions = react_1.default.useMemo(() => {
-        return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item => ({
-            name: (0, utils_1.capitalize)(item === null || item === void 0 ? void 0 : item.name),
-            value: item === null || item === void 0 ? void 0 : item.value
+      }
+      return item;
+    });
+  }, [times]);
+  const getDatesWeek = _react.default.useCallback(available => {
+    const weekFrom = (0, _date.startOf)(date, 'week');
+    const weekTo = (0, _date.endOf)(date, 'week');
+    return getDates(available).filter(item => {
+      const from = new _date.OnesyDate(item.from);
+      const to = new _date.OnesyDate(item.to);
+      return !(from.milliseconds >= weekTo.milliseconds || to.milliseconds <= weekFrom.milliseconds);
+    });
+  }, [date, getDates]);
+  const getColor = _react.default.useCallback(item => {
+    let palette = theme.palette.color.neutral;
+    if ((item === null || item === void 0 ? void 0 : item.status) === 'working') palette = theme.palette.color.success;
+    if ((item === null || item === void 0 ? void 0 : item.status) === 'not-working') palette = theme.palette.color.info;
+    if ((item === null || item === void 0 ? void 0 : item.status) === 'break') palette = theme.palette.color.warning;
+    if ((item === null || item === void 0 ? void 0 : item.status) === 'pending') palette = theme.methods.color(_styleReact.colors.yellow[50]);
+    if ((item === null || item === void 0 ? void 0 : item.status) === 'rescheduled') palette = theme.methods.color(_styleReact.colors.purple[50]);
+    if ((item === null || item === void 0 ? void 0 : item.status) === 'canceled') palette = theme.palette.color.error;
+    if ((item === null || item === void 0 ? void 0 : item.status) === 'other') palette = theme.palette.color.neutral;
+    return palette[rangeShade];
+  }, [rangeShade, _styleReact.colors, theme]);
+  const itemToText = _react.default.useCallback(item => {
+    var _optionsStatus$find$n, _optionsStatus$find;
+    if (item === 'pending') return l('Scheduled');
+    if (item === 'not-count-workout-session') return l(`Don't count workout session`);
+    return (_optionsStatus$find$n = optionsStatus === null || optionsStatus === void 0 || (_optionsStatus$find = optionsStatus.find(itemStatus => itemStatus.value === item)) === null || _optionsStatus$find === void 0 ? void 0 : _optionsStatus$find.name) !== null && _optionsStatus$find$n !== void 0 ? _optionsStatus$find$n : l(item);
+  }, []);
+  const viewOptions = _react.default.useMemo(() => {
+    return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item => ({
+      name: (0, _utils.capitalize)(item === null || item === void 0 ? void 0 : item.name),
+      value: item === null || item === void 0 ? void 0 : item.value
+    }));
+  }, [viewsProps]);
+  const days = _react.default.useMemo(() => {
+    const weekStartDate = (0, _date.set)(4, 'hour', (0, _date.startOf)(date, 'week'));
+    return Array.from({
+      length: 7
+    }).map((_, index) => (0, _date.add)(index, 'day', weekStartDate));
+  }, [date]);
+  const simpleTimesUI = () => {
+    return /*#__PURE__*/_react.default.createElement(Line, {
+      gap: 3,
+      direction: {
+        default: 'row',
+        1400: 'column'
+      },
+      className: classes.simpleTimes,
+      fullWidth: true
+    }, days.map((itemDay, index) => {
+      const values = times.filter(item => {
+        var _item$weekly$days;
+        return (_item$weekly$days = item.weekly.days[index + 1]) === null || _item$weekly$days === void 0 ? void 0 : _item$weekly$days.active;
+      }).flatMap(item => item.weekly.days[index + 1].values).filter(item => item && [undefined, true].includes(refs.statuses.current[item.status || 'working']));
+      values.sort((a, b) => b.from > a.from ? -1 : 1);
+      return /*#__PURE__*/_react.default.createElement(Line, {
+        key: index,
+        gap: 1.5,
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(Line, {
+        gap: 0,
+        align: "center",
+        fullWidth: true
+      }, /*#__PURE__*/_react.default.createElement(Type, {
+        version: "h3",
+        weight: 400
+      }, (0, _date.format)(itemDay, 'dd', {
+        l
+      })), /*#__PURE__*/_react.default.createElement(Line, {
+        align: "center",
+        justify: "center",
+        className: (0, _styleReact.classNames)([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today])
+      }, /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b2",
+        weight: 200
+      }, (0, _date.format)(itemDay, 'DD.MM.', {
+        l
+      })))), /*#__PURE__*/_react.default.createElement(Line, {
+        gap: 2,
+        fullWidth: true
+      }, !!values.length ? values.map((itemValue, indexItem) => {
+        const itemValueFrom = new _date.OnesyDate(itemValue.from);
+        const itemValueTo = new _date.OnesyDate(itemValue.to);
+        return /*#__PURE__*/_react.default.createElement(Line, {
+          key: indexItem,
+          gap: 0.5,
+          className: classes.dayWeekSimple
+        }, /*#__PURE__*/_react.default.createElement(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center"
+        }, /*#__PURE__*/_react.default.createElement(Line, {
+          className: classes.palettePreview,
+          style: {
+            background: getColor(itemValue)
+          }
+        }), /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b2",
+          weight: 300
+        }, (0, _date.format)(itemValueFrom, 'hh:mm a', {
+          l
+        }), " \u2014 ", (0, _date.format)(itemValueTo, 'hh:mm a', {
+          l
+        }))), itemValue.description && /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b2",
+          weight: 200,
+          whiteSpace: "pre-wrap",
+          className: (0, _styleReact.classNames)([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
+          dangerouslySetInnerHTML: {
+            __html: (0, _utils.textToInnerHTML)(itemValue.description)
+          }
         }));
-    }, [viewsProps]);
-    const days = react_1.default.useMemo(() => {
-        const weekStartDate = (0, date_1.set)(4, 'hour', (0, date_1.startOf)(date, 'week'));
-        return Array.from({ length: 7 }).map((_, index) => (0, date_1.add)(index, 'day', weekStartDate));
-    }, [date]);
-    const simpleTimesUI = () => {
-        return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 3, direction: {
-                default: 'row',
-                1400: 'column'
-            }, className: classes.simpleTimes, fullWidth: true }, { children: days.map((itemDay, index) => {
-                const values = times.filter(item => { var _a; return (_a = item.weekly.days[index + 1]) === null || _a === void 0 ? void 0 : _a.active; }).flatMap(item => item.weekly.days[index + 1].values).filter(item => item && [undefined, true].includes(refs.statuses.current[item.status || 'working']));
-                values.sort((a, b) => b.from > a.from ? -1 : 1);
-                return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'column' }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', weight: 400 }, { children: (0, date_1.format)(itemDay, 'dd', { l }) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-                                        classes.weekDay,
-                                        itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today
-                                    ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 200 }, { children: (0, date_1.format)(itemDay, 'DD.MM.', { l }) })) }))] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, fullWidth: true }, { children: !!values.length ? values.map((itemValue, indexItem) => {
-                                const itemValueFrom = new date_1.OnesyDate(itemValue.from);
-                                const itemValueTo = new date_1.OnesyDate(itemValue.to);
-                                return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, className: classes.dayWeekSimple }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Line, { className: classes.palettePreview, style: {
-                                                        background: getColor(itemValue)
-                                                    } }), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2', weight: 300 }, { children: [(0, date_1.format)(itemValueFrom, 'hh:mm a', { l }), " \u2014 ", (0, date_1.format)(itemValueTo, 'hh:mm a', { l })] }))] })), itemValue.description && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', weight: 200, whiteSpace: 'pre-wrap', className: (0, style_react_1.classNames)([
-                                                classes.timeDescription,
-                                                !refs.displayTime.current && 'onesy-work-day-time'
-                                            ]), dangerouslySetInnerHTML: {
-                                                __html: (0, utils_1.textToInnerHTML)(itemValue.description)
-                                            } }))] }), indexItem));
-                            }) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: l('No information for this day') }))) }))] }), index));
-            }) })));
-    };
-    const simpleExceptionsUI = () => {
-        const items = times.flatMap(item => getDatesWeek(item));
-        if (!items.length)
-            return ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1' }, { children: l('No exceptions this week') })));
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((itemValue, index) => {
-                const day = (0, date_1.set)(index + 1, 'dayWeek');
-                const itemValueFrom = new date_1.OnesyDate(itemValue.from);
-                const itemValueTo = new date_1.OnesyDate(itemValue.to);
-                return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'column' }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(Line, { className: classes.palettePreview, style: {
-                                        background: getColor(itemValue)
-                                    } }), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 400 }, { children: (0, date_1.format)(day, 'dd', { l }) })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2' }, { children: [(0, date_1.format)(itemValueFrom, utils_2.formats.entire, { l }), " \u2014 ", (0, date_1.format)(itemValueTo, utils_2.formats.entire, { l })] }))] }))] })), itemValue.description && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', weight: 200, whiteSpace: 'pre-wrap', className: (0, style_react_1.classNames)([
-                                classes.timeDescription,
-                                !refs.displayTime.current && 'onesy-work-day-time'
-                            ]), dangerouslySetInnerHTML: {
-                                __html: (0, utils_1.textToInnerHTML)(itemValue.description)
-                            } }))] }), index));
-            }) });
-    };
-    const formattedDate = react_1.default.useMemo(() => {
-        if (view === 'day')
-            return (0, date_1.format)(date, `MMMM DD, YYYY`, { l });
-        if (['week', 'simple'].includes(view))
-            return `${(0, date_1.format)((0, date_1.startOf)(date, 'week'), `MMM DD, YYYY`, { l })} – ${(0, date_1.format)((0, date_1.endOf)(date, 'week'), `MMM DD, YYYY`, { l })}`;
-    }, [view, date]);
-    const legend = react_1.default.useMemo(() => {
-        return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ rowGap: 1.5, direction: 'row', align: 'center', className: classes.legend }, { children: optionsStatus.map((item, index) => ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', onClick: () => onStatusToggle(item.value), flexNo: true, className: (0, style_react_1.classNames)([
-                    classes.itemLegend,
-                    [undefined, true].includes(refs.statuses.current[item.value || 'working']) && classes.itemLegendActive
-                ]) }, { children: [(0, jsx_runtime_1.jsx)(Line, { className: classes.palettePreview, style: {
-                            background: getColor({ status: item.value })
-                        } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: item.name }))] }), index))) })));
-    }, [theme, statuses, optionsStatus]);
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, flex: true, fullWidth: true, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('CalendarAvailability', theme) && [
-                'onesy-CalendarAvailability-root'
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, fullWidth: true, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('CalendarAvailability', theme) && [
-                        'onesy-CalendarAvailability-header'
-                    ]
-                ]) }, { children: [startHeader, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', wrap: 'wrap', justify: 'space-between', align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', wrap: 'wrap', align: 'center', className: classes.aside }, { children: [startLeft, (0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'inherit', version: 'outlined', size: 'small', onClick: onToday, selected: now.days === date.days }, { children: l('Today') })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `${l('Previous')} ${l(view)}` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPrevious }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: 'regular' }) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `${l('Next')} ${l(view)}` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onNext }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: 'regular' }) })) }))] })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h2', weight: 500, whiteSpace: 'nowrap' }, { children: formattedDate })), endLeft] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', align: 'center', flexNo: true, className: (0, style_react_1.classNames)([
-                                    classes.aside,
-                                    classes.overflowX
-                                ]) }, { children: [startRight, ['week', 'day'].includes(view) && ((0, jsx_runtime_1.jsxs)(Label, Object.assign({ checked: displayTime, onChange: onChangeDisplayTime }, { children: [(0, jsx_runtime_1.jsx)(Switch, {}), l('Display time')] }))), (0, jsx_runtime_1.jsx)(Select, { name: l('View'), value: view, onChange: onChangeView, options: viewOptions, size: 'small', MenuProps: {
-                                            portal: true,
-                                            size: 'regular'
-                                        } }), endRight] }))] })), endHeader] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: refs.calendar, gap: 2, flex: true, fullWidth: true }, { children: [view === 'simple' && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, flex: true, fullWidth: true }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 4, fullWidth: true, className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('CalendarAvailability', theme) && [
-                                    'onesy-CalendarAvailability-simple'
-                                ],
-                                classes.calendar
-                            ]) }, { children: [simpleTimesUI(), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5 }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't2' }, { children: l('Exceptions this week') })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1 }, { children: simpleExceptionsUI() }))] }))] })) }))), ['week', 'day'].includes(view) && ((0, jsx_runtime_1.jsx)(CalendarWeek, Object.assign({ onOpen: onOpen, date: date, displayTime: displayTime, statuses: statuses, times: times, events: events, day: view === 'day' }, WeekProps))), legend] })), times && ((0, jsx_runtime_1.jsxs)(Modal, Object.assign({ open: !!(modal === null || modal === void 0 ? void 0 : modal.open), onClose: onClose, minWidth: 'lg', TransitionComponent: Slide, size: 'small' }, { children: [(0, jsx_runtime_1.jsxs)(ModalHeader, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'space-between', fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [startLeftModal, (0, jsx_runtime_1.jsx)(Line, { className: classes.palettePreview, style: {
-                                            background: getColor(modal)
-                                        } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', weight: 100 }, { children: (0, utils_1.cleanValue)(itemToText(modal === null || modal === void 0 ? void 0 : modal.status), { capitalize: true }) })), endLeftModal] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [startRightModal, onUpdate && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Update') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => {
-                                                onUpdate(modal === null || modal === void 0 ? void 0 : modal.object);
-                                                onClose();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(IconEdit, Object.assign({}, IconProps)) })) }))), onRemove && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Remove') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => {
-                                                onRemove(modal === null || modal === void 0 ? void 0 : modal.object);
-                                                onClose();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(IconRemove, Object.assign({}, IconProps)) })) }))), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Close') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(IconClose, Object.assign({}, IconProps)) })) })), endRightModal] }))] })), (0, jsx_runtime_1.jsx)(ModalMain, Object.assign({ align: 'flex-start', className: classes.modalMain }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'l1', weight: 200 }, { children: [(0, date_1.format)(modal === null || modal === void 0 ? void 0 : modal.day, 'dd', { l }), " ", (0, date_1.format)(new date_1.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.from), (modal === null || modal === void 0 ? void 0 : modal.weekly) ? `hh:mm a` : utils_2.formats.entire, { l }), " \u2014 ", (0, date_1.format)(new date_1.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.to), (modal === null || modal === void 0 ? void 0 : modal.weekly) ? `hh:mm a` : utils_2.formats.entire, { l })] })), (modal === null || modal === void 0 ? void 0 : modal.description) && ((0, jsx_runtime_1.jsx)(Type, { version: 'b2', dangerouslySetInnerHTML: {
-                                        __html: (0, utils_1.textToInnerHTML)(modal.description)
-                                    } }))] })) }))] })))] })));
+      }) : /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b2"
+      }, l('No information for this day'))));
+    }));
+  };
+  const simpleExceptionsUI = () => {
+    const items = times.flatMap(item => getDatesWeek(item));
+    if (!items.length) return /*#__PURE__*/_react.default.createElement(Type, {
+      version: "b1"
+    }, l('No exceptions this week'));
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map((itemValue, index) => {
+      const day = (0, _date.set)(index + 1, 'dayWeek');
+      const itemValueFrom = new _date.OnesyDate(itemValue.from);
+      const itemValueTo = new _date.OnesyDate(itemValue.to);
+      return /*#__PURE__*/_react.default.createElement(Line, {
+        key: index,
+        gap: 1,
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        fullWidth: true
+      }, /*#__PURE__*/_react.default.createElement(Line, {
+        className: classes.palettePreview,
+        style: {
+          background: getColor(itemValue)
+        }
+      }), /*#__PURE__*/_react.default.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center"
+      }, /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b2",
+        weight: 400
+      }, (0, _date.format)(day, 'dd', {
+        l
+      })), /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b2"
+      }, (0, _date.format)(itemValueFrom, _utils2.formats.entire, {
+        l
+      }), " \u2014 ", (0, _date.format)(itemValueTo, _utils2.formats.entire, {
+        l
+      })))), itemValue.description && /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b2",
+        weight: 200,
+        whiteSpace: "pre-wrap",
+        className: (0, _styleReact.classNames)([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
+        dangerouslySetInnerHTML: {
+          __html: (0, _utils.textToInnerHTML)(itemValue.description)
+        }
+      }));
+    }));
+  };
+  const formattedDate = _react.default.useMemo(() => {
+    if (view === 'day') return (0, _date.format)(date, `MMMM DD, YYYY`, {
+      l
+    });
+    if (['week', 'simple'].includes(view)) return `${(0, _date.format)((0, _date.startOf)(date, 'week'), `MMM DD, YYYY`, {
+      l
+    })} – ${(0, _date.format)((0, _date.endOf)(date, 'week'), `MMM DD, YYYY`, {
+      l
+    })}`;
+  }, [view, date]);
+  const legend = _react.default.useMemo(() => {
+    return /*#__PURE__*/_react.default.createElement(Line, {
+      rowGap: 1.5,
+      direction: "row",
+      align: "center",
+      className: classes.legend
+    }, optionsStatus.map((item, index) => /*#__PURE__*/_react.default.createElement(Line, {
+      key: index,
+      gap: 1,
+      direction: "row",
+      align: "center",
+      onClick: () => onStatusToggle(item.value),
+      flexNo: true,
+      className: (0, _styleReact.classNames)([classes.itemLegend, [undefined, true].includes(refs.statuses.current[item.value || 'working']) && classes.itemLegendActive])
+    }, /*#__PURE__*/_react.default.createElement(Line, {
+      className: classes.palettePreview,
+      style: {
+        background: getColor({
+          status: item.value
+        })
+      }
+    }), /*#__PURE__*/_react.default.createElement(Type, {
+      version: "b2"
+    }, item.name))));
+  }, [theme, statuses, optionsStatus]);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    flex: true,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarAvailability', theme) && ['onesy-CalendarAvailability-root'], className, classes.root])
+  }, other), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarAvailability', theme) && ['onesy-CalendarAvailability-header']])
+  }, startHeader, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 2,
+    direction: "row",
+    wrap: "wrap",
+    justify: "space-between",
+    align: "center",
+    fullWidth: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1.5,
+    direction: "row",
+    wrap: "wrap",
+    align: "center",
+    className: classes.aside
+  }, startLeft, /*#__PURE__*/_react.default.createElement(Button, {
+    color: "inherit",
+    version: "outlined",
+    size: "small",
+    onClick: onToday,
+    selected: now.days === date.days
+  }, l('Today')), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement(Tooltip, {
+    name: `${l('Previous')} ${l(view)}`
+  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onPrevious
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconPrevious, {
+    size: "regular"
+  }))), /*#__PURE__*/_react.default.createElement(Tooltip, {
+    name: `${l('Next')} ${l(view)}`
+  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onNext
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconNext, {
+    size: "regular"
+  })))), /*#__PURE__*/_react.default.createElement(Type, {
+    version: "h2",
+    weight: 500,
+    whiteSpace: "nowrap"
+  }, formattedDate), endLeft), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1.5,
+    direction: "row",
+    align: "center",
+    flexNo: true,
+    className: (0, _styleReact.classNames)([classes.aside, classes.overflowX])
+  }, startRight, ['week', 'day'].includes(view) && /*#__PURE__*/_react.default.createElement(Label, {
+    checked: displayTime,
+    onChange: onChangeDisplayTime
+  }, /*#__PURE__*/_react.default.createElement(Switch, null), l('Display time')), /*#__PURE__*/_react.default.createElement(Select, {
+    name: l('View'),
+    value: view,
+    onChange: onChangeView,
+    options: viewOptions,
+    size: "small",
+    MenuProps: {
+      portal: true,
+      size: 'regular'
+    }
+  }), endRight)), endHeader), /*#__PURE__*/_react.default.createElement(Line, {
+    ref: refs.calendar,
+    gap: 2,
+    flex: true,
+    fullWidth: true
+  }, view === 'simple' && /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    flex: true,
+    fullWidth: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 4,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarAvailability', theme) && ['onesy-CalendarAvailability-simple'], classes.calendar])
+  }, simpleTimesUI(), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1.5
+  }, /*#__PURE__*/_react.default.createElement(Type, {
+    version: "t2"
+  }, l('Exceptions this week')), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1
+  }, simpleExceptionsUI())))), ['week', 'day'].includes(view) && /*#__PURE__*/_react.default.createElement(CalendarWeek, (0, _extends2.default)({
+    onOpen: onOpen,
+    date: date,
+    displayTime: displayTime,
+    statuses: statuses,
+    times: times,
+    events: events,
+    day: view === 'day'
+  }, WeekProps)), legend), times && /*#__PURE__*/_react.default.createElement(Modal, {
+    open: !!(modal !== null && modal !== void 0 && modal.open),
+    onClose: onClose,
+    minWidth: "lg",
+    TransitionComponent: Slide,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(ModalHeader, {
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "space-between",
+    fullWidth: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center"
+  }, startLeftModal, /*#__PURE__*/_react.default.createElement(Line, {
+    className: classes.palettePreview,
+    style: {
+      background: getColor(modal)
+    }
+  }), /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b2",
+    weight: 100
+  }, (0, _utils.cleanValue)(itemToText(modal === null || modal === void 0 ? void 0 : modal.status), {
+    capitalize: true
+  })), endLeftModal), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center"
+  }, startRightModal, onUpdate && /*#__PURE__*/_react.default.createElement(Tooltip, {
+    name: l('Update')
+  }, /*#__PURE__*/_react.default.createElement(IconButton, {
+    onClick: () => {
+      onUpdate(modal === null || modal === void 0 ? void 0 : modal.object);
+      onClose();
+    }
+  }, /*#__PURE__*/_react.default.createElement(IconEdit, IconProps))), onRemove && /*#__PURE__*/_react.default.createElement(Tooltip, {
+    name: l('Remove')
+  }, /*#__PURE__*/_react.default.createElement(IconButton, {
+    onClick: () => {
+      onRemove(modal === null || modal === void 0 ? void 0 : modal.object);
+      onClose();
+    }
+  }, /*#__PURE__*/_react.default.createElement(IconRemove, IconProps))), /*#__PURE__*/_react.default.createElement(Tooltip, {
+    name: l('Close')
+  }, /*#__PURE__*/_react.default.createElement(IconButton, {
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement(IconClose, IconProps))), endRightModal)), /*#__PURE__*/_react.default.createElement(ModalMain, {
+    align: "flex-start",
+    className: classes.modalMain
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1.5,
+    fullWidth: true
+  }, /*#__PURE__*/_react.default.createElement(Type, {
+    version: "l1",
+    weight: 200
+  }, (0, _date.format)(modal === null || modal === void 0 ? void 0 : modal.day, 'dd', {
+    l
+  }), " ", (0, _date.format)(new _date.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.from), modal !== null && modal !== void 0 && modal.weekly ? `hh:mm a` : _utils2.formats.entire, {
+    l
+  }), " \u2014 ", (0, _date.format)(new _date.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.to), modal !== null && modal !== void 0 && modal.weekly ? `hh:mm a` : _utils2.formats.entire, {
+    l
+  })), (modal === null || modal === void 0 ? void 0 : modal.description) && /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b2",
+    dangerouslySetInnerHTML: {
+      __html: (0, _utils.textToInnerHTML)(modal.description)
+    }
+  })))));
 });
 CalendarAvailability.displayName = 'onesy-CalendarAvailability';
-exports.default = CalendarAvailability;
+var _default = exports.default = CalendarAvailability;