silver-ui 0.3.1 → 0.5.0

package/dist/{chunk-QCT4BPB6.cjs → chunk-UXQSSRBQ.cjs}

@@ -1,17 +1,18 @@
 'use strict';
 
-var chunkM3RNFDA2_cjs = require('./chunk-M3RNFDA2.cjs');
-var chunk276LEL3G_cjs = require('./chunk-276LEL3G.cjs');
-var chunkCK3UJQRI_cjs = require('./chunk-CK3UJQRI.cjs');
+var chunkHWD4HDQ5_cjs = require('./chunk-HWD4HDQ5.cjs');
+var chunkKVJ27734_cjs = require('./chunk-KVJ27734.cjs');
+var chunkJK4YAQ2N_cjs = require('./chunk-JK4YAQ2N.cjs');
 var chunkR37R7DEV_cjs = require('./chunk-R37R7DEV.cjs');
-var chunkBRB52QFV_cjs = require('./chunk-BRB52QFV.cjs');
-var chunkKFDHP4WP_cjs = require('./chunk-KFDHP4WP.cjs');
-var chunkQEFE4QBL_cjs = require('./chunk-QEFE4QBL.cjs');
-var chunk7GN6YTSS_cjs = require('./chunk-7GN6YTSS.cjs');
-var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
-var chunk6BK4LUK4_cjs = require('./chunk-6BK4LUK4.cjs');
-var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkL5JS6P62_cjs = require('./chunk-L5JS6P62.cjs');
+var chunk5XMWGK3O_cjs = require('./chunk-5XMWGK3O.cjs');
+var chunkBSI4BQEX_cjs = require('./chunk-BSI4BQEX.cjs');
+var chunk3Z5PF75J_cjs = require('./chunk-3Z5PF75J.cjs');
+var chunkJSAYTQTJ_cjs = require('./chunk-JSAYTQTJ.cjs');
+var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
+var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
 var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var polyfill = require('@js-temporal/polyfill');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -42,6 +43,211 @@ function createEventFromISO({
     title
   };
 }
+
+// src/components/Schedule/ScheduleEvent.recipe.ts
+var scheduleEventRecipe = chunkZ6RT3WPE_cjs.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 = react.createContext(null);
 ScheduleContext.displayName = "ScheduleContext";
 function useScheduleContext() {
@@ -62,16 +268,16 @@ function getScheduleRangeFromDates({
   timezoneID
 }) {
   return {
-    end: chunkCK3UJQRI_cjs.plainDateToInstant(endDate, timezoneID),
+    end: chunkJK4YAQ2N_cjs.plainDateToInstant(endDate, timezoneID),
     endDate,
-    start: chunkCK3UJQRI_cjs.plainDateToInstant(startDate, timezoneID),
+    start: chunkJK4YAQ2N_cjs.plainDateToInstant(startDate, timezoneID),
     startDate
   };
 }
 function enumerateDates(start, endExclusive) {
   const dates = [];
   let current = start;
-  while (chunkCK3UJQRI_cjs.plainDateIsBefore(current, endExclusive)) {
+  while (chunkJK4YAQ2N_cjs.plainDateIsBefore(current, endExclusive)) {
     dates.push(current);
     current = current.add({ days: 1 });
   }
@@ -79,22 +285,22 @@ function enumerateDates(start, endExclusive) {
 }
 function eventOverlapsRange(event, range, timezoneID) {
   if (isDayEvent(event)) {
-    const eventStart = chunkCK3UJQRI_cjs.plainDateToInstant(event.start, timezoneID);
-    const eventEnd = chunkCK3UJQRI_cjs.plainDateToInstant(event.end.add({ days: 1 }), timezoneID);
+    const eventStart = chunkJK4YAQ2N_cjs.plainDateToInstant(event.start, timezoneID);
+    const eventEnd = chunkJK4YAQ2N_cjs.plainDateToInstant(event.end.add({ days: 1 }), timezoneID);
     return eventStart < range.end && eventEnd > range.start;
   }
   return event.start < range.end && event.end > range.start;
 }
 function eventOccursOnDate(event, date, timezoneID) {
   if (isDayEvent(event)) {
-    return !chunkCK3UJQRI_cjs.plainDateIsAfter(event.start, date) && !chunkCK3UJQRI_cjs.plainDateIsBefore(event.end, date);
+    return !chunkJK4YAQ2N_cjs.plainDateIsAfter(event.start, date) && !chunkJK4YAQ2N_cjs.plainDateIsBefore(event.end, date);
   }
-  const startDate = chunkCK3UJQRI_cjs.plainDateFromInstant(event.start, timezoneID);
-  const endDate = chunkCK3UJQRI_cjs.plainDateFromInstant(
+  const startDate = chunkJK4YAQ2N_cjs.plainDateFromInstant(event.start, timezoneID);
+  const endDate = chunkJK4YAQ2N_cjs.plainDateFromInstant(
     Math.max(event.end - 1, event.start),
     timezoneID
   );
-  return !chunkCK3UJQRI_cjs.plainDateIsAfter(startDate, date) && !chunkCK3UJQRI_cjs.plainDateIsBefore(endDate, date);
+  return !chunkJK4YAQ2N_cjs.plainDateIsAfter(startDate, date) && !chunkJK4YAQ2N_cjs.plainDateIsBefore(endDate, date);
 }
 function sortEvents(events, timezoneID) {
   return [...events].sort((a, b) => {
@@ -104,211 +310,108 @@ function sortEvents(events, timezoneID) {
   });
 }
 function getEventSortStart(event, timezoneID) {
-  return isDayEvent(event) ? chunkCK3UJQRI_cjs.plainDateToInstant(event.start, timezoneID) : event.start;
+  return isDayEvent(event) ? chunkJK4YAQ2N_cjs.plainDateToInstant(event.start, timezoneID) : event.start;
 }
-var styles = {
-  root: chunkRU6JG3FS_cjs.css({
-    color: "fg",
-    fontFamily: "body",
-    w: "full"
-  }),
-  frame: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "3",
-    w: "full"
-  }),
-  header: chunkRU6JG3FS_cjs.css({
-    display: "grid",
-    gridTemplateColumns: "1fr auto 1fr",
-    alignItems: "center",
-    gap: "3"
-  }),
-  headerSlotStart: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    gap: "2"
-  }),
-  headerSlotCenter: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "2",
-    textAlign: "center"
-  }),
-  headerSlotEnd: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    gap: "2"
-  }),
-  headerTitleContent: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "2"
-  }),
-  surface: chunkRU6JG3FS_cjs.css({
-    borderWidth: "default",
-    borderStyle: "solid",
-    borderColor: "border",
-    borderRadius: "md",
-    overflow: "hidden",
-    bg: "bg"
-  }),
-  event: chunkRU6JG3FS_cjs.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 = chunkZ6RT3WPE_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.css({
-    display: "inline-block",
-    w: "2",
-    h: "2",
-    borderRadius: "full",
-    bg: "var(--schedule-event-dot)",
-    flexShrink: 0
-  }),
-  eventTime: chunkRU6JG3FS_cjs.css({
-    flexShrink: 0,
-    fontWeight: "normal"
-  }),
-  eventTitle: chunkRU6JG3FS_cjs.css({
-    fontWeight: "bold",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  })
-};
+  }
+});
+var scheduleClasses = scheduleRecipe();
 var categoryFallback = { label: "Event", color: "blue" };
-var colorStyles = {
-  blue: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.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 chunkCK3UJQRI_cjs.plainDateFormat(date, chunkCK3UJQRI_cjs.DATE_FORMAT_WITH_WEEKDAY);
+  return chunkJK4YAQ2N_cjs.plainDateFormat(date, chunkJK4YAQ2N_cjs.DATE_FORMAT_WITH_WEEKDAY);
 }
 function formatMonthTitle(date) {
-  return chunkCK3UJQRI_cjs.plainDateFormat(date, chunkCK3UJQRI_cjs.DATE_FORMAT_MONTH_YEAR);
+  return chunkJK4YAQ2N_cjs.plainDateFormat(date, chunkJK4YAQ2N_cjs.DATE_FORMAT_MONTH_YEAR);
 }
 function formatWeekTitle(start, end) {
   if (start.year === end.year && start.month === end.month) {
     return formatMonthTitle(start);
   }
-  const startMonth = chunkCK3UJQRI_cjs.plainDateFormat(start, { month: "long" });
-  const endMonth = chunkCK3UJQRI_cjs.plainDateFormat(end, { month: "long" });
+  const startMonth = chunkJK4YAQ2N_cjs.plainDateFormat(start, { month: "long" });
+  const endMonth = chunkJK4YAQ2N_cjs.plainDateFormat(end, { month: "long" });
   return start.year === end.year ? `${startMonth} - ${endMonth} ${end.year}` : `${startMonth} ${start.year} - ${endMonth} ${end.year}`;
 }
 function formatListRangeTitle(start, end) {
-  return chunkCK3UJQRI_cjs.plainDateIsEqual(start, end) ? formatDate(start) : formatWeekTitle(start, end);
+  return chunkJK4YAQ2N_cjs.plainDateIsEqual(start, end) ? formatDate(start) : formatWeekTitle(start, end);
 }
 function formatTime(instant, timezoneID) {
   return polyfill.Temporal.Instant.fromEpochMilliseconds(instant).toZonedDateTimeISO(timezoneID).toLocaleString(void 0, {
@@ -326,7 +429,7 @@ function formatTimezoneAbbreviation(date, timezoneID) {
   );
   return parts.find((part) => part.type === "timeZoneName")?.value ?? timezoneID;
 }
-function formatHour(hour, _timezoneID) {
+function formatHour(hour) {
   return polyfill.Temporal.PlainTime.from({ hour }).toLocaleString(void 0, {
     hour: "numeric"
   });
@@ -340,8 +443,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) {
@@ -350,9 +453,9 @@ function getMinutesSinceStartOfDay(instant, timezoneID) {
 }
 function isEventInPast(event, currentTime2, timezoneID) {
   if (isDayEvent(event)) {
-    return chunkCK3UJQRI_cjs.plainDateIsBefore(
+    return chunkJK4YAQ2N_cjs.plainDateIsBefore(
       event.end,
-      chunkCK3UJQRI_cjs.plainDateFromInstant(currentTime2, timezoneID)
+      chunkJK4YAQ2N_cjs.plainDateFromInstant(currentTime2, timezoneID)
     );
   }
   return event.end <= currentTime2;
@@ -361,19 +464,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__ */ jsxRuntime.jsx(
     "span",
     {
-      className: chunk6BK4LUK4_cjs.cx(
-        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__ */ jsxRuntime.jsx("span", { className: styles.eventTitle, children: isDayEvent(event) ? event.title : getEventAccessibleLabel(event, categories, timezoneID) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.title, children: isDayEvent(event) ? event.title : getEventAccessibleLabel(event, categoryMap, timezoneID) })
     }
   );
 }
@@ -381,23 +481,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__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: chunk6BK4LUK4_cjs.cx(
-        styles.event,
-        chunkRU6JG3FS_cjs.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__ */ jsxRuntime.jsx("span", { className: styles.eventTime, children: startTimeLabel }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.eventTitle, children: event.title })
+        startTimeLabel != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.time, children: startTimeLabel }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.title, children: event.title })
       ]
     }
   );
@@ -410,9 +510,16 @@ function ScheduleFrame({
   const { isLoading, plugins } = useScheduleContext();
   const initialHeader = {
     startContent: null,
-    centerContent: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.headerTitleContent, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Heading, { level: 2, children: title }),
-      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkKFDHP4WP_cjs.Spinner, { "aria-label": "Loading events", size: "sm" }) : null
+    centerContent: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: scheduleClasses.headerTitleContent, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunk3Z5PF75J_cjs.Heading, { level: 2, children: title }),
+      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+        chunkBSI4BQEX_cjs.Spinner,
+        {
+          "aria-label": "Loading events",
+          className: scheduleClasses.headerTitleSpinner,
+          size: "sm"
+        }
+      ) : null
     ] }),
     endContent: null
   };
@@ -424,11 +531,11 @@ function ScheduleFrame({
     ) ?? content,
     initialHeader
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": titleLabel, className: styles.frame, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerSlotStart, children: header.startContent }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerSlotCenter, children: header.centerContent }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerSlotEnd, children: header.endContent })
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": titleLabel, className: scheduleClasses.frame, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: scheduleClasses.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: scheduleClasses.headerSlotStart, children: header.startContent }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: scheduleClasses.headerSlotCenter, children: header.centerContent }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: scheduleClasses.headerSlotEnd, children: header.endContent })
     ] }),
     children
   ] });
@@ -465,7 +572,7 @@ function subscribe(listener) {
 function useCurrentTime() {
   return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
-var styles2 = {
+var styles = {
   grid: chunkRU6JG3FS_cjs.css({
     display: "grid",
     gridTemplateColumns: "72px 1fr",
@@ -571,41 +678,6 @@ var styles2 = {
   lastRow: chunkRU6JG3FS_cjs.css({
     borderBlockEndWidth: 0
   }),
-  timedEvent: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.css({
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    fontWeight: "bold"
-  }),
-  timedEventTime: chunkRU6JG3FS_cjs.css({
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    flexShrink: 0,
-    fontWeight: "normal"
-  }),
   events: chunkRU6JG3FS_cjs.css({
     display: "flex",
     flexDirection: "column",
@@ -647,8 +719,8 @@ function eventOverlapsHour(event, day, hour, timezoneID) {
   return event.start < hourEnd && event.end > hourStart;
 }
 function eventSpansPastDay(event, day, timezoneID) {
-  return !chunkCK3UJQRI_cjs.plainDateIsEqual(
-    chunkCK3UJQRI_cjs.plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID),
+  return !chunkJK4YAQ2N_cjs.plainDateIsEqual(
+    chunkJK4YAQ2N_cjs.plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID),
     day
   );
 }
@@ -670,8 +742,8 @@ function getTimedEventLayouts({
   const minMinute = minHour * 60;
   const maxMinute = maxHour * 60;
   return events.map((event) => {
-    const startDate = chunkCK3UJQRI_cjs.plainDateFromInstant(event.start, timezoneID);
-    const rawStart = chunkCK3UJQRI_cjs.plainDateIsBefore(startDate, day) ? 0 : getMinutesSinceStartOfDay(event.start, timezoneID);
+    const startDate = chunkJK4YAQ2N_cjs.plainDateFromInstant(event.start, timezoneID);
+    const rawStart = chunkJK4YAQ2N_cjs.plainDateIsBefore(startDate, day) ? 0 : getMinutesSinceStartOfDay(event.start, timezoneID);
     const rawEnd = eventSpansPastDay(event, day, timezoneID) ? 24 * 60 : getMinutesSinceStartOfDay(event.end, timezoneID);
     if (rawEnd <= minMinute || rawStart >= maxMinute) {
       return null;
@@ -716,15 +788,15 @@ function getTimedEventStyle({
   };
 }
 function getCellName({
-  categories,
+  categoryMap,
   date,
   events,
   hourLabel,
   timezoneID
 }) {
-  const dateLabel = chunkCK3UJQRI_cjs.plainDateFormat(date, chunkCK3UJQRI_cjs.DATE_FORMAT_WITH_WEEKDAY);
+  const dateLabel = chunkJK4YAQ2N_cjs.plainDateFormat(date, chunkJK4YAQ2N_cjs.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}`;
 }
@@ -734,7 +806,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,
@@ -758,51 +830,63 @@ 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__ */ jsxRuntime.jsxs(
     "div",
     {
       "aria-label": "Schedule time grid",
       "aria-readonly": "true",
-      className: chunk6BK4LUK4_cjs.cx(styles.surface, styles2.grid),
+      className: chunkSPDVNY2Z_cjs.cx(scheduleClasses.surface, styles.grid),
       role: "grid",
       style: gridStyle,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.rowContents, role: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.rowContents, role: "row", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "aria-colindex": 1,
               "aria-label": "Time",
-              className: styles2.corner,
+              className: styles.corner,
               role: "columnheader"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.header, children: days.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.header, children: days.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "aria-colindex": index + 2,
-              "aria-current": chunkCK3UJQRI_cjs.plainDateIsEqual(day, highlightPlainDate) ? "date" : void 0,
-              "aria-label": chunkCK3UJQRI_cjs.plainDateFormat(day, chunkCK3UJQRI_cjs.DATE_FORMAT_WITH_WEEKDAY),
-              className: chunk6BK4LUK4_cjs.cx(
-                styles2.dayHeader,
-                index === days.length - 1 && styles2.lastColumn
+              "aria-current": chunkJK4YAQ2N_cjs.plainDateIsEqual(day, highlightPlainDate) ? "date" : void 0,
+              "aria-label": chunkJK4YAQ2N_cjs.plainDateFormat(day, chunkJK4YAQ2N_cjs.DATE_FORMAT_WITH_WEEKDAY),
+              className: chunkSPDVNY2Z_cjs.cx(
+                styles.dayHeader,
+                index === days.length - 1 && styles.lastColumn
               ),
               role: "columnheader",
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                chunkQEFE4QBL_cjs.Heading,
+                chunk3Z5PF75J_cjs.Heading,
                 {
                   "aria-hidden": "true",
                   color: "secondary",
                   level: 4,
                   textWrap: "nowrap",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.dayHeaderContent, children: [
-                    chunkCK3UJQRI_cjs.plainDateFormat(day, { weekday: "short" }),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.dayHeaderContent, children: [
+                    chunkJK4YAQ2N_cjs.plainDateFormat(day, { weekday: "short" }),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
-                        className: chunk6BK4LUK4_cjs.cx(
-                          styles2.dayHeaderDayNumber,
-                          chunkCK3UJQRI_cjs.plainDateIsEqual(day, highlightPlainDate) && styles2.dayHeaderCurrent
+                        className: chunkSPDVNY2Z_cjs.cx(
+                          styles.dayHeaderDayNumber,
+                          chunkJK4YAQ2N_cjs.plainDateIsEqual(day, highlightPlainDate) && styles.dayHeaderCurrent
                         ),
                         children: day.day
                       }
@@ -814,18 +898,18 @@ function TimeGridView({
             day.toString()
           )) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.rowContents, role: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.rowContents, role: "row", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "aria-colindex": 1,
               "aria-label": `${timezoneLabel} all day`,
-              className: styles2.allDayLabel,
+              className: styles.allDayLabel,
               role: "rowheader",
-              children: /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Text, { color: "secondary", type: "supporting", weight: "bold", children: timezoneLabel })
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunk3Z5PF75J_cjs.Text, { color: "secondary", type: "supporting", weight: "bold", children: timezoneLabel })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.allDayRow, children: days.map((day, index) => {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.allDayRow, children: days.map((day, index) => {
             const dayEvents = events.filter(
               (event) => isDayEvent(event) && eventOccursOnDate(event, day, timezoneID)
             );
@@ -834,18 +918,18 @@ function TimeGridView({
               {
                 "aria-colindex": index + 2,
                 "aria-label": getCellName({
-                  categories,
+                  categoryMap,
                   date: day,
                   events: dayEvents,
                   hourLabel: "all day",
                   timezoneID
                 }),
-                className: chunk6BK4LUK4_cjs.cx(
-                  styles2.dayCell,
-                  index === days.length - 1 && styles2.lastColumn
+                className: chunkSPDVNY2Z_cjs.cx(
+                  styles.dayCell,
+                  index === days.length - 1 && styles.lastColumn
                 ),
                 role: "gridcell",
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.events, children: dayEvents.map((event) => /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.events, children: dayEvents.map((event) => /* @__PURE__ */ jsxRuntime.jsx(
                   CalendarEventPill,
                   {
                     event,
@@ -861,31 +945,22 @@ function TimeGridView({
         hours.map((hour) => {
           const hourLabel = formatHour(hour);
           const isLastHour = hour === hours[hours.length - 1];
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.rowContents, role: "row", children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.rowContents, role: "row", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 "aria-colindex": 1,
-                className: chunk6BK4LUK4_cjs.cx(styles2.timeLabel, isLastHour && styles2.lastRow),
+                className: chunkSPDVNY2Z_cjs.cx(styles.timeLabel, isLastHour && styles.lastRow),
                 role: "rowheader",
                 style: hourStyle,
                 children: hourLabel
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.timeRow, children: days.map((day, index) => {
+            /* @__PURE__ */ jsxRuntime.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,
@@ -899,16 +974,16 @@ function TimeGridView({
                 {
                   "aria-colindex": index + 2,
                   "aria-label": getCellName({
-                    categories,
+                    categoryMap,
                     date: day,
                     events: hourEvents,
                     hourLabel,
                     timezoneID
                   }),
-                  className: chunk6BK4LUK4_cjs.cx(
-                    styles2.hourCell,
-                    index === days.length - 1 && styles2.lastColumn,
-                    isLastHour && styles2.lastRow
+                  className: chunkSPDVNY2Z_cjs.cx(
+                    styles.hourCell,
+                    index === days.length - 1 && styles.lastColumn,
+                    isLastHour && styles.lastRow
                   ),
                   role: "gridcell",
                   style: hourStyle,
@@ -917,28 +992,34 @@ function TimeGridView({
                       "div",
                       {
                         "aria-hidden": "true",
-                        className: styles2.currentTimeLine,
+                        className: styles.currentTimeLine,
                         "data-testid": "schedule-current-time-line",
                         style: { top: `${currentTimeTop}%` }
                       }
                     ) : null,
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.events, children: visibleTimedEventLayouts.map((layout) => {
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                         "div",
                         {
-                          className: chunk6BK4LUK4_cjs.cx(
-                            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__ */ jsxRuntime.jsx("span", { className: styles2.timedEventTitle, children: event.title }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.timedEventTime, children: getEventTimeLabel(event, timezoneID) })
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventClasses.title, children: event.title }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventClasses.time, children: getEventTimeLabel(event, timezoneID) })
                           ]
                         },
                         event.id
@@ -963,7 +1044,7 @@ function getCurrentTimeTopForHour({
   minHour,
   timezoneID
 }) {
-  if (!chunkCK3UJQRI_cjs.plainDateIsEqual(day, chunkCK3UJQRI_cjs.plainDateFromInstant(currentTime2, timezoneID))) {
+  if (!chunkJK4YAQ2N_cjs.plainDateIsEqual(day, chunkJK4YAQ2N_cjs.plainDateFromInstant(currentTime2, timezoneID))) {
     return null;
   }
   const currentMinute = getMinutesSinceStartOfDay(currentTime2, timezoneID);
@@ -981,35 +1062,35 @@ 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 = chunkCK3UJQRI_cjs.plainDateFromInstant(instant, timezoneID).add({ days });
-      return zonedDateTimeFromInstant(
-        chunkCK3UJQRI_cjs.plainDateToInstant(date, timezoneID),
+      const date = chunkJK4YAQ2N_cjs.plainDateFromInstant(instant, timezoneID).add({ days });
+      return scheduleZonedInstantFromInstant(
+        chunkJK4YAQ2N_cjs.plainDateToInstant(date, timezoneID),
         timezoneID
       );
     },
     instant,
     startOfDay: () => {
-      const date = chunkCK3UJQRI_cjs.plainDateFromInstant(instant, timezoneID);
-      return zonedDateTimeFromInstant(
-        chunkCK3UJQRI_cjs.plainDateToInstant(date, timezoneID),
+      const date = chunkJK4YAQ2N_cjs.plainDateFromInstant(instant, timezoneID);
+      return scheduleZonedInstantFromInstant(
+        chunkJK4YAQ2N_cjs.plainDateToInstant(date, timezoneID),
         timezoneID
       );
     },
     timezoneID,
-    toPlainDate: () => chunkCK3UJQRI_cjs.plainDateFromInstant(instant, timezoneID)
+    toPlainDate: () => chunkJK4YAQ2N_cjs.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({
@@ -1034,7 +1115,7 @@ function createScheduleDayView({
 } = {}) {
   return {
     component: ScheduleDayView,
-    getDateRange: (date) => scheduleRangeToZonedDateTimeRange(
+    getDateRange: (date) => scheduleRangeToScheduleZonedInstantRange(
       getScheduleRangeFromDates({
         endDate: date.toPlainDate().add({ days: 1 }),
         startDate: date.toPlainDate(),
@@ -1053,7 +1134,7 @@ function createScheduleDayView({
     options: { hourHeight, maxHour, minHour }
   };
 }
-var styles3 = {
+var styles2 = {
   list: chunkRU6JG3FS_cjs.css({
     display: "flex",
     flexDirection: "column"
@@ -1135,38 +1216,35 @@ function ListEvent({
   event,
   isPast
 }) {
-  const { categories, timezoneID } = useScheduleContext();
-  const category = getCategory(categories, event);
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const category = getCategory(categoryMap, event);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chunk6BK4LUK4_cjs.cx(styles3.eventRow, isPast && styles3.eventPast),
+      className: chunkSPDVNY2Z_cjs.cx(styles2.eventRow, isPast && styles2.eventPast),
       "data-state": isPast ? "past" : void 0,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Text, { className: styles3.eventTime, color: "secondary", type: "supporting", children: isDayEvent(event) ? "All day" : getEventTimeLabel(event, timezoneID) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles3.eventContent, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunk7GN6YTSS_cjs.Tooltip, { content: category.label, hasHoverIndication: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(chunk3Z5PF75J_cjs.Text, { className: styles2.eventTime, color: "secondary", type: "supporting", children: isDayEvent(event) ? "All day" : getEventTimeLabel(event, timezoneID) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.eventContent, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkJSAYTQTJ_cjs.Tooltip, { content: category.label, hasHoverIndication: false, children: /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               "aria-label": category.label,
-              className: chunk6BK4LUK4_cjs.cx(
-                styles.eventDot,
-                eventColorClassName(category.color)
-              ),
+              className: scheduleEventRecipe({ color: category.color }).dot,
               role: "img"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Text, { children: event.title })
+          /* @__PURE__ */ jsxRuntime.jsx(chunk3Z5PF75J_cjs.Text, { children: event.title })
         ] })
       ]
     }
   );
 }
-function ScheduleListView(_props) {
+function ScheduleListView() {
   const { events, highlightDate, isLoading, range, timezoneID } = useScheduleContext();
   const days = enumerateDates(range.startDate, range.endDate);
   const currentTime2 = useCurrentTime();
-  const currentPlainDate = chunkCK3UJQRI_cjs.plainDateFromInstant(currentTime2, timezoneID);
+  const currentPlainDate = chunkJK4YAQ2N_cjs.plainDateFromInstant(currentTime2, timezoneID);
   const highlightPlainDate = highlightDate.toPlainDate();
   const endDate = range.endDate.add({ days: -1 });
   const title = formatListRangeTitle(range.startDate, endDate);
@@ -1174,9 +1252,9 @@ function ScheduleListView(_props) {
     const dayEvents = events.filter(
       (event) => eventOccursOnDate(event, day, timezoneID)
     );
-    const isCurrentDay = chunkCK3UJQRI_cjs.plainDateIsEqual(day, currentPlainDate);
-    const isHighlightedDay = chunkCK3UJQRI_cjs.plainDateIsEqual(day, highlightPlainDate);
-    const isBaseDay = chunkCK3UJQRI_cjs.plainDateIsEqual(day, range.startDate);
+    const isCurrentDay = chunkJK4YAQ2N_cjs.plainDateIsEqual(day, currentPlainDate);
+    const isHighlightedDay = chunkJK4YAQ2N_cjs.plainDateIsEqual(day, highlightPlainDate);
+    const isBaseDay = chunkJK4YAQ2N_cjs.plainDateIsEqual(day, range.startDate);
     return {
       day,
       dayEvents,
@@ -1185,15 +1263,15 @@ function ScheduleListView(_props) {
       isVisible: dayEvents.length > 0 || isCurrentDay || isBaseDay
     };
   }).filter((dayRecord) => dayRecord.isVisible);
-  return /* @__PURE__ */ jsxRuntime.jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk6BK4LUK4_cjs.cx(styles.surface, styles3.list), children: visibleDays.map(
+  return /* @__PURE__ */ jsxRuntime.jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkSPDVNY2Z_cjs.cx(scheduleClasses.surface, styles2.list), children: visibleDays.map(
     ({ day, dayEvents, isCurrentDay, isHighlightedDay }, index) => {
-      const fullDate = chunkCK3UJQRI_cjs.plainDateFormat(day, chunkCK3UJQRI_cjs.DATE_FORMAT_WITH_WEEKDAY);
+      const fullDate = chunkJK4YAQ2N_cjs.plainDateFormat(day, chunkJK4YAQ2N_cjs.DATE_FORMAT_WITH_WEEKDAY);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "section",
         {
-          className: chunk6BK4LUK4_cjs.cx(
-            styles3.day,
-            index === visibleDays.length - 1 && styles3.dayLast
+          className: chunkSPDVNY2Z_cjs.cx(
+            styles2.day,
+            index === visibleDays.length - 1 && styles2.dayLast
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1201,23 +1279,23 @@ function ScheduleListView(_props) {
               {
                 "aria-current": isHighlightedDay ? "date" : void 0,
                 "aria-label": fullDate,
-                className: styles3.dayHeading,
+                className: styles2.dayHeading,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      className: chunk6BK4LUK4_cjs.cx(
-                        styles3.dayNumber,
-                        isHighlightedDay && styles3.dayNumberCurrent
+                      className: chunkSPDVNY2Z_cjs.cx(
+                        styles2.dayNumber,
+                        isHighlightedDay && styles2.dayNumberCurrent
                       ),
                       children: day.day
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.dayWeekday, children: chunkCK3UJQRI_cjs.plainDateFormat(day, { weekday: "short" }) })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dayWeekday, children: chunkJK4YAQ2N_cjs.plainDateFormat(day, { weekday: "short" }) })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.events, children: renderListRows({
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.events, children: renderListRows({
               currentTime: currentTime2,
               events: dayEvents,
               isShowingCurrentTime: isCurrentDay && !isLoading,
@@ -1251,7 +1329,7 @@ function renderListRows({
     "div",
     {
       "aria-hidden": "true",
-      className: styles3.nowRow,
+      className: styles2.nowRow,
       "data-testid": "schedule-list-current-time"
     },
     "current-time"
@@ -1287,7 +1365,7 @@ function createScheduleListView({
     options: { days }
   };
 }
-var styles4 = {
+var styles3 = {
   grid: chunkRU6JG3FS_cjs.css({
     display: "grid",
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
@@ -1350,14 +1428,14 @@ var styles4 = {
   monthCellGrid: chunkRU6JG3FS_cjs.css({
     display: "grid",
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-    gridAutoRows: "128px"
+    gridAutoRows: "var(--schedule-month-row-height)"
   }),
   monthEventOverlay: chunkRU6JG3FS_cjs.css({
     position: "absolute",
     inset: 0,
     display: "grid",
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-    gridAutoRows: "128px",
+    gridAutoRows: "var(--schedule-month-row-height)",
     pointerEvents: "none"
   }),
   monthEventSpan: chunkRU6JG3FS_cjs.css({
@@ -1366,6 +1444,46 @@ var styles4 = {
     mx: "0.5",
     pointerEvents: "auto",
     zIndex: 1
+  }),
+  monthSeeMoreSpan: chunkRU6JG3FS_cjs.css({
+    alignSelf: "start",
+    minW: 0,
+    mx: "0.5",
+    pointerEvents: "auto",
+    zIndex: 2
+  }),
+  monthSeeMoreButton: chunkRU6JG3FS_cjs.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: chunkRU6JG3FS_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "1",
+    p: "3"
+  }),
+  monthPopoverEvents: chunkRU6JG3FS_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: 0,
+    m: 0,
+    p: 0,
+    listStyleType: "none"
   })
 };
 var weekdays = [
@@ -1377,16 +1495,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 = (chunkJK4YAQ2N_cjs.plainDateDayOfWeek(date) - weekStartsOn + 7) % 7;
+  return date.add({ days: -daysSinceWeekStart });
+}
+function getMonthDays(date, weekCount, weekStartsOn) {
   const firstOfMonth = date.with({ day: 1 });
-  const firstVisibleDay = chunkCK3UJQRI_cjs.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 = chunkCK3UJQRI_cjs.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 [
@@ -1394,16 +1522,61 @@ 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];
   }
   return [
-    chunkCK3UJQRI_cjs.plainDateFromInstant(event.start, timezoneID),
-    chunkCK3UJQRI_cjs.plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID)
+    chunkJK4YAQ2N_cjs.plainDateFromInstant(event.start, timezoneID),
+    chunkJK4YAQ2N_cjs.plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID)
   ];
 }
+function getEventVisibleDateIndexes({
+  event,
+  firstDay,
+  lastDay,
+  timezoneID
+}) {
+  const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
+  if (chunkJK4YAQ2N_cjs.plainDateIsBefore(eventEnd, firstDay) || chunkJK4YAQ2N_cjs.plainDateIsAfter(eventStart, lastDay)) {
+    return null;
+  }
+  const startIndex = chunkJK4YAQ2N_cjs.plainDateIsBefore(eventStart, firstDay) ? 0 : firstDay.until(eventStart).days;
+  const endIndex = chunkJK4YAQ2N_cjs.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;
@@ -1411,18 +1584,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) => !chunkCK3UJQRI_cjs.plainDateIsBefore(day, eventStart)
-    );
-    const endIndexFromRight = [...days].reverse().findIndex((day) => !chunkCK3UJQRI_cjs.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,
@@ -1446,19 +1623,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 (chunkCK3UJQRI_cjs.plainDateIsBefore(eventEnd, firstDay) || chunkCK3UJQRI_cjs.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;
@@ -1472,81 +1651,173 @@ 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 = chunkCK3UJQRI_cjs.plainDateFormat(date, chunkCK3UJQRI_cjs.DATE_FORMAT_WITH_WEEKDAY);
+  const dateLabel = chunkJK4YAQ2N_cjs.plainDateFormat(date, chunkJK4YAQ2N_cjs.DATE_FORMAT_WITH_WEEKDAY);
   return eventLabels.length > 0 ? `${dateLabel}. ${eventLabels.join(". ")}` : dateLabel;
 }
 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__ */ jsxRuntime.jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "aria-label": title,
-      className: chunk6BK4LUK4_cjs.cx(styles.surface, styles4.grid),
+      className: chunkSPDVNY2Z_cjs.cx(scheduleClasses.surface, styles3.grid),
       role: "grid",
       children: [
-        weekdays.map((weekday, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        visibleWeekdays.map((weekday, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "aria-colindex": index + 1,
             "aria-label": weekday.label,
-            className: styles4.weekday,
+            className: styles3.weekday,
             role: "columnheader",
-            children: /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Heading, { color: "secondary", level: 4, children: weekday.shortLabel })
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunk3Z5PF75J_cjs.Heading, { color: "secondary", level: 4, children: weekday.shortLabel })
           },
           weekday.label
         )),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.monthSurface, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.monthCellGrid, children: days.map((day, index) => {
-            const dayEvents = events.filter(
-              (event) => eventOccursOnDate(event, day, timezoneID)
-            );
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles3.monthSurface, children: [
+          /* @__PURE__ */ jsxRuntime.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;
             return /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                "aria-current": chunkCK3UJQRI_cjs.plainDateIsEqual(day, today) ? "date" : void 0,
+                "aria-current": chunkJK4YAQ2N_cjs.plainDateIsEqual(day, today) ? "date" : void 0,
                 "aria-label": getGridCellName({
+                  categoryMap,
                   date: day,
                   events: dayEvents,
                   timezoneID
                 }),
-                className: chunk6BK4LUK4_cjs.cx(
-                  styles4.cell,
-                  isLastColumn ? styles4.lastColumn : void 0,
-                  isLastRow ? styles4.lastRow : void 0,
-                  !isCurrentMonth ? styles4.otherMonth : void 0
+                className: chunkSPDVNY2Z_cjs.cx(
+                  styles3.cell,
+                  isLastColumn ? styles3.lastColumn : void 0,
+                  isLastRow ? styles3.lastRow : void 0,
+                  !isCurrentMonth ? styles3.otherMonth : void 0
                 ),
                 role: "gridcell",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
-                    className: chunk6BK4LUK4_cjs.cx(
-                      styles4.dayNumber,
-                      chunkCK3UJQRI_cjs.plainDateIsEqual(day, today) ? styles4.today : void 0
+                    className: chunkSPDVNY2Z_cjs.cx(
+                      styles3.dayNumber,
+                      chunkJK4YAQ2N_cjs.plainDateIsEqual(day, today) ? styles3.today : void 0
                     ),
                     children: /* @__PURE__ */ jsxRuntime.jsx(
-                      chunkQEFE4QBL_cjs.Text,
+                      chunk3Z5PF75J_cjs.Text,
                       {
                         as: "span",
                         color: "inherit",
@@ -1562,89 +1833,181 @@ function ScheduleMonthlyView({
               day.toString()
             );
           }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: styles4.monthEventOverlay, children: eventSegments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: styles4.monthEventSpan,
-              "data-testid": `schedule-event-span-${segment.event.id}`,
-              style: getMonthEventSegmentStyle(segment),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                CalendarMonthEventPill,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles3.monthEventOverlay, style: monthGridStyle, children: [
+            visibleEventSegments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: styles3.monthEventSpan,
+                "data-testid": `schedule-event-span-${segment.event.id}`,
+                style: getMonthEventSegmentStyle(segment),
+                children: /* @__PURE__ */ jsxRuntime.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 = chunkJK4YAQ2N_cjs.plainDateFormat(day, chunkJK4YAQ2N_cjs.DATE_FORMAT_WITH_WEEKDAY);
+              const label = `Show ${hiddenEvents.length} more events for ${dateLabel}`;
+              return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    chunkL5JS6P62_cjs.Popover,
+                    {
+                      content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles3.monthPopoverContent, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(chunk3Z5PF75J_cjs.Heading, { level: 4, children: dateLabel }),
+                        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles3.monthPopoverEvents, children: (eventsByDate.get(day.toString()) ?? []).map(
+                          (event) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                            CalendarMonthEventPill,
+                            {
+                              event,
+                              isPast: isEventInPast(
+                                event,
+                                currentTime2,
+                                timezoneID
+                              )
+                            }
+                          ) }, event.id)
+                        ) })
+                      ] }),
+                      "data-testid": `schedule-month-see-more-${day.toString()}`,
+                      label,
+                      width: 320,
+                      children: /* @__PURE__ */ jsxRuntime.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();
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunk276LEL3G_cjs.ButtonGroup, { label: "Schedule pagination", size: "sm", children: [
+function SchedulePaginationControls({
+  onViewDateChange
+}) {
+  const { view, viewDate } = useScheduleContext();
+  const currentRange = react.useMemo(
+    () => view.getDateRange(viewDate),
+    [view, viewDate]
+  );
+  const previousDateRange = react.useMemo(
+    () => view.getPreviousDateRange(viewDate),
+    [view, viewDate]
+  );
+  const nextDateRange = react.useMemo(
+    () => view.getNextDateRange(viewDate),
+    [view, viewDate]
+  );
+  const shiftToRange = react.useCallback(
+    (nextRange) => {
+      onViewDateChange(
+        viewDate.instant + nextRange[0].instant - currentRange[0].instant
+      );
+    },
+    [currentRange, onViewDateChange, viewDate]
+  );
+  const onPreviousDate = react.useCallback(() => {
+    shiftToRange(previousDateRange.range);
+  }, [previousDateRange, shiftToRange]);
+  const onToday = react.useCallback(() => {
+    onViewDateChange(chunkR37R7DEV_cjs.nowEpochMilliseconds());
+  }, [onViewDateChange]);
+  const onNextDate = react.useCallback(() => {
+    shiftToRange(nextDateRange.range);
+  }, [nextDateRange, shiftToRange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkKVJ27734_cjs.ButtonGroup, { label: "Schedule pagination", size: "sm", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkBRB52QFV_cjs.Button,
+      chunk5XMWGK3O_cjs.Button,
       {
         icon: lucideReact.ChevronLeft,
         isIconOnly: true,
-        label: previousDateLabel,
+        label: previousDateRange.label,
         onClick: onPreviousDate
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkBRB52QFV_cjs.Button, { label: "Today", onClick: onToday, size: "sm" }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5XMWGK3O_cjs.Button, { label: "Today", onClick: onToday, size: "sm" }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkBRB52QFV_cjs.Button,
+      chunk5XMWGK3O_cjs.Button,
       {
         icon: lucideReact.ChevronRight,
         isIconOnly: true,
-        label: nextDateLabel,
+        label: nextDateRange.label,
         onClick: onNextDate
       }
     )
   ] });
 }
 function createSchedulePaginationPlugin({
+  onViewDateChange,
   position = "start"
-} = {}) {
+}) {
   return {
     renderHeader(startContent, centerContent, endContent) {
-      const controls = /* @__PURE__ */ jsxRuntime.jsx(SchedulePaginationControls, {});
+      const controls = /* @__PURE__ */ jsxRuntime.jsx(SchedulePaginationControls, { onViewDateChange });
       return position === "start" ? {
         centerContent,
         endContent,
@@ -1663,11 +2026,14 @@ function createSchedulePaginationPlugin({
     }
   };
 }
-var defaultSchedulePaginationPlugin = createSchedulePaginationPlugin();
 function useSchedulePaginationPlugin({
+  onViewDateChange,
   position = "start"
-} = {}) {
-  return react.useMemo(() => createSchedulePaginationPlugin({ position }), [position]);
+}) {
+  return react.useMemo(
+    () => createSchedulePaginationPlugin({ onViewDateChange, position }),
+    [onViewDateChange, position]
+  );
 }
 function ScheduleViewSelectorControl({
   onChangeView,
@@ -1676,7 +2042,7 @@ function ScheduleViewSelectorControl({
   const { view } = useScheduleContext();
   const currentOption = options.find((option) => option.view === view);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM3RNFDA2_cjs.DropdownMenu,
+    chunkHWD4HDQ5_cjs.DropdownMenu,
     {
       button: {
         isDisabled: onChangeView == null,
@@ -1685,10 +2051,10 @@ function ScheduleViewSelectorControl({
       },
       menuWidth: 160,
       children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-        chunkM3RNFDA2_cjs.DropdownMenuItem,
+        chunkHWD4HDQ5_cjs.DropdownMenuItem,
         {
           endContent: option.view === view ? /* @__PURE__ */ jsxRuntime.jsx(
-            chunk4TIAKZ4Q_cjs.Icon,
+            chunkJ4PIYOWT_cjs.Icon,
             {
               color: "primary",
               "data-testid": "schedule-view-selector-selected-icon",
@@ -1744,9 +2110,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}`;
@@ -1788,14 +2152,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: chunkCK3UJQRI_cjs.plainDateFromInstant(end.instant, end.timezoneID),
-    start: start.instant,
-    startDate: chunkCK3UJQRI_cjs.plainDateFromInstant(start.instant, start.timezoneID)
-  };
+  return react.useMemo(
+    () => ({
+      end: end.instant,
+      endDate: chunkJK4YAQ2N_cjs.plainDateFromInstant(end.instant, end.timezoneID),
+      start: start.instant,
+      startDate: chunkJK4YAQ2N_cjs.plainDateFromInstant(start.instant, start.timezoneID)
+    }),
+    [start.instant, end.instant, start.timezoneID, end.timezoneID]
+  );
 }
 function ScheduleViewContent({
   categories,
@@ -1803,30 +2170,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 = react.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,
@@ -1838,12 +2197,7 @@ function ScheduleViewContent({
     eventSource,
     highlightDate,
     isLoading,
-    nextDateLabel,
-    onNextDate,
-    onPreviousDate,
-    onToday,
     plugins,
-    previousDateLabel,
     range,
     view,
     viewDate
@@ -1856,7 +2210,6 @@ function Schedule({
   "data-testid": dataTestId,
   events,
   highlightDate: highlightDateFromProps,
-  onViewDateChange,
   plugins = defaultSchedulePlugins,
   ref,
   style,
@@ -1870,50 +2223,18 @@ function Schedule({
     () => chunkR37R7DEV_cjs.nowEpochMilliseconds()
   );
   const highlightDate = highlightDateFromProps ?? internalHighlightDate;
-  const zonedDateTime = react.useMemo(
-    () => createZonedDateTime(viewDate, timezoneID),
+  const scheduleZonedInstant = react.useMemo(
+    () => createScheduleZonedInstant(viewDate, timezoneID),
     [viewDate, timezoneID]
   );
-  const highlightZonedDateTime = react.useMemo(
-    () => createZonedDateTime(highlightDate, timezoneID),
+  const highlightScheduleZonedInstant = react.useMemo(
+    () => createScheduleZonedInstant(highlightDate, timezoneID),
     [highlightDate, timezoneID]
   );
-  const updateViewDate = react.useCallback(
-    (nextViewDate) => {
-      onViewDateChange?.(nextViewDate);
-    },
-    [onViewDateChange]
-  );
-  const shiftToRange = react.useCallback(
-    (nextRange) => {
-      const currentRange = view.getDateRange(zonedDateTime);
-      updateViewDate(
-        zonedDateTime.instant + nextRange[0].instant - currentRange[0].instant
-      );
-    },
-    [updateViewDate, view, zonedDateTime]
-  );
-  const previousDateRange = react.useMemo(
-    () => view.getPreviousDateRange(zonedDateTime),
-    [view, zonedDateTime]
-  );
-  const nextDateRange = react.useMemo(
-    () => view.getNextDateRange(zonedDateTime),
-    [view, zonedDateTime]
-  );
-  const onPreviousDate = react.useCallback(() => {
-    shiftToRange(previousDateRange.range);
-  }, [previousDateRange, shiftToRange]);
-  const onToday = react.useCallback(() => {
-    updateViewDate(chunkR37R7DEV_cjs.nowEpochMilliseconds());
-  }, [updateViewDate]);
-  const onNextDate = react.useCallback(() => {
-    shiftToRange(nextDateRange.range);
-  }, [nextDateRange, shiftToRange]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chunkSPDVNY2Z_cjs.cx(styles.root, className),
+      className: chunkSPDVNY2Z_cjs.cx(scheduleClasses.root, className),
       "data-testid": dataTestId,
       ref,
       style,
@@ -1926,16 +2247,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__ */ jsxRuntime.jsx(
@@ -1944,16 +2260,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
             }
           )
         }
@@ -1984,10 +2295,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,
@@ -2010,8 +2321,8 @@ function createScheduleWeeklyView({
     options: { hourHeight, maxHour, minHour, weekStartsOn }
   };
 }
-function setStartOfWeek(date, weekStartsOn) {
-  const daysSinceWeekStart = (chunkCK3UJQRI_cjs.plainDateDayOfWeek(date) - weekStartsOn + 7) % 7;
+function setStartOfWeek2(date, weekStartsOn) {
+  const daysSinceWeekStart = (chunkJK4YAQ2N_cjs.plainDateDayOfWeek(date) - weekStartsOn + 7) % 7;
   return date.add({ days: -daysSinceWeekStart });
 }
 
@@ -2026,5 +2337,5 @@ exports.defaultSchedulePlugins = defaultSchedulePlugins;
 exports.useScheduleContext = useScheduleContext;
 exports.useSchedulePaginationPlugin = useSchedulePaginationPlugin;
 exports.useScheduleViewSelectorPlugin = useScheduleViewSelectorPlugin;
-//# sourceMappingURL=chunk-QCT4BPB6.cjs.map
-//# sourceMappingURL=chunk-QCT4BPB6.cjs.map
+//# sourceMappingURL=chunk-UXQSSRBQ.cjs.map
+//# sourceMappingURL=chunk-UXQSSRBQ.cjs.map