@mantine/schedule 9.0.0-alpha.5 → 9.0.0-alpha.6

package/esm/components/MobileMonthView/MobileMonthView.mjs

@@ -1,296 +1,264 @@
-'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useRef, createElement } from 'react';
-import dayjs from 'dayjs';
-import { createVarsResolver, getRadius, factory, useProps, useMantineTheme, useStyles, getThemeColor, UnstyledButton, Box, Text, useDirection, AccordionChevron } from '@mantine/core';
-import { useDatesContext } from '@mantine/dates';
-import { useUncontrolled } from '@mantine/hooks';
-import { getWeekdaysNames } from '../../utils/get-weekdays-names/get-weekdays-names.mjs';
-import { getWeekNumber } from '../../utils/get-week-number/get-week-number.mjs';
-import { getMonthDays } from '../../utils/get-month-days/get-month-days.mjs';
-import { isSameMonth } from '../../utils/is-same-month/is-same-month.mjs';
-import { toDateString } from '../../utils/to-date-string/to-date-string.mjs';
-import { formatDate } from '../../utils/format-date/format-date.mjs';
-import { sortEvents } from '../../utils/sort-events/sort-events.mjs';
-import { expandRecurringEvents } from '../../utils/expand-recurring-events/expand-recurring-events.mjs';
-import { handleMonthViewKeyDown } from '../MonthView/handle-month-view-key-down.mjs';
-import { getMobileMonthViewEvents } from './get-mobile-month-view-events.mjs';
-import classes from './MobileMonthView.module.css.mjs';
-
+"use client";
+import { getLabel } from "../../labels.mjs";
+import { formatDate } from "../../utils/format-date/format-date.mjs";
+import { getWeekdaysNames } from "../../utils/get-weekdays-names/get-weekdays-names.mjs";
+import { getWeekNumber } from "../../utils/get-week-number/get-week-number.mjs";
+import { getMonthDays } from "../../utils/get-month-days/get-month-days.mjs";
+import { isSameMonth } from "../../utils/is-same-month/is-same-month.mjs";
+import { toDateString } from "../../utils/to-date-string/to-date-string.mjs";
+import { sortEvents } from "../../utils/sort-events/sort-events.mjs";
+import { expandRecurringEvents } from "../../utils/expand-recurring-events/expand-recurring-events.mjs";
+import { handleMonthViewKeyDown } from "../MonthView/handle-month-view-key-down.mjs";
+import { getMobileMonthViewEvents } from "./get-mobile-month-view-events.mjs";
+import MobileMonthView_module_default from "./MobileMonthView.module.mjs";
+import dayjs from "dayjs";
+import { AccordionChevron, Box, Text, UnstyledButton, createVarsResolver, factory, getRadius, getThemeColor, useDirection, useMantineTheme, useProps, useStyles } from "@mantine/core";
+import { useUncontrolled } from "@mantine/hooks";
+import React, { createElement, useRef } from "react";
+import { useDatesContext } from "@mantine/dates";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/schedule/src/components/MobileMonthView/MobileMonthView.tsx
 const defaultProps = {
-  __staticSelector: "MobileMonthView",
-  withWeekDays: true,
-  consistentWeeks: true,
-  highlightToday: true,
-  mode: "default",
-  eventsHeaderFormat: "dddd, MMMM D",
-  noEventsText: "No events"
+	__staticSelector: "MobileMonthView",
+	withWeekDays: true,
+	consistentWeeks: true,
+	highlightToday: true,
+	mode: "default",
+	eventsHeaderFormat: "dddd, MMMM D"
 };
-const varsResolver = createVarsResolver((_theme, { radius }) => ({
-  mobileMonthView: {
-    "--mobile-month-view-radius": getRadius(radius)
-  }
-}));
+const varsResolver = createVarsResolver((_theme, { radius }) => ({ mobileMonthView: { "--mobile-month-view-radius": getRadius(radius) } }));
 const MobileMonthView = factory((_props) => {
-  const props = useProps("MobileMonthView", defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    vars,
-    attributes,
-    __staticSelector,
-    date,
-    onDateChange,
-    selectedDate,
-    defaultSelectedDate,
-    onSelectedDateChange,
-    withWeekNumbers,
-    withWeekDays,
-    locale,
-    firstDayOfWeek,
-    weekdayFormat,
-    weekendDays,
-    getWeekNumberProps,
-    getDayProps,
-    onDayClick,
-    onWeekNumberClick,
-    consistentWeeks,
-    highlightToday,
-    radius,
-    withOutsideDays,
-    events,
-    labels,
-    mode,
-    renderEvent,
-    eventsHeaderFormat,
-    noEventsText,
-    onYearClick,
-    onEventClick,
-    renderHeader,
-    recurrenceExpansionLimit,
-    ...others
-  } = props;
-  const ctx = useDatesContext();
-  const theme = useMantineTheme();
-  const today = dayjs();
-  const [_selectedDate, _setSelectedDate] = useUncontrolled({
-    value: selectedDate,
-    defaultValue: defaultSelectedDate ?? toDateString(today),
-    onChange: (value) => onSelectedDateChange?.(value ? toDateString(dayjs(value)) : null)
-  });
-  const getStyles = useStyles({
-    name: __staticSelector,
-    classes,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    varsResolver,
-    rootSelector: "mobileMonthView"
-  });
-  const daysRef = useRef([]);
-  const firstDayPosition = useRef(null);
-  const expandedEvents = expandRecurringEvents({
-    events,
-    rangeStart: dayjs(date).startOf("month").toDate(),
-    rangeEnd: dayjs(date).endOf("month").toDate(),
-    expansionLimit: recurrenceExpansionLimit
-  });
-  const groupedEvents = getMobileMonthViewEvents({ date, events: expandedEvents });
-  const weekdays = withWeekDays ? getWeekdaysNames({
-    locale: ctx.getLocale(locale),
-    format: weekdayFormat,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  }).map((day, index) => /* @__PURE__ */ createElement("div", { ...getStyles("mobileMonthViewWeekday"), key: index }, day)) : null;
-  const weeks = getMonthDays({
-    month: dayjs(date).format("YYYY-MM-DD"),
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
-    consistentWeeks
-  }).map((week, weekIndex) => {
-    const days = week.map((dayDate, dayIndex) => {
-      const outside = !isSameMonth(dayDate, date);
-      const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(dayDate).day());
-      const ariaLabel = dayjs(dayDate).locale(locale || ctx.locale).format("MMMM D, YYYY");
-      const dayProps = getDayProps?.(dayjs(dayDate).format("YYYY-MM-DD")) || {};
-      const isToday = dayjs(dayDate).isSame(today, "day") && highlightToday;
-      const isSelected = _selectedDate && dayjs(dayDate).isSame(dayjs(_selectedDate), "day");
-      const dayEvents = groupedEvents[dayjs(dayDate).format("YYYY-MM-DD")] || [];
-      const shouldRender = withOutsideDays || !outside;
-      if (shouldRender && firstDayPosition.current === null) {
-        firstDayPosition.current = { weekIndex, dayIndex };
-      }
-      const isFirstDay = firstDayPosition.current?.weekIndex === weekIndex && firstDayPosition.current?.dayIndex === dayIndex;
-      const indicators = dayEvents.slice(0, 3).map((event) => /* @__PURE__ */ createElement(
-        "div",
-        {
-          ...getStyles("mobileMonthViewDayIndicator", {
-            style: { backgroundColor: getThemeColor(event.color, theme) }
-          }),
-          key: event.id
-        }
-      ));
-      const handleDayClick = (event) => {
-        const dateStr = dayjs(dayDate).format("YYYY-MM-DD");
-        _setSelectedDate(dateStr);
-        onDayClick?.(dateStr, event);
-        dayProps.onClick?.(event);
-      };
-      const handleDayKeyDown = (event) => {
-        handleMonthViewKeyDown({
-          controlsRef: daysRef,
-          weekIndex,
-          dayIndex,
-          event
-        });
-      };
-      return /* @__PURE__ */ createElement(
-        UnstyledButton,
-        {
-          "aria-label": ariaLabel,
-          "aria-selected": isSelected || void 0,
-          ...dayProps,
-          ...getStyles("mobileMonthViewDay", {
-            className: dayProps.className,
-            style: dayProps.style
-          }),
-          key: dayDate,
-          ref: (node) => {
-            if (node) {
-              if (!daysRef.current[weekIndex]) {
-                daysRef.current[weekIndex] = [];
-              }
-              daysRef.current[weekIndex][dayIndex] = node;
-            }
-          },
-          mod: [
-            {
-              outside,
-              weekend,
-              today: isToday,
-              selected: isSelected,
-              static: mode === "static",
-              hidden: !shouldRender
-            },
-            dayProps.mod
-          ],
-          tabIndex: mode === "static" || !shouldRender ? -1 : isFirstDay ? 0 : -1,
-          onClick: mode === "static" || !shouldRender ? void 0 : handleDayClick,
-          onKeyDown: mode === "static" || !shouldRender ? void 0 : handleDayKeyDown
-        },
-        shouldRender ? dayjs(dayDate).format("D") : null,
-        shouldRender && /* @__PURE__ */ jsx("div", { ...getStyles("mobileMonthViewDayIndicators"), children: indicators })
-      );
-    });
-    const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format("YYYY-MM-DD")) || {};
-    const weekNumber = getWeekNumber(week);
-    return /* @__PURE__ */ createElement("div", { ...getStyles("mobileMonthViewWeek"), key: weekIndex }, withWeekNumbers && /* @__PURE__ */ jsx(
-      UnstyledButton,
-      {
-        "aria-label": `Week ${weekNumber}`,
-        ...weekNumberProps,
-        onClick: mode === "static" ? void 0 : (event) => {
-          onWeekNumberClick?.(dayjs(week[0]).format("YYYY-MM-DD"), event);
-          weekNumberProps.onClick?.(event);
-        },
-        mod: { static: mode === "static" },
-        tabIndex: mode === "static" ? -1 : 0,
-        ...getStyles("mobileMonthViewWeekNumber", {
-          className: weekNumberProps.className,
-          style: weekNumberProps.style
-        }),
-        children: weekNumber
-      },
-      weekNumber
-    ), days);
-  });
-  const selectedDateEvents = _selectedDate ? sortEvents(groupedEvents[dayjs(_selectedDate).format("YYYY-MM-DD")] || []) : [];
-  const eventsList = selectedDateEvents.map((event) => {
-    const startTime = dayjs(event.start).format("HH:mm");
-    const endTime = dayjs(event.end).format("HH:mm");
-    const isAllDay = startTime === "00:00" && endTime === "00:00";
-    const eventChildren = /* @__PURE__ */ jsxs(Box, { ...getStyles("mobileMonthViewEventBody"), children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ...getStyles("mobileMonthViewEventColor", {
-            style: { backgroundColor: getThemeColor(event.color, theme) }
-          })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Text, { ...getStyles("mobileMonthViewEventTitle"), children: event.title }),
-        /* @__PURE__ */ jsx(Text, { ...getStyles("mobileMonthViewEventTime"), size: "xs", c: "dimmed", children: isAllDay ? "All day" : `${startTime} \u2013 ${endTime}` })
-      ] })
-    ] });
-    const rootProps = {
-      ...getStyles("mobileMonthViewEvent"),
-      onClick: mode === "static" ? void 0 : (e) => {
-        onEventClick?.(event, e);
-      },
-      tabIndex: mode === "static" ? -1 : 0,
-      children: eventChildren
-    };
-    if (typeof renderEvent === "function") {
-      return /* @__PURE__ */ jsx(React.Fragment, { children: renderEvent(event, rootProps) }, event.id);
-    }
-    return /* @__PURE__ */ createElement(UnstyledButton, { ...rootProps, key: event.id });
-  });
-  const eventsHeader = _selectedDate ? formatDate({
-    locale: ctx.getLocale(locale),
-    date: _selectedDate,
-    format: eventsHeaderFormat
-  }) : "";
-  const { dir } = useDirection();
-  const headerLabel = formatDate({ locale: ctx.getLocale(locale), date, format: "MMMM YYYY" });
-  const defaultHeader = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      UnstyledButton,
-      {
-        ...getStyles("mobileMonthViewHeaderBackButton"),
-        onClick: onYearClick,
-        mod: { static: mode === "static" },
-        tabIndex: mode === "static" ? -1 : 0,
-        children: [
-          /* @__PURE__ */ jsx(AccordionChevron, { transform: `rotate(${dir === "rtl" ? -90 : 90} 0 0)`, size: 20 }),
-          dayjs(date).format("YYYY")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Text, { ...getStyles("mobileMonthViewHeaderLabel"), fw: 600, tt: "capitalize", children: headerLabel })
-  ] });
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...getStyles("mobileMonthView"),
-      mod: { "with-week-numbers": withWeekNumbers },
-      ...others,
-      children: [
-        /* @__PURE__ */ jsx("div", { ...getStyles("mobileMonthViewHeader"), children: typeof renderHeader === "function" ? renderHeader({ mode, date, defaultHeader }) : defaultHeader }),
-        /* @__PURE__ */ jsxs(Box, { ...getStyles("mobileMonthViewCalendar"), mod: { "with-weekdays": withWeekDays }, children: [
-          weekdays && /* @__PURE__ */ jsxs("div", { ...getStyles("mobileMonthViewWeekdays"), children: [
-            withWeekNumbers && /* @__PURE__ */ jsx("div", { ...getStyles("mobileMonthViewWeekdaysCorner") }),
-            weekdays
-          ] }),
-          weeks
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { ...getStyles("mobileMonthViewEventsList"), children: [
-          /* @__PURE__ */ jsx(Text, { ...getStyles("mobileMonthViewEventsHeader"), fw: 600, tt: "capitalize", children: eventsHeader }),
-          eventsList.length > 0 ? eventsList : /* @__PURE__ */ jsx(Text, { ...getStyles("mobileMonthViewNoEvents"), c: "dimmed", ta: "center", py: "xl", children: noEventsText })
-        ] })
-      ]
-    }
-  );
+	const props = useProps("MobileMonthView", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, attributes, __staticSelector, date, onDateChange, selectedDate, defaultSelectedDate, onSelectedDateChange, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, getWeekNumberProps, getDayProps, onDayClick, onWeekNumberClick, consistentWeeks, highlightToday, radius, withOutsideDays, events, labels, mode, renderEvent, eventsHeaderFormat, onYearClick, onEventClick, renderHeader, recurrenceExpansionLimit, ...others } = props;
+	const ctx = useDatesContext();
+	const theme = useMantineTheme();
+	const today = dayjs();
+	const [_selectedDate, _setSelectedDate] = useUncontrolled({
+		value: selectedDate,
+		defaultValue: defaultSelectedDate ?? toDateString(today),
+		onChange: (value) => onSelectedDateChange?.(value ? toDateString(dayjs(value)) : null)
+	});
+	const getStyles = useStyles({
+		name: __staticSelector,
+		classes: MobileMonthView_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "mobileMonthView"
+	});
+	const daysRef = useRef([]);
+	const firstDayPosition = useRef(null);
+	const groupedEvents = getMobileMonthViewEvents({
+		date,
+		events: expandRecurringEvents({
+			events,
+			rangeStart: dayjs(date).startOf("month").toDate(),
+			rangeEnd: dayjs(date).endOf("month").toDate(),
+			expansionLimit: recurrenceExpansionLimit
+		})
+	});
+	const weekdays = withWeekDays ? getWeekdaysNames({
+		locale: ctx.getLocale(locale),
+		format: weekdayFormat,
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+	}).map((day, index) => /* @__PURE__ */ createElement("div", {
+		...getStyles("mobileMonthViewWeekday"),
+		key: index
+	}, day)) : null;
+	const weeks = getMonthDays({
+		month: dayjs(date).format("YYYY-MM-DD"),
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
+		consistentWeeks
+	}).map((week, weekIndex) => {
+		const days = week.map((dayDate, dayIndex) => {
+			const outside = !isSameMonth(dayDate, date);
+			const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(dayDate).day());
+			const ariaLabel = dayjs(dayDate).locale(locale || ctx.locale).format("MMMM D, YYYY");
+			const dayProps = getDayProps?.(dayjs(dayDate).format("YYYY-MM-DD")) || {};
+			const isToday = dayjs(dayDate).isSame(today, "day") && highlightToday;
+			const isSelected = _selectedDate && dayjs(dayDate).isSame(dayjs(_selectedDate), "day");
+			const dayEvents = groupedEvents[dayjs(dayDate).format("YYYY-MM-DD")] || [];
+			const shouldRender = withOutsideDays || !outside;
+			if (shouldRender && firstDayPosition.current === null) firstDayPosition.current = {
+				weekIndex,
+				dayIndex
+			};
+			const isFirstDay = firstDayPosition.current?.weekIndex === weekIndex && firstDayPosition.current?.dayIndex === dayIndex;
+			const indicators = dayEvents.slice(0, 3).map((event) => /* @__PURE__ */ createElement("div", {
+				...getStyles("mobileMonthViewDayIndicator", { style: { backgroundColor: getThemeColor(event.color, theme) } }),
+				key: event.id
+			}));
+			const handleDayClick = (event) => {
+				const dateStr = dayjs(dayDate).format("YYYY-MM-DD");
+				_setSelectedDate(dateStr);
+				onDayClick?.(dateStr, event);
+				dayProps.onClick?.(event);
+			};
+			const handleDayKeyDown = (event) => {
+				handleMonthViewKeyDown({
+					controlsRef: daysRef,
+					weekIndex,
+					dayIndex,
+					event
+				});
+			};
+			return /* @__PURE__ */ createElement(UnstyledButton, {
+				"aria-label": ariaLabel,
+				"aria-selected": isSelected || void 0,
+				...dayProps,
+				...getStyles("mobileMonthViewDay", {
+					className: dayProps.className,
+					style: dayProps.style
+				}),
+				key: dayDate,
+				ref: (node) => {
+					if (node) {
+						if (!daysRef.current[weekIndex]) daysRef.current[weekIndex] = [];
+						daysRef.current[weekIndex][dayIndex] = node;
+					}
+				},
+				mod: [{
+					outside,
+					weekend,
+					today: isToday,
+					selected: isSelected,
+					static: mode === "static",
+					hidden: !shouldRender
+				}, dayProps.mod],
+				tabIndex: mode === "static" || !shouldRender ? -1 : isFirstDay ? 0 : -1,
+				onClick: mode === "static" || !shouldRender ? void 0 : handleDayClick,
+				onKeyDown: mode === "static" || !shouldRender ? void 0 : handleDayKeyDown
+			}, shouldRender ? dayjs(dayDate).format("D") : null, shouldRender && /* @__PURE__ */ jsx("div", {
+				...getStyles("mobileMonthViewDayIndicators"),
+				children: indicators
+			}));
+		});
+		const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format("YYYY-MM-DD")) || {};
+		const weekNumber = getWeekNumber(week);
+		return /* @__PURE__ */ createElement("div", {
+			...getStyles("mobileMonthViewWeek"),
+			key: weekIndex
+		}, withWeekNumbers && /* @__PURE__ */ jsx(UnstyledButton, {
+			"aria-label": `Week ${weekNumber}`,
+			...weekNumberProps,
+			onClick: mode === "static" ? void 0 : (event) => {
+				onWeekNumberClick?.(dayjs(week[0]).format("YYYY-MM-DD"), event);
+				weekNumberProps.onClick?.(event);
+			},
+			mod: { static: mode === "static" },
+			tabIndex: mode === "static" ? -1 : 0,
+			...getStyles("mobileMonthViewWeekNumber", {
+				className: weekNumberProps.className,
+				style: weekNumberProps.style
+			}),
+			children: weekNumber
+		}, weekNumber), days);
+	});
+	const eventsList = (_selectedDate ? sortEvents(groupedEvents[dayjs(_selectedDate).format("YYYY-MM-DD")] || []) : []).map((event) => {
+		const startTime = dayjs(event.start).format("HH:mm");
+		const endTime = dayjs(event.end).format("HH:mm");
+		const isAllDay = startTime === "00:00" && endTime === "00:00";
+		const eventChildren = /* @__PURE__ */ jsxs(Box, {
+			...getStyles("mobileMonthViewEventBody"),
+			children: [/* @__PURE__ */ jsx("div", { ...getStyles("mobileMonthViewEventColor", { style: { backgroundColor: getThemeColor(event.color, theme) } }) }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Text, {
+				...getStyles("mobileMonthViewEventTitle"),
+				children: event.title
+			}), /* @__PURE__ */ jsx(Text, {
+				...getStyles("mobileMonthViewEventTime"),
+				size: "xs",
+				c: "dimmed",
+				children: isAllDay ? "All day" : `${startTime} – ${endTime}`
+			})] })]
+		});
+		const rootProps = {
+			...getStyles("mobileMonthViewEvent"),
+			onClick: mode === "static" ? void 0 : (e) => {
+				onEventClick?.(event, e);
+			},
+			tabIndex: mode === "static" ? -1 : 0,
+			children: eventChildren
+		};
+		if (typeof renderEvent === "function") return /* @__PURE__ */ jsx(React.Fragment, { children: renderEvent(event, rootProps) }, event.id);
+		return /* @__PURE__ */ createElement(UnstyledButton, {
+			...rootProps,
+			key: event.id
+		});
+	});
+	const eventsHeader = _selectedDate ? formatDate({
+		locale: ctx.getLocale(locale),
+		date: _selectedDate,
+		format: eventsHeaderFormat
+	}) : "";
+	const { dir } = useDirection();
+	const headerLabel = formatDate({
+		locale: ctx.getLocale(locale),
+		date,
+		format: "MMMM YYYY"
+	});
+	const defaultHeader = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(UnstyledButton, {
+		...getStyles("mobileMonthViewHeaderBackButton"),
+		onClick: onYearClick,
+		mod: { static: mode === "static" },
+		tabIndex: mode === "static" ? -1 : 0,
+		children: [/* @__PURE__ */ jsx(AccordionChevron, {
+			transform: `rotate(${dir === "rtl" ? -90 : 90} 0 0)`,
+			size: 20
+		}), dayjs(date).format("YYYY")]
+	}), /* @__PURE__ */ jsx(Text, {
+		...getStyles("mobileMonthViewHeaderLabel"),
+		fw: 600,
+		tt: "capitalize",
+		children: headerLabel
+	})] });
+	return /* @__PURE__ */ jsxs(Box, {
+		...getStyles("mobileMonthView"),
+		mod: { "with-week-numbers": withWeekNumbers },
+		...others,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				...getStyles("mobileMonthViewHeader"),
+				children: typeof renderHeader === "function" ? renderHeader({
+					mode,
+					date,
+					defaultHeader
+				}) : defaultHeader
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				...getStyles("mobileMonthViewCalendar"),
+				mod: { "with-weekdays": withWeekDays },
+				children: [weekdays && /* @__PURE__ */ jsxs("div", {
+					...getStyles("mobileMonthViewWeekdays"),
+					children: [withWeekNumbers && /* @__PURE__ */ jsx("div", { ...getStyles("mobileMonthViewWeekdaysCorner") }), weekdays]
+				}), weeks]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				...getStyles("mobileMonthViewEventsList"),
+				children: [/* @__PURE__ */ jsx(Text, {
+					...getStyles("mobileMonthViewEventsHeader"),
+					fw: 600,
+					tt: "capitalize",
+					children: eventsHeader
+				}), eventsList.length > 0 ? eventsList : /* @__PURE__ */ jsx(Text, {
+					...getStyles("mobileMonthViewNoEvents"),
+					c: "dimmed",
+					ta: "center",
+					py: "xl",
+					children: getLabel("noEvents", labels)
+				})]
+			})
+		]
+	});
 });
 MobileMonthView.displayName = "@mantine/schedule/MobileMonthView";
-MobileMonthView.classes = classes;
+MobileMonthView.classes = MobileMonthView_module_default;
 MobileMonthView.varsResolver = varsResolver;
-
+//#endregion
 export { MobileMonthView };
-//# sourceMappingURL=MobileMonthView.mjs.map
+
+//# sourceMappingURL=MobileMonthView.mjs.map