@onesy/ui-react 1.0.172 → 1.0.174

package/CalendarAvailability/CalendarAvailability.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -31,6 +30,7 @@ var _Label = _interopRequireDefault(require("../Label"));
 var _Slide = _interopRequireDefault(require("../Slide"));
 var _Switch = _interopRequireDefault(require("../Switch"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -117,7 +117,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-CalendarAvailability'
 });
-const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const CalendarAvailability = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10, _theme$elements11;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -350,130 +350,146 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
     }).map((_, index) => (0, _date.add)(index, 'day', weekStartDate));
   }, [date]);
   const simpleTimesUI = () => {
-    return /*#__PURE__*/_react.default.createElement(Line, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
       gap: 3,
       direction: {
         default: 'row',
         1400: 'column'
       },
       className: classes.simpleTimes,
-      fullWidth: true
-    }, days.map((itemDay, index_0) => {
-      const values_0 = times.filter(item_6 => {
-        var _item_6$weekly$days;
-        return (_item_6$weekly$days = item_6.weekly.days[index_0 + 1]) === null || _item_6$weekly$days === void 0 ? void 0 : _item_6$weekly$days.active;
-      }).flatMap(item_7 => item_7.weekly.days[index_0 + 1].values).filter(item_8 => item_8 && [undefined, true].includes(refs.statuses.current[item_8.status || 'working']));
-      values_0.sort((a, b) => b.from > a.from ? -1 : 1);
-      return /*#__PURE__*/_react.default.createElement(Line, {
-        key: index_0,
-        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_0.length ? values_0.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)
-          }
-        }));
-      }) : /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b2"
-      }, l('No information for this day'))));
-    }));
+      fullWidth: true,
+      children: days.map((itemDay, index_0) => {
+        const values_0 = times.filter(item_6 => {
+          var _item_6$weekly$days;
+          return (_item_6$weekly$days = item_6.weekly.days[index_0 + 1]) === null || _item_6$weekly$days === void 0 ? void 0 : _item_6$weekly$days.active;
+        }).flatMap(item_7 => item_7.weekly.days[index_0 + 1].values).filter(item_8 => item_8 && [undefined, true].includes(refs.statuses.current[item_8.status || 'working']));
+        values_0.sort((a, b) => b.from > a.from ? -1 : 1);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1.5,
+          direction: "column",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 0,
+            align: "center",
+            fullWidth: true,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "h3",
+              weight: 400,
+              children: (0, _date.format)(itemDay, 'dd', {
+                l
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              align: "center",
+              justify: "center",
+              className: (0, _styleReact.classNames)([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today]),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                version: "b2",
+                weight: 200,
+                children: (0, _date.format)(itemDay, 'DD.MM.', {
+                  l
+                })
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+            gap: 2,
+            fullWidth: true,
+            children: !!values_0.length ? values_0.map((itemValue, indexItem) => {
+              const itemValueFrom = new _date.OnesyDate(itemValue.from);
+              const itemValueTo = new _date.OnesyDate(itemValue.to);
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+                gap: 0.5,
+                className: classes.dayWeekSimple,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+                  gap: 1,
+                  direction: "row",
+                  align: "center",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+                    className: classes.palettePreview,
+                    style: {
+                      background: getColor(itemValue)
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+                    version: "b2",
+                    weight: 300,
+                    children: [(0, _date.format)(itemValueFrom, 'hh:mm a', {
+                      l
+                    }), " \u2014 ", (0, _date.format)(itemValueTo, 'hh:mm a', {
+                      l
+                    })]
+                  })]
+                }), itemValue.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(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)
+                  }
+                })]
+              }, indexItem);
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "b2",
+              children: l('No information for this day')
+            })
+          })]
+        }, index_0);
+      })
+    });
   };
   const simpleExceptionsUI = () => {
     const items = times.flatMap(item_9 => getDatesWeek(item_9));
-    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_0, index_1) => {
-      const day = (0, _date.set)(index_1 + 1, 'dayWeek');
-      const itemValueFrom_0 = new _date.OnesyDate(itemValue_0.from);
-      const itemValueTo_0 = new _date.OnesyDate(itemValue_0.to);
-      return /*#__PURE__*/_react.default.createElement(Line, {
-        key: index_1,
-        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_0)
-        }
-      }), /*#__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_0, _utils2.formats.entire, {
-        l
-      }), " \u2014 ", (0, _date.format)(itemValueTo_0, _utils2.formats.entire, {
-        l
-      })))), itemValue_0.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_0.description)
-        }
-      }));
-    }));
+    if (!items.length) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+      version: "b1",
+      children: l('No exceptions this week')
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: items.map((itemValue_0, index_1) => {
+        const day = (0, _date.set)(index_1 + 1, 'dayWeek');
+        const itemValueFrom_0 = new _date.OnesyDate(itemValue_0.from);
+        const itemValueTo_0 = new _date.OnesyDate(itemValue_0.to);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1,
+          direction: "column",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            fullWidth: true,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              className: classes.palettePreview,
+              style: {
+                background: getColor(itemValue_0)
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+              gap: 1,
+              direction: "row",
+              align: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                version: "b2",
+                weight: 400,
+                children: (0, _date.format)(day, 'dd', {
+                  l
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+                version: "b2",
+                children: [(0, _date.format)(itemValueFrom_0, _utils2.formats.entire, {
+                  l
+                }), " \u2014 ", (0, _date.format)(itemValueTo_0, _utils2.formats.entire, {
+                  l
+                })]
+              })]
+            })]
+          }), itemValue_0.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(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_0.description)
+            }
+          })]
+        }, index_1);
+      })
+    });
   };
   const formattedDate = _react.default.useMemo(() => {
     if (view === 'day') return (0, _date.format)(date, `MMMM DD, YYYY`, {
@@ -486,193 +502,230 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
     })}`;
   }, [view, date]);
   const legend = _react.default.useMemo(() => {
-    return /*#__PURE__*/_react.default.createElement(Line, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
       rowGap: 1.5,
       direction: "row",
       align: "center",
-      className: classes.legend
-    }, optionsStatus.map((item_10, index_2) => /*#__PURE__*/_react.default.createElement(Line, {
-      key: index_2,
-      gap: 1,
-      direction: "row",
-      align: "center",
-      onClick: () => onStatusToggle(item_10.value),
-      flexNo: true,
-      className: (0, _styleReact.classNames)([classes.itemLegend, [undefined, true].includes(refs.statuses.current[item_10.value || 'working']) && classes.itemLegendActive])
-    }, /*#__PURE__*/_react.default.createElement(Line, {
-      className: classes.palettePreview,
-      style: {
-        background: getColor({
-          status: item_10.value
-        })
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b2"
-    }, item_10.name))));
+      className: classes.legend,
+      children: optionsStatus.map((item_10, index_2) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        onClick: () => onStatusToggle(item_10.value),
+        flexNo: true,
+        className: (0, _styleReact.classNames)([classes.itemLegend, [undefined, true].includes(refs.statuses.current[item_10.value || 'working']) && classes.itemLegendActive]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          className: classes.palettePreview,
+          style: {
+            background: getColor({
+              status: item_10.value
+            })
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+          version: "b2",
+          children: item_10.name
+        })]
+      }, index_2))
+    });
   }, [theme, statuses, optionsStatus]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
     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)
-    }
-  })))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: 1,
+      fullWidth: true,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarAvailability', theme) && ['onesy-CalendarAvailability-header']]),
+      children: [startHeader, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 2,
+        direction: "row",
+        wrap: "wrap",
+        justify: "space-between",
+        align: "center",
+        fullWidth: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1.5,
+          direction: "row",
+          wrap: "wrap",
+          align: "center",
+          className: classes.aside,
+          children: [startLeft, /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+            color: "inherit",
+            version: "outlined",
+            size: "small",
+            onClick: onToday,
+            selected: now.days === date.days,
+            children: l('Today')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 0,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+              name: `${l('Previous')} ${l(view)}`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+                onClick: onPrevious
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPrevious, {
+                  size: "regular"
+                })
+              }))
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+              name: `${l('Next')} ${l(view)}`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+                onClick: onNext
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconNext, {
+                  size: "regular"
+                })
+              }))
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+            version: "h2",
+            weight: 500,
+            whiteSpace: "nowrap",
+            children: formattedDate
+          }), endLeft]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1.5,
+          direction: "row",
+          align: "center",
+          flexNo: true,
+          className: (0, _styleReact.classNames)([classes.aside, classes.overflowX]),
+          children: [startRight, ['week', 'day'].includes(view) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, {
+            checked: displayTime,
+            onChange: onChangeDisplayTime,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Switch, {}), l('Display time')]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Select, {
+            name: l('View'),
+            value: view,
+            onChange: onChangeView,
+            options: viewOptions,
+            size: "small",
+            MenuProps: {
+              portal: true,
+              size: 'regular'
+            }
+          }), endRight]
+        })]
+      }), endHeader]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      ref: refs.calendar,
+      gap: 2,
+      flex: true,
+      fullWidth: true,
+      children: [view === 'simple' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        gap: 1,
+        flex: true,
+        fullWidth: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 4,
+          fullWidth: true,
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarAvailability', theme) && ['onesy-CalendarAvailability-simple'], classes.calendar]),
+          children: [simpleTimesUI(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 1.5,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "t2",
+              children: l('Exceptions this week')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 1,
+              children: simpleExceptionsUI()
+            })]
+          })]
+        })
+      }), ['week', 'day'].includes(view) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarWeek, _objectSpread({
+        onOpen: onOpen,
+        date: date,
+        displayTime: displayTime,
+        statuses: statuses,
+        times: times,
+        events: events,
+        day: view === 'day'
+      }, WeekProps)), legend]
+    }), times && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Modal, {
+      open: !!(modal !== null && modal !== void 0 && modal.open),
+      onClose: onClose,
+      minWidth: "lg",
+      TransitionComponent: Slide,
+      size: "small",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ModalHeader, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        justify: "space-between",
+        fullWidth: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          children: [startLeftModal, /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+            className: classes.palettePreview,
+            style: {
+              background: getColor(modal)
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+            version: "b2",
+            weight: 100,
+            children: (0, _utils.cleanValue)(itemToText(modal === null || modal === void 0 ? void 0 : modal.status), {
+              capitalize: true
+            })
+          }), endLeftModal]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          children: [startRightModal, onUpdate && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+            name: l('Update'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+              onClick: () => {
+                onUpdate(modal === null || modal === void 0 ? void 0 : modal.object);
+                onClose();
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconEdit, _objectSpread({}, IconProps))
+            })
+          }), onRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+            name: l('Remove'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+              onClick: () => {
+                onRemove(modal === null || modal === void 0 ? void 0 : modal.object);
+                onClose();
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconRemove, _objectSpread({}, IconProps))
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+            name: l('Close'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+              onClick: onClose,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconClose, _objectSpread({}, IconProps))
+            })
+          }), endRightModal]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalMain, {
+        align: "flex-start",
+        className: classes.modalMain,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1.5,
+          fullWidth: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+            version: "l1",
+            weight: 200,
+            children: [(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__*/(0, _jsxRuntime.jsx)(Type, {
+            version: "b2",
+            dangerouslySetInnerHTML: {
+              __html: (0, _utils.textToInnerHTML)(modal.description)
+            }
+          })]
+        })
+      })]
+    })]
+  }));
+};
 CalendarAvailability.displayName = 'onesy-CalendarAvailability';
 var _default = exports.default = CalendarAvailability;