@onesy/ui-react 1.0.171 → 1.0.173

package/esm/CalendarMenu/CalendarMenu.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["value", "dateProperty", "menuOpen", "menuOpenDefault", "timeMenuOpen", "timeMenuOpenDefault", "onChange", "onRemove", "closeOnChange", "startBottom", "endBottom", "noRemove", "TimePickerProps", "children", "className"];
@@ -25,6 +24,7 @@ import PaginationItemElement from '../PaginationItem';
 import TimePickerElement from '../TimePicker';
 import TypeElement from '../Type';
 import { formats, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = style(theme => ({
   root: {},
   weekday: {
@@ -98,7 +98,7 @@ const useStyle = style(theme => ({
 }), {
   name: 'onesy-CalendarMenu'
 });
-const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const CalendarMenu = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendarAvailability?.props?.default), props_);
@@ -189,19 +189,19 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const shortcuts = [{
     name: l('Today'),
     onClick: () => onChangeDate(new OnesyDate()),
-    icon: /*#__PURE__*/React.createElement(IconMaterialWbSunnyRounded, iconProps)
+    icon: /*#__PURE__*/_jsx(IconMaterialWbSunnyRounded, _objectSpread({}, iconProps))
   }, {
     name: l('Tomorrow'),
     onClick: () => onChangeDate(add(1, 'day')),
-    icon: /*#__PURE__*/React.createElement(IconMaterialWbTwilightRounded, iconProps)
+    icon: /*#__PURE__*/_jsx(IconMaterialWbTwilightRounded, _objectSpread({}, iconProps))
   }, {
     name: l('7 days'),
     onClick: () => onChangeDate(add(7, 'day')),
-    icon: /*#__PURE__*/React.createElement(IconMaterialCounter7Rounded, iconProps)
+    icon: /*#__PURE__*/_jsx(IconMaterialCounter7Rounded, _objectSpread({}, iconProps))
   }, {
     name: l('1 month'),
     onClick: () => onChangeDate(add(1, 'month')),
-    icon: /*#__PURE__*/React.createElement(IconMaterialCalendarMonthRounded, iconProps)
+    icon: /*#__PURE__*/_jsx(IconMaterialCalendarMonthRounded, _objectSpread({}, iconProps))
   }];
   const onClear = event => {
     onChange(refs.dateProperty.current, null);
@@ -268,97 +268,107 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
     event_0.stopPropagation();
   };
   const palette = theme.palette.color.primary;
-  return /*#__PURE__*/React.createElement(Menu, _extends({
+  return /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({
     open: menuOpen,
     onOpen: onMenuOpen,
     onClose: onMenuClose,
     onContextMenu: onContextMenu,
-    name: /*#__PURE__*/React.createElement(Calendar, {
+    name: /*#__PURE__*/_jsx(Calendar, {
       tonal: true,
       color: "themed",
       calendarDefault: date,
-      start: /*#__PURE__*/React.createElement(Line, {
+      start: /*#__PURE__*/_jsx(Line, {
         gap: 1,
         direction: "row",
         align: "center",
         justify: "center",
-        className: classes.calendarShortcuts
-      }, shortcuts.map((item, index) => /*#__PURE__*/React.createElement(Tooltip, {
-        key: index,
-        name: item.name
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        onClick: () => {
-          item.onClick();
-          onMenuClose();
-        },
-        size: "small"
-      }, item.icon)))),
+        className: classes.calendarShortcuts,
+        children: shortcuts.map((item, index) => /*#__PURE__*/_jsx(Tooltip, {
+          name: item.name,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: () => {
+              item.onClick();
+              onMenuClose();
+            },
+            size: "small",
+            children: item.icon
+          })
+        }, index))
+      }),
       value: value?.[dateProperty] ? date : null,
       onChange: onChangeDate,
       onContextMenu: onContextMenu,
       size: "small",
-      end: /*#__PURE__*/React.createElement(Line, {
+      end: /*#__PURE__*/_jsxs(Line, {
         gap: 0.5,
         fullWidth: true,
-        className: classes.end
-      }, startBottom, value?.[dateProperty] && /*#__PURE__*/React.createElement(Menu, {
-        open: timeMenuOpen,
-        onOpen: onTimeMenuOpen,
-        onClose: onTimeMenuClose,
-        name: () => /*#__PURE__*/React.createElement(Line, {
-          gap: 1,
-          align: "center",
-          fullWidth: true
-        }, /*#__PURE__*/React.createElement(TimePicker, _extends({
-          value: date,
-          onChange: onChangeTime,
-          clear: false,
-          MainProps: {
-            elevation: theme.palette.light ? 8 : 0
+        className: classes.end,
+        children: [startBottom, value?.[dateProperty] && /*#__PURE__*/_jsx(Menu, {
+          open: timeMenuOpen,
+          onOpen: onTimeMenuOpen,
+          onClose: onTimeMenuClose,
+          name: () => /*#__PURE__*/_jsx(Line, {
+            gap: 1,
+            align: "center",
+            fullWidth: true,
+            children: /*#__PURE__*/_jsx(TimePicker, _objectSpread({
+              value: date,
+              onChange: onChangeTime,
+              clear: false,
+              MainProps: {
+                elevation: theme.palette.light ? 8 : 0
+              },
+              size: "small",
+              static: true
+            }, TimePickerProps))
+          }),
+          className: classNames([classes.timeMenu, 'onesy-time']),
+          style: {
+            width: refs.time.current?.clientWidth
           },
-          size: "small",
-          static: true
-        }, TimePickerProps))),
-        className: classNames([classes.timeMenu, 'onesy-time']),
-        style: {
-          width: refs.time.current?.clientWidth
-        }
-      }, /*#__PURE__*/React.createElement(ListItem, {
-        ref: refs.time,
-        start: /*#__PURE__*/React.createElement(IconMaterialScheduleRounded, iconProps),
-        primary: /*#__PURE__*/React.createElement(Type, {
-          version: "b2",
-          color: "inherit"
-        }, format(date, 'HH:mm', {
-          l
-        })),
-        startAlign: "center",
-        size: "small",
-        button: true,
-        Component: "div",
-        className: classes.item
-      })), endBottom, /*#__PURE__*/React.createElement(Line, {
-        gap: 0.4,
-        direction: "row",
-        align: "center",
-        justify: "space-between",
-        fullWidth: true,
-        className: classes.menuFooter
-      }, /*#__PURE__*/React.createElement(Button, {
-        onClick: onClear,
-        version: "text",
-        size: "small",
-        disabled: !value?.[dateProperty]
-      }, l('Clear')), !noRemove && /*#__PURE__*/React.createElement(Tooltip, {
-        name: l('Remove')
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        size: "small",
-        onClick: onRemove
-      }, /*#__PURE__*/React.createElement(IconMaterialDeleteRounded, iconProps))))),
+          children: /*#__PURE__*/_jsx(ListItem, {
+            ref: refs.time,
+            start: /*#__PURE__*/_jsx(IconMaterialScheduleRounded, _objectSpread({}, iconProps)),
+            primary: /*#__PURE__*/_jsx(Type, {
+              version: "b2",
+              color: "inherit",
+              children: format(date, 'HH:mm', {
+                l
+              })
+            }),
+            startAlign: "center",
+            size: "small",
+            button: true,
+            Component: "div",
+            className: classes.item
+          })
+        }), endBottom, /*#__PURE__*/_jsxs(Line, {
+          gap: 0.4,
+          direction: "row",
+          align: "center",
+          justify: "space-between",
+          fullWidth: true,
+          className: classes.menuFooter,
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: onClear,
+            version: "text",
+            size: "small",
+            disabled: !value?.[dateProperty],
+            children: l('Clear')
+          }), !noRemove && /*#__PURE__*/_jsx(Tooltip, {
+            name: l('Remove'),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              size: "small",
+              onClick: onRemove,
+              children: /*#__PURE__*/_jsx(IconMaterialDeleteRounded, _objectSpread({}, iconProps))
+            })
+          })]
+        })]
+      }),
       CalendarMonthProps: {
         renderDay: (dayOnesyDate, propsDay, day_0, outside) => {
           const repeating_0 = repeats(dayOnesyDate);
-          return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+          return /*#__PURE__*/_jsx(PaginationItem, _objectSpread(_objectSpread({
             tonal: true,
             color: "inherit",
             size: "small",
@@ -379,7 +389,9 @@ const CalendarMenu = /*#__PURE__*/React.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
       },
@@ -389,7 +401,9 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
       contextMenu: false
     },
     className: classNames([staticClassName('CalendarMenu', theme) && ['onesy-CalendarMenu-root'], className, classes.root])
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 CalendarMenu.displayName = 'onesy-CalendarMenu';
 export default CalendarMenu;

package/esm/CalendarMonth/CalendarMonth.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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"];
@@ -15,6 +14,7 @@ import PaginationItemElement from '../PaginationItem';
 import TransitionsElement from '../Transitions';
 import TransitionElement from '../Transition';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = style(theme => ({
   root: {
     position: 'relative'
@@ -196,7 +196,7 @@ const useStyle = style(theme => ({
 }), {
   name: 'onesy-CalendarMonth'
 });
-const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
+const CalendarMonth = props__ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendarMonth?.props?.default), props__);
@@ -531,112 +531,123 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }
   const weeks = arrayToParts(days, 7);
   const getCalendar = status => {
-    return /*#__PURE__*/React.createElement(Surface, {
+    return /*#__PURE__*/_jsx(Surface, {
       color: color,
-      tonal: tonal
-    }, ({
-      palette
-    }) => /*#__PURE__*/React.createElement(Line, {
-      gap: 0.5,
-      direction: "column",
-      align: "unset",
-      justify: "unset",
-      className: classNames([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.createElement(Line, {
-      key: index_2,
+      tonal: tonal,
+      children: ({
+        palette
+      }) => /*#__PURE__*/_jsx(Line, {
+        gap: 0.5,
+        direction: "column",
+        align: "unset",
+        justify: "unset",
+        className: classNames([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
+        _jsx(Line, {
+          gap: 0,
+          direction: "row",
+          align: "unset",
+          justify: "space-between",
+          className: classNames([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__*/_jsx(Line, {
+              direction: "row",
+              align: "center",
+              justify: "center",
+              onClick: event => {
+                const timeDate = startOf(day_3.onesyDate, 'hour');
+                onTimeClick?.(timeDate, 'month', event);
+              },
+              className: classNames([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?.main : palette?.main
+              },
+              children: is('function', renderDay) ? renderDay(day_3.onesyDate, propsDay, day_3, outside) : /*#__PURE__*/_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": format(day_3.onesyDate, 'DD-MM-YYYY', {
+                  l
+                })
+              }, PaginationItemProps), {}, {
+                className: classNames([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?.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?.style)
+              }, propsDay), {}, {
+                children: day_3.value
+              }))
+            }, index_);
+          })
+        }, index_2))
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+    gap: 0,
+    direction: "column",
+    className: classNames([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__*/_jsx(Line, {
       gap: 0,
       direction: "row",
-      align: "unset",
+      align: "center",
       justify: "space-between",
-      className: classNames([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.createElement(Line, {
-        key: index_,
-        direction: "row",
+      className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day-names'], classes.dayNames]),
+      children: dayNames.map((day_4, index_3) => /*#__PURE__*/_jsx(Line, {
+        direction: "column",
         align: "center",
         justify: "center",
-        onClick: event => {
-          const timeDate = startOf(day_3.onesyDate, 'hour');
-          onTimeClick?.(timeDate, 'month', event);
-        },
-        className: classNames([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?.main : palette?.main
-        }
-      }, is('function', renderDay) ? renderDay(day_3.onesyDate, propsDay, day_3, outside) : /*#__PURE__*/React.createElement(PaginationItem, _extends({
-        tonal: tonal,
-        color: "inherit",
-        size: size,
-        InteractionProps: {
-          background: false
-        },
-        TypeProps: {
+        className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day-name'], classes.dayName, classes[`dayName_size_${size}`]]),
+        children: /*#__PURE__*/_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": format(day_3.onesyDate, 'DD-MM-YYYY', {
-          l
-        })
-      }, PaginationItemProps, {
-        className: classNames([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?.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?.style)
-      }, propsDay), day_3.value));
-    })))));
-  };
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
-    gap: 0,
-    direction: "column",
-    className: classNames([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.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day-names'], classes.dayNames])
-  }, dayNames.map((day_4, index_3) => /*#__PURE__*/React.createElement(Line, {
-    key: index_3,
-    direction: "column",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-day-name'], classes.dayName, classes[`dayName_size_${size}`]])
-  }, /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
-    align: "center"
-  }, DayNameProps), renderDayNameMethod(day_4))))), noTransition && getCalendar(), !noTransition && /*#__PURE__*/React.createElement(Transitions, _extends({
-    id: refs.id.current,
-    mode: "in-out-follow",
-    switch: true
-  }, TransitionsProps), /*#__PURE__*/React.createElement(Transition, _extends({
-    key: id,
-    in: true
-  }, TransitionProps), getCalendar)));
-});
+          align: "center"
+        }, DayNameProps), {}, {
+          children: renderDayNameMethod(day_4)
+        }))
+      }, index_3))
+    }), noTransition && getCalendar(), !noTransition && /*#__PURE__*/_jsx(Transitions, _objectSpread(_objectSpread({
+      id: refs.id.current,
+      mode: "in-out-follow",
+      switch: true
+    }, TransitionsProps), {}, {
+      children: /*#__PURE__*/_jsx(Transition, _objectSpread(_objectSpread({
+        in: true
+      }, TransitionProps), {}, {
+        children: getCalendar
+      }), id)
+    }))]
+  }));
+};
 CalendarMonth.displayName = 'onesy-CalendarMonth';
 export default CalendarMonth;