silver-ui 0.4.0 → 0.6.0

package/dist/chunk-CZUMVOPH.js

@@ -0,0 +1,3525 @@
+import { ToggleButtonGroup, ToggleButton } from './chunk-XTLNUYCK.js';
+import { MetadataList, MetadataListItem } from './chunk-WAWHHXSR.js';
+import { DropdownMenu, DropdownMenuItem } from './chunk-C6EWA3H2.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 { Layout, LayoutHeader, LayoutFooter, LayoutContent } from './chunk-6I5QWA6A.js';
+import { Popover, usePopover } from './chunk-JHMUMJF3.js';
+import { Link } from './chunk-S4WWBV4N.js';
+import { Button } from './chunk-HMJINNXZ.js';
+import { Spinner } from './chunk-QHXI2QDK.js';
+import { Text, Heading } from './chunk-NXTDP6AX.js';
+import { Tooltip } from './chunk-KWZMXX4F.js';
+import { useLatest_default } from './chunk-KEPCKSDE.js';
+import { isReactNode } from './chunk-2PSZAWLC.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
+import { cva } from './chunk-FMEIPGUP.js';
+import { css } from './chunk-OD4DHHZH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { Temporal } from '@js-temporal/polyfill';
+import { createContext, use, useRef, useCallback, useMemo, useState, Suspense, useSyncExternalStore } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Pencil, Trash2, X, CalendarDays, MapPin, AlignLeft, Tag, ChevronLeft, ChevronRight, Check } from 'lucide-react';
+
+var DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
+function createEventFromISO({
+  category,
+  end,
+  id,
+  start,
+  title
+}) {
+  if (DATE_ONLY_RE.test(start) && DATE_ONLY_RE.test(end)) {
+    return {
+      category,
+      end: Temporal.PlainDate.from(end),
+      id,
+      start: Temporal.PlainDate.from(start),
+      title
+    };
+  }
+  return {
+    category,
+    end: Temporal.Instant.from(end).epochMilliseconds,
+    id,
+    start: Temporal.Instant.from(start).epochMilliseconds,
+    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)"
+      },
+      // Active state: the pill's popover is open. Interactive pills carry
+      // `aria-expanded`, so this only matches the open trigger. The outline uses
+      // the category accent color and composes cleanly with the color/past
+      // background overrides.
+      '&[aria-expanded="true"]': {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "var(--schedule-event-dot)",
+        outlineOffset: "1px"
+      },
+      '&[data-state="past"]': {
+        "--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))"
+      }
+    },
+    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: {}
+    },
+    // Applied when the pill is rendered as a clickable <button> trigger (event
+    // popover plugin). Resets user-agent button styling so the pill looks
+    // identical to its static <span> form.
+    isInteractive: {
+      true: {
+        event: {
+          appearance: "none",
+          textAlign: "inherit",
+          font: "inherit",
+          m: 0,
+          cursor: "pointer",
+          _focusVisible: {
+            outlineWidth: "focus",
+            outlineStyle: "solid",
+            outlineColor: "primary"
+          }
+        }
+      },
+      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: {
+          // Keep `isPast` in the recipe API for class-based assertions and
+          // callers, but rely on `[data-state="past"]` for the actual variable
+          // overrides so the color variant cannot win by atomic CSS order.
+          "--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,
+    isInteractive: false,
+    isPast: false
+  }
+});
+
+// src/components/Schedule/TimeGridView.recipe.ts
+var scheduleTimeGridViewRecipe = sva({
+  slots: [
+    "grid",
+    "header",
+    "corner",
+    "dayHeader",
+    "dayHeaderContent",
+    "dayHeaderDayNumber",
+    "allDayLabel",
+    "allDayRow",
+    "dayCell",
+    "timeLabel",
+    "timeRow",
+    "hourCell",
+    "events",
+    "allDayEvents",
+    "allDayPopoverContent",
+    "allDayPopoverEvents",
+    "allDaySeeMoreButton",
+    "rowContents"
+  ],
+  base: {
+    grid: {
+      display: "grid",
+      gridTemplateColumns: "72px 1fr",
+      overflow: "auto"
+    },
+    header: {
+      display: "grid",
+      gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    corner: {
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    dayHeader: {
+      p: "2",
+      textAlign: "center",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border"
+    },
+    dayHeaderContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1"
+    },
+    dayHeaderDayNumber: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minW: "30px",
+      h: "30px",
+      lineHeight: "30px",
+      borderRadius: "full"
+    },
+    allDayLabel: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "flex-end",
+      py: "0.5",
+      px: "2",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    allDayRow: {
+      display: "grid",
+      gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    dayCell: {
+      minH: 0,
+      p: "0.5",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border"
+    },
+    timeLabel: {
+      p: "2",
+      color: "fg.muted",
+      textAlign: "end",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    timeRow: {
+      display: "grid",
+      gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))"
+    },
+    hourCell: {
+      position: "relative",
+      minH: "14",
+      p: "1",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    events: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1"
+    },
+    allDayEvents: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5"
+    },
+    allDayPopoverContent: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      p: "3"
+    },
+    allDayPopoverEvents: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 0,
+      m: 0,
+      p: 0,
+      listStyleType: "none"
+    },
+    allDaySeeMoreButton: {
+      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"
+      }
+    },
+    rowContents: {
+      display: "contents"
+    }
+  },
+  variants: {
+    isCurrentDay: {
+      true: {
+        dayHeaderDayNumber: {
+          bg: "primary",
+          color: "fg.onPrimary"
+        }
+      },
+      false: {}
+    },
+    isLastColumn: {
+      true: {
+        dayHeader: { borderInlineEndWidth: 0 },
+        dayCell: { borderInlineEndWidth: 0 },
+        hourCell: { borderInlineEndWidth: 0 }
+      },
+      false: {}
+    },
+    isLastRow: {
+      true: {
+        timeLabel: { borderBlockEndWidth: 0 },
+        hourCell: { borderBlockEndWidth: 0 }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isCurrentDay: false,
+    isLastColumn: false,
+    isLastRow: false
+  }
+});
+var ScheduleContext = createContext(null);
+ScheduleContext.displayName = "ScheduleContext";
+function useScheduleContext() {
+  const context = use(ScheduleContext);
+  if (context == null) {
+    throw new Error("Schedule views must be rendered inside Schedule.");
+  }
+  return context;
+}
+
+// src/components/Schedule/dateMath.ts
+function isDayEvent(event) {
+  return typeof event.start !== "number";
+}
+function getScheduleRangeFromDates({
+  endDate,
+  startDate,
+  timezoneID
+}) {
+  return {
+    end: plainDateToInstant(endDate, timezoneID),
+    endDate,
+    start: plainDateToInstant(startDate, timezoneID),
+    startDate
+  };
+}
+function enumerateDates(start, endExclusive) {
+  const dates = [];
+  let current = start;
+  while (plainDateIsBefore(current, endExclusive)) {
+    dates.push(current);
+    current = current.add({ days: 1 });
+  }
+  return dates;
+}
+function eventOverlapsRange(event, range, timezoneID) {
+  if (isDayEvent(event)) {
+    const eventStart = plainDateToInstant(event.start, timezoneID);
+    const eventEnd = 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 !plainDateIsAfter(event.start, date) && !plainDateIsBefore(event.end, date);
+  }
+  const startDate = plainDateFromInstant(event.start, timezoneID);
+  const endDate = plainDateFromInstant(
+    Math.max(event.end - 1, event.start),
+    timezoneID
+  );
+  return !plainDateIsAfter(startDate, date) && !plainDateIsBefore(endDate, date);
+}
+function sortEvents(events, timezoneID) {
+  return [...events].sort((a, b) => {
+    const aStart = getEventSortStart(a, timezoneID);
+    const bStart = getEventSortStart(b, timezoneID);
+    return aStart < bStart ? -1 : aStart > bStart ? 1 : a.title.localeCompare(b.title);
+  });
+}
+function getEventSortStart(event, timezoneID) {
+  return isDayEvent(event) ? plainDateToInstant(event.start, timezoneID) : event.start;
+}
+
+// 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"
+    }
+  }
+});
+var scheduleClasses = scheduleRecipe();
+var categoryFallback = { label: "Event", color: "blue" };
+var currentTimeIndicator = cva({
+  base: {
+    h: "0.5",
+    bg: "surface.orange.accent",
+    borderRadius: "full",
+    pointerEvents: "none",
+    _before: {
+      content: '""',
+      position: "absolute",
+      insetInlineStart: "-6px",
+      top: "50%",
+      w: "2.5",
+      h: "2.5",
+      borderRadius: "full",
+      bg: "surface.orange.accent",
+      transform: "translateY(-50%)"
+    }
+  },
+  variants: {
+    layout: {
+      list: {
+        position: "relative"
+      },
+      timeGrid: {
+        position: "absolute",
+        insetInline: "0",
+        transform: "translateY(2px)",
+        zIndex: "20"
+      }
+    }
+  }
+});
+function ScheduleCurrentTimeIndicator({
+  layout,
+  testId,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: currentTimeIndicator({ layout }),
+      "data-testid": testId,
+      style
+    }
+  );
+}
+function createCategoryMap(categories) {
+  const categoryMap = /* @__PURE__ */ new Map();
+  categories.forEach((category) => {
+    if (!categoryMap.has(category.label)) {
+      categoryMap.set(category.label, category);
+    }
+  });
+  return categoryMap;
+}
+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);
+}
+function formatMonthTitle(date) {
+  return plainDateFormat(date, DATE_FORMAT_MONTH_YEAR);
+}
+function formatWeekTitle(start, end) {
+  if (start.year === end.year && start.month === end.month) {
+    return formatMonthTitle(start);
+  }
+  const startMonth = plainDateFormat(start, { month: "long" });
+  const endMonth = plainDateFormat(end, { month: "long" });
+  return start.year === end.year ? `${startMonth} - ${endMonth} ${end.year}` : `${startMonth} ${start.year} - ${endMonth} ${end.year}`;
+}
+function formatListRangeTitle(start, end) {
+  return plainDateIsEqual(start, end) ? formatDate(start) : formatWeekTitle(start, end);
+}
+function formatTime(instant, timezoneID) {
+  return Temporal.Instant.fromEpochMilliseconds(instant).toZonedDateTimeISO(timezoneID).toLocaleString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function formatTimezoneAbbreviation(date, timezoneID) {
+  const formatter = new Intl.DateTimeFormat(void 0, {
+    timeZone: timezoneID,
+    timeZoneName: "short"
+  });
+  const parts = formatter.formatToParts(
+    date.toZonedDateTime(timezoneID).epochMilliseconds
+  );
+  return parts.find((part) => part.type === "timeZoneName")?.value ?? timezoneID;
+}
+function formatHour(hour) {
+  return Temporal.PlainTime.from({ hour }).toLocaleString(void 0, {
+    hour: "numeric"
+  });
+}
+function getEventTimeLabel(event, timezoneID) {
+  if (isDayEvent(event)) {
+    return "all day";
+  }
+  return `${formatTime(event.start, timezoneID)} - ${formatTime(event.end, timezoneID)}`;
+}
+function getEventStartTimeLabel(event, timezoneID) {
+  return isDayEvent(event) ? null : formatTime(event.start, timezoneID);
+}
+function getEventAccessibleLabel(event, categoryMap, timezoneID) {
+  const category = getCategory(categoryMap, event);
+  return `${event.title}, ${category.label}, ${getEventTimeLabel(event, timezoneID)}`;
+}
+function getMinutesSinceStartOfDay(instant, timezoneID) {
+  const zonedTime = Temporal.Instant.fromEpochMilliseconds(instant).toZonedDateTimeISO(timezoneID).toPlainTime();
+  return zonedTime.hour * 60 + zonedTime.minute;
+}
+function isEventInPast(event, currentTime2, timezoneID) {
+  if (isDayEvent(event)) {
+    return plainDateIsBefore(
+      event.end,
+      plainDateFromInstant(currentTime2, timezoneID)
+    );
+  }
+  return event.end <= currentTime2;
+}
+function hasEventPopoverPlugin(plugins) {
+  return plugins.some((plugin) => plugin.renderEventPopover != null);
+}
+function useScheduleEventPopover(event, { placement = "end" } = {}) {
+  const { categoryMap, plugins, timezoneID } = useScheduleContext();
+  const popover = usePopover({
+    // Content renders its own close affordance via the `controls.close` passed
+    // to renderEventPopover, so suppress the built-in close button.
+    hasCloseButton: false,
+    label: getEventAccessibleLabel(event, categoryMap, timezoneID),
+    role: "dialog"
+  });
+  const { hide } = popover;
+  const controls = useMemo(
+    () => ({ close: hide }),
+    [hide]
+  );
+  const content = useMemo(() => {
+    for (const plugin of plugins) {
+      const node = plugin.renderEventPopover?.(event, controls);
+      if (isReactNode(node)) {
+        return node;
+      }
+    }
+    return null;
+  }, [controls, event, plugins]);
+  if (!isReactNode(content)) {
+    return {};
+  }
+  return {
+    popover: popover.render(content, {
+      alignment: "start",
+      offsetX: 8,
+      offsetY: -3,
+      placement
+    }),
+    triggerProps: {
+      ...popover.triggerProps,
+      onClick: popover.toggle,
+      ref: popover.triggerRef
+    }
+  };
+}
+function useScheduleEventPluginProps({
+  event,
+  layout
+}) {
+  const { plugins, timezoneID } = useScheduleContext();
+  return useMemo(() => {
+    let props;
+    plugins.forEach((plugin) => {
+      const pluginProps = plugin.getEventProps?.({ event, layout, timezoneID });
+      if (pluginProps != null) {
+        props = { ...props, ...pluginProps };
+      }
+    });
+    return props;
+  }, [event, layout, plugins, timezoneID]);
+}
+function EventPillRoot({
+  children,
+  className,
+  dataState,
+  dataTestId,
+  pluginProps,
+  triggerProps
+}) {
+  if (triggerProps != null) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className,
+        "data-state": dataState,
+        "data-testid": dataTestId,
+        ...pluginProps,
+        type: "button",
+        ...triggerProps,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      "data-state": dataState,
+      "data-testid": dataTestId,
+      ...pluginProps,
+      children
+    }
+  );
+}
+function CalendarEventPill({
+  event,
+  isFullWidth = false,
+  isPast = false
+}) {
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const { popover, triggerProps } = useScheduleEventPopover(event);
+  const pluginProps = useScheduleEventPluginProps({ event, layout: "inline" });
+  const category = getCategory(categoryMap, event);
+  const classes = scheduleEventRecipe({
+    color: category.color,
+    isFullWidth,
+    isPast,
+    isInteractive: triggerProps != null
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      EventPillRoot,
+      {
+        className: classes.event,
+        dataState: isPast ? "past" : void 0,
+        dataTestId: `schedule-event-${event.id}`,
+        pluginProps,
+        triggerProps,
+        children: /* @__PURE__ */ jsx("span", { className: classes.title, children: isDayEvent(event) ? event.title : getEventAccessibleLabel(event, categoryMap, timezoneID) })
+      }
+    ),
+    popover
+  ] });
+}
+function CalendarMonthEventPill({
+  event,
+  isPast = false
+}) {
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const { popover, triggerProps } = useScheduleEventPopover(event);
+  const pluginProps = useScheduleEventPluginProps({ event, layout: "month" });
+  const category = getCategory(categoryMap, event);
+  const startTimeLabel = getEventStartTimeLabel(event, timezoneID);
+  const classes = scheduleEventRecipe({
+    color: category.color,
+    isPast,
+    isFullWidth: true,
+    isInteractive: triggerProps != null
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      EventPillRoot,
+      {
+        className: classes.event,
+        dataState: isPast ? "past" : void 0,
+        dataTestId: `schedule-event-${event.id}`,
+        pluginProps,
+        triggerProps,
+        children: [
+          startTimeLabel != null ? /* @__PURE__ */ jsx("span", { className: classes.time, children: startTimeLabel }) : null,
+          /* @__PURE__ */ jsx("span", { className: classes.title, children: event.title })
+        ]
+      }
+    ),
+    popover
+  ] });
+}
+function ScheduleEventOverflowPopover({
+  buttonClassName,
+  contentClassName,
+  events,
+  eventsClassName,
+  hiddenEventCount,
+  label,
+  renderEvent,
+  testId,
+  title
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      content: /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
+        /* @__PURE__ */ jsx(Heading, { level: 4, children: title }),
+        /* @__PURE__ */ jsx("ul", { className: eventsClassName, children: events.map((event) => /* @__PURE__ */ jsx("li", { children: renderEvent(event) }, event.id)) })
+      ] }),
+      "data-testid": testId,
+      label,
+      width: 320,
+      children: /* @__PURE__ */ jsxs(
+        Link,
+        {
+          className: buttonClassName,
+          color: "primary",
+          label,
+          size: "xs",
+          weight: "medium",
+          children: [
+            "+",
+            hiddenEventCount,
+            " more"
+          ]
+        }
+      )
+    }
+  );
+}
+function ScheduleFrame({
+  children,
+  title,
+  titleLabel
+}) {
+  const { isLoading, plugins } = useScheduleContext();
+  const initialHeader = {
+    startContent: null,
+    centerContent: /* @__PURE__ */ jsxs("span", { className: scheduleClasses.headerTitleContent, children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, children: title }),
+      isLoading ? /* @__PURE__ */ jsx(
+        Spinner,
+        {
+          "aria-label": "Loading events",
+          className: scheduleClasses.headerTitleSpinner,
+          size: "sm"
+        }
+      ) : null
+    ] }),
+    endContent: null
+  };
+  const header = plugins.reduce(
+    (content, plugin) => plugin.renderHeader?.(
+      content.startContent,
+      content.centerContent,
+      content.endContent
+    ) ?? content,
+    initialHeader
+  );
+  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
+  ] });
+}
+var UPDATE_INTERVAL_MS = 60 * 1e3;
+var listeners = /* @__PURE__ */ new Set();
+var interval = null;
+var currentTime = getCurrentTime();
+function getCurrentTime() {
+  return Temporal.Now.instant().epochMilliseconds;
+}
+function getSnapshot() {
+  return currentTime;
+}
+function getServerSnapshot() {
+  return 0;
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  currentTime = getCurrentTime();
+  listener();
+  interval ?? (interval = setInterval(() => {
+    currentTime = getCurrentTime();
+    listeners.forEach((activeListener) => activeListener());
+  }, UPDATE_INTERVAL_MS));
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && interval != null) {
+      clearInterval(interval);
+      interval = null;
+    }
+  };
+}
+function useCurrentTime() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+var styles = scheduleTimeGridViewRecipe();
+function eventOverlapsHour(event, day, hour, timezoneID) {
+  if (isDayEvent(event)) {
+    return false;
+  }
+  if (!eventOccursOnDate(event, day, timezoneID)) {
+    return false;
+  }
+  const hourStart = day.toPlainDateTime(Temporal.PlainTime.from({ hour })).toZonedDateTime(timezoneID).epochMilliseconds;
+  const hourEnd = hour === 23 ? day.add({ days: 1 }).toZonedDateTime(timezoneID).epochMilliseconds : day.toPlainDateTime(Temporal.PlainTime.from({ hour: hour + 1 })).toZonedDateTime(timezoneID).epochMilliseconds;
+  return event.start < hourEnd && event.end > hourStart;
+}
+function eventSpansPastDay(event, day, timezoneID) {
+  return !plainDateIsEqual(
+    plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID),
+    day
+  );
+}
+function getAvailableTimedEventLevel(levelEndMinutes, visibleStart) {
+  const level = levelEndMinutes.findIndex(
+    (endMinute) => visibleStart >= endMinute
+  );
+  return level >= 0 ? level : levelEndMinutes.length;
+}
+function getTimedEventLayouts({
+  day,
+  events,
+  hourHeight,
+  maxHour,
+  minHour,
+  timezoneID
+}) {
+  const levelEndMinutes = [];
+  const minMinute = minHour * 60;
+  const maxMinute = maxHour * 60;
+  return events.map((event) => {
+    const startDate = plainDateFromInstant(event.start, timezoneID);
+    const rawStart = 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;
+    }
+    const visibleStart = Math.max(rawStart, minMinute);
+    const visibleEnd = Math.min(
+      maxMinute,
+      Math.max(visibleStart + 15, rawEnd)
+    );
+    return { event, visibleEnd, visibleStart };
+  }).filter(
+    (layout) => layout != null && layout.visibleEnd > layout.visibleStart
+  ).sort((a, b) => {
+    if (a.visibleStart !== b.visibleStart) {
+      return a.visibleStart - b.visibleStart;
+    }
+    return a.visibleEnd - b.visibleEnd || a.event.title.localeCompare(b.event.title);
+  }).map(({ event, visibleEnd, visibleStart }) => {
+    const level = getAvailableTimedEventLevel(levelEndMinutes, visibleStart);
+    levelEndMinutes[level] = visibleEnd;
+    const startHour = Math.floor(visibleStart / 60);
+    return {
+      event,
+      height: (visibleEnd - visibleStart) / 60 * hourHeight,
+      level,
+      startHour,
+      top: (visibleStart - startHour * 60) / 60 * hourHeight
+    };
+  });
+}
+function getTimedEventStyle({
+  height,
+  level,
+  top
+}) {
+  return {
+    height: `${Math.max(36, height - 5)}px`,
+    insetInlineEnd: "2px",
+    insetInlineStart: level === 0 ? "2px" : `calc(2px + ${level * 8}%)`,
+    top: `${top + 2}px`,
+    zIndex: level + 1
+  };
+}
+function TimeGridEvent({
+  currentTime: currentTime2,
+  hourHeight,
+  layout,
+  maxHour,
+  minHour
+}) {
+  const { categoryMap, plugins, timezoneID } = useScheduleContext();
+  const { event } = layout;
+  const { popover, triggerProps } = useScheduleEventPopover(event);
+  const eventPluginProps = useScheduleEventPluginProps({
+    event,
+    layout: "timeGrid"
+  });
+  const pluginEndContent = useMemo(
+    () => plugins.map(
+      (plugin) => plugin.renderTimeGridEventContent?.({
+        event,
+        hourHeight,
+        maxHour,
+        minHour,
+        timezoneID
+      })
+    ).filter(isReactNode),
+    [event, hourHeight, maxHour, minHour, plugins, timezoneID]
+  );
+  const category = getCategory(categoryMap, event);
+  const isPast = isEventInPast(event, currentTime2, timezoneID);
+  const classes = scheduleEventRecipe({
+    layout: "block",
+    color: category.color,
+    isPast,
+    isInteractive: triggerProps != null
+  });
+  const style = getTimedEventStyle(layout);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: classes.title, children: event.title }),
+    /* @__PURE__ */ jsx("span", { className: classes.time, children: getEventTimeLabel(event, timezoneID) }),
+    pluginEndContent
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerProps != null ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: classes.event,
+        "data-state": isPast ? "past" : void 0,
+        "data-testid": `schedule-event-${event.id}`,
+        style,
+        type: "button",
+        ...eventPluginProps,
+        ...triggerProps,
+        children: body
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes.event,
+        "data-state": isPast ? "past" : void 0,
+        "data-testid": `schedule-event-${event.id}`,
+        ...eventPluginProps,
+        style,
+        children: body
+      }
+    ),
+    popover
+  ] });
+}
+function getCellName({
+  categoryMap,
+  date,
+  events,
+  hourLabel,
+  timezoneID
+}) {
+  const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
+  const eventLabels = events.map(
+    (event) => getEventAccessibleLabel(event, categoryMap, timezoneID)
+  );
+  return eventLabels.length > 0 ? `${dateLabel} ${hourLabel}. ${eventLabels.join(". ")}` : `${dateLabel} ${hourLabel}`;
+}
+function TimeGridView({
+  allDayEventLimit = 3,
+  days,
+  hourHeight = 100,
+  maxHour = 24,
+  minHour = 0
+}) {
+  const { categoryMap, events, highlightDate, plugins, timezoneID } = useScheduleContext();
+  const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
+  const normalizedMaxHour = Math.max(
+    normalizedMinHour + 1,
+    Math.min(24, Math.floor(maxHour))
+  );
+  const hours = Array.from(
+    { length: normalizedMaxHour - normalizedMinHour },
+    (_, index) => normalizedMinHour + index
+  );
+  const currentTime2 = useCurrentTime();
+  const highlightPlainDate = highlightDate.toPlainDate();
+  const timezoneLabel = formatTimezoneAbbreviation(
+    days[0] ?? highlightPlainDate,
+    timezoneID
+  );
+  const gridStyle = {
+    "--schedule-day-count": String(days.length)
+  };
+  const normalizedHourHeight = Math.max(1, Math.floor(hourHeight));
+  const normalizedAllDayEventLimit = Number.isFinite(allDayEventLimit) ? Math.max(0, Math.floor(allDayEventLimit)) : 3;
+  const hourStyle = {
+    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(scheduleClasses.surface, styles.grid),
+      role: "grid",
+      style: gridStyle,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.rowContents, role: "row", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-colindex": 1,
+              "aria-label": "Time",
+              className: styles.corner,
+              role: "columnheader"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles.header, children: days.map((day, index) => {
+            const isCurrentDay = plainDateIsEqual(day, highlightPlainDate);
+            const dayHeaderClasses = scheduleTimeGridViewRecipe({
+              isCurrentDay,
+              isLastColumn: index === days.length - 1
+            });
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-colindex": index + 2,
+                "aria-current": isCurrentDay ? "date" : void 0,
+                "aria-label": plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY),
+                className: dayHeaderClasses.dayHeader,
+                role: "columnheader",
+                children: /* @__PURE__ */ jsx(
+                  Heading,
+                  {
+                    "aria-hidden": "true",
+                    color: "secondary",
+                    level: 4,
+                    textWrap: "nowrap",
+                    children: /* @__PURE__ */ jsxs("span", { className: styles.dayHeaderContent, children: [
+                      plainDateFormat(day, { weekday: "short" }),
+                      /* @__PURE__ */ jsx("span", { className: dayHeaderClasses.dayHeaderDayNumber, children: day.day })
+                    ] })
+                  }
+                )
+              },
+              day.toString()
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.rowContents, role: "row", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-colindex": 1,
+              "aria-label": `${timezoneLabel} all day`,
+              className: styles.allDayLabel,
+              role: "rowheader",
+              children: /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", weight: "bold", children: timezoneLabel })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles.allDayRow, children: days.map((day, index) => {
+            const dayEvents = events.filter(
+              (event) => isDayEvent(event) && eventOccursOnDate(event, day, timezoneID)
+            );
+            const visibleDayEvents = dayEvents.slice(
+              0,
+              normalizedAllDayEventLimit
+            );
+            const hiddenDayEvents = dayEvents.slice(normalizedAllDayEventLimit);
+            const dayCellClasses = scheduleTimeGridViewRecipe({
+              isLastColumn: index === days.length - 1
+            });
+            const dateLabel = plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY);
+            const seeMoreLabel = `Show ${hiddenDayEvents.length} more all-day events for ${dateLabel}`;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-colindex": index + 2,
+                "aria-label": getCellName({
+                  categoryMap,
+                  date: day,
+                  events: dayEvents,
+                  hourLabel: "all day",
+                  timezoneID
+                }),
+                className: dayCellClasses.dayCell,
+                role: "gridcell",
+                children: /* @__PURE__ */ jsxs("div", { className: styles.allDayEvents, children: [
+                  visibleDayEvents.map((event) => /* @__PURE__ */ jsx(
+                    CalendarEventPill,
+                    {
+                      event,
+                      isPast: isEventInPast(event, currentTime2, timezoneID)
+                    },
+                    event.id
+                  )),
+                  hiddenDayEvents.length > 0 ? /* @__PURE__ */ jsx(
+                    ScheduleEventOverflowPopover,
+                    {
+                      buttonClassName: styles.allDaySeeMoreButton,
+                      contentClassName: styles.allDayPopoverContent,
+                      events: dayEvents,
+                      eventsClassName: styles.allDayPopoverEvents,
+                      hiddenEventCount: hiddenDayEvents.length,
+                      label: seeMoreLabel,
+                      renderEvent: (event) => /* @__PURE__ */ jsx(
+                        CalendarEventPill,
+                        {
+                          event,
+                          isFullWidth: true,
+                          isPast: isEventInPast(event, currentTime2, timezoneID)
+                        }
+                      ),
+                      testId: `schedule-all-day-see-more-${day.toString()}`,
+                      title: dateLabel
+                    }
+                  ) : null
+                ] })
+              },
+              `${day.toString()}-all-day`
+            );
+          }) })
+        ] }),
+        hours.map((hour) => {
+          const hourLabel = formatHour(hour);
+          const isLastHour = hour === hours[hours.length - 1];
+          const timeLabelClasses = scheduleTimeGridViewRecipe({
+            isLastRow: isLastHour
+          });
+          return /* @__PURE__ */ jsxs("div", { className: styles.rowContents, role: "row", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-colindex": 1,
+                className: timeLabelClasses.timeLabel,
+                role: "rowheader",
+                style: hourStyle,
+                children: hourLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles.timeRow, children: days.map((day, index) => {
+              const hourEvents = events.filter(
+                (event) => eventOverlapsHour(event, day, hour, timezoneID)
+              );
+              const visibleTimedEventLayouts = timedEventLayoutsByDay[index].filter((layout) => layout.startHour === hour);
+              const currentTimeTop = getCurrentTimeTopForHour({
+                currentTime: currentTime2,
+                day,
+                hour,
+                maxHour: normalizedMaxHour,
+                minHour: normalizedMinHour,
+                timezoneID
+              });
+              const hourCellClasses = scheduleTimeGridViewRecipe({
+                isLastColumn: index === days.length - 1,
+                isLastRow: isLastHour
+              });
+              const hourCellPluginProps = plugins.reduce(
+                (props, plugin) => ({
+                  ...props,
+                  ...plugin.getTimeGridCellProps?.({
+                    date: day,
+                    hour,
+                    hourHeight: normalizedHourHeight,
+                    maxHour: normalizedMaxHour,
+                    minHour: normalizedMinHour,
+                    timezoneID
+                  })
+                }),
+                {}
+              );
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-colindex": index + 2,
+                  "aria-label": getCellName({
+                    categoryMap,
+                    date: day,
+                    events: hourEvents,
+                    hourLabel,
+                    timezoneID
+                  }),
+                  className: hourCellClasses.hourCell,
+                  "data-testid": `schedule-time-grid-cell-${day.toString()}-${hour}`,
+                  role: "gridcell",
+                  style: hourStyle,
+                  ...hourCellPluginProps,
+                  children: [
+                    currentTimeTop != null ? /* @__PURE__ */ jsx(
+                      ScheduleCurrentTimeIndicator,
+                      {
+                        layout: "timeGrid",
+                        style: { top: `${currentTimeTop}%` },
+                        testId: "schedule-current-time-line"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx("div", { className: styles.events, children: visibleTimedEventLayouts.map((layout) => /* @__PURE__ */ jsx(
+                      TimeGridEvent,
+                      {
+                        currentTime: currentTime2,
+                        hourHeight: normalizedHourHeight,
+                        layout,
+                        maxHour: normalizedMaxHour,
+                        minHour: normalizedMinHour
+                      },
+                      layout.event.id
+                    )) })
+                  ]
+                },
+                `${day.toString()}-${hour}`
+              );
+            }) })
+          ] }, hour);
+        })
+      ]
+    }
+  );
+}
+function getCurrentTimeTopForHour({
+  currentTime: currentTime2,
+  day,
+  hour,
+  maxHour,
+  minHour,
+  timezoneID
+}) {
+  if (!plainDateIsEqual(day, plainDateFromInstant(currentTime2, timezoneID))) {
+    return null;
+  }
+  const currentMinute = getMinutesSinceStartOfDay(currentTime2, timezoneID);
+  const minMinute = minHour * 60;
+  const maxMinute = maxHour * 60;
+  if (currentMinute < minMinute || currentMinute > maxMinute) {
+    return null;
+  }
+  if (currentMinute === maxMinute) {
+    return hour === maxHour - 1 ? 100 : null;
+  }
+  if (Math.floor(currentMinute / 60) !== hour) {
+    return null;
+  }
+  return currentMinute % 60 / 60 * 100;
+}
+
+// src/components/Schedule/scheduleZonedInstant.ts
+function createScheduleZonedInstant(date, timezoneID) {
+  return scheduleZonedInstantFromInstant(date, timezoneID);
+}
+function scheduleZonedInstantFromInstant(instant, timezoneID) {
+  return {
+    addDays: (days) => {
+      const date = plainDateFromInstant(instant, timezoneID).add({ days });
+      return scheduleZonedInstantFromInstant(
+        plainDateToInstant(date, timezoneID),
+        timezoneID
+      );
+    },
+    instant,
+    startOfDay: () => {
+      const date = plainDateFromInstant(instant, timezoneID);
+      return scheduleZonedInstantFromInstant(
+        plainDateToInstant(date, timezoneID),
+        timezoneID
+      );
+    },
+    timezoneID,
+    toPlainDate: () => plainDateFromInstant(instant, timezoneID)
+  };
+}
+function scheduleRangeToScheduleZonedInstantRange(range, timezoneID) {
+  return [
+    scheduleZonedInstantFromInstant(range.start, timezoneID),
+    scheduleZonedInstantFromInstant(range.end, timezoneID)
+  ];
+}
+function ScheduleDayView({
+  options
+}) {
+  const { viewDate } = useScheduleContext();
+  const day = viewDate.toPlainDate();
+  return /* @__PURE__ */ jsx(ScheduleFrame, { title: formatMonthTitle(day), titleLabel: formatDate(day), children: /* @__PURE__ */ jsx(
+    TimeGridView,
+    {
+      allDayEventLimit: options.allDayEventLimit,
+      days: [day],
+      hourHeight: options.hourHeight,
+      maxHour: options.maxHour,
+      minHour: options.minHour
+    }
+  ) });
+}
+function createScheduleDayView({
+  allDayEventLimit = 3,
+  hourHeight = 100,
+  maxHour = 24,
+  minHour = 0
+} = {}) {
+  return {
+    component: ScheduleDayView,
+    getDateRange: (date) => scheduleRangeToScheduleZonedInstantRange(
+      getScheduleRangeFromDates({
+        endDate: date.toPlainDate().add({ days: 1 }),
+        startDate: date.toPlainDate(),
+        timezoneID: date.timezoneID
+      }),
+      date.timezoneID
+    ),
+    getNextDateRange: (date) => ({
+      label: "Next day",
+      range: [date.startOfDay().addDays(1), date.startOfDay().addDays(2)]
+    }),
+    getPreviousDateRange: (date) => ({
+      label: "Previous day",
+      range: [date.startOfDay().addDays(-1), date.startOfDay()]
+    }),
+    options: { allDayEventLimit, hourHeight, maxHour, minHour }
+  };
+}
+
+// src/components/Schedule/ListView.recipe.ts
+var scheduleListViewRecipe = sva({
+  slots: [
+    "list",
+    "day",
+    "dayHeading",
+    "dayWeekday",
+    "dayNumber",
+    "events",
+    "eventRow",
+    "eventContent",
+    "eventTime"
+  ],
+  base: {
+    list: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    day: {
+      display: "grid",
+      gridTemplateColumns: "112px minmax(0, 1fr)",
+      alignItems: "start",
+      columnGap: "3",
+      p: "3",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    dayHeading: {
+      m: 0,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      gap: "2",
+      color: "fg.muted",
+      fontFamily: "body",
+      fontSize: "lg",
+      fontWeight: "semibold",
+      lineHeight: "tight",
+      whiteSpace: "nowrap"
+    },
+    dayWeekday: {
+      display: "inline-block",
+      fontSize: "lg"
+    },
+    dayNumber: {
+      display: "inline-flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      w: "30px",
+      h: "30px",
+      borderRadius: "full",
+      fontWeight: "bold"
+    },
+    events: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    eventRow: {
+      display: "grid",
+      gridTemplateColumns: "160px minmax(0, 1fr)",
+      alignItems: "center",
+      gap: "3"
+    },
+    eventContent: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      justifySelf: "start",
+      minW: 0
+    },
+    eventTime: {
+      whiteSpace: "nowrap"
+    }
+  },
+  variants: {
+    isHighlightedDay: {
+      true: {
+        dayNumber: {
+          bg: "primary",
+          color: "fg.onPrimary"
+        }
+      },
+      false: {}
+    },
+    isLastDay: {
+      true: {
+        day: {
+          borderBlockEndWidth: 0
+        }
+      },
+      false: {}
+    },
+    isPastEvent: {
+      true: {
+        eventRow: {
+          opacity: 0.64
+        }
+      },
+      false: {}
+    },
+    isInteractiveEvent: {
+      true: {
+        eventContent: {
+          appearance: "none",
+          bg: "none",
+          borderWidth: 0,
+          p: 0,
+          m: 0,
+          font: "inherit",
+          textAlign: "inherit",
+          color: "inherit",
+          cursor: "pointer",
+          borderRadius: "sm",
+          _focusVisible: {
+            outlineWidth: "focus",
+            outlineStyle: "solid",
+            outlineColor: "primary"
+          }
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isHighlightedDay: false,
+    isLastDay: false,
+    isPastEvent: false,
+    isInteractiveEvent: false
+  }
+});
+var styles2 = scheduleListViewRecipe();
+function ListEvent({
+  event,
+  isPast
+}) {
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const { popover, triggerProps } = useScheduleEventPopover(event, {
+    placement: "end"
+  });
+  const category = getCategory(categoryMap, event);
+  const eventDataState = isPast ? "past" : void 0;
+  const classes = scheduleListViewRecipe({
+    isInteractiveEvent: triggerProps != null,
+    isPastEvent: isPast
+  });
+  const eventContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: category.label, hoverIndication: "never", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-label": category.label,
+        className: scheduleEventRecipe({ color: category.color }).dot,
+        role: "img"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Text, { children: event.title })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: classes.eventRow, "data-state": eventDataState, children: [
+    /* @__PURE__ */ jsx(Text, { className: classes.eventTime, color: "secondary", type: "supporting", children: isDayEvent(event) ? "All day" : getEventTimeLabel(event, timezoneID) }),
+    triggerProps != null ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: classes.eventContent,
+        "data-state": eventDataState,
+        "data-testid": `schedule-event-${event.id}`,
+        type: "button",
+        ...triggerProps,
+        children: eventContent
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes.eventContent,
+        "data-state": eventDataState,
+        "data-testid": `schedule-event-${event.id}`,
+        children: eventContent
+      }
+    ),
+    popover
+  ] });
+}
+function ScheduleListView() {
+  const { events, highlightDate, isLoading, range, timezoneID } = useScheduleContext();
+  const days = enumerateDates(range.startDate, range.endDate);
+  const currentTime2 = useCurrentTime();
+  const currentPlainDate = plainDateFromInstant(currentTime2, timezoneID);
+  const highlightPlainDate = highlightDate.toPlainDate();
+  const endDate = range.endDate.add({ days: -1 });
+  const title = formatListRangeTitle(range.startDate, endDate);
+  const visibleDays = days.map((day) => {
+    const dayEvents = events.filter(
+      (event) => eventOccursOnDate(event, day, timezoneID)
+    );
+    const isCurrentDay = plainDateIsEqual(day, currentPlainDate);
+    const isHighlightedDay = plainDateIsEqual(day, highlightPlainDate);
+    const isBaseDay = plainDateIsEqual(day, range.startDate);
+    return {
+      day,
+      dayEvents,
+      isCurrentDay,
+      isHighlightedDay,
+      isVisible: dayEvents.length > 0 || isCurrentDay || isBaseDay
+    };
+  }).filter((dayRecord) => dayRecord.isVisible);
+  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);
+      const dayClasses = scheduleListViewRecipe({
+        isHighlightedDay,
+        isLastDay: index === visibleDays.length - 1
+      });
+      return /* @__PURE__ */ jsxs("section", { className: dayClasses.day, children: [
+        /* @__PURE__ */ jsxs(
+          "h4",
+          {
+            "aria-current": isHighlightedDay ? "date" : void 0,
+            "aria-label": fullDate,
+            className: dayClasses.dayHeading,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: dayClasses.dayNumber, children: day.day }),
+              /* @__PURE__ */ jsx("span", { className: dayClasses.dayWeekday, children: plainDateFormat(day, { weekday: "short" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: dayClasses.events, children: renderListRows({
+          currentTime: currentTime2,
+          events: dayEvents,
+          isShowingCurrentTime: isCurrentDay && !isLoading,
+          timezoneID
+        }) })
+      ] }, day.toString());
+    }
+  ) }) });
+}
+function renderListRows({
+  currentTime: currentTime2,
+  events,
+  isShowingCurrentTime,
+  timezoneID
+}) {
+  const rows = events.map((event) => /* @__PURE__ */ jsx(
+    ListEvent,
+    {
+      event,
+      isPast: isEventInPast(event, currentTime2, timezoneID)
+    },
+    event.id
+  ));
+  if (!isShowingCurrentTime) {
+    return rows;
+  }
+  const marker = /* @__PURE__ */ jsx(
+    ScheduleCurrentTimeIndicator,
+    {
+      layout: "list",
+      testId: "schedule-list-current-time"
+    },
+    "current-time"
+  );
+  const insertIndex = events.findIndex(
+    (event) => !isDayEvent(event) && event.start > currentTime2
+  );
+  if (insertIndex < 0) {
+    return [...rows, marker];
+  }
+  return [...rows.slice(0, insertIndex), marker, ...rows.slice(insertIndex)];
+}
+function createScheduleListView({
+  days = 7
+} = {}) {
+  return {
+    component: ScheduleListView,
+    getDateRange: (date) => [
+      date.startOfDay(),
+      date.startOfDay().addDays(days)
+    ],
+    getNextDateRange: (date) => ({
+      label: "Next range",
+      range: [
+        date.startOfDay().addDays(days),
+        date.startOfDay().addDays(days * 2)
+      ]
+    }),
+    getPreviousDateRange: (date) => ({
+      label: "Previous range",
+      range: [date.startOfDay().addDays(-days), date.startOfDay()]
+    }),
+    options: { days }
+  };
+}
+
+// src/components/Schedule/MonthlyView.recipe.ts
+var scheduleMonthlyViewRecipe = sva({
+  slots: [
+    "grid",
+    "weekday",
+    "cell",
+    "dayNumber",
+    "todayText",
+    "monthSurface",
+    "monthCellGrid",
+    "monthEventOverlay",
+    "monthEventSpan",
+    "monthSeeMoreSpan",
+    "monthSeeMoreButton",
+    "monthPopoverContent",
+    "monthPopoverEvents"
+  ],
+  base: {
+    grid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+    },
+    weekday: {
+      p: "2",
+      textAlign: "center",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    cell: {
+      minH: "24",
+      p: "0.5",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    dayNumber: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "6",
+      h: "6",
+      m: "0.5",
+      borderRadius: "full"
+    },
+    monthSurface: {
+      position: "relative",
+      gridColumn: "1 / -1"
+    },
+    monthCellGrid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+      gridAutoRows: "var(--schedule-month-row-height)"
+    },
+    monthEventOverlay: {
+      position: "absolute",
+      inset: 0,
+      display: "grid",
+      gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+      gridAutoRows: "var(--schedule-month-row-height)",
+      pointerEvents: "none"
+    },
+    monthEventSpan: {
+      alignSelf: "start",
+      minW: 0,
+      mx: "0.5",
+      pointerEvents: "auto",
+      zIndex: 1
+    },
+    monthSeeMoreSpan: {
+      alignSelf: "start",
+      minW: 0,
+      mx: "0.5",
+      pointerEvents: "auto",
+      zIndex: 2
+    },
+    monthSeeMoreButton: {
+      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: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      p: "3"
+    },
+    monthPopoverEvents: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 0,
+      m: 0,
+      p: 0,
+      listStyleType: "none"
+    }
+  },
+  variants: {
+    isLastColumn: {
+      true: { cell: { borderInlineEndWidth: 0 } },
+      false: {}
+    },
+    isLastRow: {
+      true: { cell: { borderBlockEndWidth: 0 } },
+      false: {}
+    },
+    isOtherMonth: {
+      true: {
+        cell: {
+          bg: "bg.subtle",
+          color: "fg.muted"
+        }
+      },
+      false: {}
+    },
+    isToday: {
+      true: {
+        dayNumber: {
+          bg: "primary",
+          color: "fg.onPrimary"
+        },
+        todayText: {
+          marginInlineEnd: "1px"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isLastColumn: false,
+    isLastRow: false,
+    isOtherMonth: false,
+    isToday: false
+  }
+});
+var styles3 = scheduleMonthlyViewRecipe();
+var weekdays = [
+  { label: "Sunday", shortLabel: "Sun" },
+  { label: "Monday", shortLabel: "Mon" },
+  { label: "Tuesday", shortLabel: "Tue" },
+  { label: "Wednesday", shortLabel: "Wed" },
+  { label: "Thursday", shortLabel: "Thu" },
+  { label: "Friday", shortLabel: "Fri" },
+  { label: "Saturday", shortLabel: "Sat" }
+];
+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 = setStartOfWeek(firstOfMonth, weekStartsOn);
+  return Array.from(
+    { length: weekCount * 7 },
+    (_, index) => firstVisibleDay.add({ days: index })
+  );
+}
+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 [
+    date.startOfDay().addDays(currentDate.until(firstVisible).days),
+    date.startOfDay().addDays(currentDate.until(end).days)
+  ];
+}
+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 [
+    plainDateFromInstant(event.start, 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;
+}
+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 indexes = getEventVisibleDateIndexes({
+      event,
+      firstDay,
+      lastDay,
+      timezoneID
+    });
+    if (indexes == null) {
+      return null;
+    }
+    const [startIndex, endIndex] = indexes;
+    return {
+      endIndex,
+      event,
+      isPriority: isDayEvent(event) || endIndex > startIndex,
+      startIndex
+    };
+  }).filter(
+    (record) => record != null
+  ).sort((a, b) => {
+    if (a.startIndex !== b.startIndex) {
+      return a.startIndex - b.startIndex;
+    }
+    if (a.isPriority !== b.isPriority) {
+      return a.isPriority ? -1 : 1;
+    }
+    const aDuration = a.endIndex - a.startIndex;
+    const bDuration = b.endIndex - b.startIndex;
+    if (aDuration !== bDuration) {
+      return bDuration - aDuration;
+    }
+    return a.event.title.localeCompare(b.event.title);
+  });
+  monthEvents.forEach(({ endIndex, event, startIndex }) => {
+    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);
+      weekLevels[level] = columnEnd;
+      segments.push({
+        columnEnd,
+        columnStart,
+        endIndex,
+        event,
+        level,
+        startIndex,
+        week
+      });
+    }
+  });
+  return segments;
+}
+function getMonthEventSegmentStyle({
+  columnEnd,
+  columnStart,
+  level,
+  week
+}) {
+  return {
+    gridColumn: `${columnStart + 1} / ${columnEnd + 2}`,
+    gridRow: `${week + 1}`,
+    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, categoryMap, timezoneID)
+  );
+  const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
+  return eventLabels.length > 0 ? `${dateLabel}. ${eventLabels.join(". ")}` : dateLabel;
+}
+function ScheduleMonthlyView({
+  options
+}) {
+  const { categoryMap, events, highlightDate, plugins, timezoneID, viewDate } = useScheduleContext();
+  const eventPopoverActive = hasEventPopoverPlugin(plugins);
+  const currentTime2 = useCurrentTime();
+  const month = viewDate.toPlainDate();
+  const title = formatMonthTitle(month);
+  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(scheduleClasses.surface, styles3.grid),
+      role: "grid",
+      children: [
+        visibleWeekdays.map((weekday, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-colindex": index + 1,
+            "aria-label": weekday.label,
+            className: styles3.weekday,
+            role: "columnheader",
+            children: /* @__PURE__ */ jsx(Heading, { color: "secondary", level: 4, children: weekday.shortLabel })
+          },
+          weekday.label
+        )),
+        /* @__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;
+            const isToday = plainDateIsEqual(day, today);
+            const dayClasses = scheduleMonthlyViewRecipe({
+              isLastColumn,
+              isLastRow,
+              isOtherMonth: !isCurrentMonth,
+              isToday
+            });
+            const dayCellPluginProps = plugins.reduce(
+              (props, plugin) => ({
+                ...props,
+                ...plugin.getMonthCellProps?.({
+                  date: day,
+                  timezoneID
+                })
+              }),
+              {}
+            );
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-current": isToday ? "date" : void 0,
+                "aria-label": getGridCellName({
+                  categoryMap,
+                  date: day,
+                  // When events are interactive popover triggers they expose
+                  // their own accessible names, so omit them here to avoid
+                  // announcing each event twice.
+                  events: eventPopoverActive ? [] : dayEvents,
+                  timezoneID
+                }),
+                className: dayClasses.cell,
+                "data-testid": `schedule-month-cell-${day.toString()}`,
+                role: "gridcell",
+                ...dayCellPluginProps,
+                children: /* @__PURE__ */ jsx("span", { className: dayClasses.dayNumber, children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    className: dayClasses.todayText,
+                    color: "inherit",
+                    hasTabularNumbers: true,
+                    type: "supporting",
+                    weight: "medium",
+                    children: day.day
+                  }
+                ) })
+              },
+              day.toString()
+            );
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: styles3.monthEventOverlay, style: monthGridStyle, children: [
+            visibleEventSegments.map((segment) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": eventPopoverActive ? void 0 : "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",
+                {
+                  className: styles3.monthSeeMoreSpan,
+                  style: getMonthSeeMoreStyle({
+                    dayIndex,
+                    level: Math.max(0, monthEventLevelCount - 1)
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    ScheduleEventOverflowPopover,
+                    {
+                      buttonClassName: styles3.monthSeeMoreButton,
+                      contentClassName: styles3.monthPopoverContent,
+                      events: eventsByDate.get(day.toString()) ?? [],
+                      eventsClassName: styles3.monthPopoverEvents,
+                      hiddenEventCount: hiddenEvents.length,
+                      label,
+                      renderEvent: (event) => /* @__PURE__ */ jsx(
+                        CalendarMonthEventPill,
+                        {
+                          event,
+                          isPast: isEventInPast(event, currentTime2, timezoneID)
+                        }
+                      ),
+                      testId: `schedule-month-see-more-${day.toString()}`,
+                      title: dateLabel
+                    }
+                  )
+                },
+                `${day.toString()}-see-more`
+              );
+            })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+function createScheduleMonthlyView({
+  monthRowHeight = DEFAULT_MONTH_ROW_HEIGHT,
+  weekCount = 6,
+  weekStartsOn = 0
+} = {}) {
+  return {
+    component: ScheduleMonthlyView,
+    getDateRange: (date) => {
+      const month = date.toPlainDate();
+      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, weekStartsOn)
+      };
+    },
+    getPreviousDateRange: (date) => {
+      const previousMonth = date.toPlainDate().with({ day: 1 }).subtract({ months: 1 });
+      return {
+        label: "Previous month",
+        range: getVisibleMonthRange(
+          date,
+          previousMonth,
+          weekCount,
+          weekStartsOn
+        )
+      };
+    },
+    options: { monthRowHeight, weekCount, weekStartsOn }
+  };
+}
+var DEFAULT_SNAP_MINUTES = 15;
+var MILLISECONDS_PER_MINUTE = 6e4;
+var MINUTES_PER_DAY = 24 * 60;
+function getSnappedMinutes(minutes, snapMinutes) {
+  return Math.round(minutes / snapMinutes) * snapMinutes;
+}
+function getTimeGridStartMinutes({
+  drag,
+  hour,
+  pointerOffsetMinutes,
+  snapMinutes
+}) {
+  return getSnappedMinutes(
+    hour * 60 + pointerOffsetMinutes - drag.offsetMinutes,
+    snapMinutes
+  );
+}
+function instantFromDateAndMinutes(date, minutes, timezoneID) {
+  const clampedMinutes = Math.round(
+    Math.max(0, Math.min(MINUTES_PER_DAY - 1, minutes))
+  );
+  const hour = Math.floor(clampedMinutes / 60);
+  const minute = clampedMinutes % 60;
+  return date.toPlainDateTime(Temporal.PlainTime.from({ hour, minute })).toZonedDateTime(timezoneID).epochMilliseconds;
+}
+function moveEventToDate(event, date, timezoneID) {
+  if (isDayEvent(event)) {
+    const durationDays = event.start.until(event.end).days;
+    return {
+      end: date.add({ days: durationDays }),
+      event,
+      start: date
+    };
+  }
+  const startTime = Temporal.Instant.fromEpochMilliseconds(event.start).toZonedDateTimeISO(timezoneID).toPlainTime();
+  const start = date.toPlainDateTime(startTime).toZonedDateTime(timezoneID).epochMilliseconds;
+  return {
+    end: start + (event.end - event.start),
+    event,
+    start
+  };
+}
+function moveEventToDateTime({
+  date,
+  drag,
+  hour,
+  pointerOffsetMinutes,
+  snapMinutes,
+  timezoneID
+}) {
+  if (isDayEvent(drag.event)) {
+    return null;
+  }
+  const startMinutes = getTimeGridStartMinutes({
+    drag,
+    hour,
+    pointerOffsetMinutes,
+    snapMinutes
+  });
+  const start = instantFromDateAndMinutes(date, startMinutes, timezoneID);
+  return {
+    end: start + (drag.event.end - drag.event.start),
+    event: drag.event,
+    start
+  };
+}
+function hasChanged({
+  end,
+  event,
+  start
+}) {
+  return event.start !== start || event.end !== end;
+}
+function getDragEventClientY(dragEvent, fallback) {
+  return Number.isFinite(dragEvent.clientY) ? dragEvent.clientY : fallback;
+}
+function applyDragPreview(drag, targetLeft, targetTop) {
+  drag.previewElement.style.left = `${targetLeft}px`;
+  drag.previewElement.style.top = `${targetTop}px`;
+}
+function resetDragPreview(drag) {
+  drag.sourceElement.style.opacity = drag.initialOpacity;
+  drag.previewElement.remove();
+}
+function createDragPreviewElement(event, sourceElement, sourceRect) {
+  const preview = sourceElement.cloneNode(true);
+  if (!(preview instanceof HTMLElement)) {
+    throw new Error("Schedule event preview must be an HTMLElement.");
+  }
+  preview.setAttribute("aria-hidden", "true");
+  preview.setAttribute(
+    "data-testid",
+    `schedule-event-move-preview-${event.id}`
+  );
+  preview.style.position = "fixed";
+  preview.style.inset = "auto";
+  preview.style.left = `${sourceRect.left}px`;
+  preview.style.top = `${sourceRect.top}px`;
+  preview.style.width = `${sourceRect.width}px`;
+  preview.style.height = `${sourceRect.height}px`;
+  preview.style.margin = "0";
+  preview.style.opacity = "0.45";
+  preview.style.pointerEvents = "none";
+  preview.style.transform = "none";
+  preview.style.zIndex = "1000";
+  document.body.append(preview);
+  return preview;
+}
+function createScheduleEventMovePlugin({
+  dragRef,
+  onMove,
+  snapMinutes = DEFAULT_SNAP_MINUTES
+}) {
+  const normalizedSnapMinutes = Number.isFinite(snapMinutes) && snapMinutes > 0 ? Math.max(1, Math.floor(snapMinutes)) : DEFAULT_SNAP_MINUTES;
+  return {
+    getEventProps({
+      event,
+      layout,
+      timezoneID
+    }) {
+      if (layout !== "month" && (layout !== "timeGrid" || isDayEvent(event))) {
+        return {};
+      }
+      return {
+        draggable: true,
+        onDragEnd: () => {
+          if (dragRef.current != null) {
+            resetDragPreview(dragRef.current);
+          }
+          dragRef.current = null;
+        },
+        onDragStart: (dragEvent) => {
+          const element = dragEvent.currentTarget;
+          const sourceRect = element.getBoundingClientRect();
+          const isTimedTimeGridEvent = layout === "timeGrid" && !isDayEvent(event);
+          const eventStartTime = isDayEvent(event) ? null : Temporal.Instant.fromEpochMilliseconds(event.start).toZonedDateTimeISO(timezoneID).toPlainTime();
+          const eventStartMinutes = eventStartTime == null ? 0 : eventStartTime.hour * 60 + eventStartTime.minute;
+          let offsetMinutes = eventStartMinutes;
+          if (isTimedTimeGridEvent) {
+            const durationMinutes = Math.max(
+              15,
+              (event.end - event.start) / MILLISECONDS_PER_MINUTE
+            );
+            offsetMinutes = Math.max(
+              0,
+              (getDragEventClientY(dragEvent, sourceRect.top) - sourceRect.top) / Math.max(1, sourceRect.height) * durationMinutes
+            );
+          }
+          dragEvent.dataTransfer.setData("text/plain", event.id);
+          dragEvent.dataTransfer.setDragImage(element, 0, 0);
+          dragRef.current = {
+            event,
+            initialOpacity: element.style.opacity,
+            offsetMinutes,
+            previewElement: createDragPreviewElement(
+              event,
+              element,
+              sourceRect
+            ),
+            sourceElement: element,
+            sourceRect
+          };
+          element.style.opacity = "0.25";
+        }
+      };
+    },
+    getMonthCellProps({
+      date,
+      timezoneID
+    }) {
+      return {
+        onDragOver: (dragEvent) => {
+          if (dragRef.current != null) {
+            dragEvent.preventDefault();
+            const rect = dragEvent.currentTarget.getBoundingClientRect();
+            applyDragPreview(dragRef.current, rect.left + 4, rect.top + 30);
+          }
+        },
+        onDrop: (dragEvent) => {
+          const drag = dragRef.current;
+          if (drag == null) {
+            return;
+          }
+          dragEvent.preventDefault();
+          const change = moveEventToDate(drag.event, date, timezoneID);
+          if (hasChanged(change)) {
+            onMove(change);
+          }
+          resetDragPreview(drag);
+          dragRef.current = null;
+        }
+      };
+    },
+    getTimeGridCellProps({
+      date,
+      hour,
+      hourHeight,
+      timezoneID
+    }) {
+      return {
+        onDragOver: (dragEvent) => {
+          if (dragRef.current != null && !isDayEvent(dragRef.current.event)) {
+            dragEvent.preventDefault();
+            const rect = dragEvent.currentTarget.getBoundingClientRect();
+            const pointerOffsetMinutes = (getDragEventClientY(dragEvent, rect.top) - rect.top) / Math.max(1, hourHeight) * 60;
+            const startMinutes = getTimeGridStartMinutes({
+              drag: dragRef.current,
+              hour,
+              pointerOffsetMinutes,
+              snapMinutes: normalizedSnapMinutes
+            });
+            const top = rect.top + (startMinutes - hour * 60) / 60 * hourHeight + 2;
+            applyDragPreview(dragRef.current, rect.left + 2, top);
+          }
+        },
+        onDrop: (dragEvent) => {
+          const drag = dragRef.current;
+          if (drag == null || isDayEvent(drag.event)) {
+            return;
+          }
+          dragEvent.preventDefault();
+          const rect = dragEvent.currentTarget.getBoundingClientRect();
+          const pointerOffsetMinutes = (getDragEventClientY(dragEvent, rect.top) - rect.top) / Math.max(1, hourHeight) * 60;
+          const change = moveEventToDateTime({
+            date,
+            drag,
+            hour,
+            pointerOffsetMinutes,
+            snapMinutes: normalizedSnapMinutes,
+            timezoneID
+          });
+          if (change != null && hasChanged(change)) {
+            onMove(change);
+          }
+          resetDragPreview(drag);
+          dragRef.current = null;
+        }
+      };
+    }
+  };
+}
+function useScheduleEventMovePlugin(options) {
+  const optionsRef = useLatest_default(options);
+  const dragRef = useRef(null);
+  const onMove = useCallback(
+    (change) => {
+      optionsRef.current.onMove(change);
+    },
+    [optionsRef]
+  );
+  return useMemo(() => {
+    return createScheduleEventMovePlugin({
+      dragRef,
+      onMove,
+      snapMinutes: options.snapMinutes
+    });
+  }, [dragRef, onMove, options.snapMinutes]);
+}
+var MIN_DURATION_MINUTES = 15;
+var DEFAULT_SNAP_MINUTES2 = 15;
+var MILLISECONDS_PER_MINUTE2 = 6e4;
+var resizeHandle = cva({
+  base: {
+    position: "absolute",
+    insetInline: 0,
+    h: "3",
+    cursor: "ns-resize",
+    touchAction: "none",
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "-2px"
+    }
+  },
+  variants: {
+    edge: {
+      start: {
+        insetBlockStart: 0
+      },
+      end: {
+        insetBlockEnd: 0
+      }
+    }
+  }
+});
+var resizeHandleClassNames = {
+  end: resizeHandle({ edge: "end" }),
+  start: resizeHandle({ edge: "start" })
+};
+function getDurationMinutes(start, end) {
+  return (end - start) / MILLISECONDS_PER_MINUTE2;
+}
+function getSnappedDeltaMinutes(deltaPixels, hourHeight, snapMinutes) {
+  const rawMinutes = deltaPixels / hourHeight * 60;
+  return Math.round(rawMinutes / snapMinutes) * snapMinutes;
+}
+function getResizeRange(state, clientY) {
+  const deltaMinutes = getSnappedDeltaMinutes(
+    clientY - state.initialPointerY,
+    state.hourHeight,
+    state.snapMinutes
+  );
+  const delta = deltaMinutes * MILLISECONDS_PER_MINUTE2;
+  const minDuration = MIN_DURATION_MINUTES * MILLISECONDS_PER_MINUTE2;
+  if (state.edge === "start") {
+    return {
+      end: state.event.end,
+      start: Math.min(state.event.end - minDuration, state.event.start + delta)
+    };
+  }
+  return {
+    end: Math.max(state.event.start + minDuration, state.event.end + delta),
+    start: state.event.start
+  };
+}
+function getPreviewHeight(state, range) {
+  return `${Math.max(
+    36,
+    getDurationMinutes(range.start, range.end) / 60 * state.hourHeight - 5
+  )}px`;
+}
+function getPreviewTop(state, range) {
+  const initialTop = Number.parseFloat(state.initialTop || "0");
+  if (state.edge === "end") {
+    return state.initialTop;
+  }
+  const deltaMinutes = getDurationMinutes(state.event.start, range.start);
+  return `${initialTop + deltaMinutes / 60 * state.hourHeight}px`;
+}
+function applyPreview(state, range) {
+  state.eventElement.style.height = getPreviewHeight(state, range);
+  state.eventElement.style.top = getPreviewTop(state, range);
+}
+function ScheduleEventResizeHandle({
+  edge,
+  event,
+  hourHeight,
+  onResize,
+  snapMinutes
+}) {
+  const resizeStateRef = useRef(null);
+  const pointerListenersRef = useRef(null);
+  const removePointerListeners = useCallback(() => {
+    const listeners2 = pointerListenersRef.current;
+    if (listeners2 == null) {
+      return;
+    }
+    window.removeEventListener("pointermove", listeners2.move);
+    window.removeEventListener("pointerup", listeners2.up);
+    window.removeEventListener("pointercancel", listeners2.cancel);
+    pointerListenersRef.current = null;
+  }, []);
+  const finishResize = useCallback((clientY, isCommit) => {
+    const state = resizeStateRef.current;
+    if (state == null) {
+      return;
+    }
+    const range = getResizeRange(state, clientY);
+    if (isCommit) {
+      if (range.start !== state.event.start || range.end !== state.event.end) {
+        state.onResize({
+          end: range.end,
+          event: state.event,
+          start: range.start
+        });
+      }
+    } else {
+      state.eventElement.style.height = state.initialHeight;
+      state.eventElement.style.top = state.initialTop;
+    }
+    resizeStateRef.current = null;
+  }, []);
+  const handlePointerMove = useCallback((event2) => {
+    const state = resizeStateRef.current;
+    if (state == null) {
+      return;
+    }
+    applyPreview(state, getResizeRange(state, event2.clientY));
+  }, []);
+  const handlePointerUp = useCallback(
+    (event2) => {
+      removePointerListeners();
+      finishResize(event2.clientY, true);
+    },
+    [finishResize, removePointerListeners]
+  );
+  const handlePointerCancel = useCallback(
+    (event2) => {
+      removePointerListeners();
+      finishResize(event2.clientY, false);
+    },
+    [finishResize, removePointerListeners]
+  );
+  const handlePointerDown = useCallback(
+    (pointerEvent) => {
+      pointerEvent.preventDefault();
+      pointerEvent.stopPropagation();
+      const eventElement = pointerEvent.currentTarget.parentElement;
+      if (!(eventElement instanceof HTMLElement)) {
+        return;
+      }
+      resizeStateRef.current = {
+        edge,
+        event,
+        eventElement,
+        hourHeight,
+        initialHeight: eventElement.style.height,
+        initialPointerY: pointerEvent.clientY,
+        initialTop: eventElement.style.top,
+        onResize,
+        snapMinutes
+      };
+      pointerListenersRef.current = {
+        cancel: handlePointerCancel,
+        move: handlePointerMove,
+        up: handlePointerUp
+      };
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", handlePointerCancel);
+    },
+    [
+      edge,
+      event,
+      handlePointerCancel,
+      handlePointerMove,
+      handlePointerUp,
+      hourHeight,
+      onResize,
+      snapMinutes
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (keyEvent) => {
+      const direction = keyEvent.key === "ArrowDown" ? 1 : keyEvent.key === "ArrowUp" ? -1 : 0;
+      if (direction === 0) {
+        return;
+      }
+      keyEvent.preventDefault();
+      keyEvent.stopPropagation();
+      const delta = direction * snapMinutes * MILLISECONDS_PER_MINUTE2;
+      const minDuration = MIN_DURATION_MINUTES * MILLISECONDS_PER_MINUTE2;
+      const range = edge === "start" ? {
+        end: event.end,
+        start: Math.min(event.end - minDuration, event.start + delta)
+      } : {
+        end: Math.max(event.start + minDuration, event.end + delta),
+        start: event.start
+      };
+      if (range.start !== event.start || range.end !== event.end) {
+        onResize({ event, ...range });
+      }
+    },
+    [edge, event, onResize, snapMinutes]
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": `${edge === "start" ? "Resize start of" : "Resize end of"} ${event.title}`,
+      "aria-orientation": "vertical",
+      "aria-valuemax": event.end,
+      "aria-valuemin": event.start,
+      "aria-valuenow": edge === "start" ? event.start : event.end,
+      className: resizeHandleClassNames[edge],
+      "data-testid": `schedule-event-resize-${edge}-handle-${event.id}`,
+      onClick: (event2) => event2.stopPropagation(),
+      onKeyDown: handleKeyDown,
+      onPointerDown: handlePointerDown,
+      role: "slider",
+      tabIndex: 0
+    }
+  );
+}
+function ScheduleEventResizeHandles({
+  event,
+  hourHeight,
+  onResize,
+  snapMinutes
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScheduleEventResizeHandle,
+      {
+        edge: "start",
+        event,
+        hourHeight,
+        onResize,
+        snapMinutes
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScheduleEventResizeHandle,
+      {
+        edge: "end",
+        event,
+        hourHeight,
+        onResize,
+        snapMinutes
+      }
+    )
+  ] });
+}
+function createScheduleEventResizePlugin({
+  onResize,
+  snapMinutes = DEFAULT_SNAP_MINUTES2
+}) {
+  const normalizedSnapMinutes = Number.isFinite(snapMinutes) && snapMinutes > 0 ? Math.max(1, Math.floor(snapMinutes)) : DEFAULT_SNAP_MINUTES2;
+  return {
+    renderTimeGridEventContent({
+      event,
+      hourHeight
+    }) {
+      if (isDayEvent(event)) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        ScheduleEventResizeHandles,
+        {
+          event,
+          hourHeight,
+          onResize,
+          snapMinutes: normalizedSnapMinutes
+        }
+      );
+    }
+  };
+}
+function useScheduleEventResizePlugin(options) {
+  const optionsRef = useLatest_default(options);
+  const onResize = useCallback(
+    (change) => {
+      optionsRef.current.onResize(change);
+    },
+    [optionsRef]
+  );
+  return useMemo(
+    () => createScheduleEventResizePlugin({
+      onResize,
+      snapMinutes: options.snapMinutes
+    }),
+    [onResize, options.snapMinutes]
+  );
+}
+var styles4 = {
+  layout: css({
+    minW: "80",
+    maxW: "96"
+  }),
+  dot: css({
+    w: "3",
+    h: "3"
+  }),
+  dateValue: css({
+    display: "flex",
+    flexDirection: "column"
+  }),
+  footerActions: css({
+    display: "flex",
+    justifyContent: "flex-end"
+  })
+};
+function getEventDateLabel(event, timezoneID) {
+  const startDate = isDayEvent(event) ? event.start : plainDateFromInstant(event.start, timezoneID);
+  return formatDate(startDate);
+}
+function ScheduleEventPopoverContent({
+  event,
+  onClose,
+  onDelete,
+  onEdit,
+  onRespond
+}) {
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const [response, setResponse] = useState(null);
+  const category = getCategory(categoryMap, event);
+  const dotClass = scheduleEventRecipe({ color: category.color }).dot;
+  return /* @__PURE__ */ jsx(
+    Layout,
+    {
+      className: styles4.layout,
+      content: /* @__PURE__ */ jsx(LayoutContent, { isScrollable: false, padding: 3, children: /* @__PURE__ */ jsxs(MetadataList, { children: [
+        /* @__PURE__ */ jsx(
+          MetadataListItem,
+          {
+            icon: CalendarDays,
+            isIconOnly: true,
+            label: "Date and time",
+            children: /* @__PURE__ */ jsxs("span", { className: styles4.dateValue, children: [
+              /* @__PURE__ */ jsx(Text, { children: getEventDateLabel(event, timezoneID) }),
+              /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", children: getEventTimeLabel(event, timezoneID) })
+            ] })
+          }
+        ),
+        event.location != null && event.location !== "" ? /* @__PURE__ */ jsx(MetadataListItem, { icon: MapPin, isIconOnly: true, label: "Location", children: event.location }) : null,
+        event.description != null && event.description !== "" ? /* @__PURE__ */ jsx(MetadataListItem, { icon: AlignLeft, isIconOnly: true, label: "Description", children: event.description }) : null,
+        /* @__PURE__ */ jsx(MetadataListItem, { icon: Tag, isIconOnly: true, label: "Category", children: category.label })
+      ] }) }),
+      "data-testid": "schedule-event-popover",
+      footer: /* @__PURE__ */ jsx(LayoutFooter, { label: "Your response", padding: 3, children: /* @__PURE__ */ jsx("div", { className: styles4.footerActions, children: /* @__PURE__ */ jsxs(
+        ToggleButtonGroup,
+        {
+          label: "Your response",
+          onChange: (value) => {
+            setResponse(value);
+            onRespond?.(event, value);
+          },
+          size: "sm",
+          type: "single",
+          value: response,
+          children: [
+            /* @__PURE__ */ jsx(ToggleButton, { label: "Not Going", value: "not-going" }),
+            /* @__PURE__ */ jsx(ToggleButton, { label: "Maybe", value: "maybe" }),
+            /* @__PURE__ */ jsx(
+              ToggleButton,
+              {
+                "data-testid": "schedule-event-popover-response-going",
+                label: "Going",
+                value: "going"
+              }
+            )
+          ]
+        }
+      ) }) }),
+      header: /* @__PURE__ */ jsx(
+        LayoutHeader,
+        {
+          align: "center",
+          endContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+            onEdit != null ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-testid": "schedule-event-popover-edit",
+                icon: Pencil,
+                isIconOnly: true,
+                label: "Edit event",
+                onClick: () => onEdit(event),
+                size: "sm",
+                variant: "ghost"
+              }
+            ) : null,
+            onDelete != null ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-testid": "schedule-event-popover-delete",
+                icon: Trash2,
+                isIconOnly: true,
+                label: "Delete event",
+                onClick: () => onDelete(event),
+                size: "sm",
+                variant: "ghost"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-testid": "schedule-event-popover-close",
+                icon: X,
+                isIconOnly: true,
+                label: "Close",
+                onClick: onClose,
+                size: "sm",
+                variant: "ghost"
+              }
+            )
+          ] }),
+          padding: 3,
+          startContent: /* @__PURE__ */ jsx("span", { className: cx(dotClass, styles4.dot) }),
+          title: event.title
+        }
+      ),
+      height: "auto"
+    }
+  );
+}
+function createScheduleEventPopoverPlugin(options) {
+  const { renderContent } = options;
+  return {
+    renderEventPopover(event, controls) {
+      const typedEvent = event;
+      if (renderContent != null) {
+        return renderContent({ event: typedEvent, ...controls });
+      }
+      return /* @__PURE__ */ jsx(
+        ScheduleEventPopoverContent,
+        {
+          event: typedEvent,
+          onClose: controls.close
+        }
+      );
+    }
+  };
+}
+function useScheduleEventPopoverPlugin(options = {}) {
+  const { renderContent } = options;
+  return useMemo(
+    () => createScheduleEventPopoverPlugin({ renderContent }),
+    [renderContent]
+  );
+}
+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: previousDateRange.label,
+        onClick: onPreviousDate
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { label: "Today", onClick: onToday, size: "sm" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: ChevronRight,
+        isIconOnly: true,
+        label: nextDateRange.label,
+        onClick: onNextDate
+      }
+    )
+  ] });
+}
+function createSchedulePaginationPlugin({
+  onViewDateChange,
+  position = "start"
+}) {
+  return {
+    renderHeader(startContent, centerContent, endContent) {
+      const controls = /* @__PURE__ */ jsx(SchedulePaginationControls, { onViewDateChange });
+      return position === "start" ? {
+        centerContent,
+        endContent,
+        startContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          controls,
+          startContent
+        ] })
+      } : {
+        centerContent,
+        endContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          endContent,
+          controls
+        ] }),
+        startContent
+      };
+    }
+  };
+}
+function useSchedulePaginationPlugin({
+  onViewDateChange,
+  position = "start"
+}) {
+  return useMemo(
+    () => createSchedulePaginationPlugin({ onViewDateChange, position }),
+    [onViewDateChange, position]
+  );
+}
+function ScheduleViewSelectorControl({
+  onChangeView,
+  options
+}) {
+  const { view } = useScheduleContext();
+  const currentOption = options.find((option) => option.view === view);
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      button: {
+        isDisabled: onChangeView == null,
+        label: currentOption?.label ?? "View",
+        size: "sm"
+      },
+      menuWidth: 160,
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          endContent: option.view === view ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              color: "primary",
+              "data-testid": "schedule-view-selector-selected-icon",
+              icon: Check,
+              size: "sm"
+            }
+          ) : null,
+          label: option.label,
+          onClick: () => onChangeView?.(option.view)
+        },
+        option.label
+      ))
+    }
+  );
+}
+function createScheduleViewSelectorPlugin(options, {
+  onChangeView,
+  position = "end"
+} = {}) {
+  return {
+    renderHeader(startContent, centerContent, endContent) {
+      const selector = /* @__PURE__ */ jsx(
+        ScheduleViewSelectorControl,
+        {
+          onChangeView,
+          options
+        }
+      );
+      return position === "start" ? {
+        centerContent,
+        endContent,
+        startContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          startContent,
+          selector
+        ] })
+      } : {
+        centerContent,
+        endContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          endContent,
+          selector
+        ] }),
+        startContent
+      };
+    }
+  };
+}
+function useScheduleViewSelectorPlugin(options, pluginOptions = {}) {
+  const { onChangeView, position = "end" } = pluginOptions;
+  return useMemo(
+    () => createScheduleViewSelectorPlugin(options, { onChangeView, position }),
+    [onChangeView, options, position]
+  );
+}
+
+// src/components/Schedule/plugins/index.tsx
+var defaultSchedulePlugins = [];
+var EMPTY_CATEGORIES = [];
+function readAsyncEvents(loader, start, end, cache) {
+  const key = `${start}:${end}`;
+  let record = cache.get(key);
+  if (record == null) {
+    record = {
+      error: null,
+      promise: Promise.resolve().then(async () => loader(start, end)).then(
+        (value) => {
+          if (record != null) {
+            record.status = "fulfilled";
+            record.value = value;
+          }
+        },
+        (error) => {
+          if (record != null) {
+            record.status = "rejected";
+            record.error = error;
+          }
+        }
+      ),
+      status: "pending",
+      value: []
+    };
+    cache.set(key, record);
+  }
+  if (record.status === "pending") {
+    throw record.promise;
+  }
+  if (record.status === "rejected") {
+    throw record.error instanceof Error ? record.error : new Error(String(record.error));
+  }
+  return record.value;
+}
+function resolveEvents(eventSource, range, timezoneID, eventCache) {
+  const events = typeof eventSource === "function" ? readAsyncEvents(eventSource, range.start, range.end, eventCache) : eventSource;
+  return sortEvents(
+    events.filter((event) => eventOverlapsRange(event, range, timezoneID)),
+    timezoneID
+  );
+}
+function useRange(view, date) {
+  const [start, end] = view.getDateRange(date);
+  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,
+  eventCache,
+  eventSource,
+  highlightDate,
+  isLoading,
+  plugins,
+  view,
+  viewDate
+}) {
+  const Component = view.component;
+  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,
+      plugins,
+      range,
+      timezoneID: viewDate.timezoneID,
+      view,
+      viewDate
+    };
+  }, [
+    categories,
+    eventCache,
+    eventSource,
+    highlightDate,
+    isLoading,
+    plugins,
+    range,
+    view,
+    viewDate
+  ]);
+  return /* @__PURE__ */ jsx(ScheduleContext, { value: contextValue, children: /* @__PURE__ */ jsx(Component, { options: view.options }) });
+}
+function Schedule({
+  categories = EMPTY_CATEGORIES,
+  className,
+  "data-testid": dataTestId,
+  events,
+  highlightDate: highlightDateFromProps,
+  plugins = defaultSchedulePlugins,
+  ref,
+  style,
+  timezoneID: timezoneIDFromProps,
+  view,
+  viewDate
+}) {
+  const timezoneID = timezoneIDFromProps ?? getBrowserTimezoneID();
+  const [eventCache] = useState(() => /* @__PURE__ */ new Map());
+  const [internalHighlightDate] = useState(
+    () => nowEpochMilliseconds()
+  );
+  const highlightDate = highlightDateFromProps ?? internalHighlightDate;
+  const scheduleZonedInstant = useMemo(
+    () => createScheduleZonedInstant(viewDate, timezoneID),
+    [viewDate, timezoneID]
+  );
+  const highlightScheduleZonedInstant = useMemo(
+    () => createScheduleZonedInstant(highlightDate, timezoneID),
+    [highlightDate, timezoneID]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(scheduleClasses.root, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: /* @__PURE__ */ jsx(
+        Suspense,
+        {
+          fallback: /* @__PURE__ */ jsx(
+            ScheduleViewContent,
+            {
+              categories,
+              eventCache,
+              eventSource: [],
+              highlightDate: highlightScheduleZonedInstant,
+              isLoading: true,
+              plugins,
+              view,
+              viewDate: scheduleZonedInstant
+            }
+          ),
+          children: /* @__PURE__ */ jsx(
+            ScheduleViewContent,
+            {
+              categories,
+              eventCache,
+              eventSource: events,
+              highlightDate: highlightScheduleZonedInstant,
+              isLoading: false,
+              plugins,
+              view,
+              viewDate: scheduleZonedInstant
+            }
+          )
+        }
+      )
+    }
+  );
+}
+Schedule.displayName = "Schedule";
+function ScheduleWeeklyView({
+  options
+}) {
+  const { range } = useScheduleContext();
+  const days = enumerateDates(range.startDate, range.endDate);
+  const title = formatWeekTitle(days[0], days[days.length - 1]);
+  return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsx(
+    TimeGridView,
+    {
+      allDayEventLimit: options.allDayEventLimit,
+      days,
+      hourHeight: options.hourHeight,
+      maxHour: options.maxHour,
+      minHour: options.minHour
+    }
+  ) });
+}
+function createScheduleWeeklyView({
+  allDayEventLimit = 3,
+  hourHeight = 100,
+  maxHour = 24,
+  minHour = 0,
+  weekStartsOn = 0
+} = {}) {
+  const getWeekStart = (date) => setStartOfWeek2(date.toPlainDate(), weekStartsOn);
+  const getWeekRange = (date) => {
+    const startDate = getWeekStart(date);
+    return scheduleRangeToScheduleZonedInstantRange(
+      getScheduleRangeFromDates({
+        endDate: startDate.add({ days: 7 }),
+        startDate,
+        timezoneID: date.timezoneID
+      }),
+      date.timezoneID
+    );
+  };
+  return {
+    component: ScheduleWeeklyView,
+    getDateRange: getWeekRange,
+    getNextDateRange: (date) => ({
+      label: "Next week",
+      range: getWeekRange(date.addDays(7))
+    }),
+    getPreviousDateRange: (date) => ({
+      label: "Previous week",
+      range: getWeekRange(date.addDays(-7))
+    }),
+    options: { allDayEventLimit, hourHeight, maxHour, minHour, weekStartsOn }
+  };
+}
+function setStartOfWeek2(date, weekStartsOn) {
+  const daysSinceWeekStart = (plainDateDayOfWeek(date) - weekStartsOn + 7) % 7;
+  return date.add({ days: -daysSinceWeekStart });
+}
+
+export { Schedule, ScheduleContext, ScheduleEventPopoverContent, createEventFromISO, createScheduleDayView, createScheduleListView, createScheduleMonthlyView, createScheduleWeeklyView, defaultSchedulePlugins, useScheduleContext, useScheduleEventMovePlugin, useScheduleEventPopoverPlugin, useScheduleEventResizePlugin, useSchedulePaginationPlugin, useScheduleViewSelectorPlugin };
+//# sourceMappingURL=chunk-CZUMVOPH.js.map
+//# sourceMappingURL=chunk-CZUMVOPH.js.map