@flamingo-stack/openframe-frontend-core 0.0.561-1852.4997.2 → 0.0.561

package/dist/components/meeting-scheduler/index.cjs

@@ -2,13 +2,12 @@
 "use client";
 
 
-var _chunkMKPJYEORcjs = require('../../chunk-MKPJYEOR.cjs');
+var _chunkD3OY4CJUcjs = require('../../chunk-D3OY4CJU.cjs');
 
 
-var _chunkK535WIFScjs = require('../../chunk-K535WIFS.cjs');
+var _chunkCR2CMLTQcjs = require('../../chunk-CR2CMLTQ.cjs');
 
 
-var _chunkNISIZABNcjs = require('../../chunk-NISIZABN.cjs');
 
 
 
@@ -25,8 +24,7 @@ var _chunkNISIZABNcjs = require('../../chunk-NISIZABN.cjs');
 
 
 
-
-var _chunkXTDUFU5Ocjs = require('../../chunk-XTDUFU5O.cjs');
+var _chunkGWRQ5EEIcjs = require('../../chunk-GWRQ5EEI.cjs');
 require('../../chunk-C5RS3QLV.cjs');
 require('../../chunk-XL4V2PYG.cjs');
 require('../../chunk-BZFW3FOF.cjs');
@@ -36,9 +34,7 @@ require('../../chunk-BZFW3FOF.cjs');
 var _chunkNK3M6F5Acjs = require('../../chunk-NK3M6F5A.cjs');
 require('../../chunk-SSJNN5BS.cjs');
 require('../../chunk-3M2MFP2Y.cjs');
-
-
-var _chunkUTVOBFXRcjs = require('../../chunk-UTVOBFXR.cjs');
+require('../../chunk-UTVOBFXR.cjs');
 require('../../chunk-XQFFGR6U.cjs');
 require('../../chunk-CEAAOVCV.cjs');
 
@@ -46,7 +42,8 @@ require('../../chunk-CEAAOVCV.cjs');
 
 
 
-var _chunkDCB4EBA5cjs = require('../../chunk-DCB4EBA5.cjs');
+
+var _chunk4LHEQMOVcjs = require('../../chunk-4LHEQMOV.cjs');
 require('../../chunk-WZW7C7TF.cjs');
 
 
@@ -67,6 +64,7 @@ _chunkKI4EGKNVcjs.init_cn.call(void 0, );
 var _react = require('react');
 
 // src/hooks/use-meeting-booking.ts
+var _reactquery = require('@tanstack/react-query');
 
 var KNOWN_CODES = [
   "SLOT_TAKEN",
@@ -75,17 +73,17 @@ var KNOWN_CODES = [
   "TEMPORARILY_UNAVAILABLE",
   "MEETING_UNAVAILABLE"
 ];
+var AVAILABILITY_STALE_MS = 3e4;
+function meetingAvailabilityKey(apiBaseUrl, meetingId, monthOffset) {
+  return ["meeting-availability", apiBaseUrl, meetingId, monthOffset];
+}
 function useMeetingBooking(options) {
   const { meetingId, apiBaseUrl = "", initialAvailability } = options;
-  const seededFor = _optionalChain([initialAvailability, 'optionalAccess', _3 => _3.meetingId]) === meetingId ? initialAvailability : void 0;
-  const [availability, setAvailability] = _react.useState.call(void 0, _nullishCoalesce(seededFor, () => ( null)));
-  const [monthOffset, setMonthOffsetState] = _react.useState.call(void 0, _nullishCoalesce(_optionalChain([seededFor, 'optionalAccess', _4 => _4.monthOffset]), () => ( 0)));
-  const [isLoadingAvailability, setIsLoadingAvailability] = _react.useState.call(void 0, !seededFor);
-  const [availabilityError, setAvailabilityError] = _react.useState.call(void 0, null);
-  const [isSubmitting, setIsSubmitting] = _react.useState.call(void 0, false);
-  const submittingRef = _react.useRef.call(void 0, false);
+  const queryClient = _reactquery.useQueryClient.call(void 0, );
+  const seededOffset = _optionalChain([initialAvailability, 'optionalAccess', _2 => _2.meetingId]) === meetingId ? initialAvailability.monthOffset : void 0;
+  const [monthOffset, setMonthOffsetState] = _react.useState.call(void 0, _nullishCoalesce(seededOffset, () => ( 0)));
   const setMonthOffset = _react.useCallback.call(void 0, (offset) => {
-    setMonthOffsetState(Math.max(0, Math.min(_chunkXTDUFU5Ocjs.MAX_MONTH_OFFSET, offset)));
+    setMonthOffsetState(Math.max(0, Math.min(_chunkGWRQ5EEIcjs.MAX_MONTH_OFFSET, offset)));
   }, []);
   const prevMeetingIdRef = _react.useRef.call(void 0, meetingId);
   _react.useLayoutEffect.call(void 0, () => {
@@ -93,48 +91,27 @@ function useMeetingBooking(options) {
     prevMeetingIdRef.current = meetingId;
     setMonthOffsetState(0);
   }, [meetingId]);
-  _react.useEffect.call(void 0, () => {
-    const controller = new AbortController();
-    let active = true;
-    const load = async () => {
-      setAvailabilityError(null);
-      if (!availability || availability.meetingId !== meetingId || availability.monthOffset !== monthOffset) {
-        setIsLoadingAvailability(true);
-      }
-      try {
-        const params = new URLSearchParams({ meeting: meetingId, monthOffset: String(monthOffset) });
-        const res = await _chunkNK3M6F5Acjs.contentFetch.call(void 0, `${apiBaseUrl}/api/meetings/availability?${params}`, {
-          signal: controller.signal
-        });
-        if (!res.ok) throw new Error(`availability ${res.status}`);
-        const data = await res.json();
-        if (active) setAvailability(data);
-      } catch (err) {
-        if (!active || err instanceof DOMException && err.name === "AbortError") return;
-        setAvailabilityError(err instanceof Error ? err.message : "Failed to load availability");
-      } finally {
-        if (active) setIsLoadingAvailability(false);
-      }
-    };
-    void load();
-    return () => {
-      active = false;
-      controller.abort();
-    };
-  }, [meetingId, monthOffset, apiBaseUrl]);
-  const refetchAvailability = _react.useCallback.call(void 0, async () => {
-    try {
+  const seed = _optionalChain([initialAvailability, 'optionalAccess', _3 => _3.meetingId]) === meetingId && initialAvailability.monthOffset === monthOffset ? initialAvailability : void 0;
+  const availabilityQuery = _reactquery.useQuery.call(void 0, {
+    queryKey: meetingAvailabilityKey(apiBaseUrl, meetingId, monthOffset),
+    queryFn: async ({ signal }) => {
       const params = new URLSearchParams({ meeting: meetingId, monthOffset: String(monthOffset) });
-      const res = await _chunkNK3M6F5Acjs.contentFetch.call(void 0, `${apiBaseUrl}/api/meetings/availability?${params}`);
-      if (res.ok) setAvailability(await res.json());
-    } catch (e) {
-    }
-  }, [meetingId, monthOffset, apiBaseUrl]);
-  const book = _react.useCallback.call(void 0, 
-    async (payload) => {
-      if (submittingRef.current) return { ok: false, code: "VALIDATION", message: "Already submitting" };
-      submittingRef.current = true;
-      setIsSubmitting(true);
+      const res = await _chunkNK3M6F5Acjs.contentFetch.call(void 0, `${apiBaseUrl}/api/meetings/availability?${params}`, { signal });
+      if (!res.ok) throw new Error(`availability ${res.status}`);
+      return await res.json();
+    },
+    staleTime: AVAILABILITY_STALE_MS,
+    initialData: seed,
+    // Stamped as infinitely old on purpose: the seed is first-paint
+    // scaffolding for a 60-second-volatile resource, not truth, so it paints
+    // immediately AND is refetched immediately.
+    initialDataUpdatedAt: seed ? 0 : void 0
+  });
+  const refetchAvailability = _react.useCallback.call(void 0, async () => {
+    await queryClient.invalidateQueries({ queryKey: meetingAvailabilityKey(apiBaseUrl, meetingId, monthOffset) }).catch(() => void 0);
+  }, [queryClient, apiBaseUrl, meetingId, monthOffset]);
+  const bookMutation = _reactquery.useMutation.call(void 0, {
+    mutationFn: async (payload) => {
       try {
         const res = await _chunkNK3M6F5Acjs.contentFetch.call(void 0, `${apiBaseUrl}/api/meetings/book`, {
           method: "POST",
@@ -146,24 +123,39 @@ function useMeetingBooking(options) {
         const rawCode = typeof data.code === "string" ? data.code : "";
         const code = KNOWN_CODES.includes(rawCode) ? rawCode : "TEMPORARILY_UNAVAILABLE";
         return { ok: false, code, message: typeof data.error === "string" ? data.error : void 0 };
-      } catch (e2) {
+      } catch (e) {
         return { ok: false, code: "TEMPORARILY_UNAVAILABLE" };
+      }
+    },
+    // A booking is not a read — never retried, at any layer.
+    retry: false
+  });
+  const submittingRef = _react.useRef.call(void 0, false);
+  const { mutateAsync } = bookMutation;
+  const book = _react.useCallback.call(void 0, 
+    async (payload) => {
+      if (submittingRef.current) return { ok: false, code: "VALIDATION", message: "Already submitting" };
+      submittingRef.current = true;
+      try {
+        return await mutateAsync(payload);
       } finally {
         submittingRef.current = false;
-        setIsSubmitting(false);
       }
     },
-    [apiBaseUrl]
+    [mutateAsync]
   );
   return {
-    availability,
-    isLoadingAvailability,
-    availabilityError,
+    availability: _nullishCoalesce(availabilityQuery.data, () => ( null)),
+    /** No availability for this month yet — the times column has nothing to show. */
+    isLoadingAvailability: availabilityQuery.isPending,
+    /** ANY request in flight, including a silent revalidation of cached data. */
+    isFetchingAvailability: availabilityQuery.isFetching,
+    availabilityError: availabilityQuery.error ? availabilityQuery.error.message : null,
     monthOffset,
     setMonthOffset,
     refetchAvailability,
     book,
-    isSubmitting
+    isSubmitting: bookMutation.isPending
   };
 }
 
@@ -179,14 +171,14 @@ function isValidIanaTimezone(tz) {
   try {
     new Intl.DateTimeFormat("en-US", { timeZone: tz });
     return true;
-  } catch (e3) {
+  } catch (e2) {
     return false;
   }
 }
 function isValidBcp47Locale(locale) {
   try {
     return Intl.getCanonicalLocales(locale).length > 0;
-  } catch (e4) {
+  } catch (e3) {
     return false;
   }
 }
@@ -222,7 +214,7 @@ function makeBookingSchema(formFields, legalConsent) {
     }
     answers[field.name] = validator;
   }
-  const requiredConsentIds = (_nullishCoalesce(_optionalChain([legalConsent, 'optionalAccess', _5 => _5.communicationConsentCheckboxes]), () => ( []))).filter((c) => c.required).map((c) => c.communicationTypeId);
+  const requiredConsentIds = (_nullishCoalesce(_optionalChain([legalConsent, 'optionalAccess', _4 => _4.communicationConsentCheckboxes]), () => ( []))).filter((c) => c.required).map((c) => c.communicationTypeId);
   const hasRequiredAnswers = formFields.some((f) => isSupportedFormField(f) && f.required);
   const answersObject = _zod.z.object(answers);
   return _zod.z.object({
@@ -259,37 +251,47 @@ function makeBookingSchema(formFields, legalConsent) {
 
 _chunkKI4EGKNVcjs.init_cn.call(void 0, );
 var _jsxruntime = require('react/jsx-runtime');
+var PANEL_STACK = "flex flex-col gap-[var(--spacing-system-l)]";
+var IDENTITY_ROW = "flex items-center justify-between gap-[var(--spacing-system-m)] lg:flex-col lg:items-stretch lg:gap-[var(--spacing-system-l)]";
+var STRIP_BODY = "flex flex-col gap-[var(--spacing-system-l)] md:flex-row md:items-start lg:flex-col";
+var STRIP_MAIN = "flex min-w-0 flex-col gap-[var(--spacing-system-l)] md:flex-1";
+var STRIP_ASIDE = "flex flex-col gap-[var(--spacing-system-xxs)] md:w-[280px] md:shrink-0 lg:w-full";
+var BACK_BUTTON_CLASS = "py-0";
+var FIELD_LABEL_CLASS = "text-h4 text-ods-text-primary";
 function zoneLabel(tz) {
   try {
     const parts = new Intl.DateTimeFormat("en-US", {
       timeZone: tz,
       timeZoneName: "shortOffset"
     }).formatToParts(/* @__PURE__ */ new Date());
-    const offset = _nullishCoalesce(_optionalChain([parts, 'access', _6 => _6.find, 'call', _7 => _7((p) => p.type === "timeZoneName"), 'optionalAccess', _8 => _8.value]), () => ( ""));
+    const offset = _nullishCoalesce(_optionalChain([parts, 'access', _5 => _5.find, 'call', _6 => _6((p) => p.type === "timeZoneName"), 'optionalAccess', _7 => _7.value]), () => ( ""));
     return offset ? `${tz.replace(/_/g, " ")} (${offset})` : tz.replace(/_/g, " ");
-  } catch (e5) {
+  } catch (e4) {
     return tz.replace(/_/g, " ");
   }
 }
-function ContextPanelSkeleton({ className }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-col gap-[var(--spacing-system-mf)]", className), children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-s)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-12 w-12 rounded-full shrink-0" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-5 w-32" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-4 w-24" })
-      ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h5 text-ods-text-secondary", children: "Duration" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-9 w-20" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-9 w-20" })
+function ContextPanelSkeleton({
+  className,
+  onBack,
+  backLabel = "Back"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, PANEL_STACK, className), children: [
+    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_BODY, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: STRIP_MAIN, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: IDENTITY_ROW, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xs)] lg:flex-none", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-8 w-8 shrink-0 rounded-full" }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-5 w-32" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-4 w-24" })
+          ] })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-4 w-20 shrink-0" })
+      ] }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_ASIDE, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-12 w-full" })
       ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h5 text-ods-text-secondary", children: "Timezone" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-12 w-full" })
     ] })
   ] });
 }
@@ -302,7 +304,10 @@ function SchedulerContextPanel({
   onSelectDuration,
   timezone,
   onTimezoneChange,
+  onBack,
+  backLabel = "Back",
   locked = false,
+  showTimezone = true,
   className
 }) {
   const zoneOptions = _react.useMemo.call(void 0, () => {
@@ -311,69 +316,86 @@ function SchedulerContextPanel({
     try {
       const intl = Intl;
       zones = intl.supportedValuesOf ? intl.supportedValuesOf("timeZone") : [timezone];
-    } catch (e6) {
+    } catch (e5) {
       zones = [timezone];
     }
     if (!zones.includes(timezone)) zones = [timezone, ...zones];
     return zones.map((tz) => ({ value: tz, label: zoneLabel(tz) }));
   }, [timezone]);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-col gap-[var(--spacing-system-mf)]", className), children: [
-    hosts.length > 0 && hosts.length <= 3 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-s)]", children: hosts.map((host) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-s)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.SquareAvatar, { variant: "round", size: "lg", src: _nullishCoalesce(host.avatarUrl, () => ( void 0)), alt: host.name, fallback: host.name }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col min-w-0", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h4 text-ods-text-primary truncate", children: host.name }),
-        host.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary truncate", children: host.title })
-      ] })
-    ] }, host.name)) }),
-    hosts.length > 3 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.AvatarStack, { people: hosts, max: 4, size: "lg" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: [
-        hosts.length,
-        " hosts on this calendar"
-      ] })
-    ] }),
-    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h3 text-ods-text-primary", children: title }),
-    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: description }),
-    locked ? (
-      // Post-selection: selectors are GONE, not disabled — the step summary
-      // owns the chosen time/zone; the panel keeps a single static line.
-      selectedDurationMs != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: [
-        _chunkXTDUFU5Ocjs.formatDurationCompact.call(void 0, selectedDurationMs / 1e3),
-        " call"
-      ] })
-    ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      durationsMs.length > 1 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h5 text-ods-text-secondary", children: "Duration" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap gap-[var(--spacing-system-xs)]", children: durationsMs.map((ms) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk7INXXQVKcjs.Button,
-          {
-            variant: selectedDurationMs === ms ? void 0 : "outline",
-            size: "small-legacy",
-            onClick: () => onSelectDuration(ms),
-            children: _chunkXTDUFU5Ocjs.formatDurationCompact.call(void 0, ms / 1e3)
-          },
-          ms
-        )) })
-      ] }) : selectedDurationMs != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: [
-        _chunkXTDUFU5Ocjs.formatDurationCompact.call(void 0, selectedDurationMs / 1e3),
-        " call"
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, PANEL_STACK, className), children: [
+    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_BODY, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_MAIN, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: IDENTITY_ROW, children: [
+          hosts.length > 0 && hosts.length <= 3 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-s)]", children: hosts.map((host) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkGWRQ5EEIcjs.SquareAvatar,
+              {
+                variant: "round",
+                size: "sm",
+                src: _nullishCoalesce(host.avatarUrl, () => ( void 0)),
+                alt: host.name,
+                fallback: host.name
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h4 text-ods-text-primary truncate", children: host.name }),
+              host.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary truncate", children: host.title })
+            ] })
+          ] }, host.name)) }),
+          hosts.length > 3 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.AvatarStack, { people: hosts, max: 4, size: "lg" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: [
+              hosts.length,
+              " hosts on this calendar"
+            ] })
+          ] }),
+          locked || durationsMs.length <= 1 ? (
+            // Post-selection, or a link that offers one length: a static line,
+            // which is what sits beside the host on the header-strip layouts.
+            selectedDurationMs != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "shrink-0 text-h6 text-ods-text-secondary", children: [
+              _chunkGWRQ5EEIcjs.formatDurationCompact.call(void 0, selectedDurationMs / 1e3),
+              " call"
+            ] })
+          ) : null
+        ] }),
+        title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h3 text-ods-text-primary", children: title }),
+        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: description }),
+        !locked && durationsMs.length > 1 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Duration" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap gap-[var(--spacing-system-xs)]", children: durationsMs.map((ms) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk7INXXQVKcjs.Button,
+            {
+              variant: selectedDurationMs === ms ? void 0 : "outline",
+              size: "small-legacy",
+              onClick: () => onSelectDuration(ms),
+              children: _chunkGWRQ5EEIcjs.formatDurationCompact.call(void 0, ms / 1e3)
+            },
+            ms
+          )) })
+        ] })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h5 text-ods-text-secondary", children: "Timezone" }),
+      showTimezone && // Once a slot is chosen the picker is desktop-only, which is what all
+      // three mocks draw. On the narrow layouts this panel is a strip
+      // COMPETING with the form for the screen's height, and the step's own
+      // summary line states the zone one row below — so the fact survives,
+      // only the control steps aside. The 280px sidebar has the room, so
+      // there it stays.
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, STRIP_ASIDE, locked && "max-lg:hidden"), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
         timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkXTDUFU5Ocjs.Autocomplete,
+          _chunkGWRQ5EEIcjs.Autocomplete,
           {
             value: timezone,
             onChange: (tz) => {
-              if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _9 => _9(tz)]);
+              if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _8 => _8(tz)]);
             },
             options: zoneOptions,
             placeholder: "Search timezone\u2026",
-            startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUTVOBFXRcjs.ClockIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }),
             noOptionsText: "No matching timezone",
             showClearAll: false
           }
-        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-12 w-full" })
+        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-12 w-full" })
       ] })
     ] })
   ] });
@@ -400,38 +422,109 @@ function dateFromDayKey(key) {
 function timeLabelInZone(ms, timeZone) {
   return new Intl.DateTimeFormat(void 0, { timeZone, hour: "numeric", minute: "2-digit" }).format(new Date(ms));
 }
-var CALENDAR_MIN_H = "min-h-[20.5rem]";
-var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var CALENDAR_W = "md:w-[19rem] md:shrink-0 lg:w-[16rem]";
+var COLUMN_HEADING_CLASS = "shrink-0 text-h4 text-ods-text-primary";
+var COLUMN_STACK = "flex min-h-0 flex-col gap-[var(--spacing-system-xxs)]";
+var SLOT_PICKER_HEADING = "Select Date & Time";
+var CHIP_GRID_CLASS = _chunkKI4EGKNVcjs.cn.call(void 0, 
+  "grid grid-cols-[repeat(auto-fill,minmax(5.5rem,1fr))] content-start gap-[var(--spacing-system-xs)]",
+  "overflow-y-auto",
+  // PHONE: a stated window (~3 rows, the mock's 156px) that scrolls, rather
+  // than a list that runs the length of the day. Nothing else on the phone
+  // card has a height — the design lets each step be as tall as it needs —
+  // but a busy day is forty slots, and letting them all through turns a
+  // 700px card into a 1500px one and buries whatever the page puts below
+  // it. This is the one nested scroller worth having: a small, obviously
+  // bounded list with a visible edge, exactly as drawn.
+  "max-h-[9.75rem] md:max-h-none",
+  // No height of its own, and none borrowed from the calendar either: the card
+  // states one height, the panel and this row pass it down, and what is left
+  // after the column heading IS the scroll box. A long day scrolls inside it.
+  //
+  // `min-h-0` is the load-bearing half — a flex item's default
+  // `min-height:auto` refuses to shrink below its content, so without it the
+  // chips grow the column, then the row, then the card, and `overflow-y-auto`
+  // never gets a box smaller than its contents to scroll inside. That is the
+  // exact failure that kept this card at 404px when it was told to be 318.
+  "flex-1 min-h-0"
+);
+var CHIP_CLASS = "w-full px-[var(--spacing-system-xxs)]";
+var SLOT_ROW_CLASS = _chunkKI4EGKNVcjs.cn.call(void 0, 
+  "flex min-w-0 flex-col md:flex-row",
+  // Default `stretch` at every width, deliberately. Stacked, that is what
+  // makes each section span the card — an `items-start` here (it was here, to
+  // stop a column growing taller than its month) collapses both sections to
+  // their intrinsic WIDTH instead, which on a phone left the calendar and the
+  // chips huddled against the left edge with half the card empty. The
+  // calendar no longer needs protecting: its height is fixed, not derived.
+  "md:min-h-0 md:flex-1 lg:gap-[var(--spacing-system-lf)]"
+);
+var COLUMN_BOX = "p-[var(--spacing-system-l)] lg:p-0";
+var COLUMN_DIVIDER = "border-b border-ods-border md:border-b-0 md:border-r lg:border-0";
 function monthLabelFor(offset) {
   const now = /* @__PURE__ */ new Date();
   const month = new Date(now.getFullYear(), now.getMonth() + offset, 1);
   return new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(month);
 }
-function CalendarSkeleton({ monthOffset = 0 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-col gap-[var(--spacing-system-s)]", CALENDAR_MIN_H), children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-8", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "absolute inset-x-0 top-0 flex h-8 items-center justify-between", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-8 w-8 items-center justify-center rounded-md border border-ods-border opacity-60", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { className: "h-4 w-4 text-ods-text-muted" }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-8 w-8 items-center justify-center rounded-md border border-ods-border opacity-60", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "h-4 w-4 text-ods-text-muted" }) })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-8 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-primary", children: monthLabelFor(monthOffset) }) })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-y-1 py-1", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grid grid-cols-7", children: WEEKDAY_LABELS.map((d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-9 items-center justify-center text-h6 font-normal text-ods-text-secondary", children: d }, d)) }),
-      Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grid grid-cols-7", children: Array.from({ length: 7 }, (_2, col) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-9 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-9 w-9 rounded-md" }) }, col)) }, `w-${row}`))
-    ] })
-  ] });
+var DISABLE_EVERY_DAY = () => true;
+var NOOP = () => void 0;
+function DayCalendar({ monthOffset, onMonthOffsetChange, selectedDay, onSelectDay, slotsByDay }) {
+  const now = /* @__PURE__ */ new Date();
+  const startMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  const endMonth = new Date(now.getFullYear(), now.getMonth() + _chunkGWRQ5EEIcjs.MAX_MONTH_OFFSET + 1, 0);
+  const visibleMonth = new Date(now.getFullYear(), now.getMonth() + monthOffset, 1);
+  const dayHasNoSlots = _react.useCallback.call(void 0, 
+    (day) => !_optionalChain([slotsByDay, 'optionalAccess', _9 => _9.has, 'call', _10 => _10(calendarDayKey(day))]),
+    [slotsByDay]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-h-0 flex-1 flex-col", "aria-busy": slotsByDay === null, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkGWRQ5EEIcjs.DatePickerCalendar,
+    {
+      mode: "single",
+      bare: true,
+      month: visibleMonth,
+      onMonthChange: (month) => {
+        const offset = (month.getFullYear() - now.getFullYear()) * 12 + (month.getMonth() - now.getMonth());
+        onMonthOffsetChange(Math.max(0, Math.min(_chunkGWRQ5EEIcjs.MAX_MONTH_OFFSET, offset)));
+      },
+      fromDate: startMonth,
+      toDate: endMonth,
+      selected: selectedDay ? dateFromDayKey(selectedDay) : void 0,
+      onSelect: (value) => {
+        const day = value;
+        if (!day) return;
+        const key = calendarDayKey(day);
+        if (_optionalChain([slotsByDay, 'optionalAccess', _11 => _11.has, 'call', _12 => _12(key)])) onSelectDay(key);
+      },
+      disabledDays: slotsByDay === null ? DISABLE_EVERY_DAY : dayHasNoSlots
+    }
+  ) });
 }
 function SlotPickerSkeleton({ monthOffset = 0 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col md:flex-row gap-[var(--spacing-system-lf)]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "shrink-0", CALENDAR_MIN_H), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CalendarSkeleton, { monthOffset }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 min-w-0 flex flex-col gap-[var(--spacing-system-s)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeChipsSkeleton, {}) })
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SLOT_ROW_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, "md:overflow-y-auto"), children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: COLUMN_HEADING_CLASS, children: SLOT_PICKER_HEADING }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DayCalendar,
+        {
+          monthOffset,
+          onMonthOffsetChange: NOOP,
+          selectedDay: null,
+          onSelectDay: NOOP,
+          slotsByDay: null
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, "min-w-0 md:flex-1"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeChipsSkeleton, {}) })
   ] });
 }
 function TimeChipsSkeleton() {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-4 md:h-5 w-40" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-[var(--spacing-system-xs)] content-start", children: Array.from({ length: 9 }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-10 w-full" }, i)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: COLUMN_HEADING_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "inline-block h-4 w-40 align-middle" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CHIP_GRID_CLASS, children: Array.from({ length: 16 }, (_, i) => (
+      // h-11 md:h-12 — the loaded chip's own default-size height.
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: _chunkKI4EGKNVcjs.cn.call(void 0, CHIP_CLASS, "h-11 md:h-12") }, i)
+    )) })
   ] });
 }
 function SlotPicker({
@@ -456,58 +549,70 @@ function SlotPicker({
     for (const list of map.values()) list.sort((a, b) => a - b);
     return map;
   }, [slots, timezone]);
-  const now = /* @__PURE__ */ new Date();
-  const startMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-  const endMonth = new Date(now.getFullYear(), now.getMonth() + _chunkXTDUFU5Ocjs.MAX_MONTH_OFFSET, 1);
-  const visibleMonth = new Date(now.getFullYear(), now.getMonth() + monthOffset, 1);
+  const visibleMonth = _react.useMemo.call(void 0, () => {
+    const now = /* @__PURE__ */ new Date();
+    return new Date(now.getFullYear(), now.getMonth() + monthOffset, 1);
+  }, [monthOffset]);
   const daySlots = selectedDay ? _nullishCoalesce(slotsByDay.get(selectedDay), () => ( [])) : [];
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col md:flex-row gap-[var(--spacing-system-lf)]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "shrink-0", CALENDAR_MIN_H), children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CalendarSkeleton, { monthOffset }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkMKPJYEORcjs.Calendar,
-      {
-        month: visibleMonth,
-        startMonth,
-        endMonth,
-        onMonthChange: (month) => {
-          const offset = (month.getFullYear() - now.getFullYear()) * 12 + (month.getMonth() - now.getMonth());
-          onMonthOffsetChange(Math.max(0, Math.min(_chunkXTDUFU5Ocjs.MAX_MONTH_OFFSET, offset)));
-        },
-        mode: "single",
-        required: true,
-        selected: selectedDay ? dateFromDayKey(selectedDay) : void 0,
-        onSelect: (day) => {
-          if (!day) return;
-          const key = calendarDayKey(day);
-          if (slotsByDay.has(key)) onSelectDay(key);
-        },
-        disabled: (day) => !slotsByDay.has(calendarDayKey(day)),
-        className: "p-0"
-      }
-    ) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 min-w-0 flex flex-col gap-[var(--spacing-system-s)]", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeChipsSkeleton, {}) : selectedDay ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-primary", children: new Intl.DateTimeFormat(void 0, {
+  const monthPrefix = `${visibleMonth.getFullYear()}-${String(visibleMonth.getMonth() + 1).padStart(2, "0")}`;
+  const monthHasSlots = [...slotsByDay.keys()].some((key) => key.startsWith(monthPrefix));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SLOT_ROW_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, "md:overflow-y-auto"), children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: COLUMN_HEADING_CLASS, children: SLOT_PICKER_HEADING }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DayCalendar,
+        {
+          monthOffset,
+          onMonthOffsetChange,
+          selectedDay,
+          onSelectDay,
+          slotsByDay: isLoading ? null : slotsByDay
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, "min-w-0 md:flex-1"), children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeChipsSkeleton, {}) : selectedDay ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: COLUMN_HEADING_CLASS, children: new Intl.DateTimeFormat(void 0, {
         weekday: "long",
         month: "long",
         day: "numeric"
       }).format(dateFromDayKey(selectedDay)) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-[var(--spacing-system-xs)] content-start max-h-80 overflow-y-auto", children: daySlots.map((ms) => {
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CHIP_GRID_CLASS, children: daySlots.map((ms) => {
         const isSelected = selectedSlot === ms;
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _chunk7INXXQVKcjs.Button,
           {
             variant: isSelected ? void 0 : "outline",
-            size: "small-legacy",
             onClick: () => onSelectSlot(ms),
+            className: CHIP_CLASS,
             children: timeLabelInZone(ms, timezone)
           },
           ms
         );
       }) })
-    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: [...slotsByDay.keys()].some(
-      (k) => k.startsWith(
-        `${visibleMonth.getFullYear()}-${String(visibleMonth.getMonth() + 1).padStart(2, "0")}`
-      )
-    ) ? "Pick a day to see available times." : "No available times this month \u2014 try the next one." }) })
+    ] }) : monthHasSlots ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: "Pick a day to see available times." }) : (
+      // A fully-booked month used to just SAY "try the next one" and leave
+      // the visitor to find the chevron in the other column. The way out
+      // of a dead end belongs in the dead end.
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start gap-[var(--spacing-system-s)]", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: [
+          "No available times in ",
+          monthLabelFor(monthOffset),
+          "."
+        ] }),
+        monthOffset < _chunkGWRQ5EEIcjs.MAX_MONTH_OFFSET && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _chunk7INXXQVKcjs.Button,
+          {
+            variant: "outline",
+            onClick: () => onMonthOffsetChange(monthOffset + 1),
+            rightIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "size-5" }),
+            children: [
+              "Check ",
+              monthLabelFor(monthOffset + 1)
+            ]
+          }
+        )
+      ] })
+    ) })
   ] });
 }
 
@@ -547,7 +652,7 @@ function BookingForm({
       lastName: "",
       email: "",
       formFields: {},
-      legalConsentResponses: (_nullishCoalesce(_optionalChain([legalConsent, 'optionalAccess', _10 => _10.communicationConsentCheckboxes]), () => ( []))).map((c) => ({
+      legalConsentResponses: (_nullishCoalesce(_optionalChain([legalConsent, 'optionalAccess', _13 => _13.communicationConsentCheckboxes]), () => ( []))).map((c) => ({
         communicationTypeId: c.communicationTypeId,
         consented: false
       }))
@@ -557,127 +662,118 @@ function BookingForm({
     await onSubmit({ ...data, meetingId, startTimeMs, durationMs, timezone, ...getSignals() });
   });
   const fieldError = (name) => {
-    const err = _optionalChain([errors, 'access', _11 => _11.formFields, 'optionalAccess', _12 => _12[name]]);
-    return _optionalChain([err, 'optionalAccess', _13 => _13.message]);
+    const err = _optionalChain([errors, 'access', _14 => _14.formFields, 'optionalAccess', _15 => _15[name]]);
+    return _optionalChain([err, 'optionalAccess', _16 => _16.message]);
   };
-  const inputClass = "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: submit, className: "flex flex-col space-y-4 md:space-y-6", noValidate: true, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.HoneypotField, { ...honeypotInputProps }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDCB4EBA5cjs.Label, { htmlFor: "ms-first-name", children: [
-          "First name",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-accent", children: "*" })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkDCB4EBA5cjs.Input,
-          {
-            id: "ms-first-name",
-            autoComplete: "given-name",
-            placeholder: "Jane",
-            "aria-invalid": !!errors.firstName,
-            className: inputClass,
-            ...register("firstName")
-          }
-        ),
-        errors.firstName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-error text-h6 mt-1", children: errors.firstName.message })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDCB4EBA5cjs.Label, { htmlFor: "ms-last-name", children: [
-          "Last name",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-accent", children: "*" })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkDCB4EBA5cjs.Input,
-          {
-            id: "ms-last-name",
-            autoComplete: "family-name",
-            placeholder: "Doe",
-            "aria-invalid": !!errors.lastName,
-            className: inputClass,
-            ...register("lastName")
-          }
-        ),
-        errors.lastName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-error text-h6 mt-1", children: errors.lastName.message })
-      ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDCB4EBA5cjs.Label, { htmlFor: "ms-email", children: [
-        "Email",
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-accent", children: "*" })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkDCB4EBA5cjs.Input,
+  const inputClass = "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-11 md:h-12";
+  const FORM_STACK = "flex flex-col gap-[var(--spacing-system-l)]";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: submit, className: FORM_STACK, noValidate: true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.HoneypotField, { ...honeypotInputProps }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.FieldWrapper, { label: "Email", htmlFor: "ms-email", error: _optionalChain([errors, 'access', _17 => _17.email, 'optionalAccess', _18 => _18.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk4LHEQMOVcjs.Input,
+      {
+        id: "ms-email",
+        type: "email",
+        required: true,
+        autoComplete: "email",
+        placeholder: "jane@company.com",
+        "aria-invalid": !!errors.email,
+        className: inputClass,
+        ...register("email")
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-2 gap-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.FieldWrapper, { label: "First Name", htmlFor: "ms-first-name", error: _optionalChain([errors, 'access', _19 => _19.firstName, 'optionalAccess', _20 => _20.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk4LHEQMOVcjs.Input,
         {
-          id: "ms-email",
-          type: "email",
-          autoComplete: "email",
-          placeholder: "jane@company.com",
-          "aria-invalid": !!errors.email,
+          id: "ms-first-name",
+          required: true,
+          autoComplete: "given-name",
+          placeholder: "Jane",
+          "aria-invalid": !!errors.firstName,
           className: inputClass,
-          ...register("email")
+          ...register("firstName")
         }
-      ),
-      errors.email && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-error text-h6 mt-1", children: errors.email.message })
-    ] }),
-    supportedFields.map((field) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDCB4EBA5cjs.Label, { htmlFor: `ms-q-${field.name}`, children: [
-        field.label,
-        field.required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-accent", children: "*" })
-      ] }),
-      field.type === "textarea" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkXTDUFU5Ocjs.Textarea,
-        {
-          id: `ms-q-${field.name}`,
-          className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3",
-          ...register(`formFields.${field.name}`)
-        }
-      ),
-      field.type === "text" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkDCB4EBA5cjs.Input,
+      ) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.FieldWrapper, { label: "Last Name", htmlFor: "ms-last-name", error: _optionalChain([errors, 'access', _21 => _21.lastName, 'optionalAccess', _22 => _22.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk4LHEQMOVcjs.Input,
         {
-          id: `ms-q-${field.name}`,
-          className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12",
-          ...register(`formFields.${field.name}`)
-        }
-      ),
-      (field.type === "select" || field.type === "radio") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _reacthookform.Controller,
-        {
-          control,
-          name: `formFields.${field.name}`,
-          render: ({ field: rhf }) => field.type === "select" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXTDUFU5Ocjs.Select, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.SelectTrigger, { id: `ms-q-${field.name}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.SelectValue, { placeholder: "Select\u2026" }) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.SelectContent, { children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.SelectItem, { value: opt, children: opt }, opt)) })
-          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.RadioGroup, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.RadioGroupItem, { id: `ms-q-${field.name}-${opt}`, value: opt }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Label, { htmlFor: `ms-q-${field.name}-${opt}`, children: opt })
-          ] }, opt)) })
+          id: "ms-last-name",
+          required: true,
+          autoComplete: "family-name",
+          placeholder: "Doe",
+          "aria-invalid": !!errors.lastName,
+          className: inputClass,
+          ...register("lastName")
         }
-      ),
-      field.type === "checkbox" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _reacthookform.Controller,
-        {
-          control,
-          name: `formFields.${field.name}`,
-          render: ({ field: rhf }) => (
-            // The question's Label above already carries the text and
-            // binds to this id — a second inline label would double the
-            // visible text AND the accessible name.
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkDCB4EBA5cjs.Checkbox,
-              {
-                id: `ms-q-${field.name}`,
-                checked: Boolean(rhf.value),
-                onCheckedChange: (v) => rhf.onChange(v === true)
-              }
-            ) })
+      ) })
+    ] }),
+    supportedFields.map((field) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunk4LHEQMOVcjs.FieldWrapper,
+      {
+        label: field.label,
+        htmlFor: `ms-q-${field.name}`,
+        error: fieldError(field.name),
+        children: [
+          field.type === "textarea" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkGWRQ5EEIcjs.Textarea,
+            {
+              id: `ms-q-${field.name}`,
+              className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3",
+              ...register(`formFields.${field.name}`)
+            }
+          ),
+          field.type === "text" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk4LHEQMOVcjs.Input,
+            {
+              id: `ms-q-${field.name}`,
+              className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-11 md:h-12",
+              ...register(`formFields.${field.name}`)
+            }
+          ),
+          (field.type === "select" || field.type === "radio") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _reacthookform.Controller,
+            {
+              control,
+              name: `formFields.${field.name}`,
+              render: ({ field: rhf }) => field.type === "select" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGWRQ5EEIcjs.Select, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.SelectTrigger, { id: `ms-q-${field.name}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.SelectValue, { placeholder: "Select\u2026" }) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.SelectContent, { children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.SelectItem, { value: opt, children: opt }, opt)) })
+              ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.RadioGroup, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.RadioGroupItem, { id: `ms-q-${field.name}-${opt}`, value: opt }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Label, { htmlFor: `ms-q-${field.name}-${opt}`, children: opt })
+              ] }, opt)) })
+            }
+          ),
+          field.type === "checkbox" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _reacthookform.Controller,
+            {
+              control,
+              name: `formFields.${field.name}`,
+              render: ({ field: rhf }) => (
+                // The question's Label above already carries the text and
+                // binds to this id — a second inline label would double the
+                // visible text AND the accessible name.
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _chunk4LHEQMOVcjs.Checkbox,
+                  {
+                    id: `ms-q-${field.name}`,
+                    checked: Boolean(rhf.value),
+                    onCheckedChange: (v) => rhf.onChange(v === true)
+                  }
+                ) })
+              )
+            }
           )
-        }
-      ),
-      fieldError(field.name) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-error text-h6 mt-1", children: fieldError(field.name) })
-    ] }, field.name)),
-    legalConsent && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)] border border-ods-border rounded-md p-[var(--spacing-system-md)]", children: [
+        ]
+      },
+      field.name
+    )),
+    legalConsent && // Same out-of-flow message as the fields above, so a missed consent
+    // box doesn't shove the submit button down the card. With no error the
+    // wrapper is `display:contents` and the panel below is the flex item,
+    // exactly as it was.
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.FieldWrapper, { error: _optionalChain([errors, 'access', _23 => _23.legalConsentResponses, 'optionalAccess', _24 => _24.message]), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)] border border-ods-border rounded-md p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: legalConsent.processingConsentText }),
       legalConsent.communicationConsentText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: legalConsent.communicationConsentText }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -690,10 +786,10 @@ function BookingForm({
             const current = responses.find((r) => r.communicationTypeId === box.communicationTypeId);
             return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkDCB4EBA5cjs.Checkbox,
+                _chunk4LHEQMOVcjs.Checkbox,
                 {
                   id: `ms-consent-${box.communicationTypeId}`,
-                  checked: _nullishCoalesce(_optionalChain([current, 'optionalAccess', _14 => _14.consented]), () => ( false)),
+                  checked: _nullishCoalesce(_optionalChain([current, 'optionalAccess', _25 => _25.consented]), () => ( false)),
                   onCheckedChange: (v) => rhf.onChange(
                     responses.map(
                       (r) => r.communicationTypeId === box.communicationTypeId ? { ...r, consented: v === true } : r
@@ -701,18 +797,14 @@ function BookingForm({
                   )
                 }
               ),
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDCB4EBA5cjs.Label, { htmlFor: `ms-consent-${box.communicationTypeId}`, children: [
-                box.label,
-                box.required ? " *" : ""
-              ] })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Label, { htmlFor: `ms-consent-${box.communicationTypeId}`, children: box.label })
             ] }, box.communicationTypeId);
           }) })
         }
       ),
-      legalConsent.privacyPolicyText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: legalConsent.privacyPolicyText }),
-      errors.legalConsentResponses && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-error", children: errors.legalConsentResponses.message })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7INXXQVKcjs.Button, { type: "submit", loading: isSubmitting, disabled: isSubmitting, className: "w-full md:w-auto", children: "Confirm booking" }) })
+      legalConsent.privacyPolicyText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: legalConsent.privacyPolicyText })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7INXXQVKcjs.Button, { type: "submit", loading: isSubmitting, disabled: isSubmitting, children: "Confirm Booking" }) })
   ] });
 }
 
@@ -728,14 +820,14 @@ function Confirmation({ confirmation, timezone }) {
     minute: "2-digit",
     timeZoneName: "short"
   }).format(new Date(confirmation.startTimeMs));
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-md)] text-center", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-m)] text-center", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h1", role: "img", "aria-label": "Celebration", children: "\u{1F389}" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-h3 text-ods-text-primary", children: "You're booked" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h5 text-ods-text-primary", children: confirmation.title }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: [
       when,
       " \xB7 ",
-      _chunkXTDUFU5Ocjs.formatDurationCompact.call(void 0, confirmation.durationMs / 1e3)
+      _chunkGWRQ5EEIcjs.formatDurationCompact.call(void 0, confirmation.durationMs / 1e3)
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: "A calendar invite is on its way to your email." })
   ] });
@@ -761,7 +853,7 @@ function useNextAvailableLabel(ms) {
           minute: "2-digit"
         }).format(new Date(ms))
       );
-    } catch (e7) {
+    } catch (e6) {
       setLabel(null);
     }
   }, [ms]);
@@ -775,7 +867,7 @@ function DirectoryRow({
   const nextLabel = useNextAvailableLabel(link.nextAvailableMs);
   const subtitle = [
     link.description,
-    link.durationsMinutes.length > 0 ? link.durationsMinutes.map((m) => _chunkXTDUFU5Ocjs.formatDurationCompact.call(void 0, m * 60)).join(" / ") : null,
+    link.durationsMinutes.length > 0 ? link.durationsMinutes.map((m) => _chunkGWRQ5EEIcjs.formatDurationCompact.call(void 0, m * 60)).join(" / ") : null,
     link.kind === "team" ? "Team" : null
   ].filter(Boolean).join(" \u2022 ");
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -789,8 +881,8 @@ function DirectoryRow({
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h3 text-ods-text-primary truncate", children: link.title }),
           subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary truncate", children: subtitle })
         ] }),
-        audienceLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.StatusBadge, { text: `For ${audienceLabel}`, singleLine: true, className: "shrink-0 hidden sm:inline-flex" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTDUFU5Ocjs.AvatarStack, { people: link.hosts, max: 3, size: "md", className: "flex shrink-0" }),
+        audienceLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.StatusBadge, { text: `For ${audienceLabel}`, singleLine: true, className: "shrink-0 hidden sm:inline-flex" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGWRQ5EEIcjs.AvatarStack, { people: link.hosts, max: 3, size: "md", className: "flex shrink-0" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "hidden md:flex w-44 shrink-0 flex-col items-end justify-center", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: "Next available" }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-primary min-h-5", children: link.nextAvailableMs == null ? "No times published" : _nullishCoalesce(nextLabel, () => ( " ")) })
@@ -803,16 +895,16 @@ function DirectoryRow({
 function MeetingSchedulerDirectoryRowSkeleton() {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-center gap-4 px-4 py-3 min-h-20 rounded-lg border border-ods-border bg-ods-card", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-5 w-1/2" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-4 w-1/3" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-5 w-1/2" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-4 w-1/3" })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "hidden sm:block h-6 w-28 shrink-0" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "hidden sm:block h-6 w-28 shrink-0" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "hidden md:flex w-44 shrink-0 flex-col items-end gap-1", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-4 w-24" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-5 w-32" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-4 w-24" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-5 w-32" })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "size-12 shrink-0 rounded-md" })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "size-12 shrink-0 rounded-md" })
   ] });
 }
 var PAGINATION_SLOT_H = "h-[4.5rem]";
@@ -856,7 +948,7 @@ function MeetingSchedulerDirectory({
     };
   }, [initialData, includeAll, apiBaseUrl]);
   const rows = _react.useMemo.call(void 0, () => {
-    const purposes = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _15 => _15.purposes]), () => ( []));
+    const purposes = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _26 => _26.purposes]), () => ( []));
     return purposes.flatMap((p) => p.links.map((link) => ({ link, audienceLabel: p.label })));
   }, [data]);
   const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
@@ -865,12 +957,12 @@ function MeetingSchedulerDirectory({
   if (isLoading && !data) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-col", className), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex w-full flex-col gap-4", style: { minHeight: rowsMinHeight }, children: Array.from({ length: pageSize }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MeetingSchedulerDirectoryRowSkeleton, {}, i)) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "mt-8 flex w-full items-center justify-center", PAGINATION_SLOT_H), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDCB4EBA5cjs.Skeleton, { className: "h-10 w-64" }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "mt-8 flex w-full items-center justify-center", PAGINATION_SLOT_H), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4LHEQMOVcjs.Skeleton, { className: "h-10 w-64" }) })
     ] });
   }
   if (error) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-col justify-center", className), style: { minHeight: rowsMinHeight + 104 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkNISIZABNcjs.EmptyState,
+      _chunkCR2CMLTQcjs.EmptyState,
       {
         type: "generic",
         title: "We couldn't load available call times",
@@ -881,7 +973,7 @@ function MeetingSchedulerDirectory({
   }
   if (rows.length === 0) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-col justify-center", className), style: { minHeight: rowsMinHeight + 104 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkNISIZABNcjs.EmptyState,
+      _chunkCR2CMLTQcjs.EmptyState,
       {
         type: "generic",
         title: "No call times are published right now",
@@ -893,7 +985,7 @@ function MeetingSchedulerDirectory({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-col", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex w-full flex-col gap-4", style: { minHeight: rowsMinHeight }, children: pageRows.map(({ link, audienceLabel }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DirectoryRow, { link, audienceLabel, bookingBasePath }, link.id)) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "mt-8 flex w-full items-center justify-center", PAGINATION_SLOT_H), children: totalPages > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkK535WIFScjs.PersistentPaginationWrapper,
+      _chunkD3OY4CJUcjs.PersistentPaginationWrapper,
       {
         isLoading,
         currentPage: page,
@@ -907,6 +999,21 @@ function MeetingSchedulerDirectory({
 
 // src/components/meeting-scheduler/index.tsx
 
+var CONTEXT_PANEL_CLASS = "p-[var(--spacing-system-l)] shrink-0 lg:w-[280px] border-b lg:border-b-0 lg:border-r border-ods-border lg:min-h-0 lg:overflow-y-auto";
+var ACTION_PANEL_CLASS = "flex-1 min-w-0 flex flex-col md:min-h-0 lg:p-[var(--spacing-system-l)]";
+var PANEL_STEP_CLASS = "p-[var(--spacing-system-l)] md:min-h-0 md:overflow-y-auto lg:p-0";
+var MEETING_SCHEDULER_H = "md:h-[34.375rem] lg:h-[23.75rem]";
+var CARD_CLASS = _chunkKI4EGKNVcjs.cn.call(void 0, 
+  "rounded-md border border-ods-border bg-ods-card overflow-hidden",
+  "md:flex md:flex-col",
+  MEETING_SCHEDULER_H
+);
+var CARD_INNER_CLASS = "flex flex-col md:min-h-0 md:flex-1 lg:h-full lg:flex-row";
+var CARD_DEGRADED_CLASS = _chunkKI4EGKNVcjs.cn.call(void 0, 
+  "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)] flex flex-col items-start gap-[var(--spacing-system-m)]",
+  "md:justify-center md:overflow-y-auto",
+  MEETING_SCHEDULER_H
+);
 function isNativelyBookable(availability) {
   if (!availability.formFields.every(isSupportedFormField)) return false;
   const consent = availability.legalConsent;
@@ -925,12 +1032,14 @@ function HubSpotMeetingScheduler({
   hosts,
   displayTimezone,
   fallbackUrl,
+  onBack,
   onBooked,
   className
 }) {
   const {
     availability,
     isLoadingAvailability,
+    isFetchingAvailability,
     availabilityError,
     monthOffset,
     setMonthOffset,
@@ -943,7 +1052,7 @@ function HubSpotMeetingScheduler({
     if (displayTimezone) return;
     try {
       setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC");
-    } catch (e8) {
+    } catch (e7) {
       setTimezone("UTC");
     }
   }, [displayTimezone]);
@@ -963,8 +1072,8 @@ function HubSpotMeetingScheduler({
     setBookingError(null);
     autoAdvanceCount.current = 0;
   }, [meetingId]);
-  const durations = _nullishCoalesce(_optionalChain([availability, 'optionalAccess', _16 => _16.durationsMs]), () => ( []));
-  const shownHosts = _nullishCoalesce(_nullishCoalesce(hosts, () => ( _optionalChain([availability, 'optionalAccess', _17 => _17.hosts]))), () => ( []));
+  const durations = _nullishCoalesce(_optionalChain([availability, 'optionalAccess', _27 => _27.durationsMs]), () => ( []));
+  const shownHosts = _nullishCoalesce(_nullishCoalesce(hosts, () => ( _optionalChain([availability, 'optionalAccess', _28 => _28.hosts]))), () => ( []));
   _react.useEffect.call(void 0, () => {
     if (durationMs == null && durations.length > 0) setDurationMs(durations[0]);
   }, [durationMs, durations]);
@@ -988,11 +1097,15 @@ function HubSpotMeetingScheduler({
   }, [step, timezone, slots, selectedDay, monthOffset]);
   const autoAdvanceCount = _react.useRef.call(void 0, 0);
   _react.useEffect.call(void 0, () => {
-    if (step === "slot" && availability && !isLoadingAvailability && durationMs != null && slots.length === 0 && availability.hasMore && autoAdvanceCount.current < 3) {
+    if (step === "slot" && availability && !isFetchingAvailability && durationMs != null && slots.length === 0 && availability.hasMore && autoAdvanceCount.current < 3) {
       autoAdvanceCount.current += 1;
       setMonthOffset(monthOffset + 1);
     }
-  }, [step, availability, isLoadingAvailability, durationMs, slots, monthOffset, setMonthOffset]);
+  }, [step, availability, isFetchingAvailability, durationMs, slots, monthOffset, setMonthOffset]);
+  const backToSlot = _react.useCallback.call(void 0, () => {
+    setStep("slot");
+    setBookingError(null);
+  }, []);
   const handleSubmit = _react.useCallback.call(void 0, 
     async (payload) => {
       setBookingError(null);
@@ -1000,7 +1113,7 @@ function HubSpotMeetingScheduler({
       if (result.ok && result.confirmation) {
         setConfirmation(result.confirmation);
         setStep("confirmed");
-        _optionalChain([onBooked, 'optionalCall', _18 => _18(result.confirmation)]);
+        _optionalChain([onBooked, 'optionalCall', _29 => _29(result.confirmation)]);
         return;
       }
       const code = _nullishCoalesce(result.code, () => ( "TEMPORARILY_UNAVAILABLE"));
@@ -1016,22 +1129,16 @@ function HubSpotMeetingScheduler({
   );
   const escapeHatch = fallbackUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7INXXQVKcjs.Button, { variant: "outline", size: "small-legacy", href: fallbackUrl, openInNewTab: true, children: "Open in HubSpot" }) : null;
   if (isLoadingAvailability && !availability) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "rounded-md border border-ods-border bg-ods-card overflow-hidden", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col md:flex-row", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextPanelSkeleton, { className: "p-[var(--spacing-system-lf)] md:w-80 md:shrink-0 border-b md:border-b-0 md:border-r border-ods-border" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0 p-[var(--spacing-system-lf)] md:min-h-[32rem] flex flex-col gap-[var(--spacing-system-md)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h5 text-ods-text-secondary", children: "Select a date & time" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, {})
-      ] })
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, CARD_CLASS, className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_INNER_CLASS, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextPanelSkeleton, { onBack, className: CONTEXT_PANEL_CLASS }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ACTION_PANEL_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, { monthOffset }) })
     ] }) });
   }
   if (availabilityError || !availability) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: _chunkKI4EGKNVcjs.cn.call(void 0, 
-          "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)] flex flex-col items-start gap-[var(--spacing-system-md)]",
-          className
-        ),
+        className: _chunkKI4EGKNVcjs.cn.call(void 0, CARD_DEGRADED_CLASS, className),
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: "We couldn't load available call times. Please try again shortly." }),
           escapeHatch
@@ -1043,10 +1150,7 @@ function HubSpotMeetingScheduler({
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: _chunkKI4EGKNVcjs.cn.call(void 0, 
-          "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)] flex flex-col items-start gap-[var(--spacing-system-md)]",
-          className
-        ),
+        className: _chunkKI4EGKNVcjs.cn.call(void 0, CARD_DEGRADED_CLASS, className),
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: "This meeting type is booked directly on HubSpot." }),
           escapeHatch
@@ -1054,7 +1158,7 @@ function HubSpotMeetingScheduler({
       }
     );
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "rounded-md border border-ods-border bg-ods-card overflow-hidden", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col md:flex-row", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, CARD_CLASS, className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_INNER_CLASS, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       SchedulerContextPanel,
       {
@@ -1071,86 +1175,85 @@ function HubSpotMeetingScheduler({
         },
         timezone,
         onTimezoneChange: setTimezone,
+        onBack: step === "details" ? backToSlot : onBack,
         locked: step !== "slot",
-        className: "p-[var(--spacing-system-lf)] md:w-80 md:shrink-0 border-b md:border-b-0 md:border-r border-ods-border"
+        showTimezone: step !== "confirmed",
+        className: CONTEXT_PANEL_CLASS
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 min-w-0 p-[var(--spacing-system-lf)] md:min-h-[32rem] flex flex-col", children: step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Confirmation, { confirmation, timezone }) : step === "details" && durationMs != null && selectedSlot != null && timezone ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-md)]", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ACTION_PANEL_CLASS, children: step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-1 flex-col", PANEL_STEP_CLASS), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Confirmation, { confirmation, timezone }) }) : step === "details" && durationMs != null && selectedSlot != null && timezone ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKI4EGKNVcjs.cn.call(void 0, "flex flex-1 flex-col gap-[var(--spacing-system-m)]", PANEL_STEP_CLASS), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-h4 text-ods-text-primary", children: [
+        new Intl.DateTimeFormat(void 0, {
+          timeZone: timezone,
+          weekday: "long",
+          month: "long",
+          day: "numeric",
+          hour: "numeric",
+          minute: "2-digit",
+          timeZoneName: "short"
+        }).format(new Date(selectedSlot)),
+        " ",
+        "\xB7 ",
+        _chunkGWRQ5EEIcjs.formatDurationCompact.call(void 0, durationMs / 1e3)
+      ] }),
+      bookingError && bookingError !== "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start gap-[var(--spacing-system-xs)]", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-error", children: bookingError === "TEMPORARILY_UNAVAILABLE" ? "Scheduling is briefly unavailable \u2014 please try again in a minute." : bookingError === "MEETING_UNAVAILABLE" ? "This meeting type has reached its booking limit for today \u2014 try another time or contact us." : bookingError === "LINK_GONE" ? "This meeting type is no longer available." : "Please double-check your details and try again." }),
+        escapeHatch
+      ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkXTDUFU5Ocjs.BackButton,
+        BookingForm,
         {
-          label: "Back",
-          onClick: () => {
-            setStep("slot");
-            setBookingError(null);
-          }
+          availability,
+          meetingId,
+          startTimeMs: selectedSlot,
+          durationMs,
+          timezone,
+          isSubmitting,
+          onSubmit: handleSubmit,
+          honeypotInputProps,
+          getSignals
         }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col justify-center gap-[var(--spacing-system-md)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-h4 text-ods-text-primary", children: [
-          new Intl.DateTimeFormat(void 0, {
-            timeZone: timezone,
-            weekday: "long",
-            month: "long",
-            day: "numeric",
-            hour: "numeric",
-            minute: "2-digit",
-            timeZoneName: "short"
-          }).format(new Date(selectedSlot)),
-          " ",
-          "\xB7 ",
-          _chunkXTDUFU5Ocjs.formatDurationCompact.call(void 0, durationMs / 1e3)
-        ] }),
-        bookingError && bookingError !== "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start gap-[var(--spacing-system-xs)]", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-error", children: bookingError === "TEMPORARILY_UNAVAILABLE" ? "Scheduling is briefly unavailable \u2014 please try again in a minute." : bookingError === "MEETING_UNAVAILABLE" ? "This meeting type has reached its booking limit for today \u2014 try another time or contact us." : bookingError === "LINK_GONE" ? "This meeting type is no longer available." : "Please double-check your details and try again." }),
-          escapeHatch
-        ] }),
+      )
+    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-m)] md:min-h-0 md:flex-1", children: [
+      bookingError === "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "px-[var(--spacing-system-l)] pt-[var(--spacing-system-l)] text-h6 text-ods-error lg:p-0", children: "That time is no longer available \u2014 if you just submitted, check your email for a confirmation before rebooking." }),
+      timezone && durationMs != null ? (
+        // The picker owns BOTH the loading and the empty month now —
+        // it keeps the calendar up either way, so there is no branch
+        // here that can take it off screen mid-flow.
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          BookingForm,
+          SlotPicker,
           {
-            availability,
-            meetingId,
-            startTimeMs: selectedSlot,
-            durationMs,
+            slots,
             timezone,
-            isSubmitting,
-            onSubmit: handleSubmit,
-            honeypotInputProps,
-            getSignals
+            monthOffset,
+            onMonthOffsetChange: (o) => {
+              setSelectedDay(null);
+              setSelectedSlot(null);
+              setMonthOffset(o);
+            },
+            selectedSlot,
+            onSelectSlot: (ms) => {
+              setSelectedSlot(ms);
+              setStep("details");
+            },
+            selectedDay,
+            onSelectDay: setSelectedDay,
+            isLoading: isLoadingAvailability
           }
         )
-      ] })
-    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-md)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h5 text-ods-text-secondary", children: "Select a date & time" }),
-      bookingError === "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-error", children: "That time is no longer available \u2014 if you just submitted, check your email for a confirmation before rebooking." }),
-      timezone && durationMs != null ? slots.length > 0 || isLoadingAvailability ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        SlotPicker,
-        {
-          slots,
-          timezone,
-          monthOffset,
-          onMonthOffsetChange: (o) => {
-            setSelectedDay(null);
-            setSelectedSlot(null);
-            setMonthOffset(o);
-          },
-          selectedSlot,
-          onSelectSlot: (ms) => {
-            setSelectedSlot(ms);
-            setStep("details");
-          },
-          selectedDay,
-          onSelectDay: setSelectedDay,
-          isLoading: isLoadingAvailability
-        }
-      ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start gap-[var(--spacing-system-md)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: isLoadingAvailability ? "Checking more dates\u2026" : "No call times are published right now." }),
-        !isLoadingAvailability && escapeHatch
-      ] }) : (
+      ) : durations.length === 0 && !isFetchingAvailability ? (
+        // The LINK publishes nothing at all — a different thing from a
+        // fully-booked month, and the only case the escape hatch is
+        // the right answer to.
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start gap-[var(--spacing-system-m)]", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h6 text-ods-text-secondary", children: "No call times are published right now." }),
+          escapeHatch
+        ] })
+      ) : (
         // Pre-mount timezone-resolution window (every SSR load hits
-        // this for one frame-batch) — SAME per-region skeletons, no
-        // bare rectangle, no shift when the real picker swaps in.
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, {})
+        // this for one frame-batch) — same layout, real calendar, so
+        // nothing shifts when the picker takes over.
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, { monthOffset })
       )
     ] }) })
   ] }) });
@@ -1159,5 +1262,6 @@ function HubSpotMeetingScheduler({
 
 
 
-exports.HubSpotMeetingScheduler = HubSpotMeetingScheduler; exports.MeetingSchedulerDirectory = MeetingSchedulerDirectory; exports.MeetingSchedulerDirectoryRowSkeleton = MeetingSchedulerDirectoryRowSkeleton;
+
+exports.HubSpotMeetingScheduler = HubSpotMeetingScheduler; exports.MEETING_SCHEDULER_H = MEETING_SCHEDULER_H; exports.MeetingSchedulerDirectory = MeetingSchedulerDirectory; exports.MeetingSchedulerDirectoryRowSkeleton = MeetingSchedulerDirectoryRowSkeleton;
 //# sourceMappingURL=index.cjs.map