@onesy/ui-react 1.0.172 → 1.0.173

package/CalendarMenu/CalendarMenu.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -29,6 +28,7 @@ var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
 var _TimePicker = _interopRequireDefault(require("../TimePicker"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value", "dateProperty", "menuOpen", "menuOpenDefault", "timeMenuOpen", "timeMenuOpenDefault", "onChange", "onRemove", "closeOnChange", "startBottom", "endBottom", "noRemove", "TimePickerProps", "children", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -105,7 +105,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-CalendarMenu'
 });
-const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const CalendarMenu = 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, _refs$time$current;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -197,19 +197,19 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const shortcuts = [{
     name: l('Today'),
     onClick: () => onChangeDate(new _date.OnesyDate()),
-    icon: /*#__PURE__*/_react.default.createElement(_IconMaterialWbSunnyW.default, iconProps)
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialWbSunnyW.default, _objectSpread({}, iconProps))
   }, {
     name: l('Tomorrow'),
     onClick: () => onChangeDate((0, _date.add)(1, 'day')),
-    icon: /*#__PURE__*/_react.default.createElement(_IconMaterialWbTwilightW.default, iconProps)
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialWbTwilightW.default, _objectSpread({}, iconProps))
   }, {
     name: l('7 days'),
     onClick: () => onChangeDate((0, _date.add)(7, 'day')),
-    icon: /*#__PURE__*/_react.default.createElement(_IconMaterialCounter7W.default, iconProps)
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialCounter7W.default, _objectSpread({}, iconProps))
   }, {
     name: l('1 month'),
     onClick: () => onChangeDate((0, _date.add)(1, 'month')),
-    icon: /*#__PURE__*/_react.default.createElement(_IconMaterialCalendarMonthW.default, iconProps)
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialCalendarMonthW.default, _objectSpread({}, iconProps))
   }];
   const onClear = event => {
     onChange(refs.dateProperty.current, null);
@@ -281,97 +281,107 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     event_0.stopPropagation();
   };
   const palette = theme.palette.color.primary;
-  return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread(_objectSpread({
     open: menuOpen,
     onOpen: onMenuOpen,
     onClose: onMenuClose,
     onContextMenu: onContextMenu,
-    name: /*#__PURE__*/_react.default.createElement(Calendar, {
+    name: /*#__PURE__*/(0, _jsxRuntime.jsx)(Calendar, {
       tonal: true,
       color: "themed",
       calendarDefault: date,
-      start: /*#__PURE__*/_react.default.createElement(Line, {
+      start: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
         gap: 1,
         direction: "row",
         align: "center",
         justify: "center",
-        className: classes.calendarShortcuts
-      }, shortcuts.map((item, index) => /*#__PURE__*/_react.default.createElement(Tooltip, {
-        key: index,
-        name: item.name
-      }, /*#__PURE__*/_react.default.createElement(IconButton, {
-        onClick: () => {
-          item.onClick();
-          onMenuClose();
-        },
-        size: "small"
-      }, item.icon)))),
+        className: classes.calendarShortcuts,
+        children: shortcuts.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+          name: item.name,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+            onClick: () => {
+              item.onClick();
+              onMenuClose();
+            },
+            size: "small",
+            children: item.icon
+          })
+        }, index))
+      }),
       value: value !== null && value !== void 0 && value[dateProperty] ? date : null,
       onChange: onChangeDate,
       onContextMenu: onContextMenu,
       size: "small",
-      end: /*#__PURE__*/_react.default.createElement(Line, {
+      end: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
         gap: 0.5,
         fullWidth: true,
-        className: classes.end
-      }, startBottom, (value === null || value === void 0 ? void 0 : value[dateProperty]) && /*#__PURE__*/_react.default.createElement(Menu, {
-        open: timeMenuOpen,
-        onOpen: onTimeMenuOpen,
-        onClose: onTimeMenuClose,
-        name: () => /*#__PURE__*/_react.default.createElement(Line, {
-          gap: 1,
-          align: "center",
-          fullWidth: true
-        }, /*#__PURE__*/_react.default.createElement(TimePicker, (0, _extends2.default)({
-          value: date,
-          onChange: onChangeTime,
-          clear: false,
-          MainProps: {
-            elevation: theme.palette.light ? 8 : 0
+        className: classes.end,
+        children: [startBottom, (value === null || value === void 0 ? void 0 : value[dateProperty]) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, {
+          open: timeMenuOpen,
+          onOpen: onTimeMenuOpen,
+          onClose: onTimeMenuClose,
+          name: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+            gap: 1,
+            align: "center",
+            fullWidth: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TimePicker, _objectSpread({
+              value: date,
+              onChange: onChangeTime,
+              clear: false,
+              MainProps: {
+                elevation: theme.palette.light ? 8 : 0
+              },
+              size: "small",
+              static: true
+            }, TimePickerProps))
+          }),
+          className: (0, _styleReact.classNames)([classes.timeMenu, 'onesy-time']),
+          style: {
+            width: (_refs$time$current = refs.time.current) === null || _refs$time$current === void 0 ? void 0 : _refs$time$current.clientWidth
           },
-          size: "small",
-          static: true
-        }, TimePickerProps))),
-        className: (0, _styleReact.classNames)([classes.timeMenu, 'onesy-time']),
-        style: {
-          width: (_refs$time$current = refs.time.current) === null || _refs$time$current === void 0 ? void 0 : _refs$time$current.clientWidth
-        }
-      }, /*#__PURE__*/_react.default.createElement(ListItem, {
-        ref: refs.time,
-        start: /*#__PURE__*/_react.default.createElement(_IconMaterialScheduleW.default, iconProps),
-        primary: /*#__PURE__*/_react.default.createElement(Type, {
-          version: "b2",
-          color: "inherit"
-        }, (0, _date.format)(date, 'HH:mm', {
-          l
-        })),
-        startAlign: "center",
-        size: "small",
-        button: true,
-        Component: "div",
-        className: classes.item
-      })), endBottom, /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 0.4,
-        direction: "row",
-        align: "center",
-        justify: "space-between",
-        fullWidth: true,
-        className: classes.menuFooter
-      }, /*#__PURE__*/_react.default.createElement(Button, {
-        onClick: onClear,
-        version: "text",
-        size: "small",
-        disabled: !(value !== null && value !== void 0 && value[dateProperty])
-      }, l('Clear')), !noRemove && /*#__PURE__*/_react.default.createElement(Tooltip, {
-        name: l('Remove')
-      }, /*#__PURE__*/_react.default.createElement(IconButton, {
-        size: "small",
-        onClick: onRemove
-      }, /*#__PURE__*/_react.default.createElement(_IconMaterialDeleteW.default, iconProps))))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
+            ref: refs.time,
+            start: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialScheduleW.default, _objectSpread({}, iconProps)),
+            primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "b2",
+              color: "inherit",
+              children: (0, _date.format)(date, 'HH:mm', {
+                l
+              })
+            }),
+            startAlign: "center",
+            size: "small",
+            button: true,
+            Component: "div",
+            className: classes.item
+          })
+        }), endBottom, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0.4,
+          direction: "row",
+          align: "center",
+          justify: "space-between",
+          fullWidth: true,
+          className: classes.menuFooter,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+            onClick: onClear,
+            version: "text",
+            size: "small",
+            disabled: !(value !== null && value !== void 0 && value[dateProperty]),
+            children: l('Clear')
+          }), !noRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+            name: l('Remove'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+              size: "small",
+              onClick: onRemove,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialDeleteW.default, _objectSpread({}, iconProps))
+            })
+          })]
+        })]
+      }),
       CalendarMonthProps: {
         renderDay: (dayOnesyDate, propsDay, day_0, outside) => {
           const repeating_0 = repeats(dayOnesyDate);
-          return /*#__PURE__*/_react.default.createElement(PaginationItem, (0, _extends2.default)({
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, _objectSpread(_objectSpread({
             tonal: true,
             color: "inherit",
             size: "small",
@@ -392,7 +402,9 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
               color: theme.methods.palette.color.value(undefined, 90, true, palette),
               backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
             } : undefined)
-          }, propsDay), day_0.value);
+          }, propsDay), {}, {
+            children: day_0.value
+          }));
         },
         noTransition: true
       },
@@ -402,7 +414,9 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       contextMenu: false
     },
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMenu', theme) && ['onesy-CalendarMenu-root'], className, classes.root])
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 CalendarMenu.displayName = 'onesy-CalendarMenu';
 var _default = exports.default = CalendarMenu;

package/CalendarMonth/CalendarMonth.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"));
@@ -19,6 +18,7 @@ var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
 var _Transitions = _interopRequireDefault(require("../Transitions"));
 var _Transition = _interopRequireDefault(require("../Transition"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "colorSelected", "selected", "onTimeClick", "range", "offset", "outside", "weekStartDay", "now", "min", "max", "validate", "labels", "dayNamesFull", "noTransition", "valid", "renderDay", "renderDayName", "disabled", "DayNameProps", "PaginationItemProps", "TransitionProps", "TransitionsProps", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -203,7 +203,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-CalendarMonth'
 });
-const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+const CalendarMonth = props__ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _month, _refs$previous$curren, _refs$previous$curren2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -542,112 +542,123 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   }
   const weeks = (0, _utils.arrayToParts)(days, 7);
   const getCalendar = status => {
-    return /*#__PURE__*/_react.default.createElement(Surface, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
       color: color,
-      tonal: tonal
-    }, ({
-      palette
-    }) => /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0.5,
-      direction: "column",
-      align: "unset",
-      justify: "unset",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-weeks'], classes.weeks, classes[`weeks_size_${size}`], status && [`weeks_${status}`], !labels && classes.weeks_no_labels])
-    }, weeks.map((week, index_2) =>
-    /*#__PURE__*/
-    // Week
-    _react.default.createElement(Line, {
-      key: index_2,
+      tonal: tonal,
+      children: ({
+        palette
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        gap: 0.5,
+        direction: "column",
+        align: "unset",
+        justify: "unset",
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-weeks'], classes.weeks, classes[`weeks_size_${size}`], status && [`weeks_${status}`], !labels && classes.weeks_no_labels]),
+        children: weeks.map((week, index_2) =>
+        /*#__PURE__*/
+        // Week
+        (0, _jsxRuntime.jsx)(Line, {
+          gap: 0,
+          direction: "row",
+          align: "unset",
+          justify: "space-between",
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-week'], classes.week]),
+          children: week.map((day_3, index_) => {
+            const propsDay = {
+              onClick: () => onUpdate(day_3.onesyDate, day_3.start || day_3.end ? -1 : undefined),
+              disabled: !day_3.in && !outside || !valid(day_3.onesyDate, 'day') ||
+              // not prior to 1970, we may potentially update this in the future
+              day_3.onesyDate.year < 1970
+            };
+            const isEdge = day_3.is.same || (day_3.is.monthStart || day_3.is.monthEnd) && day_3.is.selected;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              direction: "row",
+              align: "center",
+              justify: "center",
+              onClick: event => {
+                const timeDate = (0, _date.startOf)(day_3.onesyDate, 'hour');
+                onTimeClick === null || onTimeClick === void 0 || onTimeClick(timeDate, 'month', event);
+              },
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day', `onesy-CalendarMonth-day-${day_3.in ? 'in' : 'out'}`], classes.day, classes[`day_size_${size}`], classes[`day_${day_3.in ? 'in' : 'out'}`], !day_3.in && !outside && classes.day_out_no, !propsDay.disabled ? 'onesy-enabled' : 'onesy-disabled',
+              // same day
+              // (day.is.same || ((day.is.monthStart || day.is.monthEnd) && day.is.selected)) && classes.dayStartEnd,
+              // start
+              day_3.is.start && !isEdge && classes.dayStart,
+              // end
+              day_3.is.end && !isEdge && classes.dayEnd,
+              // between
+              day_3.is.between && !day_3.is.same && [!day_3.is.end && day_3.dayWeek !== 0 && !day_3.is.monthEnd && classes.dayStartSelection, !day_3.is.start && day_3.dayWeek !== 1 && !day_3.is.monthStart && classes.dayEndSelection]]),
+              style: {
+                '--onesy-color': day_3.is.fromSelected ? colorSelectedTheme === null || colorSelectedTheme === void 0 ? void 0 : colorSelectedTheme.main : palette === null || palette === void 0 ? void 0 : palette.main
+              },
+              children: (0, _utils.is)('function', renderDay) ? renderDay(day_3.onesyDate, propsDay, day_3, outside) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, _objectSpread(_objectSpread(_objectSpread({
+                tonal: tonal,
+                color: "inherit",
+                size: size,
+                InteractionProps: {
+                  background: false
+                },
+                TypeProps: {
+                  version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+                  priority: !day_3.is.selected ? !day_3.weekend ? 'primary' : 'secondary' : undefined
+                },
+                "aria-label": (0, _date.format)(day_3.onesyDate, 'DD-MM-YYYY', {
+                  l
+                })
+              }, PaginationItemProps), {}, {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day-value', day_3.in && 'onesy-CalendarMonth-day-in', day_3.dayWeek && 'onesy-CalendarMonth-day-day-week', day_3.weekend && 'onesy-CalendarMonth-day-weekend', day_3.today && 'onesy-CalendarMonth-day-today', day_3.is.between && 'onesy-CalendarMonth-day-between', day_3.is.selected && 'onesy-CalendarMonth-day-selected', day_3.is.start && 'onesy-CalendarMonth-day-start', day_3.is.end && 'onesy-CalendarMonth-day-end'], PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.className, classes.dayValue, day_3.is.selected && classes.daySelected, classes[`day_size_${size}`]]),
+                style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, day_3.today ? {
+                  boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`
+                } : undefined), day_3.is.selected && day_3.is.between && {
+                  color: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 10 : 98})`,
+                  backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 90 : 85 : propsDay.disabled ? 20 : 25})`
+                }), day_3.is.selected && (day_3.is.start || day_3.is.end) && {
+                  color: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 98 : 10})`,
+                  backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 40 : 50 : propsDay.disabled ? 60 : 70})`
+                }), PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.style)
+              }, propsDay), {}, {
+                children: day_3.value
+              }))
+            }, index_);
+          })
+        }, index_2))
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+    gap: 0,
+    direction: "column",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-root', `onesy-CalendarMonth-size-${size}`], className, noTransition ? classes.root : classes.root_transition, classes[`size_${size}`], classes[`move_${refs.move.current}`], !labels && classes.root_no_labels, disabled && classes.disabled])
+  }, other), {}, {
+    children: [labels && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
       gap: 0,
       direction: "row",
-      align: "unset",
+      align: "center",
       justify: "space-between",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-week'], classes.week])
-    }, week.map((day_3, index_) => {
-      const propsDay = {
-        onClick: () => onUpdate(day_3.onesyDate, day_3.start || day_3.end ? -1 : undefined),
-        disabled: !day_3.in && !outside || !valid(day_3.onesyDate, 'day') ||
-        // not prior to 1970, we may potentially update this in the future
-        day_3.onesyDate.year < 1970
-      };
-      const isEdge = day_3.is.same || (day_3.is.monthStart || day_3.is.monthEnd) && day_3.is.selected;
-      return /*#__PURE__*/_react.default.createElement(Line, {
-        key: index_,
-        direction: "row",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day-names'], classes.dayNames]),
+      children: dayNames.map((day_4, index_3) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        direction: "column",
         align: "center",
         justify: "center",
-        onClick: event => {
-          const timeDate = (0, _date.startOf)(day_3.onesyDate, 'hour');
-          onTimeClick === null || onTimeClick === void 0 || onTimeClick(timeDate, 'month', event);
-        },
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day', `onesy-CalendarMonth-day-${day_3.in ? 'in' : 'out'}`], classes.day, classes[`day_size_${size}`], classes[`day_${day_3.in ? 'in' : 'out'}`], !day_3.in && !outside && classes.day_out_no, !propsDay.disabled ? 'onesy-enabled' : 'onesy-disabled',
-        // same day
-        // (day.is.same || ((day.is.monthStart || day.is.monthEnd) && day.is.selected)) && classes.dayStartEnd,
-        // start
-        day_3.is.start && !isEdge && classes.dayStart,
-        // end
-        day_3.is.end && !isEdge && classes.dayEnd,
-        // between
-        day_3.is.between && !day_3.is.same && [!day_3.is.end && day_3.dayWeek !== 0 && !day_3.is.monthEnd && classes.dayStartSelection, !day_3.is.start && day_3.dayWeek !== 1 && !day_3.is.monthStart && classes.dayEndSelection]]),
-        style: {
-          '--onesy-color': day_3.is.fromSelected ? colorSelectedTheme === null || colorSelectedTheme === void 0 ? void 0 : colorSelectedTheme.main : palette === null || palette === void 0 ? void 0 : palette.main
-        }
-      }, (0, _utils.is)('function', renderDay) ? renderDay(day_3.onesyDate, propsDay, day_3, outside) : /*#__PURE__*/_react.default.createElement(PaginationItem, (0, _extends2.default)({
-        tonal: tonal,
-        color: "inherit",
-        size: size,
-        InteractionProps: {
-          background: false
-        },
-        TypeProps: {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day-name'], classes.dayName, classes[`dayName_size_${size}`]]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
           version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-          priority: !day_3.is.selected ? !day_3.weekend ? 'primary' : 'secondary' : undefined
-        },
-        "aria-label": (0, _date.format)(day_3.onesyDate, 'DD-MM-YYYY', {
-          l
-        })
-      }, PaginationItemProps, {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day-value', day_3.in && 'onesy-CalendarMonth-day-in', day_3.dayWeek && 'onesy-CalendarMonth-day-day-week', day_3.weekend && 'onesy-CalendarMonth-day-weekend', day_3.today && 'onesy-CalendarMonth-day-today', day_3.is.between && 'onesy-CalendarMonth-day-between', day_3.is.selected && 'onesy-CalendarMonth-day-selected', day_3.is.start && 'onesy-CalendarMonth-day-start', day_3.is.end && 'onesy-CalendarMonth-day-end'], PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.className, classes.dayValue, day_3.is.selected && classes.daySelected, classes[`day_size_${size}`]]),
-        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, day_3.today ? {
-          boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`
-        } : undefined), day_3.is.selected && day_3.is.between && {
-          color: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 10 : 98})`,
-          backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 90 : 85 : propsDay.disabled ? 20 : 25})`
-        }), day_3.is.selected && (day_3.is.start || day_3.is.end) && {
-          color: `hsl(from var(--onesy-color) h s ${theme.palette.light ? 98 : 10})`,
-          backgroundColor: `hsl(from var(--onesy-color) h s ${theme.palette.light ? propsDay.disabled ? 40 : 50 : propsDay.disabled ? 60 : 70})`
-        }), PaginationItemProps === null || PaginationItemProps === void 0 ? void 0 : PaginationItemProps.style)
-      }, propsDay), day_3.value));
-    })))));
-  };
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
-    gap: 0,
-    direction: "column",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-root', `onesy-CalendarMonth-size-${size}`], className, noTransition ? classes.root : classes.root_transition, classes[`size_${size}`], classes[`move_${refs.move.current}`], !labels && classes.root_no_labels, disabled && classes.disabled])
-  }, other), labels && /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day-names'], classes.dayNames])
-  }, dayNames.map((day_4, index_3) => /*#__PURE__*/_react.default.createElement(Line, {
-    key: index_3,
-    direction: "column",
-    align: "center",
-    justify: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-day-name'], classes.dayName, classes[`dayName_size_${size}`]])
-  }, /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-    align: "center"
-  }, DayNameProps), renderDayNameMethod(day_4))))), noTransition && getCalendar(), !noTransition && /*#__PURE__*/_react.default.createElement(Transitions, (0, _extends2.default)({
-    id: refs.id.current,
-    mode: "in-out-follow",
-    switch: true
-  }, TransitionsProps), /*#__PURE__*/_react.default.createElement(Transition, (0, _extends2.default)({
-    key: id,
-    in: true
-  }, TransitionProps), getCalendar)));
-});
+          align: "center"
+        }, DayNameProps), {}, {
+          children: renderDayNameMethod(day_4)
+        }))
+      }, index_3))
+    }), noTransition && getCalendar(), !noTransition && /*#__PURE__*/(0, _jsxRuntime.jsx)(Transitions, _objectSpread(_objectSpread({
+      id: refs.id.current,
+      mode: "in-out-follow",
+      switch: true
+    }, TransitionsProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, _objectSpread(_objectSpread({
+        in: true
+      }, TransitionProps), {}, {
+        children: getCalendar
+      }), id)
+    }))]
+  }));
+};
 CalendarMonth.displayName = 'onesy-CalendarMonth';
 var _default = exports.default = CalendarMonth;