silver-ui 0.3.1 → 0.5.0

package/dist/{chunk-MGVEX3RS.js → chunk-GSTINE4X.js}

@@ -1,18 +1,19 @@
-import { DropdownMenu, DropdownMenuItem } from './chunk-XUJZTD4E.js';
-import { ButtonGroup } from './chunk-4CVDLMD6.js';
-import { plainDateToInstant, plainDateFromInstant, plainDateIsEqual, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, plainDateSetStartOfWeek, DATE_FORMAT_MONTH_YEAR, plainDateIsBefore, plainDateIsAfter, plainDateDayOfWeek } from './chunk-QSEDH7T2.js';
+import { DropdownMenu, DropdownMenuItem } from './chunk-TH537HOM.js';
+import { ButtonGroup } from './chunk-D3CHBU46.js';
+import { plainDateToInstant, plainDateFromInstant, plainDateIsEqual, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR, plainDateIsBefore, plainDateIsAfter, plainDateDayOfWeek } from './chunk-5HPXUDX6.js';
 import { getBrowserTimezoneID, nowEpochMilliseconds } from './chunk-OX4ZMUF4.js';
-import { Button } from './chunk-RVENUWRD.js';
-import { Spinner } from './chunk-DSB4Q3AS.js';
-import { Heading, Text } from './chunk-76B2VLID.js';
-import { Tooltip } from './chunk-EMHLPPQZ.js';
-import { Icon } from './chunk-7T3SWOY7.js';
-import { cx as cx$1 } from './chunk-GUKZNXTB.js';
-import { cx } from './chunk-PPNETWIP.js';
+import { Popover } from './chunk-S5CMLG2E.js';
+import { Button } from './chunk-THTVYP5V.js';
+import { Spinner } from './chunk-2VAUVJVG.js';
+import { Heading, Text } from './chunk-RJEZBOSH.js';
+import { Tooltip } from './chunk-6PIVWNUR.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { css } from './chunk-OD4DHHZH.js';
+import { cx } from './chunk-PPNETWIP.js';
 import { Temporal } from '@js-temporal/polyfill';
-import { createContext, use, useMemo, useState, useCallback, Suspense, useSyncExternalStore } from 'react';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createContext, use, useMemo, useState, Suspense, useSyncExternalStore, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChevronLeft, ChevronRight, Check } from 'lucide-react';
 
 var DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
@@ -40,6 +41,211 @@ function createEventFromISO({
     title
   };
 }
+
+// src/components/Schedule/ScheduleEvent.recipe.ts
+var scheduleEventRecipe = sva({
+  slots: ["event", "dot", "time", "title"],
+  base: {
+    event: {
+      borderWidth: "default",
+      borderStyle: "solid",
+      borderColor: "var(--schedule-event-border)",
+      borderRadius: "sm",
+      overflow: "hidden",
+      px: "1",
+      py: "0.5",
+      fontSize: "xs",
+      lineHeight: "tight",
+      bg: "var(--schedule-event-bg)",
+      color: "var(--schedule-event-fg)",
+      _hover: {
+        bg: "var(--schedule-event-bg-hover)"
+      }
+    },
+    dot: {
+      display: "inline-block",
+      w: "2",
+      h: "2",
+      borderRadius: "full",
+      bg: "var(--schedule-event-dot)",
+      flexShrink: 0
+    },
+    time: {
+      flexShrink: 0,
+      fontWeight: "normal"
+    },
+    title: {
+      fontWeight: "bold",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  },
+  variants: {
+    layout: {
+      inline: {
+        event: {
+          display: "inline-flex",
+          alignItems: "baseline",
+          gap: "1",
+          maxW: "full",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          fontWeight: "medium"
+        }
+      },
+      block: {
+        event: {
+          position: "absolute",
+          display: "flex",
+          flexDirection: "column",
+          gap: 0,
+          minH: "9",
+          minW: 0
+        },
+        time: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      }
+    },
+    // Full-width pill used by the month overlay where the span sizes the cell.
+    isFullWidth: {
+      true: { event: { w: "full" } },
+      false: {}
+    },
+    color: {
+      blue: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.blue)",
+          "--schedule-event-bg-hover": "token(colors.surface.blue.hover)",
+          "--schedule-event-border": "token(colors.surface.blue.accent)",
+          "--schedule-event-fg": "token(colors.surface.blue.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.blue.fg)",
+          "--schedule-event-dot": "token(colors.surface.blue.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.blue.accent)" }
+      },
+      cyan: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.cyan)",
+          "--schedule-event-bg-hover": "token(colors.surface.cyan.hover)",
+          "--schedule-event-border": "token(colors.surface.cyan.accent)",
+          "--schedule-event-fg": "token(colors.surface.cyan.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.cyan.fg)",
+          "--schedule-event-dot": "token(colors.surface.cyan.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.cyan.accent)" }
+      },
+      gray: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.gray)",
+          "--schedule-event-bg-hover": "token(colors.surface.gray.hover)",
+          "--schedule-event-border": "token(colors.surface.gray.accent)",
+          "--schedule-event-fg": "token(colors.surface.gray.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.gray.fg)",
+          "--schedule-event-dot": "token(colors.surface.gray.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.gray.accent)" }
+      },
+      green: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.green)",
+          "--schedule-event-bg-hover": "token(colors.surface.green.hover)",
+          "--schedule-event-border": "token(colors.surface.green.accent)",
+          "--schedule-event-fg": "token(colors.surface.green.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.green.fg)",
+          "--schedule-event-dot": "token(colors.surface.green.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.green.accent)" }
+      },
+      orange: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.orange)",
+          "--schedule-event-bg-hover": "token(colors.surface.orange.hover)",
+          "--schedule-event-border": "token(colors.surface.orange.accent)",
+          "--schedule-event-fg": "token(colors.surface.orange.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.orange.fg)",
+          "--schedule-event-dot": "token(colors.surface.orange.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.orange.accent)" }
+      },
+      pink: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.pink)",
+          "--schedule-event-bg-hover": "token(colors.surface.pink.hover)",
+          "--schedule-event-border": "token(colors.surface.pink.accent)",
+          "--schedule-event-fg": "token(colors.surface.pink.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.pink.fg)",
+          "--schedule-event-dot": "token(colors.surface.pink.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.pink.accent)" }
+      },
+      purple: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.purple)",
+          "--schedule-event-bg-hover": "token(colors.surface.purple.hover)",
+          "--schedule-event-border": "token(colors.surface.purple.accent)",
+          "--schedule-event-fg": "token(colors.surface.purple.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.purple.fg)",
+          "--schedule-event-dot": "token(colors.surface.purple.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.purple.accent)" }
+      },
+      red: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.red)",
+          "--schedule-event-bg-hover": "token(colors.surface.red.hover)",
+          "--schedule-event-border": "token(colors.surface.red.accent)",
+          "--schedule-event-fg": "token(colors.surface.red.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.red.fg)",
+          "--schedule-event-dot": "token(colors.surface.red.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.red.accent)" }
+      },
+      teal: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.teal)",
+          "--schedule-event-bg-hover": "token(colors.surface.teal.hover)",
+          "--schedule-event-border": "token(colors.surface.teal.accent)",
+          "--schedule-event-fg": "token(colors.surface.teal.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.teal.fg)",
+          "--schedule-event-dot": "token(colors.surface.teal.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.teal.accent)" }
+      },
+      yellow: {
+        event: {
+          "--schedule-event-bg": "token(colors.surface.yellow)",
+          "--schedule-event-bg-hover": "token(colors.surface.yellow.hover)",
+          "--schedule-event-border": "token(colors.surface.yellow.accent)",
+          "--schedule-event-fg": "token(colors.surface.yellow.fg)",
+          "--schedule-event-fg-base": "token(colors.surface.yellow.fg)",
+          "--schedule-event-dot": "token(colors.surface.yellow.accent)"
+        },
+        dot: { "--schedule-event-dot": "token(colors.surface.yellow.accent)" }
+      }
+    },
+    isPast: {
+      true: {
+        event: {
+          "--schedule-event-bg": "color-mix(in srgb, var(--schedule-event-dot) 10%, token(colors.bg))",
+          "--schedule-event-bg-hover": "color-mix(in srgb, var(--schedule-event-dot) 14%, token(colors.bg))",
+          "--schedule-event-border": "color-mix(in srgb, var(--schedule-event-dot) 48%, token(colors.border))",
+          "--schedule-event-fg": "color-mix(in srgb, var(--schedule-event-fg-base) 52%, token(colors.fg.muted))"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    layout: "inline",
+    color: "blue",
+    isFullWidth: false,
+    isPast: false
+  }
+});
 var ScheduleContext = createContext(null);
 ScheduleContext.displayName = "ScheduleContext";
 function useScheduleContext() {
@@ -104,192 +310,89 @@ function sortEvents(events, timezoneID) {
 function getEventSortStart(event, timezoneID) {
   return isDayEvent(event) ? plainDateToInstant(event.start, timezoneID) : event.start;
 }
-var styles = {
-  root: css({
-    color: "fg",
-    fontFamily: "body",
-    w: "full"
-  }),
-  frame: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "3",
-    w: "full"
-  }),
-  header: css({
-    display: "grid",
-    gridTemplateColumns: "1fr auto 1fr",
-    alignItems: "center",
-    gap: "3"
-  }),
-  headerSlotStart: css({
-    display: "flex",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    gap: "2"
-  }),
-  headerSlotCenter: css({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "2",
-    textAlign: "center"
-  }),
-  headerSlotEnd: css({
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    gap: "2"
-  }),
-  headerTitleContent: css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "2"
-  }),
-  surface: css({
-    borderWidth: "default",
-    borderStyle: "solid",
-    borderColor: "border",
-    borderRadius: "md",
-    overflow: "hidden",
-    bg: "bg"
-  }),
-  event: css({
-    display: "inline-flex",
-    alignItems: "baseline",
-    gap: "1",
-    maxW: "full",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    borderWidth: "default",
-    borderStyle: "solid",
-    borderColor: "var(--schedule-event-border)",
-    borderRadius: "sm",
-    px: "1",
-    py: "0.5",
-    fontSize: "xs",
-    fontWeight: "medium",
-    lineHeight: "tight",
-    bg: "var(--schedule-event-bg)",
-    color: "var(--schedule-event-fg)",
-    _hover: {
-      bg: "var(--schedule-event-bg-hover)"
+
+// src/components/Schedule/Schedule.recipe.ts
+var scheduleRecipe = sva({
+  slots: [
+    "root",
+    "frame",
+    "header",
+    "headerSlotStart",
+    "headerSlotCenter",
+    "headerSlotEnd",
+    "headerTitleContent",
+    "headerTitleSpinner",
+    "surface"
+  ],
+  base: {
+    root: {
+      color: "fg",
+      fontFamily: "body",
+      w: "full"
+    },
+    frame: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3",
+      w: "full"
+    },
+    header: {
+      display: "grid",
+      gridTemplateColumns: "1fr auto 1fr",
+      alignItems: "center",
+      gap: "3"
+    },
+    headerSlotStart: {
+      display: "flex",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      gap: "2"
+    },
+    headerSlotCenter: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "2",
+      textAlign: "center"
+    },
+    headerSlotEnd: {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: "2"
+    },
+    headerTitleContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    headerTitleSpinner: {
+      marginInlineStart: "4px",
+      marginBlockStart: "4px"
+    },
+    surface: {
+      borderWidth: "default",
+      borderStyle: "solid",
+      borderColor: "border",
+      borderRadius: "md",
+      overflow: "hidden",
+      bg: "bg"
     }
-  }),
-  eventPast: css({
-    "--schedule-event-bg": "color-mix(in srgb, var(--schedule-event-dot) 10%, token(colors.bg))",
-    "--schedule-event-bg-hover": "color-mix(in srgb, var(--schedule-event-dot) 14%, token(colors.bg))",
-    "--schedule-event-border": "color-mix(in srgb, var(--schedule-event-dot) 48%, token(colors.border))",
-    "--schedule-event-fg": "color-mix(in srgb, var(--schedule-event-fg-base) 52%, token(colors.fg.muted))"
-  }),
-  eventDot: css({
-    display: "inline-block",
-    w: "2",
-    h: "2",
-    borderRadius: "full",
-    bg: "var(--schedule-event-dot)",
-    flexShrink: 0
-  }),
-  eventTime: css({
-    flexShrink: 0,
-    fontWeight: "normal"
-  }),
-  eventTitle: css({
-    fontWeight: "bold",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  })
-};
+  }
+});
+var scheduleClasses = scheduleRecipe();
 var categoryFallback = { label: "Event", color: "blue" };
-var colorStyles = {
-  blue: css({
-    "--schedule-event-bg": "token(colors.surface.blue)",
-    "--schedule-event-bg-hover": "token(colors.surface.blue.hover)",
-    "--schedule-event-border": "token(colors.surface.blue.accent)",
-    "--schedule-event-fg": "token(colors.surface.blue.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.blue.fg)",
-    "--schedule-event-dot": "token(colors.surface.blue.accent)"
-  }),
-  cyan: css({
-    "--schedule-event-bg": "token(colors.surface.cyan)",
-    "--schedule-event-bg-hover": "token(colors.surface.cyan.hover)",
-    "--schedule-event-border": "token(colors.surface.cyan.accent)",
-    "--schedule-event-fg": "token(colors.surface.cyan.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.cyan.fg)",
-    "--schedule-event-dot": "token(colors.surface.cyan.accent)"
-  }),
-  gray: css({
-    "--schedule-event-bg": "token(colors.surface.gray)",
-    "--schedule-event-bg-hover": "token(colors.surface.gray.hover)",
-    "--schedule-event-border": "token(colors.surface.gray.accent)",
-    "--schedule-event-fg": "token(colors.surface.gray.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.gray.fg)",
-    "--schedule-event-dot": "token(colors.surface.gray.accent)"
-  }),
-  green: css({
-    "--schedule-event-bg": "token(colors.surface.green)",
-    "--schedule-event-bg-hover": "token(colors.surface.green.hover)",
-    "--schedule-event-border": "token(colors.surface.green.accent)",
-    "--schedule-event-fg": "token(colors.surface.green.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.green.fg)",
-    "--schedule-event-dot": "token(colors.surface.green.accent)"
-  }),
-  orange: css({
-    "--schedule-event-bg": "token(colors.surface.orange)",
-    "--schedule-event-bg-hover": "token(colors.surface.orange.hover)",
-    "--schedule-event-border": "token(colors.surface.orange.accent)",
-    "--schedule-event-fg": "token(colors.surface.orange.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.orange.fg)",
-    "--schedule-event-dot": "token(colors.surface.orange.accent)"
-  }),
-  pink: css({
-    "--schedule-event-bg": "token(colors.surface.pink)",
-    "--schedule-event-bg-hover": "token(colors.surface.pink.hover)",
-    "--schedule-event-border": "token(colors.surface.pink.accent)",
-    "--schedule-event-fg": "token(colors.surface.pink.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.pink.fg)",
-    "--schedule-event-dot": "token(colors.surface.pink.accent)"
-  }),
-  purple: css({
-    "--schedule-event-bg": "token(colors.surface.purple)",
-    "--schedule-event-bg-hover": "token(colors.surface.purple.hover)",
-    "--schedule-event-border": "token(colors.surface.purple.accent)",
-    "--schedule-event-fg": "token(colors.surface.purple.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.purple.fg)",
-    "--schedule-event-dot": "token(colors.surface.purple.accent)"
-  }),
-  red: css({
-    "--schedule-event-bg": "token(colors.surface.red)",
-    "--schedule-event-bg-hover": "token(colors.surface.red.hover)",
-    "--schedule-event-border": "token(colors.surface.red.accent)",
-    "--schedule-event-fg": "token(colors.surface.red.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.red.fg)",
-    "--schedule-event-dot": "token(colors.surface.red.accent)"
-  }),
-  teal: css({
-    "--schedule-event-bg": "token(colors.surface.teal)",
-    "--schedule-event-bg-hover": "token(colors.surface.teal.hover)",
-    "--schedule-event-border": "token(colors.surface.teal.accent)",
-    "--schedule-event-fg": "token(colors.surface.teal.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.teal.fg)",
-    "--schedule-event-dot": "token(colors.surface.teal.accent)"
-  }),
-  yellow: css({
-    "--schedule-event-bg": "token(colors.surface.yellow)",
-    "--schedule-event-bg-hover": "token(colors.surface.yellow.hover)",
-    "--schedule-event-border": "token(colors.surface.yellow.accent)",
-    "--schedule-event-fg": "token(colors.surface.yellow.fg)",
-    "--schedule-event-fg-base": "token(colors.surface.yellow.fg)",
-    "--schedule-event-dot": "token(colors.surface.yellow.accent)"
-  })
-};
-function getCategory(categories, event) {
-  return categories.find((category) => category.label === event.category) ?? (event.category != null ? { label: event.category, color: categoryFallback.color } : categoryFallback);
+function createCategoryMap(categories) {
+  const categoryMap = /* @__PURE__ */ new Map();
+  categories.forEach((category) => {
+    if (!categoryMap.has(category.label)) {
+      categoryMap.set(category.label, category);
+    }
+  });
+  return categoryMap;
 }
-function eventColorClassName(color) {
-  return colorStyles[color ?? categoryFallback.color];
+function getCategory(categoryMap, event) {
+  return (event.category == null ? void 0 : categoryMap.get(event.category)) ?? (event.category != null ? { label: event.category, color: categoryFallback.color } : categoryFallback);
 }
 function formatDate(date) {
   return plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
@@ -324,7 +427,7 @@ function formatTimezoneAbbreviation(date, timezoneID) {
   );
   return parts.find((part) => part.type === "timeZoneName")?.value ?? timezoneID;
 }
-function formatHour(hour, _timezoneID) {
+function formatHour(hour) {
   return Temporal.PlainTime.from({ hour }).toLocaleString(void 0, {
     hour: "numeric"
   });
@@ -338,8 +441,8 @@ function getEventTimeLabel(event, timezoneID) {
 function getEventStartTimeLabel(event, timezoneID) {
   return isDayEvent(event) ? null : formatTime(event.start, timezoneID);
 }
-function getEventAccessibleLabel(event, categories, timezoneID) {
-  const category = getCategory(categories, event);
+function getEventAccessibleLabel(event, categoryMap, timezoneID) {
+  const category = getCategory(categoryMap, event);
   return `${event.title}, ${category.label}, ${getEventTimeLabel(event, timezoneID)}`;
 }
 function getMinutesSinceStartOfDay(instant, timezoneID) {
@@ -359,19 +462,16 @@ function CalendarEventPill({
   event,
   isPast = false
 }) {
-  const { categories, timezoneID } = useScheduleContext();
-  const category = getCategory(categories, event);
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const category = getCategory(categoryMap, event);
+  const classes = scheduleEventRecipe({ color: category.color, isPast });
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cx$1(
-        styles.event,
-        eventColorClassName(category.color),
-        isPast && styles.eventPast
-      ),
+      className: classes.event,
       "data-state": isPast ? "past" : void 0,
       "data-testid": `schedule-event-${event.id}`,
-      children: /* @__PURE__ */ jsx("span", { className: styles.eventTitle, children: isDayEvent(event) ? event.title : getEventAccessibleLabel(event, categories, timezoneID) })
+      children: /* @__PURE__ */ jsx("span", { className: classes.title, children: isDayEvent(event) ? event.title : getEventAccessibleLabel(event, categoryMap, timezoneID) })
     }
   );
 }
@@ -379,23 +479,23 @@ function CalendarMonthEventPill({
   event,
   isPast = false
 }) {
-  const { categories, timezoneID } = useScheduleContext();
-  const category = getCategory(categories, event);
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const category = getCategory(categoryMap, event);
   const startTimeLabel = getEventStartTimeLabel(event, timezoneID);
+  const classes = scheduleEventRecipe({
+    color: category.color,
+    isPast,
+    isFullWidth: true
+  });
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: cx$1(
-        styles.event,
-        css({ w: "full" }),
-        eventColorClassName(category.color),
-        isPast && styles.eventPast
-      ),
+      className: classes.event,
       "data-state": isPast ? "past" : void 0,
       "data-testid": `schedule-event-${event.id}`,
       children: [
-        startTimeLabel != null ? /* @__PURE__ */ jsx("span", { className: styles.eventTime, children: startTimeLabel }) : null,
-        /* @__PURE__ */ jsx("span", { className: styles.eventTitle, children: event.title })
+        startTimeLabel != null ? /* @__PURE__ */ jsx("span", { className: classes.time, children: startTimeLabel }) : null,
+        /* @__PURE__ */ jsx("span", { className: classes.title, children: event.title })
       ]
     }
   );
@@ -408,9 +508,16 @@ function ScheduleFrame({
   const { isLoading, plugins } = useScheduleContext();
   const initialHeader = {
     startContent: null,
-    centerContent: /* @__PURE__ */ jsxs("span", { className: styles.headerTitleContent, children: [
+    centerContent: /* @__PURE__ */ jsxs("span", { className: scheduleClasses.headerTitleContent, children: [
       /* @__PURE__ */ jsx(Heading, { level: 2, children: title }),
-      isLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading events", size: "sm" }) : null
+      isLoading ? /* @__PURE__ */ jsx(
+        Spinner,
+        {
+          "aria-label": "Loading events",
+          className: scheduleClasses.headerTitleSpinner,
+          size: "sm"
+        }
+      ) : null
     ] }),
     endContent: null
   };
@@ -422,11 +529,11 @@ function ScheduleFrame({
     ) ?? content,
     initialHeader
   );
-  return /* @__PURE__ */ jsxs("section", { "aria-label": titleLabel, className: styles.frame, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsx("div", { className: styles.headerSlotStart, children: header.startContent }),
-      /* @__PURE__ */ jsx("div", { className: styles.headerSlotCenter, children: header.centerContent }),
-      /* @__PURE__ */ jsx("div", { className: styles.headerSlotEnd, children: header.endContent })
+  return /* @__PURE__ */ jsxs("section", { "aria-label": titleLabel, className: scheduleClasses.frame, children: [
+    /* @__PURE__ */ jsxs("div", { className: scheduleClasses.header, children: [
+      /* @__PURE__ */ jsx("div", { className: scheduleClasses.headerSlotStart, children: header.startContent }),
+      /* @__PURE__ */ jsx("div", { className: scheduleClasses.headerSlotCenter, children: header.centerContent }),
+      /* @__PURE__ */ jsx("div", { className: scheduleClasses.headerSlotEnd, children: header.endContent })
     ] }),
     children
   ] });
@@ -463,7 +570,7 @@ function subscribe(listener) {
 function useCurrentTime() {
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
-var styles2 = {
+var styles = {
   grid: css({
     display: "grid",
     gridTemplateColumns: "72px 1fr",
@@ -569,41 +676,6 @@ var styles2 = {
   lastRow: css({
     borderBlockEndWidth: 0
   }),
-  timedEvent: css({
-    position: "absolute",
-    display: "flex",
-    flexDirection: "column",
-    gap: 0,
-    minH: "9",
-    minW: 0,
-    overflow: "hidden",
-    borderWidth: "default",
-    borderStyle: "solid",
-    borderColor: "var(--schedule-event-border)",
-    borderRadius: "sm",
-    px: "1",
-    py: "0.5",
-    fontSize: "xs",
-    lineHeight: "tight",
-    bg: "var(--schedule-event-bg)",
-    color: "var(--schedule-event-fg)",
-    _hover: {
-      bg: "var(--schedule-event-bg-hover)"
-    }
-  }),
-  timedEventTitle: css({
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    fontWeight: "bold"
-  }),
-  timedEventTime: css({
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    flexShrink: 0,
-    fontWeight: "normal"
-  }),
   events: css({
     display: "flex",
     flexDirection: "column",
@@ -714,7 +786,7 @@ function getTimedEventStyle({
   };
 }
 function getCellName({
-  categories,
+  categoryMap,
   date,
   events,
   hourLabel,
@@ -722,7 +794,7 @@ function getCellName({
 }) {
   const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
   const eventLabels = events.map(
-    (event) => getEventAccessibleLabel(event, categories, timezoneID)
+    (event) => getEventAccessibleLabel(event, categoryMap, timezoneID)
   );
   return eventLabels.length > 0 ? `${dateLabel} ${hourLabel}. ${eventLabels.join(". ")}` : `${dateLabel} ${hourLabel}`;
 }
@@ -732,7 +804,7 @@ function TimeGridView({
   maxHour = 24,
   minHour = 0
 }) {
-  const { categories, events, highlightDate, timezoneID } = useScheduleContext();
+  const { categoryMap, events, highlightDate, timezoneID } = useScheduleContext();
   const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
   const normalizedMaxHour = Math.max(
     normalizedMinHour + 1,
@@ -756,34 +828,46 @@ function TimeGridView({
     height: normalizedHourHeight,
     minHeight: normalizedHourHeight
   };
+  const timedEventLayoutsByDay = days.map(
+    (day) => getTimedEventLayouts({
+      day,
+      events: events.filter(
+        (event) => !isDayEvent(event) && eventOccursOnDate(event, day, timezoneID)
+      ),
+      hourHeight: normalizedHourHeight,
+      maxHour: normalizedMaxHour,
+      minHour: normalizedMinHour,
+      timezoneID
+    })
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "aria-label": "Schedule time grid",
       "aria-readonly": "true",
-      className: cx$1(styles.surface, styles2.grid),
+      className: cx(scheduleClasses.surface, styles.grid),
       role: "grid",
       style: gridStyle,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles2.rowContents, role: "row", children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.rowContents, role: "row", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               "aria-colindex": 1,
               "aria-label": "Time",
-              className: styles2.corner,
+              className: styles.corner,
               role: "columnheader"
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: styles2.header, children: days.map((day, index) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: styles.header, children: days.map((day, index) => /* @__PURE__ */ jsx(
             "div",
             {
               "aria-colindex": index + 2,
               "aria-current": plainDateIsEqual(day, highlightPlainDate) ? "date" : void 0,
               "aria-label": plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY),
-              className: cx$1(
-                styles2.dayHeader,
-                index === days.length - 1 && styles2.lastColumn
+              className: cx(
+                styles.dayHeader,
+                index === days.length - 1 && styles.lastColumn
               ),
               role: "columnheader",
               children: /* @__PURE__ */ jsx(
@@ -793,14 +877,14 @@ function TimeGridView({
                   color: "secondary",
                   level: 4,
                   textWrap: "nowrap",
-                  children: /* @__PURE__ */ jsxs("span", { className: styles2.dayHeaderContent, children: [
+                  children: /* @__PURE__ */ jsxs("span", { className: styles.dayHeaderContent, children: [
                     plainDateFormat(day, { weekday: "short" }),
                     /* @__PURE__ */ jsx(
                       "span",
                       {
-                        className: cx$1(
-                          styles2.dayHeaderDayNumber,
-                          plainDateIsEqual(day, highlightPlainDate) && styles2.dayHeaderCurrent
+                        className: cx(
+                          styles.dayHeaderDayNumber,
+                          plainDateIsEqual(day, highlightPlainDate) && styles.dayHeaderCurrent
                         ),
                         children: day.day
                       }
@@ -812,18 +896,18 @@ function TimeGridView({
             day.toString()
           )) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles2.rowContents, role: "row", children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.rowContents, role: "row", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               "aria-colindex": 1,
               "aria-label": `${timezoneLabel} all day`,
-              className: styles2.allDayLabel,
+              className: styles.allDayLabel,
               role: "rowheader",
               children: /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", weight: "bold", children: timezoneLabel })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: styles2.allDayRow, children: days.map((day, index) => {
+          /* @__PURE__ */ jsx("div", { className: styles.allDayRow, children: days.map((day, index) => {
             const dayEvents = events.filter(
               (event) => isDayEvent(event) && eventOccursOnDate(event, day, timezoneID)
             );
@@ -832,18 +916,18 @@ function TimeGridView({
               {
                 "aria-colindex": index + 2,
                 "aria-label": getCellName({
-                  categories,
+                  categoryMap,
                   date: day,
                   events: dayEvents,
                   hourLabel: "all day",
                   timezoneID
                 }),
-                className: cx$1(
-                  styles2.dayCell,
-                  index === days.length - 1 && styles2.lastColumn
+                className: cx(
+                  styles.dayCell,
+                  index === days.length - 1 && styles.lastColumn
                 ),
                 role: "gridcell",
-                children: /* @__PURE__ */ jsx("div", { className: styles2.events, children: dayEvents.map((event) => /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx("div", { className: styles.events, children: dayEvents.map((event) => /* @__PURE__ */ jsx(
                   CalendarEventPill,
                   {
                     event,
@@ -859,31 +943,22 @@ function TimeGridView({
         hours.map((hour) => {
           const hourLabel = formatHour(hour);
           const isLastHour = hour === hours[hours.length - 1];
-          return /* @__PURE__ */ jsxs("div", { className: styles2.rowContents, role: "row", children: [
+          return /* @__PURE__ */ jsxs("div", { className: styles.rowContents, role: "row", children: [
             /* @__PURE__ */ jsx(
               "div",
               {
                 "aria-colindex": 1,
-                className: cx$1(styles2.timeLabel, isLastHour && styles2.lastRow),
+                className: cx(styles.timeLabel, isLastHour && styles.lastRow),
                 role: "rowheader",
                 style: hourStyle,
                 children: hourLabel
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: styles2.timeRow, children: days.map((day, index) => {
+            /* @__PURE__ */ jsx("div", { className: styles.timeRow, children: days.map((day, index) => {
               const hourEvents = events.filter(
                 (event) => eventOverlapsHour(event, day, hour, timezoneID)
               );
-              const visibleTimedEventLayouts = getTimedEventLayouts({
-                day,
-                events: events.filter(
-                  (event) => !isDayEvent(event) && eventOccursOnDate(event, day, timezoneID)
-                ),
-                hourHeight: normalizedHourHeight,
-                maxHour: normalizedMaxHour,
-                minHour: normalizedMinHour,
-                timezoneID
-              }).filter((layout) => layout.startHour === hour);
+              const visibleTimedEventLayouts = timedEventLayoutsByDay[index].filter((layout) => layout.startHour === hour);
               const currentTimeTop = getCurrentTimeTopForHour({
                 currentTime: currentTime2,
                 day,
@@ -897,16 +972,16 @@ function TimeGridView({
                 {
                   "aria-colindex": index + 2,
                   "aria-label": getCellName({
-                    categories,
+                    categoryMap,
                     date: day,
                     events: hourEvents,
                     hourLabel,
                     timezoneID
                   }),
-                  className: cx$1(
-                    styles2.hourCell,
-                    index === days.length - 1 && styles2.lastColumn,
-                    isLastHour && styles2.lastRow
+                  className: cx(
+                    styles.hourCell,
+                    index === days.length - 1 && styles.lastColumn,
+                    isLastHour && styles.lastRow
                   ),
                   role: "gridcell",
                   style: hourStyle,
@@ -915,28 +990,34 @@ function TimeGridView({
                       "div",
                       {
                         "aria-hidden": "true",
-                        className: styles2.currentTimeLine,
+                        className: styles.currentTimeLine,
                         "data-testid": "schedule-current-time-line",
                         style: { top: `${currentTimeTop}%` }
                       }
                     ) : null,
-                    /* @__PURE__ */ jsx("div", { className: styles2.events, children: visibleTimedEventLayouts.map((layout) => {
+                    /* @__PURE__ */ jsx("div", { className: styles.events, children: visibleTimedEventLayouts.map((layout) => {
                       const { event } = layout;
-                      const category = getCategory(categories, event);
+                      const category = getCategory(categoryMap, event);
+                      const isPast = isEventInPast(
+                        event,
+                        currentTime2,
+                        timezoneID
+                      );
+                      const eventClasses = scheduleEventRecipe({
+                        layout: "block",
+                        color: category.color,
+                        isPast
+                      });
                       return /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: cx$1(
-                            styles2.timedEvent,
-                            eventColorClassName(category.color),
-                            isEventInPast(event, currentTime2, timezoneID) && styles.eventPast
-                          ),
-                          "data-state": isEventInPast(event, currentTime2, timezoneID) ? "past" : void 0,
+                          className: eventClasses.event,
+                          "data-state": isPast ? "past" : void 0,
                           "data-testid": `schedule-event-${event.id}`,
                           style: getTimedEventStyle(layout),
                           children: [
-                            /* @__PURE__ */ jsx("span", { className: styles2.timedEventTitle, children: event.title }),
-                            /* @__PURE__ */ jsx("span", { className: styles2.timedEventTime, children: getEventTimeLabel(event, timezoneID) })
+                            /* @__PURE__ */ jsx("span", { className: eventClasses.title, children: event.title }),
+                            /* @__PURE__ */ jsx("span", { className: eventClasses.time, children: getEventTimeLabel(event, timezoneID) })
                           ]
                         },
                         event.id
@@ -979,15 +1060,15 @@ function getCurrentTimeTopForHour({
   return currentMinute % 60 / 60 * 100;
 }
 
-// src/components/Schedule/zonedDateTime.ts
-function createZonedDateTime(date, timezoneID) {
-  return zonedDateTimeFromInstant(date, timezoneID);
+// src/components/Schedule/scheduleZonedInstant.ts
+function createScheduleZonedInstant(date, timezoneID) {
+  return scheduleZonedInstantFromInstant(date, timezoneID);
 }
-function zonedDateTimeFromInstant(instant, timezoneID) {
+function scheduleZonedInstantFromInstant(instant, timezoneID) {
   return {
     addDays: (days) => {
       const date = plainDateFromInstant(instant, timezoneID).add({ days });
-      return zonedDateTimeFromInstant(
+      return scheduleZonedInstantFromInstant(
         plainDateToInstant(date, timezoneID),
         timezoneID
       );
@@ -995,7 +1076,7 @@ function zonedDateTimeFromInstant(instant, timezoneID) {
     instant,
     startOfDay: () => {
       const date = plainDateFromInstant(instant, timezoneID);
-      return zonedDateTimeFromInstant(
+      return scheduleZonedInstantFromInstant(
         plainDateToInstant(date, timezoneID),
         timezoneID
       );
@@ -1004,10 +1085,10 @@ function zonedDateTimeFromInstant(instant, timezoneID) {
     toPlainDate: () => plainDateFromInstant(instant, timezoneID)
   };
 }
-function scheduleRangeToZonedDateTimeRange(range, timezoneID) {
+function scheduleRangeToScheduleZonedInstantRange(range, timezoneID) {
   return [
-    zonedDateTimeFromInstant(range.start, timezoneID),
-    zonedDateTimeFromInstant(range.end, timezoneID)
+    scheduleZonedInstantFromInstant(range.start, timezoneID),
+    scheduleZonedInstantFromInstant(range.end, timezoneID)
   ];
 }
 function ScheduleDayView({
@@ -1032,7 +1113,7 @@ function createScheduleDayView({
 } = {}) {
   return {
     component: ScheduleDayView,
-    getDateRange: (date) => scheduleRangeToZonedDateTimeRange(
+    getDateRange: (date) => scheduleRangeToScheduleZonedInstantRange(
       getScheduleRangeFromDates({
         endDate: date.toPlainDate().add({ days: 1 }),
         startDate: date.toPlainDate(),
@@ -1051,7 +1132,7 @@ function createScheduleDayView({
     options: { hourHeight, maxHour, minHour }
   };
 }
-var styles3 = {
+var styles2 = {
   list: css({
     display: "flex",
     flexDirection: "column"
@@ -1133,24 +1214,21 @@ function ListEvent({
   event,
   isPast
 }) {
-  const { categories, timezoneID } = useScheduleContext();
-  const category = getCategory(categories, event);
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const category = getCategory(categoryMap, event);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$1(styles3.eventRow, isPast && styles3.eventPast),
+      className: cx(styles2.eventRow, isPast && styles2.eventPast),
       "data-state": isPast ? "past" : void 0,
       children: [
-        /* @__PURE__ */ jsx(Text, { className: styles3.eventTime, color: "secondary", type: "supporting", children: isDayEvent(event) ? "All day" : getEventTimeLabel(event, timezoneID) }),
-        /* @__PURE__ */ jsxs("div", { className: styles3.eventContent, children: [
+        /* @__PURE__ */ jsx(Text, { className: styles2.eventTime, color: "secondary", type: "supporting", children: isDayEvent(event) ? "All day" : getEventTimeLabel(event, timezoneID) }),
+        /* @__PURE__ */ jsxs("div", { className: styles2.eventContent, children: [
           /* @__PURE__ */ jsx(Tooltip, { content: category.label, hasHoverIndication: false, children: /* @__PURE__ */ jsx(
             "span",
             {
               "aria-label": category.label,
-              className: cx$1(
-                styles.eventDot,
-                eventColorClassName(category.color)
-              ),
+              className: scheduleEventRecipe({ color: category.color }).dot,
               role: "img"
             }
           ) }),
@@ -1160,7 +1238,7 @@ function ListEvent({
     }
   );
 }
-function ScheduleListView(_props) {
+function ScheduleListView() {
   const { events, highlightDate, isLoading, range, timezoneID } = useScheduleContext();
   const days = enumerateDates(range.startDate, range.endDate);
   const currentTime2 = useCurrentTime();
@@ -1183,15 +1261,15 @@ function ScheduleListView(_props) {
       isVisible: dayEvents.length > 0 || isCurrentDay || isBaseDay
     };
   }).filter((dayRecord) => dayRecord.isVisible);
-  return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsx("div", { className: cx$1(styles.surface, styles3.list), children: visibleDays.map(
+  return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsx("div", { className: cx(scheduleClasses.surface, styles2.list), children: visibleDays.map(
     ({ day, dayEvents, isCurrentDay, isHighlightedDay }, index) => {
       const fullDate = plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY);
       return /* @__PURE__ */ jsxs(
         "section",
         {
-          className: cx$1(
-            styles3.day,
-            index === visibleDays.length - 1 && styles3.dayLast
+          className: cx(
+            styles2.day,
+            index === visibleDays.length - 1 && styles2.dayLast
           ),
           children: [
             /* @__PURE__ */ jsxs(
@@ -1199,23 +1277,23 @@ function ScheduleListView(_props) {
               {
                 "aria-current": isHighlightedDay ? "date" : void 0,
                 "aria-label": fullDate,
-                className: styles3.dayHeading,
+                className: styles2.dayHeading,
                 children: [
                   /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: cx$1(
-                        styles3.dayNumber,
-                        isHighlightedDay && styles3.dayNumberCurrent
+                      className: cx(
+                        styles2.dayNumber,
+                        isHighlightedDay && styles2.dayNumberCurrent
                       ),
                       children: day.day
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: styles3.dayWeekday, children: plainDateFormat(day, { weekday: "short" }) })
+                  /* @__PURE__ */ jsx("span", { className: styles2.dayWeekday, children: plainDateFormat(day, { weekday: "short" }) })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: styles3.events, children: renderListRows({
+            /* @__PURE__ */ jsx("div", { className: styles2.events, children: renderListRows({
               currentTime: currentTime2,
               events: dayEvents,
               isShowingCurrentTime: isCurrentDay && !isLoading,
@@ -1249,7 +1327,7 @@ function renderListRows({
     "div",
     {
       "aria-hidden": "true",
-      className: styles3.nowRow,
+      className: styles2.nowRow,
       "data-testid": "schedule-list-current-time"
     },
     "current-time"
@@ -1285,7 +1363,7 @@ function createScheduleListView({
     options: { days }
   };
 }
-var styles4 = {
+var styles3 = {
   grid: css({
     display: "grid",
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
@@ -1348,14 +1426,14 @@ var styles4 = {
   monthCellGrid: css({
     display: "grid",
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-    gridAutoRows: "128px"
+    gridAutoRows: "var(--schedule-month-row-height)"
   }),
   monthEventOverlay: css({
     position: "absolute",
     inset: 0,
     display: "grid",
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-    gridAutoRows: "128px",
+    gridAutoRows: "var(--schedule-month-row-height)",
     pointerEvents: "none"
   }),
   monthEventSpan: css({
@@ -1364,6 +1442,46 @@ var styles4 = {
     mx: "0.5",
     pointerEvents: "auto",
     zIndex: 1
+  }),
+  monthSeeMoreSpan: css({
+    alignSelf: "start",
+    minW: 0,
+    mx: "0.5",
+    pointerEvents: "auto",
+    zIndex: 2
+  }),
+  monthSeeMoreButton: css({
+    display: "inline-flex",
+    alignItems: "center",
+    maxW: "full",
+    h: "5",
+    px: "1",
+    borderRadius: "sm",
+    color: "primary",
+    cursor: "pointer",
+    fontSize: "xs",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    _hover: {
+      bg: "bg.muted"
+    }
+  }),
+  monthPopoverContent: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "1",
+    p: "3"
+  }),
+  monthPopoverEvents: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: 0,
+    m: 0,
+    p: 0,
+    listStyleType: "none"
   })
 };
 var weekdays = [
@@ -1375,16 +1493,26 @@ var weekdays = [
   { label: "Friday", shortLabel: "Fri" },
   { label: "Saturday", shortLabel: "Sat" }
 ];
-function getMonthDays(date, weekCount) {
+function getWeekdays(weekStartsOn) {
+  return Array.from(
+    { length: 7 },
+    (_, index) => weekdays[(index + weekStartsOn) % 7]
+  );
+}
+function setStartOfWeek(date, weekStartsOn) {
+  const daysSinceWeekStart = (plainDateDayOfWeek(date) - weekStartsOn + 7) % 7;
+  return date.add({ days: -daysSinceWeekStart });
+}
+function getMonthDays(date, weekCount, weekStartsOn) {
   const firstOfMonth = date.with({ day: 1 });
-  const firstVisibleDay = plainDateSetStartOfWeek(firstOfMonth);
+  const firstVisibleDay = setStartOfWeek(firstOfMonth, weekStartsOn);
   return Array.from(
     { length: weekCount * 7 },
     (_, index) => firstVisibleDay.add({ days: index })
   );
 }
-function getVisibleMonthRange(date, month, weekCount) {
-  const firstVisible = plainDateSetStartOfWeek(month.with({ day: 1 }));
+function getVisibleMonthRange(date, month, weekCount, weekStartsOn) {
+  const firstVisible = setStartOfWeek(month.with({ day: 1 }), weekStartsOn);
   const end = firstVisible.add({ days: weekCount * 7 });
   const currentDate = date.toPlainDate();
   return [
@@ -1392,7 +1520,11 @@ function getVisibleMonthRange(date, month, weekCount) {
     date.startOfDay().addDays(currentDate.until(end).days)
   ];
 }
-var MAX_MONTH_EVENT_LEVELS = 4;
+var DEFAULT_MONTH_ROW_HEIGHT = 128;
+var MONTH_EVENT_TOP_OFFSET = 30;
+var MONTH_EVENT_LEVEL_HEIGHT = 22;
+var MONTH_EVENT_HEIGHT = 20;
+var MONTH_EVENT_BOTTOM_PADDING = 4;
 function getEventDateSpan(event, timezoneID) {
   if (isDayEvent(event)) {
     return [event.start, event.end];
@@ -1402,6 +1534,47 @@ function getEventDateSpan(event, timezoneID) {
     plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID)
   ];
 }
+function getEventVisibleDateIndexes({
+  event,
+  firstDay,
+  lastDay,
+  timezoneID
+}) {
+  const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
+  if (plainDateIsBefore(eventEnd, firstDay) || plainDateIsAfter(eventStart, lastDay)) {
+    return null;
+  }
+  const startIndex = plainDateIsBefore(eventStart, firstDay) ? 0 : firstDay.until(eventStart).days;
+  const endIndex = plainDateIsAfter(eventEnd, lastDay) ? firstDay.until(lastDay).days : firstDay.until(eventEnd).days;
+  return [startIndex, endIndex];
+}
+function getEventsByDate(events, days, timezoneID) {
+  const eventsByDate = /* @__PURE__ */ new Map();
+  if (days.length === 0) {
+    return eventsByDate;
+  }
+  const firstDay = days[0];
+  const lastDay = days[days.length - 1];
+  days.forEach((day) => {
+    eventsByDate.set(day.toString(), []);
+  });
+  events.forEach((event) => {
+    const indexes = getEventVisibleDateIndexes({
+      event,
+      firstDay,
+      lastDay,
+      timezoneID
+    });
+    if (indexes == null) {
+      return;
+    }
+    const [startIndex, endIndex] = indexes;
+    for (let index = startIndex; index <= endIndex; index += 1) {
+      eventsByDate.get(days[index].toString())?.push(event);
+    }
+  });
+  return eventsByDate;
+}
 function getAvailableLevel(levels, columnStart) {
   const level = levels.findIndex((columnEnd) => columnStart > columnEnd);
   return level >= 0 ? level : levels.length;
@@ -1409,18 +1582,22 @@ function getAvailableLevel(levels, columnStart) {
 function getMonthEventSegments(events, days, timezoneID) {
   const segments = [];
   const levelsByWeek = [];
+  if (days.length === 0) {
+    return segments;
+  }
   const firstDay = days[0];
   const lastDay = days[days.length - 1];
   const monthEvents = events.map((event) => {
-    const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
-    const startIndex = days.findIndex(
-      (day) => !plainDateIsBefore(day, eventStart)
-    );
-    const endIndexFromRight = [...days].reverse().findIndex((day) => !plainDateIsAfter(day, eventEnd));
-    if (startIndex < 0 || endIndexFromRight < 0) {
+    const indexes = getEventVisibleDateIndexes({
+      event,
+      firstDay,
+      lastDay,
+      timezoneID
+    });
+    if (indexes == null) {
       return null;
     }
-    const endIndex = days.length - 1 - endIndexFromRight;
+    const [startIndex, endIndex] = indexes;
     return {
       endIndex,
       event,
@@ -1444,19 +1621,21 @@ function getMonthEventSegments(events, days, timezoneID) {
     return a.event.title.localeCompare(b.event.title);
   });
   monthEvents.forEach(({ endIndex, event, startIndex }) => {
-    const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
-    if (plainDateIsBefore(eventEnd, firstDay) || plainDateIsAfter(eventStart, lastDay)) {
-      return;
-    }
     for (let week = Math.floor(startIndex / 7); week <= Math.floor(endIndex / 7); week += 1) {
       const columnStart = week === Math.floor(startIndex / 7) ? startIndex % 7 : 0;
       const columnEnd = week === Math.floor(endIndex / 7) ? endIndex % 7 : 6;
       const weekLevels = levelsByWeek[week] ?? (levelsByWeek[week] = []);
       const level = getAvailableLevel(weekLevels, columnStart);
-      if (level < MAX_MONTH_EVENT_LEVELS) {
-        weekLevels[level] = columnEnd;
-        segments.push({ columnEnd, columnStart, event, level, week });
-      }
+      weekLevels[level] = columnEnd;
+      segments.push({
+        columnEnd,
+        columnStart,
+        endIndex,
+        event,
+        level,
+        startIndex,
+        week
+      });
     }
   });
   return segments;
@@ -1470,16 +1649,82 @@ function getMonthEventSegmentStyle({
   return {
     gridColumn: `${columnStart + 1} / ${columnEnd + 2}`,
     gridRow: `${week + 1}`,
-    marginBlockStart: `${30 + level * 29}px`
+    marginBlockStart: `${MONTH_EVENT_TOP_OFFSET + level * MONTH_EVENT_LEVEL_HEIGHT}px`
   };
 }
+function getMonthEventLevelCount(monthRowHeight) {
+  const availableHeight = monthRowHeight - MONTH_EVENT_TOP_OFFSET - MONTH_EVENT_HEIGHT - MONTH_EVENT_BOTTOM_PADDING;
+  return Math.max(
+    1,
+    Math.floor(availableHeight / MONTH_EVENT_LEVEL_HEIGHT) + 1
+  );
+}
+function getMonthSeeMoreStyle({
+  dayIndex,
+  level
+}) {
+  return {
+    gridColumn: `${dayIndex % 7 + 1} / ${dayIndex % 7 + 2}`,
+    gridRow: `${Math.floor(dayIndex / 7) + 1}`,
+    marginBlockStart: `${MONTH_EVENT_TOP_OFFSET + level * MONTH_EVENT_LEVEL_HEIGHT}px`
+  };
+}
+function segmentCoversDay(segment, dayIndex) {
+  return segment.startIndex <= dayIndex && segment.endIndex >= dayIndex;
+}
+function shouldReserveSeeMoreLevel({
+  dayEvents,
+  levelCount
+}) {
+  return dayEvents.length > levelCount;
+}
+function isSegmentVisible({
+  dayEventsByIndex,
+  levelCount,
+  segment
+}) {
+  for (let index = segment.startIndex; index <= segment.endIndex; index += 1) {
+    const visibleLevelCount = shouldReserveSeeMoreLevel({
+      dayEvents: dayEventsByIndex[index] ?? [],
+      levelCount
+    }) ? levelCount - 1 : levelCount;
+    if (segment.level >= visibleLevelCount) {
+      return false;
+    }
+  }
+  return true;
+}
+function getHiddenEventsByDate({
+  dayEventsByIndex,
+  days,
+  segments,
+  visibleSegments
+}) {
+  const hiddenEventsByDate = /* @__PURE__ */ new Map();
+  days.forEach((day, dayIndex) => {
+    const allSegmentEventIds = new Set(
+      segments.filter((segment) => segmentCoversDay(segment, dayIndex)).map((segment) => segment.event.id)
+    );
+    const visibleSegmentEventIds = new Set(
+      visibleSegments.filter((segment) => segmentCoversDay(segment, dayIndex)).map((segment) => segment.event.id)
+    );
+    const hiddenEvents = (dayEventsByIndex[dayIndex] ?? []).filter(
+      (event) => allSegmentEventIds.has(event.id) && !visibleSegmentEventIds.has(event.id)
+    );
+    if (hiddenEvents.length > 0) {
+      hiddenEventsByDate.set(day.toString(), hiddenEvents);
+    }
+  });
+  return hiddenEventsByDate;
+}
 function getGridCellName({
+  categoryMap,
   date,
   events,
   timezoneID
 }) {
   const eventLabels = events.map(
-    (event) => getEventAccessibleLabel(event, [], timezoneID)
+    (event) => getEventAccessibleLabel(event, categoryMap, timezoneID)
   );
   const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
   return eventLabels.length > 0 ? `${dateLabel}. ${eventLabels.join(". ")}` : dateLabel;
@@ -1487,36 +1732,61 @@ function getGridCellName({
 function ScheduleMonthlyView({
   options
 }) {
-  const { events, highlightDate, timezoneID, viewDate } = useScheduleContext();
+  const { categoryMap, events, highlightDate, timezoneID, viewDate } = useScheduleContext();
   const currentTime2 = useCurrentTime();
   const month = viewDate.toPlainDate();
   const title = formatMonthTitle(month);
-  const days = getMonthDays(month, options.weekCount ?? 6);
+  const monthRowHeight = Math.max(
+    64,
+    Math.floor(options.monthRowHeight ?? DEFAULT_MONTH_ROW_HEIGHT)
+  );
+  const weekStartsOn = options.weekStartsOn ?? 0;
+  const days = getMonthDays(month, options.weekCount ?? 6, weekStartsOn);
   const eventSegments = getMonthEventSegments(events, days, timezoneID);
+  const eventsByDate = getEventsByDate(events, days, timezoneID);
+  const dayEventsByIndex = days.map(
+    (day) => eventsByDate.get(day.toString()) ?? []
+  );
+  const monthEventLevelCount = getMonthEventLevelCount(monthRowHeight);
+  const visibleEventSegments = eventSegments.filter(
+    (segment) => isSegmentVisible({
+      dayEventsByIndex,
+      levelCount: monthEventLevelCount,
+      segment
+    })
+  );
+  const hiddenEventsByDate = getHiddenEventsByDate({
+    dayEventsByIndex,
+    days,
+    segments: eventSegments,
+    visibleSegments: visibleEventSegments
+  });
   const today = highlightDate.toPlainDate();
+  const visibleWeekdays = getWeekdays(weekStartsOn);
+  const monthGridStyle = {
+    "--schedule-month-row-height": `${monthRowHeight}px`
+  };
   return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsxs(
     "div",
     {
       "aria-label": title,
-      className: cx$1(styles.surface, styles4.grid),
+      className: cx(scheduleClasses.surface, styles3.grid),
       role: "grid",
       children: [
-        weekdays.map((weekday, index) => /* @__PURE__ */ jsx(
+        visibleWeekdays.map((weekday, index) => /* @__PURE__ */ jsx(
           "div",
           {
             "aria-colindex": index + 1,
             "aria-label": weekday.label,
-            className: styles4.weekday,
+            className: styles3.weekday,
             role: "columnheader",
             children: /* @__PURE__ */ jsx(Heading, { color: "secondary", level: 4, children: weekday.shortLabel })
           },
           weekday.label
         )),
-        /* @__PURE__ */ jsxs("div", { className: styles4.monthSurface, children: [
-          /* @__PURE__ */ jsx("div", { className: styles4.monthCellGrid, children: days.map((day, index) => {
-            const dayEvents = events.filter(
-              (event) => eventOccursOnDate(event, day, timezoneID)
-            );
+        /* @__PURE__ */ jsxs("div", { className: styles3.monthSurface, children: [
+          /* @__PURE__ */ jsx("div", { className: styles3.monthCellGrid, style: monthGridStyle, children: days.map((day, index) => {
+            const dayEvents = eventsByDate.get(day.toString()) ?? [];
             const isCurrentMonth = day.month === month.month && day.year === month.year;
             const isLastColumn = index % 7 === 6;
             const isLastRow = index >= days.length - 7;
@@ -1525,23 +1795,24 @@ function ScheduleMonthlyView({
               {
                 "aria-current": plainDateIsEqual(day, today) ? "date" : void 0,
                 "aria-label": getGridCellName({
+                  categoryMap,
                   date: day,
                   events: dayEvents,
                   timezoneID
                 }),
-                className: cx$1(
-                  styles4.cell,
-                  isLastColumn ? styles4.lastColumn : void 0,
-                  isLastRow ? styles4.lastRow : void 0,
-                  !isCurrentMonth ? styles4.otherMonth : void 0
+                className: cx(
+                  styles3.cell,
+                  isLastColumn ? styles3.lastColumn : void 0,
+                  isLastRow ? styles3.lastRow : void 0,
+                  !isCurrentMonth ? styles3.otherMonth : void 0
                 ),
                 role: "gridcell",
                 children: /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: cx$1(
-                      styles4.dayNumber,
-                      plainDateIsEqual(day, today) ? styles4.today : void 0
+                    className: cx(
+                      styles3.dayNumber,
+                      plainDateIsEqual(day, today) ? styles3.today : void 0
                     ),
                     children: /* @__PURE__ */ jsx(
                       Text,
@@ -1560,68 +1831,159 @@ function ScheduleMonthlyView({
               day.toString()
             );
           }) }),
-          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: styles4.monthEventOverlay, children: eventSegments.map((segment) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: styles4.monthEventSpan,
-              "data-testid": `schedule-event-span-${segment.event.id}`,
-              style: getMonthEventSegmentStyle(segment),
-              children: /* @__PURE__ */ jsx(
-                CalendarMonthEventPill,
+          /* @__PURE__ */ jsxs("div", { className: styles3.monthEventOverlay, style: monthGridStyle, children: [
+            visibleEventSegments.map((segment) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: styles3.monthEventSpan,
+                "data-testid": `schedule-event-span-${segment.event.id}`,
+                style: getMonthEventSegmentStyle(segment),
+                children: /* @__PURE__ */ jsx(
+                  CalendarMonthEventPill,
+                  {
+                    event: segment.event,
+                    isPast: isEventInPast(segment.event, currentTime2, timezoneID)
+                  }
+                )
+              },
+              `${segment.event.id}:${segment.week}:${segment.columnStart}`
+            )),
+            days.map((day, dayIndex) => {
+              const hiddenEvents = hiddenEventsByDate.get(day.toString()) ?? [];
+              if (hiddenEvents.length === 0) {
+                return null;
+              }
+              const dateLabel = plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY);
+              const label = `Show ${hiddenEvents.length} more events for ${dateLabel}`;
+              return /* @__PURE__ */ jsx(
+                "div",
                 {
-                  event: segment.event,
-                  isPast: isEventInPast(segment.event, currentTime2, timezoneID)
-                }
-              )
-            },
-            `${segment.event.id}:${segment.week}:${segment.columnStart}`
-          )) })
+                  className: styles3.monthSeeMoreSpan,
+                  style: getMonthSeeMoreStyle({
+                    dayIndex,
+                    level: Math.max(0, monthEventLevelCount - 1)
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    Popover,
+                    {
+                      content: /* @__PURE__ */ jsxs("div", { className: styles3.monthPopoverContent, children: [
+                        /* @__PURE__ */ jsx(Heading, { level: 4, children: dateLabel }),
+                        /* @__PURE__ */ jsx("ul", { className: styles3.monthPopoverEvents, children: (eventsByDate.get(day.toString()) ?? []).map(
+                          (event) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            CalendarMonthEventPill,
+                            {
+                              event,
+                              isPast: isEventInPast(
+                                event,
+                                currentTime2,
+                                timezoneID
+                              )
+                            }
+                          ) }, event.id)
+                        ) })
+                      ] }),
+                      "data-testid": `schedule-month-see-more-${day.toString()}`,
+                      label,
+                      width: 320,
+                      children: /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          "aria-label": label,
+                          className: styles3.monthSeeMoreButton,
+                          type: "button",
+                          children: [
+                            "+",
+                            hiddenEvents.length,
+                            " more"
+                          ]
+                        }
+                      )
+                    }
+                  )
+                },
+                `${day.toString()}-see-more`
+              );
+            })
+          ] })
         ] })
       ]
     }
   ) });
 }
 function createScheduleMonthlyView({
-  weekCount = 6
+  monthRowHeight = DEFAULT_MONTH_ROW_HEIGHT,
+  weekCount = 6,
+  weekStartsOn = 0
 } = {}) {
   return {
     component: ScheduleMonthlyView,
     getDateRange: (date) => {
       const month = date.toPlainDate();
-      return getVisibleMonthRange(date, month, weekCount);
+      return getVisibleMonthRange(date, month, weekCount, weekStartsOn);
     },
     getNextDateRange: (date) => {
       const nextMonth = date.toPlainDate().with({ day: 1 }).add({ months: 1 });
       return {
         label: "Next month",
-        range: getVisibleMonthRange(date, nextMonth, weekCount)
+        range: getVisibleMonthRange(date, nextMonth, weekCount, weekStartsOn)
       };
     },
     getPreviousDateRange: (date) => {
       const previousMonth = date.toPlainDate().with({ day: 1 }).subtract({ months: 1 });
       return {
         label: "Previous month",
-        range: getVisibleMonthRange(date, previousMonth, weekCount)
+        range: getVisibleMonthRange(
+          date,
+          previousMonth,
+          weekCount,
+          weekStartsOn
+        )
       };
     },
-    options: { weekCount }
+    options: { monthRowHeight, weekCount, weekStartsOn }
   };
 }
-function SchedulePaginationControls() {
-  const {
-    nextDateLabel,
-    onNextDate,
-    onPreviousDate,
-    onToday,
-    previousDateLabel
-  } = useScheduleContext();
+function SchedulePaginationControls({
+  onViewDateChange
+}) {
+  const { view, viewDate } = useScheduleContext();
+  const currentRange = useMemo(
+    () => view.getDateRange(viewDate),
+    [view, viewDate]
+  );
+  const previousDateRange = useMemo(
+    () => view.getPreviousDateRange(viewDate),
+    [view, viewDate]
+  );
+  const nextDateRange = useMemo(
+    () => view.getNextDateRange(viewDate),
+    [view, viewDate]
+  );
+  const shiftToRange = useCallback(
+    (nextRange) => {
+      onViewDateChange(
+        viewDate.instant + nextRange[0].instant - currentRange[0].instant
+      );
+    },
+    [currentRange, onViewDateChange, viewDate]
+  );
+  const onPreviousDate = useCallback(() => {
+    shiftToRange(previousDateRange.range);
+  }, [previousDateRange, shiftToRange]);
+  const onToday = useCallback(() => {
+    onViewDateChange(nowEpochMilliseconds());
+  }, [onViewDateChange]);
+  const onNextDate = useCallback(() => {
+    shiftToRange(nextDateRange.range);
+  }, [nextDateRange, shiftToRange]);
   return /* @__PURE__ */ jsxs(ButtonGroup, { label: "Schedule pagination", size: "sm", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         icon: ChevronLeft,
         isIconOnly: true,
-        label: previousDateLabel,
+        label: previousDateRange.label,
         onClick: onPreviousDate
       }
     ),
@@ -1631,18 +1993,19 @@ function SchedulePaginationControls() {
       {
         icon: ChevronRight,
         isIconOnly: true,
-        label: nextDateLabel,
+        label: nextDateRange.label,
         onClick: onNextDate
       }
     )
   ] });
 }
 function createSchedulePaginationPlugin({
+  onViewDateChange,
   position = "start"
-} = {}) {
+}) {
   return {
     renderHeader(startContent, centerContent, endContent) {
-      const controls = /* @__PURE__ */ jsx(SchedulePaginationControls, {});
+      const controls = /* @__PURE__ */ jsx(SchedulePaginationControls, { onViewDateChange });
       return position === "start" ? {
         centerContent,
         endContent,
@@ -1661,11 +2024,14 @@ function createSchedulePaginationPlugin({
     }
   };
 }
-var defaultSchedulePaginationPlugin = createSchedulePaginationPlugin();
 function useSchedulePaginationPlugin({
+  onViewDateChange,
   position = "start"
-} = {}) {
-  return useMemo(() => createSchedulePaginationPlugin({ position }), [position]);
+}) {
+  return useMemo(
+    () => createSchedulePaginationPlugin({ onViewDateChange, position }),
+    [onViewDateChange, position]
+  );
 }
 function ScheduleViewSelectorControl({
   onChangeView,
@@ -1742,9 +2108,7 @@ function useScheduleViewSelectorPlugin(options, pluginOptions = {}) {
 }
 
 // src/components/Schedule/plugins/index.tsx
-var defaultSchedulePlugins = [
-  defaultSchedulePaginationPlugin
-];
+var defaultSchedulePlugins = [];
 var EMPTY_CATEGORIES = [];
 function readAsyncEvents(loader, start, end, cache) {
   const key = `${start}:${end}`;
@@ -1786,14 +2150,17 @@ function resolveEvents(eventSource, range, timezoneID, eventCache) {
     timezoneID
   );
 }
-function getRange(view, date) {
+function useRange(view, date) {
   const [start, end] = view.getDateRange(date);
-  return {
-    end: end.instant,
-    endDate: plainDateFromInstant(end.instant, end.timezoneID),
-    start: start.instant,
-    startDate: plainDateFromInstant(start.instant, start.timezoneID)
-  };
+  return useMemo(
+    () => ({
+      end: end.instant,
+      endDate: plainDateFromInstant(end.instant, end.timezoneID),
+      start: start.instant,
+      startDate: plainDateFromInstant(start.instant, start.timezoneID)
+    }),
+    [start.instant, end.instant, start.timezoneID, end.timezoneID]
+  );
 }
 function ScheduleViewContent({
   categories,
@@ -1801,30 +2168,22 @@ function ScheduleViewContent({
   eventSource,
   highlightDate,
   isLoading,
-  nextDateLabel,
-  onNextDate,
-  onPreviousDate,
-  onToday,
   plugins,
-  previousDateLabel,
   view,
   viewDate
 }) {
   const Component = view.component;
-  const range = getRange(view, viewDate);
+  const range = useRange(view, viewDate);
   const contextValue = useMemo(() => {
+    const categoryMap = createCategoryMap(categories);
     const events = isLoading ? [] : resolveEvents(eventSource, range, viewDate.timezoneID, eventCache);
     return {
+      categoryMap,
       categories,
       events,
       highlightDate,
       isLoading,
-      nextDateLabel,
-      onNextDate,
-      onPreviousDate,
-      onToday,
       plugins,
-      previousDateLabel,
       range,
       timezoneID: viewDate.timezoneID,
       view,
@@ -1836,12 +2195,7 @@ function ScheduleViewContent({
     eventSource,
     highlightDate,
     isLoading,
-    nextDateLabel,
-    onNextDate,
-    onPreviousDate,
-    onToday,
     plugins,
-    previousDateLabel,
     range,
     view,
     viewDate
@@ -1854,7 +2208,6 @@ function Schedule({
   "data-testid": dataTestId,
   events,
   highlightDate: highlightDateFromProps,
-  onViewDateChange,
   plugins = defaultSchedulePlugins,
   ref,
   style,
@@ -1868,50 +2221,18 @@ function Schedule({
     () => nowEpochMilliseconds()
   );
   const highlightDate = highlightDateFromProps ?? internalHighlightDate;
-  const zonedDateTime = useMemo(
-    () => createZonedDateTime(viewDate, timezoneID),
+  const scheduleZonedInstant = useMemo(
+    () => createScheduleZonedInstant(viewDate, timezoneID),
     [viewDate, timezoneID]
   );
-  const highlightZonedDateTime = useMemo(
-    () => createZonedDateTime(highlightDate, timezoneID),
+  const highlightScheduleZonedInstant = useMemo(
+    () => createScheduleZonedInstant(highlightDate, timezoneID),
     [highlightDate, timezoneID]
   );
-  const updateViewDate = useCallback(
-    (nextViewDate) => {
-      onViewDateChange?.(nextViewDate);
-    },
-    [onViewDateChange]
-  );
-  const shiftToRange = useCallback(
-    (nextRange) => {
-      const currentRange = view.getDateRange(zonedDateTime);
-      updateViewDate(
-        zonedDateTime.instant + nextRange[0].instant - currentRange[0].instant
-      );
-    },
-    [updateViewDate, view, zonedDateTime]
-  );
-  const previousDateRange = useMemo(
-    () => view.getPreviousDateRange(zonedDateTime),
-    [view, zonedDateTime]
-  );
-  const nextDateRange = useMemo(
-    () => view.getNextDateRange(zonedDateTime),
-    [view, zonedDateTime]
-  );
-  const onPreviousDate = useCallback(() => {
-    shiftToRange(previousDateRange.range);
-  }, [previousDateRange, shiftToRange]);
-  const onToday = useCallback(() => {
-    updateViewDate(nowEpochMilliseconds());
-  }, [updateViewDate]);
-  const onNextDate = useCallback(() => {
-    shiftToRange(nextDateRange.range);
-  }, [nextDateRange, shiftToRange]);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx(styles.root, className),
+      className: cx(scheduleClasses.root, className),
       "data-testid": dataTestId,
       ref,
       style,
@@ -1924,16 +2245,11 @@ function Schedule({
               categories,
               eventCache,
               eventSource: [],
-              highlightDate: highlightZonedDateTime,
+              highlightDate: highlightScheduleZonedInstant,
               isLoading: true,
-              nextDateLabel: nextDateRange.label,
-              onNextDate,
-              onPreviousDate,
-              onToday,
               plugins,
-              previousDateLabel: previousDateRange.label,
               view,
-              viewDate: zonedDateTime
+              viewDate: scheduleZonedInstant
             }
           ),
           children: /* @__PURE__ */ jsx(
@@ -1942,16 +2258,11 @@ function Schedule({
               categories,
               eventCache,
               eventSource: events,
-              highlightDate: highlightZonedDateTime,
+              highlightDate: highlightScheduleZonedInstant,
               isLoading: false,
-              nextDateLabel: nextDateRange.label,
-              onNextDate,
-              onPreviousDate,
-              onToday,
               plugins,
-              previousDateLabel: previousDateRange.label,
               view,
-              viewDate: zonedDateTime
+              viewDate: scheduleZonedInstant
             }
           )
         }
@@ -1982,10 +2293,10 @@ function createScheduleWeeklyView({
   minHour = 0,
   weekStartsOn = 0
 } = {}) {
-  const getWeekStart = (date) => setStartOfWeek(date.toPlainDate(), weekStartsOn);
+  const getWeekStart = (date) => setStartOfWeek2(date.toPlainDate(), weekStartsOn);
   const getWeekRange = (date) => {
     const startDate = getWeekStart(date);
-    return scheduleRangeToZonedDateTimeRange(
+    return scheduleRangeToScheduleZonedInstantRange(
       getScheduleRangeFromDates({
         endDate: startDate.add({ days: 7 }),
         startDate,
@@ -2008,11 +2319,11 @@ function createScheduleWeeklyView({
     options: { hourHeight, maxHour, minHour, weekStartsOn }
   };
 }
-function setStartOfWeek(date, weekStartsOn) {
+function setStartOfWeek2(date, weekStartsOn) {
   const daysSinceWeekStart = (plainDateDayOfWeek(date) - weekStartsOn + 7) % 7;
   return date.add({ days: -daysSinceWeekStart });
 }
 
 export { Schedule, ScheduleContext, createEventFromISO, createScheduleDayView, createScheduleListView, createScheduleMonthlyView, createScheduleWeeklyView, defaultSchedulePlugins, useScheduleContext, useSchedulePaginationPlugin, useScheduleViewSelectorPlugin };
-//# sourceMappingURL=chunk-MGVEX3RS.js.map
-//# sourceMappingURL=chunk-MGVEX3RS.js.map
+//# sourceMappingURL=chunk-GSTINE4X.js.map
+//# sourceMappingURL=chunk-GSTINE4X.js.map