@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.766

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

@@ -2,10 +2,10 @@
 "use client";
 
 
-var _chunkLVKUMVUJcjs = require('../../chunk-LVKUMVUJ.cjs');
+var _chunkNBVZIHGScjs = require('../../chunk-NBVZIHGS.cjs');
 
 
-var _chunkTSJUL6IHcjs = require('../../chunk-TSJUL6IH.cjs');
+var _chunkYRFWOJF4cjs = require('../../chunk-YRFWOJF4.cjs');
 
 
 
@@ -16,17 +16,21 @@ var _chunkTSJUL6IHcjs = require('../../chunk-TSJUL6IH.cjs');
 
 
 
-var _chunkFMH2DYBCcjs = require('../../chunk-FMH2DYBC.cjs');
-require('../../chunk-ZCU2PYCW.cjs');
-require('../../chunk-GY2JESOC.cjs');
 
 
 
+var _chunkVRDHAR3Xcjs = require('../../chunk-VRDHAR3X.cjs');
+require('../../chunk-MPTMT773.cjs');
+require('../../chunk-RB7VLVMD.cjs');
 
 
 
 
-var _chunkWA4X55XYcjs = require('../../chunk-WA4X55XY.cjs');
+
+
+
+
+var _chunkZV45VS6Kcjs = require('../../chunk-ZV45VS6K.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
 
@@ -34,26 +38,28 @@ require('../../chunk-DEY6XXGO.cjs');
 
 
 
-var _chunkXCH7SPGIcjs = require('../../chunk-XCH7SPGI.cjs');
-require('../../chunk-FQSXZC2K.cjs');
+var _chunkXVFM6SJAcjs = require('../../chunk-XVFM6SJA.cjs');
+require('../../chunk-2JRSYWFP.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-RO72PRQI.cjs');
 
 
-var _chunkYUMFVQINcjs = require('../../chunk-YUMFVQIN.cjs');
+var _chunkZRDMGMY7cjs = require('../../chunk-ZRDMGMY7.cjs');
+
 
+var _chunkC42WIUH6cjs = require('../../chunk-C42WIUH6.cjs');
 
 
-var _chunkT5FRANE6cjs = require('../../chunk-T5FRANE6.cjs');
 
+var _chunk7VI7TOGIcjs = require('../../chunk-7VI7TOGI.cjs');
 
-var _chunk74ALTXXCcjs = require('../../chunk-74ALTXXC.cjs');
-require('../../chunk-BIA77I6B.cjs');
-require('../../chunk-3RFQPQ7Z.cjs');
-require('../../chunk-GZKWF6NH.cjs');
-require('../../chunk-EFTUFJS2.cjs');
+
+var _chunkYL6ZB2SRcjs = require('../../chunk-YL6ZB2SR.cjs');
+require('../../chunk-GTONIRJU.cjs');
+require('../../chunk-RNLRS4ID.cjs');
+require('../../chunk-XZ6DKGT4.cjs');
+require('../../chunk-LELS4XMX.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1844,30 +1850,31 @@ require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
 
 
-var _chunkNET74KSQcjs = require('../../chunk-NET74KSQ.cjs');
-require('../../chunk-3RYIF4OW.cjs');
-require('../../chunk-SVP6DJFL.cjs');
+var _chunkTZ4GKUO2cjs = require('../../chunk-TZ4GKUO2.cjs');
+require('../../chunk-XXJL5GY3.cjs');
+require('../../chunk-57B5RUYD.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-NS64LMVE.cjs');
+require('../../chunk-FZB4RMRK.cjs');
+
 
+var _chunkDGNBXZXTcjs = require('../../chunk-DGNBXZXT.cjs');
+require('../../chunk-R3JX4MXD.cjs');
+require('../../chunk-SETFUCZA.cjs');
 
-var _chunk22XAPV6Ncjs = require('../../chunk-22XAPV6N.cjs');
-require('../../chunk-OJJ4RL2T.cjs');
-require('../../chunk-63N4FN5V.cjs');
 
+var _chunkAAECWUNVcjs = require('../../chunk-AAECWUNV.cjs');
 
-var _chunkM7YZGRAVcjs = require('../../chunk-M7YZGRAV.cjs');
 
 
 
 
 
 
-var _chunkEQZXJUYVcjs = require('../../chunk-EQZXJUYV.cjs');
+var _chunkJTSUAHDLcjs = require('../../chunk-JTSUAHDL.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1878,46 +1885,46 @@ require('../../chunk-RUHKTWGB.cjs');
 
 
 var _chunkBLH2SFOOcjs = require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-I5MSCD57.cjs');
+require('../../chunk-3LW5TD54.cjs');
 
 
 var _chunkASMNNSUQcjs = require('../../chunk-ASMNNSUQ.cjs');
 require('../../chunk-CW3ML76U.cjs');
-require('../../chunk-MWLD6NXV.cjs');
-require('../../chunk-R3TWQ3ZJ.cjs');
+require('../../chunk-VFZFCRAL.cjs');
+require('../../chunk-5P4TDV7V.cjs');
 require('../../chunk-DGFDBPO7.cjs');
-require('../../chunk-HOTM4UM6.cjs');
+require('../../chunk-E76ONBKF.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
 
 
 
-var _chunkHTRILBJDcjs = require('../../chunk-HTRILBJD.cjs');
+
+var _chunkYXDHVHB2cjs = require('../../chunk-YXDHVHB2.cjs');
 
 
-var _chunkK6VWTUCHcjs = require('../../chunk-K6VWTUCH.cjs');
-require('../../chunk-AKK3EO37.cjs');
+var _chunkFL2RMEDXcjs = require('../../chunk-FL2RMEDX.cjs');
+require('../../chunk-XIFEZ2JT.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
 
 
-var _chunkNO5UJLLQcjs = require('../../chunk-NO5UJLLQ.cjs');
+var _chunkWEANWBJHcjs = require('../../chunk-WEANWBJH.cjs');
 
 
-var _chunk2QMBXGMQcjs = require('../../chunk-2QMBXGMQ.cjs');
 
 
-var _chunkV45KLJQPcjs = require('../../chunk-V45KLJQP.cjs');
-require('../../chunk-KHKPLOU4.cjs');
-require('../../chunk-L4UI63K6.cjs');
-require('../../chunk-OF336YWG.cjs');
-require('../../chunk-3LU4UFPS.cjs');
-require('../../chunk-RB6BSE3O.cjs');
 
+var _chunkXFRBEXQNcjs = require('../../chunk-XFRBEXQN.cjs');
 
-var _chunkH3RYUTNDcjs = require('../../chunk-H3RYUTND.cjs');
 
+var _chunkTF5D5MNOcjs = require('../../chunk-TF5D5MNO.cjs');
 
-var _chunk3ATAYP36cjs = require('../../chunk-3ATAYP36.cjs');
+
+var _chunkV45KLJQPcjs = require('../../chunk-V45KLJQP.cjs');
+
+
+var _chunk65VVJSQZcjs = require('../../chunk-65VVJSQZ.cjs');
+require('../../chunk-KHKPLOU4.cjs');
 
 // src/components/meeting-scheduler/index.tsx
 var _react = require('react');
@@ -2049,6 +2056,9 @@ function normalizeFormField(field) {
   }
   return normalized;
 }
+function bookingFormAsks(field, optionalFields) {
+  return Boolean(field.required) || !optionalFields || optionalFields.includes(field.name);
+}
 function normalizeFormFields(fields) {
   return fields.flatMap((f) => _nullishCoalesce(normalizeFormField(f), () => ( [])));
 }
@@ -2194,7 +2204,7 @@ function useMeetingBooking(options) {
   const seededOffset = _optionalChain([initialAvailability, 'optionalAccess', _12 => _12.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(_chunkT5FRANE6cjs.MAX_MONTH_OFFSET, offset)));
+    setMonthOffsetState(Math.max(0, Math.min(_chunk7VI7TOGIcjs.MAX_MONTH_OFFSET, offset)));
   }, []);
   const prevMeetingIdRef = _react.useRef.call(void 0, meetingId);
   _react.useLayoutEffect.call(void 0, () => {
@@ -2202,6 +2212,7 @@ function useMeetingBooking(options) {
     prevMeetingIdRef.current = meetingId;
     setMonthOffsetState(0);
   }, [meetingId]);
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
   const seed = _optionalChain([initialAvailability, 'optionalAccess', _13 => _13.meetingId]) === meetingId && initialAvailability.monthOffset === monthOffset ? initialAvailability : void 0;
   const availabilityQuery = _reactquery.useQuery.call(void 0, {
     queryKey: meetingAvailabilityKey(apiBaseUrl, meetingId, monthOffset),
@@ -2212,6 +2223,7 @@ function useMeetingBooking(options) {
       return await res.json();
     },
     staleTime: AVAILABILITY_STALE_MS,
+    enabled: !inScope,
     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
@@ -2286,7 +2298,6 @@ var SPAN_CLASS = {
   3: "content-md:col-span-3",
   4: "content-md:col-span-4"
 };
-var FIELD_SKELETON_CLASS = "h-[4.75rem] w-full";
 var DEFAULT_SUBMIT_LABEL = "Confirm Booking";
 var FOOTER_ROW_CLASS = "flex flex-wrap items-center justify-between gap-[var(--spacing-system-m)]";
 var FOOTER_BARE_CLASS = "flex";
@@ -2297,9 +2308,9 @@ var evenSpan = (count, index) => {
   const extra = GRID_COLUMNS - base * count;
   return Math.min(GRID_COLUMNS, Math.max(1, index < extra ? base + 1 : base));
 };
-var slotColumnClass = (row, slot, index) => _chunk3ATAYP36cjs.cn.call(void 0, row.length === 2 ? "col-span-1" : "col-span-2", SPAN_CLASS[_nullishCoalesce(slot.span, () => ( evenSpan(row.length, index)))]);
+var slotColumnClass = (row, slot, index) => _chunk65VVJSQZcjs.cn.call(void 0, row.length === 2 ? "col-span-1" : "col-span-2", SPAN_CLASS[_nullishCoalesce(slot.span, () => ( evenSpan(row.length, index)))]);
 var placeholderFor = (field) => _nullishCoalesce(field.placeholder, () => ( _optionalChain([fieldTypeSpec, 'call', _14 => _14(field.type), 'access', _15 => _15.placeholder, 'optionalCall', _16 => _16(field)])));
-var optionLabel = (field, value) => _nullishCoalesce(_optionalChain([field, 'access', _17 => _17.optionLabels, 'optionalAccess', _18 => _18[value]]), () => ( value));
+var formFieldOptionLabel = (field, value) => _nullishCoalesce(_optionalChain([field, 'access', _17 => _17.optionLabels, 'optionalAccess', _18 => _18[value]]), () => ( value));
 var trimmed = (v) => String(_nullishCoalesce(v, () => ( ""))).trim();
 var canonicalNumber = (v) => {
   const s = String(_nullishCoalesce(v, () => ( ""))).trim();
@@ -2311,7 +2322,7 @@ var canonicalNumber = (v) => {
 };
 var FIELD_CONTROLS = {
   text: ({ field, id, registerName, error, register }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkHTRILBJDcjs.Input,
+    _chunkYXDHVHB2cjs.Input,
     {
       id,
       type: _nullishCoalesce(field.inputType, () => ( "text")),
@@ -2324,7 +2335,7 @@ var FIELD_CONTROLS = {
     }
   ),
   textarea: ({ field, id, registerName, error, register }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkFMH2DYBCcjs.Textarea,
+    _chunkVRDHAR3Xcjs.Textarea,
     {
       id,
       required: field.required,
@@ -2335,7 +2346,7 @@ var FIELD_CONTROLS = {
     }
   ),
   number: ({ field, id, registerName, error, register }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkHTRILBJDcjs.Input,
+    _chunkYXDHVHB2cjs.Input,
     {
       id,
       type: "number",
@@ -2348,7 +2359,7 @@ var FIELD_CONTROLS = {
     }
   ),
   phone: ({ field, id, registerName, error, register }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkHTRILBJDcjs.Input,
+    _chunkYXDHVHB2cjs.Input,
     {
       id,
       type: "tel",
@@ -2364,7 +2375,7 @@ var FIELD_CONTROLS = {
   date: ({ field, id, registerName, error, register }) => (
     // The native picker emits exactly the wire shape (`YYYY-MM-DD`).
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkHTRILBJDcjs.Input,
+      _chunkYXDHVHB2cjs.Input,
       {
         id,
         type: "date",
@@ -2380,18 +2391,18 @@ var FIELD_CONTROLS = {
     {
       control,
       name: registerName,
-      render: ({ field: rhf }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWA4X55XYcjs.Select, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: [
+      render: ({ field: rhf }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZV45VS6Kcjs.Select, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkWA4X55XYcjs.SelectTrigger,
+          _chunkZV45VS6Kcjs.SelectTrigger,
           {
             id,
             "aria-required": field.required || void 0,
             "aria-invalid": Boolean(error),
             invalid: Boolean(error),
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWA4X55XYcjs.SelectValue, { placeholder: "Select\u2026" })
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.SelectValue, { placeholder: "Select\u2026" })
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWA4X55XYcjs.SelectContent, { children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWA4X55XYcjs.SelectItem, { value: opt, children: optionLabel(field, opt) }, opt)) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.SelectContent, { children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.SelectItem, { value: opt, children: formFieldOptionLabel(field, opt) }, opt)) })
       ] })
     }
   ),
@@ -2401,15 +2412,15 @@ var FIELD_CONTROLS = {
       control,
       name: registerName,
       render: ({ field: rhf }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkFMH2DYBCcjs.RadioGroup,
+        _chunkVRDHAR3Xcjs.RadioGroup,
         {
           value: _nullishCoalesce(rhf.value, () => ( "")),
           onValueChange: rhf.onChange,
           "aria-required": field.required || void 0,
           "aria-invalid": Boolean(error),
           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, _chunkFMH2DYBCcjs.RadioGroupItem, { id: `${id}-${opt}`, value: opt }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkK6VWTUCHcjs.Label, { htmlFor: `${id}-${opt}`, children: optionLabel(field, opt) })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.RadioGroupItem, { id: `${id}-${opt}`, value: opt }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFL2RMEDXcjs.Label, { htmlFor: `${id}-${opt}`, children: formFieldOptionLabel(field, opt) })
           ] }, opt))
         }
       )
@@ -2431,7 +2442,7 @@ var FIELD_CONTROLS = {
           };
           return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id, role: "group", className: "flex flex-col gap-[var(--spacing-system-xs)]", 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, 
-              _chunkYUMFVQINcjs.Checkbox,
+              _chunkC42WIUH6cjs.Checkbox,
               {
                 id: `${id}-${opt}`,
                 checked: selected.includes(opt),
@@ -2439,7 +2450,7 @@ var FIELD_CONTROLS = {
                 "aria-invalid": Boolean(error)
               }
             ),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkK6VWTUCHcjs.Label, { htmlFor: `${id}-${opt}`, children: optionLabel(field, opt) })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFL2RMEDXcjs.Label, { htmlFor: `${id}-${opt}`, children: formFieldOptionLabel(field, opt) })
           ] }, opt)) });
         }
       }
@@ -2455,7 +2466,7 @@ var FIELD_CONTROLS = {
         // 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, 
-          _chunkYUMFVQINcjs.Checkbox,
+          _chunkC42WIUH6cjs.Checkbox,
           {
             id,
             checked: Boolean(rhf.value),
@@ -2468,8 +2479,60 @@ var FIELD_CONTROLS = {
     }
   )
 };
+var CHIP_FIELD_TYPES = /* @__PURE__ */ new Set(["select", "radio"]);
+var CHIP_MAX_OPTIONS = 6;
+function drawnAsChips(field, display) {
+  if (display !== "chips" || !CHIP_FIELD_TYPES.has(field.type)) return false;
+  const count = _nullishCoalesce(_optionalChain([field, 'access', _19 => _19.options, 'optionalAccess', _20 => _20.length]), () => ( 0));
+  return count > 0 && count <= CHIP_MAX_OPTIONS;
+}
+var CHIP_ROW_CLASS = "flex flex-wrap justify-start gap-[var(--spacing-system-xsf)]";
+var chipsControl = ({ field, id, registerName, error, control }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _reacthookform.Controller,
+  {
+    control,
+    name: registerName,
+    render: ({ field: rhf }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkVRDHAR3Xcjs.ToggleGroup,
+      {
+        id,
+        type: "single",
+        variant: "choice",
+        value: _nullishCoalesce(rhf.value, () => ( "")),
+        onValueChange: (value) => {
+          if (value) rhf.onChange(value);
+        },
+        ref: (group) => rhf.ref(group && { focus: () => _optionalChain([group, 'access', _21 => _21.querySelector, 'call', _22 => _22("button"), 'optionalAccess', _23 => _23.focus, 'call', _24 => _24()]) }),
+        onBlur: rhf.onBlur,
+        "aria-labelledby": _chunkYXDHVHB2cjs.fieldLabelId.call(void 0, id),
+        "aria-required": field.required || void 0,
+        "aria-invalid": Boolean(error),
+        className: CHIP_ROW_CLASS,
+        children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.ToggleGroupItem, { value: opt, className: _chunk65VVJSQZcjs.cn.call(void 0, error && "data-[state=off]:border-ods-error"), children: formFieldOptionLabel(field, opt) }, opt))
+      }
+    )
+  }
+);
 var builtInId = (name) => `ms-${name.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}`;
-function BookingForm({
+function BookingForm(props) {
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  const { availability } = props;
+  if (inScope || props.loading || !availability) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      BookingFormSkeleton,
+      {
+        fieldRows: props.fieldRows,
+        optionalFields: props.optionalFields,
+        fieldCopy: props.fieldCopy,
+        consent: props.consent,
+        footerNote: props.footerNote,
+        submitLabel: props.submitLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BookingFormBody, { ...props, availability });
+}
+function BookingFormBody({
   availability,
   meetingId,
   startTimeMs,
@@ -2477,9 +2540,11 @@ function BookingForm({
   timezone,
   deferSlot = false,
   initialValues,
+  answers,
   submitLabel,
   footerNote,
   fieldRows,
+  optionalFields,
   formId,
   hideSubmit = false,
   onValidityChange,
@@ -2493,13 +2558,16 @@ function BookingForm({
   rescue = null
 }) {
   const { formFields, legalConsent } = availability;
-  const supportedFields = _react.useMemo.call(void 0, () => normalizeFormFields(formFields), [formFields]);
+  const supportedFields = _react.useMemo.call(void 0, 
+    () => normalizeFormFields(formFields).filter((field) => bookingFormAsks(field, optionalFields)),
+    [formFields, optionalFields]
+  );
   const schema = _react.useMemo.call(void 0, 
     () => withDeniedEmailDomains(makeDeferredBookingSchema(supportedFields, legalConsent), deniedEmailDomains),
     [supportedFields, legalConsent, deniedEmailDomains]
   );
   const consentDefaults = _react.useMemo.call(void 0, 
-    () => (_nullishCoalesce(_optionalChain([legalConsent, 'optionalAccess', _19 => _19.communicationConsentCheckboxes]), () => ( []))).map((c) => ({
+    () => (_nullishCoalesce(_optionalChain([legalConsent, 'optionalAccess', _25 => _25.communicationConsentCheckboxes]), () => ( []))).map((c) => ({
       communicationTypeId: c.communicationTypeId,
       consented: false
     })),
@@ -2531,8 +2599,8 @@ function BookingForm({
       ..._nullishCoalesce(initialValues, () => ( {}))
     }
   });
-  const priorConsents = _optionalChain([initialValues, 'optionalAccess', _20 => _20.legalConsentResponses]);
-  const [consented, setConsented] = _react.useState.call(void 0, _optionalChain([initialValues, 'optionalAccess', _21 => _21[HOST_CONSENT_KEY]]) === true);
+  const priorConsents = _optionalChain([initialValues, 'optionalAccess', _26 => _26.legalConsentResponses]);
+  const [consented, setConsented] = _react.useState.call(void 0, _optionalChain([initialValues, 'optionalAccess', _27 => _27[HOST_CONSENT_KEY]]) === true);
   const [consentError, setConsentError] = _react.useState.call(void 0, null);
   const consentMissing = Boolean(consent) && !consented;
   const watchedValues = watch();
@@ -2550,16 +2618,30 @@ function BookingForm({
       "legalConsentResponses",
       consentDefaults.map((next) => ({
         ...next,
-        consented: _nullishCoalesce(_optionalChain([current, 'access', _22 => _22.find, 'call', _23 => _23((r) => r.communicationTypeId === next.communicationTypeId), 'optionalAccess', _24 => _24.consented]), () => ( false))
+        consented: _nullishCoalesce(_optionalChain([current, 'access', _28 => _28.find, 'call', _29 => _29((r) => r.communicationTypeId === next.communicationTypeId), 'optionalAccess', _30 => _30.consented]), () => ( false))
       })),
       { shouldDirty: false }
     );
   }, [consentDefaults, priorConsents, getValues, setValue]);
+  const written = _react.useRef.call(void 0, {});
+  _react.useEffect.call(void 0, () => {
+    const names = /* @__PURE__ */ new Set([...Object.keys(_nullishCoalesce(answers, () => ( {}))), ...Object.keys(written.current)]);
+    for (const name of names) {
+      if (!supportedFields.some((field) => field.name === name)) continue;
+      const next = _nullishCoalesce(_optionalChain([answers, 'optionalAccess', _31 => _31[name]]), () => ( ""));
+      const current = _nullishCoalesce(_optionalChain([getValues, 'call', _32 => _32("formFields"), 'optionalAccess', _33 => _33[name]]), () => ( ""));
+      if (current !== "" && current !== written.current[name]) continue;
+      if (next) written.current[name] = next;
+      else delete written.current[name];
+      if (current === next) continue;
+      setValue(`formFields.${name}`, next, { shouldValidate: next !== "" });
+    }
+  }, [answers, supportedFields, getValues, setValue]);
   const rescueFields = _react.useMemo.call(void 0, 
     () => [...BUILT_IN_BOOKING_FIELDS.map((field) => field.name), ...supportedFields.map((field) => field.name)],
     [supportedFields]
   );
-  const formRescue = _chunkXCH7SPGIcjs.useRescuedForm.call(void 0, 
+  const formRescue = _chunkXVFM6SJAcjs.useRescuedForm.call(void 0, 
     { watch, getValues, setValue },
     {
       rescue,
@@ -2568,7 +2650,7 @@ function BookingForm({
       fieldPath: (name) => BUILT_IN_BOOKING_FIELDS.some((field) => field.name === name) ? name : `formFields.${name}`
     }
   );
-  const { toast } = _chunkXCH7SPGIcjs.useToast.call(void 0, );
+  const { toast } = _chunkXVFM6SJAcjs.useToast.call(void 0, );
   const onInvalid = () => {
     if (deniedEmailDomains && emailDomainDenied(getValues("email"), deniedEmailDomains)) {
       toast({
@@ -2596,24 +2678,24 @@ function BookingForm({
     });
   }, onInvalid);
   const submit = (event) => {
-    if (consentMissing) setConsentError(_nullishCoalesce(_optionalChain([consent, 'optionalAccess', _25 => _25.errorMessage]), () => ( "Please agree to continue.")));
+    if (consentMissing) setConsentError(_nullishCoalesce(_optionalChain([consent, 'optionalAccess', _34 => _34.errorMessage]), () => ( "Please agree to continue.")));
     return submitValid(event);
   };
   const fieldError = (name) => {
-    const err = _optionalChain([errors, 'access', _26 => _26.formFields, 'optionalAccess', _27 => _27[name]]);
-    return _optionalChain([err, 'optionalAccess', _28 => _28.message]);
+    const err = _optionalChain([errors, 'access', _35 => _35.formFields, 'optionalAccess', _36 => _36[name]]);
+    return _optionalChain([err, 'optionalAccess', _37 => _37.message]);
   };
   const renderField = (field, where) => {
-    const copy = _optionalChain([fieldCopy, 'optionalAccess', _29 => _29[field.name]]);
+    const copy = _optionalChain([fieldCopy, 'optionalAccess', _38 => _38[field.name]]);
     const shown = copy ? { ...field, label: _nullishCoalesce(copy.label, () => ( field.label)), placeholder: _nullishCoalesce(copy.placeholder, () => ( field.placeholder)) } : field;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkHTRILBJDcjs.FieldWrapper,
+      _chunkYXDHVHB2cjs.FieldWrapper,
       {
         label: shown.label,
         htmlFor: where.id,
         required: shown.required,
         error: where.error,
-        children: FIELD_CONTROLS[shown.type]({
+        children: (drawnAsChips(shown, _optionalChain([copy, 'optionalAccess', _39 => _39.display])) ? chipsControl : FIELD_CONTROLS[shown.type])({
           field: shown,
           id: where.id,
           registerName: where.registerName,
@@ -2628,7 +2710,7 @@ function BookingForm({
   const builtInFields = Object.fromEntries(
     BUILT_IN_BOOKING_FIELDS.map((field) => [
       field.name,
-      renderField(field, { id: builtInId(field.name), registerName: field.name, error: _optionalChain([errors, 'access', _30 => _30[field.name], 'optionalAccess', _31 => _31.message]) })
+      renderField(field, { id: builtInId(field.name), registerName: field.name, error: _optionalChain([errors, 'access', _40 => _40[field.name], 'optionalAccess', _41 => _41.message]) })
     ])
   );
   const renderDeclaredField = (field) => renderField(field, {
@@ -2647,7 +2729,7 @@ function BookingForm({
   const { rows: placedRows, unplacedBuiltIns, named: placedNames } = normalizeFieldRows(_nullishCoalesce(fieldRows, () => ( [])), slotResolves);
   const unplacedFields = fieldRows ? supportedFields.filter((f) => !placedNames.has(f.name)) : [];
   const submitButton = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk2QMBXGMQcjs.Button,
+    _chunkTF5D5MNOcjs.Button,
     {
       type: "submit",
       loading: isSubmitting,
@@ -2656,8 +2738,8 @@ function BookingForm({
       children: _nullishCoalesce(submitLabel, () => ( DEFAULT_SUBMIT_LABEL))
     }
   );
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { id: formId, onSubmit: submit, className: FORM_STACK, noValidate: true, ..._chunkT5FRANE6cjs.HUBSPOT_DO_NOT_COLLECT_FORM_PROPS, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFMH2DYBCcjs.HoneypotField, { ...honeypotInputProps }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { id: formId, onSubmit: submit, className: FORM_STACK, noValidate: true, ..._chunk7VI7TOGIcjs.HUBSPOT_DO_NOT_COLLECT_FORM_PROPS, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.HoneypotField, { ...honeypotInputProps }),
     fieldRows ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       placedRows.map((row) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ROW_GRID, children: row.map((slot, slotIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: slotColumnClass(row, slot, slotIndex), children: slotNode(slot.name) }, slot.name)) }, row.map((s) => s.name).join("|"))),
       [...unplacedBuiltIns, ...unplacedFields].map((field) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: slotNode(field.name) }, field.name))
@@ -2670,7 +2752,7 @@ function BookingForm({
       supportedFields.map((field) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: renderDeclaredField(field) }, field.name))
     ] }),
     consent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkFMH2DYBCcjs.CheckboxBlock,
+      _chunkVRDHAR3Xcjs.CheckboxBlock,
       {
         id: "ms-host-consent",
         checked: consented,
@@ -2689,7 +2771,7 @@ function BookingForm({
     // 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, _chunkHTRILBJDcjs.FieldWrapper, { error: _optionalChain([errors, 'access', _32 => _32.legalConsentResponses, 'optionalAccess', _33 => _33.message]), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)]", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYXDHVHB2cjs.FieldWrapper, { error: _optionalChain([errors, 'access', _42 => _42.legalConsentResponses, 'optionalAccess', _43 => _43.message]), children: /* @__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-ods-text-secondary text-h6", children: legalConsent.processingConsentText }),
       legalConsent.communicationConsentText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: legalConsent.communicationConsentText }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2705,10 +2787,10 @@ function BookingForm({
               // same block the waitlist form uses): box + label in one
               // bordered row.
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkFMH2DYBCcjs.CheckboxBlock,
+                _chunkVRDHAR3Xcjs.CheckboxBlock,
                 {
                   id: `ms-consent-${box.communicationTypeId}`,
-                  checked: _nullishCoalesce(_optionalChain([current, 'optionalAccess', _34 => _34.consented]), () => ( false)),
+                  checked: _nullishCoalesce(_optionalChain([current, 'optionalAccess', _44 => _44.consented]), () => ( false)),
                   onCheckedChange: (v) => rhf.onChange(
                     responses.map(
                       (r) => r.communicationTypeId === box.communicationTypeId ? { ...r, consented: v } : r
@@ -2733,24 +2815,49 @@ function BookingForm({
 }
 function BookingFormSkeleton({
   fieldRows,
+  optionalFields,
+  fieldCopy,
   consent,
-  footerNote
+  footerNote,
+  submitLabel = DEFAULT_SUBMIT_LABEL
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex-1", FORM_STACK), children: [
-    skeletonRows(_nullishCoalesce(fieldRows, () => ( DEFAULT_FIELD_ROWS))).map((row) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ROW_GRID, children: row.map((slot, slotIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkH3RYUTNDcjs.UnifiedSkeleton,
-      {
-        className: _chunk3ATAYP36cjs.cn.call(void 0, FIELD_SKELETON_CLASS, slotColumnClass(row, slot, slotIndex))
-      },
-      slot.name
-    )) }, row.map((s) => s.name).join("|"))),
-    !fieldRows && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-[7.75rem] w-full" }),
-    consent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-[4.25rem] w-full" }),
-    footerNote ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: FOOTER_ROW_CLASS, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-5 min-w-40 flex-1" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: _chunk3ATAYP36cjs.cn.call(void 0, "h-12 w-full", SUBMIT_WIDE_CLASS) })
-    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: FOOTER_BARE_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-12 w-40" }) })
-  ] });
+  const consentId = _react.useId.call(void 0, );
+  const submitButton = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { type: "button", tabIndex: -1, className: footerNote ? SUBMIT_WIDE_CLASS : void 0, children: submitLabel });
+  return (
+    // Inert: the fields are the form's own controls, drawn so each is its loaded size; none takes focus.
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex-1", FORM_STACK), "aria-hidden": true, inert: true, children: [
+      skeletonRows(_nullishCoalesce(fieldRows, () => ( DEFAULT_FIELD_ROWS)), optionalFields).map((row) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ROW_GRID, children: row.map((slot, slotIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        FieldSkeleton,
+        {
+          name: slot.name,
+          fieldCopy,
+          className: slotColumnClass(row, slot, slotIndex)
+        },
+        slot.name
+      )) }, row.map((s) => s.name).join("|"))),
+      !fieldRows && // An empty label keeps the field's own frame (`FieldWrapper` draws no label for it); the bar stands for it.
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkYXDHVHB2cjs.FieldWrapper, { label: "", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "mb-1 w-40" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.Textarea, { tabIndex: -1 })
+      ] }),
+      consent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkVRDHAR3Xcjs.CheckboxBlock,
+        {
+          id: consentId,
+          checked: false,
+          onCheckedChange: () => {
+          },
+          required: true,
+          label: consent === true ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-64 max-w-full" }) : consent.label,
+          description: consent === true ? void 0 : consent.description
+        }
+      ),
+      footerNote ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: FOOTER_ROW_CLASS, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: footerNote }),
+        submitButton
+      ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: FOOTER_BARE_CLASS, children: submitButton })
+    ] })
+  );
 }
 function normalizeFieldRows(fieldRows, resolves = () => true) {
   const seen = /* @__PURE__ */ new Set();
@@ -2769,15 +2876,32 @@ function normalizeFieldRows(fieldRows, resolves = () => true) {
   const unplacedBuiltIns = BUILT_IN_BOOKING_FIELDS.filter((f) => !named.has(f.name));
   return { rows, unplacedBuiltIns, named };
 }
-function skeletonRows(fieldRows) {
-  const { rows, unplacedBuiltIns } = normalizeFieldRows(fieldRows);
+function skeletonRows(fieldRows, optionalFields) {
+  const asks = (name) => !optionalFields || BUILT_IN_BOOKING_FIELDS.some((f) => f.name === name) || optionalFields.includes(name);
+  const { rows, unplacedBuiltIns } = normalizeFieldRows(fieldRows, asks);
   return [...rows, ...unplacedBuiltIns.map((f) => [{ name: f.name }])];
 }
+function FieldSkeleton({
+  name,
+  fieldCopy,
+  className
+}) {
+  const builtIn = BUILT_IN_BOOKING_FIELDS.find((f) => f.name === name);
+  const copy = _optionalChain([fieldCopy, 'optionalAccess', _45 => _45[name]]);
+  const label = builtIn ? _nullishCoalesce(_optionalChain([copy, 'optionalAccess', _46 => _46.label]), () => ( builtIn.label)) : _optionalChain([copy, 'optionalAccess', _47 => _47.label]);
+  return (
+    // An empty label keeps the field's own frame; a read label is the bar under it.
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkYXDHVHB2cjs.FieldWrapper, { label: _nullishCoalesce(label, () => ( "")), required: _optionalChain([builtIn, 'optionalAccess', _48 => _48.required]), className, children: [
+      label === void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "mb-1 w-32" }),
+      !builtIn && _optionalChain([copy, 'optionalAccess', _49 => _49.display]) === "chips" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CHIP_ROW_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.UnifiedSkeleton, { variant: "default", className: _chunk65VVJSQZcjs.cn.call(void 0, _chunkVRDHAR3Xcjs.TOGGLE_SIZE_CLASS.default, "w-24 rounded-md") }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYXDHVHB2cjs.Input, { tabIndex: -1 })
+    ] })
+  );
+}
 
 // src/components/meeting-scheduler/confirmation.tsx
 
 function Confirmation({ confirmation, timezone }) {
-  const when = _chunkEQZXJUYVcjs.formatDateWithTimezone.call(void 0, confirmation.startTimeMs, timezone, "weekdayDateTimeZoned", {
+  const when = _chunkJTSUAHDLcjs.formatDateWithTimezone.call(void 0, confirmation.startTimeMs, timezone, "weekdayDateTimeZoned", {
     viewerLocale: true
   });
   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: [
@@ -2787,7 +2911,7 @@ function Confirmation({ confirmation, timezone }) {
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: [
       when,
       " \xB7 ",
-      _chunkEQZXJUYVcjs.formatDurationCompact.call(void 0, confirmation.durationMs / 1e3)
+      _chunkJTSUAHDLcjs.formatDurationCompact.call(void 0, confirmation.durationMs / 1e3)
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "A calendar invite is on its way to your email." })
   ] });
@@ -2802,31 +2926,50 @@ var STRIP_MAIN = "flex min-w-0 flex-col gap-[var(--spacing-system-l)] content-md
 var STRIP_ASIDE = "flex flex-col gap-[var(--spacing-system-xxs)] content-md:w-[280px] content-md:shrink-0 content-lg:w-full";
 var BACK_BUTTON_CLASS = "py-0";
 var FIELD_LABEL_CLASS = "text-h4 text-ods-text-primary";
+var HOST_ROW_CLASS = "flex items-center gap-[var(--spacing-system-xs)]";
+var HOST_TEXT_CLASS = "flex min-w-0 flex-col";
+var DURATION_LINE_CLASS = "shrink-0 text-ods-text-secondary text-h6";
+var DURATION_FIELD_CLASS = "flex flex-col gap-[var(--spacing-system-xxs)]";
+var DURATION_CHIPS_CLASS = "flex flex-wrap gap-[var(--spacing-system-xs)]";
+var TIMEZONE_WIDE_ONLY_CLASS = "content-max-lg:hidden";
 function ContextPanelSkeleton({
   className,
   onBack,
-  backLabel = "Back"
+  backLabel = "Back",
+  title = true,
+  description = true,
+  durations = 0,
+  timezone = "shown"
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, PANEL_STACK, className), children: [
-    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWA4X55XYcjs.BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, PANEL_STACK, className), children: [
+    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.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)] content-lg:flex-none", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { 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, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-5 w-32" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-4 w-24" })
-          ] })
+      /* @__PURE__ */ _jsxruntime.jsxs.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: HOST_ROW_CLASS, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJTSUAHDLcjs.SquareAvatarSkeleton, { variant: "round", size: "sm" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: HOST_TEXT_CLASS, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h4", className: "w-32" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "w-24" })
+            ] })
+          ] }),
+          durations <= 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "w-20 shrink-0" })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-4 w-20 shrink-0" })
-      ] }) }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_ASIDE, children: [
+        title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h3", className: "w-3/5" }),
+        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "w-4/5" }),
+        durations > 1 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: DURATION_FIELD_CLASS, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Duration" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: DURATION_CHIPS_CLASS, children: Array.from({ length: durations }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "small-legacy", className: "w-16" }, i)) })
+        ] })
+      ] }),
+      timezone !== "hidden" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, STRIP_ASIDE, timezone === "wide" && TIMEZONE_WIDE_ONLY_CLASS), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-12 w-full" })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.AutocompleteSkeleton, {})
       ] })
     ] })
   ] });
 }
+var CONTEXT_PANEL_TYPICAL_DURATIONS = 2;
 function SchedulerContextPanel({
   hosts,
   title,
@@ -2841,16 +2984,31 @@ function SchedulerContextPanel({
   locked = false,
   disabled = false,
   showTimezone = true,
-  className
+  className,
+  loading = false
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, PANEL_STACK, className), children: [
-    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWA4X55XYcjs.BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, ) || loading) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ContextPanelSkeleton,
+      {
+        onBack,
+        backLabel,
+        title: title !== void 0,
+        description: description !== void 0 && description !== null,
+        durations: locked ? 0 : durationsMs.length || CONTEXT_PANEL_TYPICAL_DURATIONS,
+        timezone: showTimezone ? locked ? "wide" : "shown" : "hidden",
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, PANEL_STACK, className), children: [
+    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.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: [
+          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: HOST_ROW_CLASS, children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkEQZXJUYVcjs.SquareAvatar,
+              _chunkJTSUAHDLcjs.SquareAvatar,
               {
                 variant: "round",
                 size: "sm",
@@ -2859,13 +3017,13 @@ function SchedulerContextPanel({
                 fallback: host.name
               }
             ),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: HOST_TEXT_CLASS, children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-ods-text-primary text-h4", children: host.name }),
               host.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-ods-text-secondary text-h6", 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, _chunkM7YZGRAVcjs.AvatarStack, { people: hosts, max: 4, size: "lg", label: "Hosts" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAAECWUNVcjs.AvatarStack, { people: hosts, max: 4, size: "lg", label: "Hosts" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: [
               hosts.length,
               " hosts on this calendar"
@@ -2874,24 +3032,24 @@ function SchedulerContextPanel({
           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-ods-text-secondary text-h6", children: [
-              _chunkEQZXJUYVcjs.formatDurationCompact.call(void 0, selectedDurationMs / 1e3),
+            selectedDurationMs != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: DURATION_LINE_CLASS, children: [
+              _chunkJTSUAHDLcjs.formatDurationCompact.call(void 0, selectedDurationMs / 1e3),
               " call"
             ] })
           ) : null
         ] }),
         title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-primary text-h3", children: title }),
         description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: description }),
-        !locked && durationsMs.length > 1 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
+        !locked && durationsMs.length > 1 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: DURATION_FIELD_CLASS, 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, 
-            _chunk2QMBXGMQcjs.Button,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: DURATION_CHIPS_CLASS, children: durationsMs.map((ms) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkTF5D5MNOcjs.Button,
             {
               variant: selectedDurationMs === ms ? void 0 : "outline",
               size: "small-legacy",
               disabled,
               onClick: () => onSelectDuration(ms),
-              children: _chunkEQZXJUYVcjs.formatDurationCompact.call(void 0, ms / 1e3)
+              children: _chunkJTSUAHDLcjs.formatDurationCompact.call(void 0, ms / 1e3)
             },
             ms
           )) })
@@ -2903,18 +3061,19 @@ function SchedulerContextPanel({
       // 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: _chunk3ATAYP36cjs.cn.call(void 0, STRIP_ASIDE, locked && "content-max-lg:hidden"), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, STRIP_ASIDE, locked && TIMEZONE_WIDE_ONLY_CLASS), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
-        timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkFMH2DYBCcjs.TimezoneSelect,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkVRDHAR3Xcjs.TimezoneSelect,
           {
-            value: timezone,
+            value: _nullishCoalesce(timezone, () => ( null)),
+            loading: !timezone,
             disabled,
             onChange: (tz) => {
-              if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _35 => _35(tz)]);
+              if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _50 => _50(tz)]);
             }
           }
-        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-12 w-full" })
+        )
       ] })
     ] })
   ] });
@@ -2923,22 +3082,27 @@ function SchedulerContextPanel({
 // src/components/meeting-scheduler/modal-header.tsx
 
 var ROW_CLASS = "border-b border-ods-border p-[var(--spacing-system-m)]";
-var STRIP_CLASS = _chunk3ATAYP36cjs.cn.call(void 0, ROW_CLASS, "flex items-center justify-between gap-[var(--spacing-system-m)]");
+var STRIP_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, ROW_CLASS, "flex items-center justify-between gap-[var(--spacing-system-m)]");
 var FIELD_LABEL_CLASS2 = "text-h4 text-ods-text-primary";
+var TIMEZONE_ROW_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]");
+var HOST_LIST_CLASS = "flex min-w-0 flex-col gap-[var(--spacing-system-s)]";
+var HOST_ROW_CLASS2 = "flex items-center gap-[var(--spacing-system-xs)]";
+var HOST_TEXT_CLASS2 = "flex min-w-0 flex-col";
+var DURATION_LINE_CLASS2 = "shrink-0 text-ods-text-secondary text-h6";
 function HostIdentity({ hosts }) {
   if (hosts.length === 0) return null;
   if (hosts.length > 3) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7YZGRAVcjs.AvatarStack, { people: hosts, max: 4, size: "lg", label: "Hosts" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAAECWUNVcjs.AvatarStack, { people: hosts, max: 4, size: "lg", label: "Hosts" }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: [
         hosts.length,
         " hosts on this calendar"
       ] })
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 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: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: HOST_LIST_CLASS, children: hosts.map((host) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: HOST_ROW_CLASS2, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkEQZXJUYVcjs.SquareAvatar,
+      _chunkJTSUAHDLcjs.SquareAvatar,
       {
         variant: "round",
         size: "sm",
@@ -2947,7 +3111,7 @@ function HostIdentity({ hosts }) {
         fallback: host.name
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: HOST_TEXT_CLASS2, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-ods-text-primary text-h4", children: host.name }),
       host.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-ods-text-secondary text-h6", children: host.title })
     ] })
@@ -2962,57 +3126,60 @@ function SchedulerModalHeader({
   onTimezoneChange,
   locked = false,
   disabled = false,
-  showTimezone = true
+  showTimezone = true,
+  loading = false
 }) {
   const chips = !locked && durationsMs.length > 1;
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, ) || loading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchedulerModalHeaderSkeleton, { showTimezone });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_CLASS, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HostIdentity, { hosts }),
       chips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 flex-wrap justify-end gap-[var(--spacing-system-xs)]", children: durationsMs.map((ms) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2QMBXGMQcjs.Button,
+        _chunkTF5D5MNOcjs.Button,
         {
           variant: selectedDurationMs === ms ? void 0 : "outline",
           size: "small-legacy",
           disabled,
           onClick: () => onSelectDuration(ms),
-          children: _chunkEQZXJUYVcjs.formatDurationCompact.call(void 0, ms / 1e3)
+          children: _chunkJTSUAHDLcjs.formatDurationCompact.call(void 0, ms / 1e3)
         },
         ms
-      )) }) : selectedDurationMs != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "shrink-0 text-ods-text-secondary text-h6", children: [
-        _chunkEQZXJUYVcjs.formatDurationCompact.call(void 0, selectedDurationMs / 1e3),
+      )) }) : selectedDurationMs != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: DURATION_LINE_CLASS2, children: [
+        _chunkJTSUAHDLcjs.formatDurationCompact.call(void 0, selectedDurationMs / 1e3),
         " call"
       ] })
     ] }),
-    showTimezone && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]"), children: [
+    showTimezone && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TIMEZONE_ROW_CLASS, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS2, children: "Timezone" }),
-      timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkFMH2DYBCcjs.TimezoneSelect,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkVRDHAR3Xcjs.TimezoneSelect,
         {
           value: timezone,
+          loading: !timezone,
           disabled,
           onChange: (tz) => {
-            if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _36 => _36(tz)]);
+            if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _51 => _51(tz)]);
           }
         }
-      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-12 w-full" })
+      )
     ] })
   ] });
 }
-function SchedulerModalHeaderSkeleton() {
+function SchedulerModalHeaderSkeleton({ showTimezone = true } = {}) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_CLASS, children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-8 w-8 shrink-0 rounded-full" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-5 w-32" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-4 w-24" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: HOST_LIST_CLASS, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: HOST_ROW_CLASS2, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJTSUAHDLcjs.SquareAvatarSkeleton, { variant: "round", size: "sm" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: HOST_TEXT_CLASS2, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h4", className: "w-32" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "w-24" })
         ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-4 w-20 shrink-0" })
+      ] }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: _chunk65VVJSQZcjs.cn.call(void 0, DURATION_LINE_CLASS2, "w-20") })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]"), children: [
+    showTimezone && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TIMEZONE_ROW_CLASS, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS2, children: "Timezone" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-12 w-full" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.AutocompleteSkeleton, {})
     ] })
   ] });
 }
@@ -3035,13 +3202,13 @@ function dateFromDayKey(key) {
   return new Date(y, m - 1, d, 12);
 }
 function timeLabelInZone(ms, timeZone) {
-  return _chunkEQZXJUYVcjs.formatTimeWithTimezone.call(void 0, ms, timeZone, { viewerLocale: true });
+  return _chunkJTSUAHDLcjs.formatTimeWithTimezone.call(void 0, ms, timeZone, { viewerLocale: true });
 }
 var CALENDAR_W = "content-md:w-[19rem] content-md:shrink-0 content-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 = _chunk3ATAYP36cjs.cn.call(void 0, 
+var CHIP_GRID_CLASS = _chunk65VVJSQZcjs.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
@@ -3064,7 +3231,7 @@ var CHIP_GRID_CLASS = _chunk3ATAYP36cjs.cn.call(void 0,
   "min-h-0 flex-1"
 );
 var CHIP_CLASS = "w-full px-[var(--spacing-system-xxs)]";
-var SLOT_ROW_CLASS = _chunk3ATAYP36cjs.cn.call(void 0, 
+var SLOT_ROW_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, 
   "flex min-w-0 flex-col content-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
@@ -3081,32 +3248,32 @@ var MODAL_CALENDAR_W = "content-md:w-[19rem] content-md:shrink-0";
 var MODAL_COLUMN_BOX = "p-[var(--spacing-system-m)]";
 var MODAL_COLUMN_DIVIDER = "border-b border-ods-border content-md:border-b-0 content-md:border-r";
 var MODAL_TIMES_H = "content-md:h-[21.5rem]";
-var MODAL_CHIP_GRID_CLASS = _chunk3ATAYP36cjs.cn.call(void 0, 
+var MODAL_CHIP_GRID_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, 
   "grid grid-cols-4 content-start gap-[var(--spacing-system-xs)] overflow-y-auto content-md:grid-cols-1",
   "max-h-[9.75rem] min-h-0 flex-1 content-md:max-h-none"
 );
 function monthLabelFor(offset) {
   const now = /* @__PURE__ */ new Date();
   const month = new Date(now.getFullYear(), now.getMonth() + offset, 1);
-  return _chunkEQZXJUYVcjs.formatDateWithTimezone.call(void 0, month, _chunkEQZXJUYVcjs.VIEWER_TIMEZONE, "monthYear");
+  return _chunkJTSUAHDLcjs.formatDateWithTimezone.call(void 0, month, _chunkJTSUAHDLcjs.VIEWER_TIMEZONE, "monthYear");
 }
 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() + _chunkT5FRANE6cjs.MAX_MONTH_OFFSET + 1, 0);
+  const endMonth = new Date(now.getFullYear(), now.getMonth() + _chunk7VI7TOGIcjs.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', _37 => _37.has, 'call', _38 => _38(calendarDayKey(day))]), [slotsByDay]);
+  const dayHasNoSlots = _react.useCallback.call(void 0, (day) => !_optionalChain([slotsByDay, 'optionalAccess', _52 => _52.has, 'call', _53 => _53(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, 
-    _chunkFMH2DYBCcjs.DatePickerCalendar,
+    _chunkVRDHAR3Xcjs.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(_chunkT5FRANE6cjs.MAX_MONTH_OFFSET, offset)));
+        onMonthOffsetChange(Math.max(0, Math.min(_chunk7VI7TOGIcjs.MAX_MONTH_OFFSET, offset)));
       },
       fromDate: startMonth,
       toDate: endMonth,
@@ -3115,7 +3282,7 @@ function DayCalendar({ monthOffset, onMonthOffsetChange, selectedDay, onSelectDa
         const day = value;
         if (!day) return;
         const key = calendarDayKey(day);
-        if (_optionalChain([slotsByDay, 'optionalAccess', _39 => _39.has, 'call', _40 => _40(key)])) onSelectDay(key);
+        if (_optionalChain([slotsByDay, 'optionalAccess', _54 => _54.has, 'call', _55 => _55(key)])) onSelectDay(key);
       },
       disabledDays: slotsByDay === null ? DISABLE_EVERY_DAY : dayHasNoSlots
     }
@@ -3130,7 +3297,7 @@ function SlotPickerSkeleton({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: modal ? _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_COLUMN_DIVIDER, MODAL_CALENDAR_W) : _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, "content-md:overflow-y-auto"),
+        className: modal ? _chunk65VVJSQZcjs.cn.call(void 0, COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_COLUMN_DIVIDER, MODAL_CALENDAR_W) : _chunk65VVJSQZcjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, "content-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, 
@@ -3149,18 +3316,18 @@ function SlotPickerSkeleton({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
-        className: modal ? _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_TIMES_H, "min-w-0 content-md:flex-1") : _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, "min-w-0 content-md:flex-1"),
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeChipsSkeleton, {})
+        className: modal ? _chunk65VVJSQZcjs.cn.call(void 0, COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_TIMES_H, "min-w-0 content-md:flex-1") : _chunk65VVJSQZcjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, "min-w-0 content-md:flex-1"),
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeChipsSkeleton, { layout })
       }
     )
   ] });
 }
-function TimeChipsSkeleton() {
+function TimeChipsSkeleton({ layout = "card" } = {}) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: COLUMN_HEADING_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { 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) => (
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: COLUMN_HEADING_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h4", className: "w-40" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: layout === "modal" ? MODAL_CHIP_GRID_CLASS : CHIP_GRID_CLASS, children: Array.from({ length: 16 }, (_, i) => (
       // h-11 content-md:h-12 — the loaded chip's own default-size height.
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: _chunk3ATAYP36cjs.cn.call(void 0, CHIP_CLASS, "h-11 content-md:h-12") }, i)
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.UnifiedSkeleton, { className: _chunk65VVJSQZcjs.cn.call(void 0, CHIP_CLASS, "h-11 content-md:h-12") }, i)
     )) })
   ] });
 }
@@ -3175,10 +3342,13 @@ function SlotPicker({
   selectedDay,
   onSelectDay,
   isLoading = false,
-  isSubmitting = false
+  isSubmitting = false,
+  loading = false
 }) {
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, ) || loading;
   const slotsByDay = _react.useMemo.call(void 0, () => {
     const map = /* @__PURE__ */ new Map();
+    if (timezone == null) return map;
     for (const ms of slots) {
       const key = dayKeyInZone(ms, timezone);
       const list = _nullishCoalesce(map.get(key), () => ( []));
@@ -3196,11 +3366,12 @@ function SlotPicker({
   const monthPrefix = `${visibleMonth.getFullYear()}-${String(visibleMonth.getMonth() + 1).padStart(2, "0")}`;
   const monthHasSlots = [...slotsByDay.keys()].some((key) => key.startsWith(monthPrefix));
   const modal = layout === "modal";
+  if (inScope || timezone == null) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, { monthOffset, layout });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: modal ? MODAL_ROW_CLASS : SLOT_ROW_CLASS, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: modal ? _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_COLUMN_DIVIDER, MODAL_CALENDAR_W) : _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, "content-md:overflow-y-auto"),
+        className: modal ? _chunk65VVJSQZcjs.cn.call(void 0, COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_COLUMN_DIVIDER, MODAL_CALENDAR_W) : _chunk65VVJSQZcjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, "content-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, 
@@ -3219,13 +3390,13 @@ function SlotPicker({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
-        className: modal ? _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_TIMES_H, "min-w-0 content-md:flex-1") : _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, "min-w-0 content-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: _chunkEQZXJUYVcjs.formatDateWithTimezone.call(void 0, dateFromDayKey(selectedDay), _chunkEQZXJUYVcjs.VIEWER_TIMEZONE, "weekday", { viewerLocale: true }) }),
+        className: modal ? _chunk65VVJSQZcjs.cn.call(void 0, COLUMN_STACK, MODAL_COLUMN_BOX, MODAL_TIMES_H, "min-w-0 content-md:flex-1") : _chunk65VVJSQZcjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, "min-w-0 content-md:flex-1"),
+        children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeChipsSkeleton, { layout }) : selectedDay ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: COLUMN_HEADING_CLASS, children: _chunkJTSUAHDLcjs.formatDateWithTimezone.call(void 0, dateFromDayKey(selectedDay), _chunkJTSUAHDLcjs.VIEWER_TIMEZONE, "weekday", { viewerLocale: true }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: modal ? MODAL_CHIP_GRID_CLASS : CHIP_GRID_CLASS, children: daySlots.map((ms) => {
             const isSelected = selectedSlot === ms;
             return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk2QMBXGMQcjs.Button,
+              _chunkTF5D5MNOcjs.Button,
               {
                 variant: isSelected ? void 0 : "outline",
                 disabled: isSubmitting,
@@ -3250,8 +3421,8 @@ function SlotPicker({
               monthLabelFor(monthOffset),
               "."
             ] }),
-            monthOffset < _chunkT5FRANE6cjs.MAX_MONTH_OFFSET && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _chunk2QMBXGMQcjs.Button,
+            monthOffset < _chunk7VI7TOGIcjs.MAX_MONTH_OFFSET && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _chunkTF5D5MNOcjs.Button,
               {
                 variant: "outline",
                 onClick: () => onMonthOffsetChange(monthOffset + 1),
@@ -3274,12 +3445,22 @@ function SlotPicker({
 
 
 function useNextAvailableLabel(ms) {
-  const hydrated = _chunk74ALTXXCcjs.useIsHydrated.call(void 0, );
+  const hydrated = _chunkYL6ZB2SRcjs.useIsHydrated.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (!hydrated || ms == null) return null;
-    return _chunkEQZXJUYVcjs.formatDateWithTimezone.call(void 0, ms, _chunkEQZXJUYVcjs.VIEWER_TIMEZONE, "shortWeekdayDateTime", { viewerLocale: true }) || null;
+    return _chunkJTSUAHDLcjs.formatDateWithTimezone.call(void 0, ms, _chunkJTSUAHDLcjs.VIEWER_TIMEZONE, "shortWeekdayDateTime", { viewerLocale: true }) || null;
   }, [hydrated, ms]);
 }
+var PAGINATION_SLOT_H = "h-[4.5rem]";
+var MEETING_DIRECTORY_PAGE_SIZE = 6;
+var directoryRowsMinHeight = (pageSize) => pageSize * 80 + (pageSize - 1) * 16;
+var ROW_FRAME_CLASS = "flex min-h-20 w-full items-center gap-4 rounded-lg border border-ods-border bg-ods-card px-4 py-3";
+var ROW_TITLE_COLUMN_CLASS = "flex min-w-0 flex-1 flex-col justify-center text-left";
+var ROW_NEXT_COLUMN_CLASS = "hidden w-44 shrink-0 flex-col items-end justify-center content-md:flex";
+var ROW_NEXT_LABEL_CLASS = "text-ods-text-secondary text-h6";
+var ROW_CHEVRON_CLASS = "flex size-12 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-card";
+var ROWS_CLASS = "flex w-full flex-col gap-4";
+var PAGINATION_SLOT_CLASS = "mt-8 flex w-full items-center justify-center";
 function DirectoryRow({
   link,
   audienceLabel,
@@ -3288,7 +3469,7 @@ function DirectoryRow({
   const nextLabel = useNextAvailableLabel(link.nextAvailableMs);
   const subtitle = [
     link.description,
-    link.durationsMinutes.length > 0 ? link.durationsMinutes.map((m) => _chunkEQZXJUYVcjs.formatDurationCompact.call(void 0, m * 60)).join(" / ") : null,
+    link.durationsMinutes.length > 0 ? link.durationsMinutes.map((m) => _chunkJTSUAHDLcjs.formatDurationCompact.call(void 0, m * 60)).join(" / ") : null,
     link.kind === "team" ? "Team" : null
   ].filter(Boolean).join(" \u2022 ");
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3297,43 +3478,51 @@ function DirectoryRow({
       href: `${bookingBasePath}/${link.slug}`,
       prefetch: false,
       className: "block rounded-lg text-inherit no-underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent",
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-20 w-full items-center gap-4 rounded-lg border border-ods-border bg-ods-card px-4 py-3 transition-colors duration-150 hover:bg-ods-bg-hover", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col justify-center text-left", children: [
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, ROW_FRAME_CLASS, "transition-colors duration-150 hover:bg-ods-bg-hover"), children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ROW_TITLE_COLUMN_CLASS, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-ods-text-primary text-h3", children: link.title }),
           subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-ods-text-secondary text-h6", children: subtitle })
         ] }),
-        audienceLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.StatusBadge, { text: `For ${audienceLabel}`, singleLine: true, className: "hidden shrink-0 content-sm:inline-flex" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM7YZGRAVcjs.AvatarStack, { people: link.hosts, max: 3, size: "md", label: "Hosts", className: "flex shrink-0" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "hidden w-44 shrink-0 flex-col items-end justify-center content-md:flex", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "Next available" }),
+        audienceLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.StatusBadge, { text: `For ${audienceLabel}`, singleLine: true, className: "hidden shrink-0 content-sm:inline-flex" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAAECWUNVcjs.AvatarStack, { people: link.hosts, max: 3, size: "md", label: "Hosts", className: "flex shrink-0" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ROW_NEXT_COLUMN_CLASS, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: ROW_NEXT_LABEL_CLASS, children: "Next available" }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "min-h-5 text-ods-text-primary text-h6", children: link.nextAvailableMs == null ? "No times published" : _nullishCoalesce(nextLabel, () => ( " ")) })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex size-12 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-card", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "size-6 text-ods-text-secondary" }) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ROW_CHEVRON_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "size-6 text-ods-text-secondary" }) })
       ] })
     }
   );
 }
 function MeetingSchedulerDirectoryRowSkeleton() {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-20 w-full items-center gap-4 rounded-lg border border-ods-border bg-ods-card px-4 py-3", 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, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-5 w-1/2" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-4 w-1/3" })
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ROW_FRAME_CLASS, "aria-hidden": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ROW_TITLE_COLUMN_CLASS, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h3", className: "w-1/2" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "w-1/3" })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "hidden h-6 w-28 shrink-0 content-sm:block" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "hidden w-44 shrink-0 flex-col items-end gap-1 content-md:flex", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-4 w-24" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-5 w-32" })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.UnifiedSkeleton, { className: "hidden h-6 w-28 shrink-0 content-sm:block" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.UnifiedSkeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ROW_NEXT_COLUMN_CLASS, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: ROW_NEXT_LABEL_CLASS, children: "Next available" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "w-32" })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "size-12 shrink-0 rounded-md" })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ROW_CHEVRON_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "size-6 text-ods-text-secondary" }) })
+  ] });
+}
+function MeetingSchedulerDirectorySkeleton({
+  pageSize = MEETING_DIRECTORY_PAGE_SIZE,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex flex-col", className), "aria-hidden": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ROWS_CLASS, style: { minHeight: directoryRowsMinHeight(pageSize) }, children: Array.from({ length: pageSize }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MeetingSchedulerDirectoryRowSkeleton, {}, i)) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, PAGINATION_SLOT_CLASS, PAGINATION_SLOT_H), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZRDMGMY7cjs.PaginationSkeleton, {}) })
   ] });
 }
-var PAGINATION_SLOT_H = "h-[4.5rem]";
 function MeetingSchedulerDirectory({
   apiBaseUrl = "",
   initialData = null,
   includeAll = false,
-  pageSize = 6,
+  pageSize = MEETING_DIRECTORY_PAGE_SIZE,
   bookingBasePath = "/schedule-a-call",
   contactHref,
   className
@@ -3342,8 +3531,9 @@ function MeetingSchedulerDirectory({
   const [isLoading, setIsLoading] = _react.useState.call(void 0, initialData === null);
   const [error, setError] = _react.useState.call(void 0, null);
   const [page, setPage] = _react.useState.call(void 0, 1);
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
   _react.useEffect.call(void 0, () => {
-    if (initialData !== null) return void 0;
+    if (initialData !== null || inScope) return void 0;
     const controller = new AbortController();
     let active = true;
     const load = async () => {
@@ -3367,23 +3557,20 @@ function MeetingSchedulerDirectory({
       active = false;
       controller.abort();
     };
-  }, [initialData, includeAll, apiBaseUrl]);
+  }, [initialData, inScope, includeAll, apiBaseUrl]);
   const rows = _react.useMemo.call(void 0, () => {
-    const purposes = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _41 => _41.purposes]), () => ( []));
+    const purposes = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _56 => _56.purposes]), () => ( []));
     return purposes.flatMap((p) => p.links.map((link) => ({ link, audienceLabel: p.label })));
   }, [data]);
   const totalPages = _chunkBLH2SFOOcjs.pageCount.call(void 0, rows.length, pageSize);
   const pageRows = rows.slice((page - 1) * pageSize, page * pageSize);
-  const rowsMinHeight = pageSize * 80 + (pageSize - 1) * 16;
-  if (isLoading && !data) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.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: _chunk3ATAYP36cjs.cn.call(void 0, "mt-8 flex w-full items-center justify-center", PAGINATION_SLOT_H), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-10 w-64" }) })
-    ] });
+  const rowsMinHeight = directoryRowsMinHeight(pageSize);
+  if (inScope || isLoading && !data) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MeetingSchedulerDirectorySkeleton, { pageSize, className });
   }
   if (error) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex flex-col justify-center", className), style: { minHeight: rowsMinHeight + 104 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkTSJUL6IHcjs.EmptyState,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex flex-col justify-center", className), style: { minHeight: rowsMinHeight + 104 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkYRFWOJF4cjs.EmptyState,
       {
         type: "generic",
         title: "We couldn't load available call times",
@@ -3393,8 +3580,8 @@ function MeetingSchedulerDirectory({
     ) });
   }
   if (rows.length === 0) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex flex-col justify-center", className), style: { minHeight: rowsMinHeight + 104 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkTSJUL6IHcjs.EmptyState,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex flex-col justify-center", className), style: { minHeight: rowsMinHeight + 104 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkYRFWOJF4cjs.EmptyState,
       {
         type: "generic",
         title: "No call times are published right now",
@@ -3403,10 +3590,10 @@ function MeetingSchedulerDirectory({
       }
     ) });
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.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: _chunk3ATAYP36cjs.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, 
-      _chunkLVKUMVUJcjs.PersistentPaginationWrapper,
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex flex-col", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ROWS_CLASS, 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: _chunk65VVJSQZcjs.cn.call(void 0, PAGINATION_SLOT_CLASS, PAGINATION_SLOT_H), children: totalPages > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkNBVZIHGScjs.PersistentPaginationWrapper,
       {
         isLoading,
         currentPage: page,
@@ -3430,7 +3617,7 @@ var BOOKING_ERROR_COPY = {
 var CONTEXT_PANEL_CLASS = "p-[var(--spacing-system-l)] shrink-0 content-lg:w-[280px] border-b content-lg:border-b-0 content-lg:border-r border-ods-border content-lg:min-h-0 content-lg:overflow-y-auto";
 var ACTION_PANEL_CLASS = "flex-1 min-w-0 flex flex-col content-md:min-h-0 content-lg:p-[var(--spacing-system-l)]";
 var PANEL_STEP_CLASS = "p-[var(--spacing-system-l)] content-md:min-h-0 content-md:overflow-y-auto content-lg:p-0";
-var STEP_PANEL_CLASS = _chunk3ATAYP36cjs.cn.call(void 0, "flex flex-1 flex-col", PANEL_STEP_CLASS);
+var STEP_PANEL_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, "flex flex-1 flex-col", PANEL_STEP_CLASS);
 var MEETING_SCHEDULER_H = "content-md:h-[34.375rem] content-lg:h-[23.75rem]";
 var MEETING_SCHEDULER_DETAILS_FIRST_H = "h-[50.75rem] content-md:h-[39.875rem]";
 var DEFAULT_SCHEDULER_FLOW = "slot-first";
@@ -3443,7 +3630,7 @@ var SCHEDULER_FLOW_PRESETS = {
     footerNote: "Next step: pick a slot that works. Calendar invite lands right after."
   }
 };
-var CARD_CLASS = _chunk3ATAYP36cjs.cn.call(void 0, 
+var CARD_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, 
   "overflow-hidden rounded-md border border-ods-border bg-ods-card",
   "content-md:flex content-md:flex-col"
   // The height is NOT baked in any more: it is chosen per flow at each render
@@ -3451,7 +3638,7 @@ var CARD_CLASS = _chunk3ATAYP36cjs.cn.call(void 0,
   // constants are module scope.
 );
 var CARD_INNER_CLASS = "flex flex-col content-md:min-h-0 content-md:flex-1 content-lg:h-full content-lg:flex-row";
-var CARD_DEGRADED_CLASS = _chunk3ATAYP36cjs.cn.call(void 0, 
+var CARD_DEGRADED_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, 
   "flex flex-col items-start gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]",
   "content-md:justify-center content-md:overflow-y-auto"
 );
@@ -3462,7 +3649,7 @@ function SchedulerDegradedCard({
   action,
   children
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, CARD_DEGRADED_CLASS, SCHEDULER_FLOW_PRESETS[flow].height, className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, CARD_DEGRADED_CLASS, SCHEDULER_FLOW_PRESETS[flow].height, className), children: [
     message && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: message }),
     action,
     children
@@ -3481,14 +3668,35 @@ var MODAL_STACK_CLASS = "flex flex-col gap-[var(--spacing-system-l)]";
 var MODAL_CARD_CLASS = "flex flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card";
 var MODAL_STEP_CLASS = "flex flex-col p-[var(--spacing-system-m)]";
 var NOOP2 = () => void 0;
+var NOOP_SUBMIT = () => Promise.resolve();
 var MODAL_FIELD_ROWS = [[{ name: "firstName" }, { name: "lastName" }], [{ name: "email" }]];
 var MODAL_PRIMARY_CLASS = "flex-1 content-md:min-w-[15.5rem] content-md:flex-none";
 function ModalFooter({ onCancel, primary }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-[var(--spacing-system-l)] content-md:justify-end", children: [
-    onCancel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", onClick: onCancel, className: "flex-1 content-md:hidden", children: "Cancel" }),
+    onCancel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "outline", onClick: onCancel, className: "flex-1 content-md:hidden", children: "Cancel" }),
     primary
   ] });
 }
+function schedulerCardClasses(flow, step, className) {
+  const detailsFirst = flow === "details-first";
+  const formOnly = detailsFirst && step === "details";
+  const boxed = !formOnly;
+  return {
+    formOnly,
+    cardClass: _chunk65VVJSQZcjs.cn.call(void 0, 
+      CARD_CLASS,
+      boxed ? SCHEDULER_FLOW_PRESETS[flow].height : "content-md:h-auto",
+      detailsFirst && "flex flex-col",
+      formOnly && "bg-ods-bg",
+      className
+    ),
+    /** details-first states a height on phones too (see MEETING_SCHEDULER_DETAILS_FIRST_H), so
+     *  the wrappers that let content shrink into a stated height run at every width there. */
+    innerClass: _chunk65VVJSQZcjs.cn.call(void 0, CARD_INNER_CLASS, detailsFirst && boxed && "min-h-0 flex-1"),
+    actionPanelClass: _chunk65VVJSQZcjs.cn.call(void 0, ACTION_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto"),
+    stepPanelClass: _chunk65VVJSQZcjs.cn.call(void 0, STEP_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto")
+  };
+}
 function HubSpotMeetingScheduler({
   meetingId,
   apiBaseUrl = "",
@@ -3519,11 +3727,13 @@ function HubSpotMeetingScheduler({
     book,
     isSubmitting
   } = useMeetingBooking({ meetingId, apiBaseUrl, initialAvailability });
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  const coldStart = inScope || isLoadingAvailability && !availability;
   const detailsFirst = flow === "details-first";
   const modal = layout === "modal" && !detailsFirst;
   const modalFormId = _react.useId.call(void 0, );
   const [modalFormValid, setModalFormValid] = _react.useState.call(void 0, false);
-  const hydrated = _chunk74ALTXXCcjs.useIsHydrated.call(void 0, );
+  const hydrated = _chunkYL6ZB2SRcjs.useIsHydrated.call(void 0, );
   const [pickedTimezone, setTimezone] = _react.useState.call(void 0, null);
   const resolvedLocalTimezone = _react.useMemo.call(void 0, () => {
     if (!hydrated) return null;
@@ -3536,14 +3746,15 @@ function HubSpotMeetingScheduler({
   const timezone = _nullishCoalesce(_nullishCoalesce(pickedTimezone, () => ( displayTimezone)), () => ( resolvedLocalTimezone));
   const preset = SCHEDULER_FLOW_PRESETS[flow];
   const [step, setStep] = _react.useState.call(void 0, preset.initialStep);
-  const stage = !(isLoadingAvailability && !availability) && (Boolean(availabilityError) || !availability || !isNativelyBookable(availability)) ? "unavailable" : step;
+  const stage = !coldStart && (Boolean(availabilityError) || !availability || !isNativelyBookable(availability)) ? "unavailable" : step;
   const onStageChangeRef = _react.useRef.call(void 0, onStageChange);
   _react.useEffect.call(void 0, () => {
     onStageChangeRef.current = onStageChange;
   });
   _react.useEffect.call(void 0, () => {
-    _optionalChain([onStageChangeRef, 'access', _42 => _42.current, 'optionalCall', _43 => _43(stage)]);
-  }, [stage]);
+    if (inScope) return;
+    _optionalChain([onStageChangeRef, 'access', _57 => _57.current, 'optionalCall', _58 => _58(stage)]);
+  }, [stage, inScope]);
   const [stash, setStash] = _react.useState.call(void 0, null);
   const inFlightRef = _react.useRef.call(void 0, false);
   const postInFlight = _react.useCallback.call(void 0, 
@@ -3556,8 +3767,8 @@ function HubSpotMeetingScheduler({
   const [selectedSlot, setSelectedSlot] = _react.useState.call(void 0, null);
   const [confirmation, setConfirmation] = _react.useState.call(void 0, null);
   const [bookingError, setBookingError] = _react.useState.call(void 0, null);
-  const { honeypotInputProps, getSignals, resetSignals } = _chunkXCH7SPGIcjs.useHumanitySignals.call(void 0, );
-  const { toast } = _chunkXCH7SPGIcjs.useToast.call(void 0, );
+  const { honeypotInputProps, getSignals, resetSignals } = _chunkXVFM6SJAcjs.useHumanitySignals.call(void 0, );
+  const { toast } = _chunkXVFM6SJAcjs.useToast.call(void 0, );
   const autoAdvanceCount = _react.useRef.call(void 0, 0);
   const [machineFor, setMachineFor] = _react.useState.call(void 0, meetingId);
   if (machineFor !== meetingId) {
@@ -3573,8 +3784,8 @@ function HubSpotMeetingScheduler({
   _react.useEffect.call(void 0, () => {
     autoAdvanceCount.current = 0;
   }, [meetingId]);
-  const durations = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([availability, 'optionalAccess', _44 => _44.durationsMs]), () => ( [])), [_optionalChain([availability, 'optionalAccess', _45 => _45.durationsMs])]);
-  const shownHosts = _nullishCoalesce(_nullishCoalesce(hosts, () => ( _optionalChain([availability, 'optionalAccess', _46 => _46.hosts]))), () => ( []));
+  const durations = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([availability, 'optionalAccess', _59 => _59.durationsMs]), () => ( [])), [_optionalChain([availability, 'optionalAccess', _60 => _60.durationsMs])]);
+  const shownHosts = _nullishCoalesce(_nullishCoalesce(hosts, () => ( _optionalChain([availability, 'optionalAccess', _61 => _61.hosts]))), () => ( []));
   const durationMs = _nullishCoalesce(_nullishCoalesce(pickedDurationMs, () => ( durations[0])), () => ( null));
   const slots = _react.useMemo.call(void 0, () => {
     if (!availability || durationMs == null) return [];
@@ -3631,10 +3842,10 @@ function HubSpotMeetingScheduler({
         return;
       }
       if (result.ok && result.confirmation) {
-        _chunkXCH7SPGIcjs.completeFormRescue.call(void 0, rescue, payload[_chunkNET74KSQcjs.FORM_RESCUE_ATTEMPT_FIELD]);
+        _chunkXVFM6SJAcjs.completeFormRescue.call(void 0, rescue, payload[_chunkTZ4GKUO2cjs.FORM_RESCUE_ATTEMPT_FIELD]);
         setConfirmation(result.confirmation);
         setStep("confirmed");
-        _optionalChain([onBooked, 'optionalCall', _47 => _47(result.confirmation)]);
+        _optionalChain([onBooked, 'optionalCall', _62 => _62(result.confirmation)]);
         return;
       }
       const code = _nullishCoalesce(result.code, () => ( "TEMPORARILY_UNAVAILABLE"));
@@ -3658,56 +3869,16 @@ function HubSpotMeetingScheduler({
     },
     [book, bookingError, detailsFirst, onBooked, refetchAvailability, rescue, resetSignals, toast]
   );
-  const escapeHatch = fallbackUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", size: "small-legacy", href: fallbackUrl, openInNewTab: true, children: "Open in HubSpot" }) : null;
+  const escapeHatch = fallbackUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "outline", size: "small-legacy", href: fallbackUrl, openInNewTab: true, children: "Open in HubSpot" }) : null;
   const backEdge = detailsFirst ? step === "slot" ? backToDetails : onBack : step === "details" ? backToSlot : onBack;
-  const boxed = !formOnly;
-  const cardClass = _chunk3ATAYP36cjs.cn.call(void 0, 
-    CARD_CLASS,
-    boxed ? preset.height : "content-md:h-auto",
-    detailsFirst && "flex flex-col",
-    formOnly && "bg-ods-bg",
-    className
-  );
-  const innerClass = _chunk3ATAYP36cjs.cn.call(void 0, CARD_INNER_CLASS, detailsFirst && boxed && "min-h-0 flex-1");
-  const actionPanelClass = _chunk3ATAYP36cjs.cn.call(void 0, ACTION_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto");
-  const stepPanelClass = _chunk3ATAYP36cjs.cn.call(void 0, STEP_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto");
+  const { cardClass, innerClass, actionPanelClass, stepPanelClass } = schedulerCardClasses(flow, step, className);
   const degraded = (message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchedulerDegradedCard, { flow, className, message, action: escapeHatch });
   const degradedCard = degraded("We couldn't load available call times. Please try again shortly.");
-  if (modal && isLoadingAvailability && !availability) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, MODAL_STACK_CLASS, className), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNO5UJLLQcjs.LoadingRegion, { label: "Loading available times", className: MODAL_CARD_CLASS, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchedulerModalHeaderSkeleton, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, { monthOffset, layout: "modal" })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        ModalFooter,
-        {
-          onCancel: onBack,
-          primary: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { disabled: true, onClick: NOOP2, className: MODAL_PRIMARY_CLASS, children: "Continue" })
-        }
-      )
-    ] });
-  }
-  if (isLoadingAvailability && !availability) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cardClass, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNO5UJLLQcjs.LoadingRegion, { label: "Loading available times", className: innerClass, children: [
-      !formOnly && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextPanelSkeleton, { onBack: backEdge, className: CONTEXT_PANEL_CLASS }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: actionPanelClass, children: formOnly ? (
-        // The SAME wrapper the loaded form gets, so the skeleton never
-        // states its own inset.
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: stepPanelClass, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          BookingFormSkeleton,
-          {
-            fieldRows: _optionalChain([detailsFormProps, 'optionalAccess', _48 => _48.fieldRows]),
-            consent: Boolean(_optionalChain([detailsFormProps, 'optionalAccess', _49 => _49.consent])),
-            footerNote: preset.footerNote
-          }
-        ) })
-      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, { monthOffset }) })
-    ] }) });
-  }
-  if (availabilityError || !availability) return degradedCard;
-  if (!isNativelyBookable(availability)) {
-    return degraded("This meeting type is booked directly on HubSpot.");
+  if (!coldStart) {
+    if (availabilityError || !availability) return degradedCard;
+    if (!isNativelyBookable(availability)) {
+      return degraded("This meeting type is booked directly on HubSpot.");
+    }
   }
   if (modal) {
     const modalBack = step === "details" ? backToSlot : onBack;
@@ -3716,14 +3887,14 @@ function HubSpotMeetingScheduler({
       setSelectedDay(null);
       setSelectedSlot(null);
     };
-    const summary = selectedSlot != null && durationMs != null && timezone != null ? `${_chunkEQZXJUYVcjs.formatDateWithTimezone.call(void 0, selectedSlot, timezone, "weekdayDateTimeZoned", { viewerLocale: true })} \xB7 ${_chunkEQZXJUYVcjs.formatDurationCompact.call(void 0, durationMs / 1e3)}` : null;
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, MODAL_STACK_CLASS, className), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: MODAL_CARD_CLASS, children: [
+    const summary = selectedSlot != null && durationMs != null && timezone != null ? `${_chunkJTSUAHDLcjs.formatDateWithTimezone.call(void 0, selectedSlot, timezone, "weekdayDateTimeZoned", { viewerLocale: true })} \xB7 ${_chunkJTSUAHDLcjs.formatDurationCompact.call(void 0, durationMs / 1e3)}` : null;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, MODAL_STACK_CLASS, className), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label: "Loading available times", announce: coldStart, className: MODAL_CARD_CLASS, children: [
         modalBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkWA4X55XYcjs.BackButton,
+          _chunkZV45VS6Kcjs.BackButton,
           {
             onClick: modalBack,
-            className: _chunk3ATAYP36cjs.cn.call(void 0, 
+            className: _chunk65VVJSQZcjs.cn.call(void 0, 
               "px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]",
               step === "slot" && "content-md:hidden"
             )
@@ -3732,6 +3903,7 @@ function HubSpotMeetingScheduler({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           SchedulerModalHeader,
           {
+            loading: coldStart,
             hosts: shownHosts,
             durationsMs: durations,
             selectedDurationMs: durationMs,
@@ -3742,7 +3914,7 @@ function HubSpotMeetingScheduler({
             showTimezone: step === "slot"
           }
         ),
-        step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: MODAL_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: _chunk3ATAYP36cjs.cn.call(void 0, MODAL_STEP_CLASS, "gap-[var(--spacing-system-m)]"), children: [
+        step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: MODAL_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: _chunk65VVJSQZcjs.cn.call(void 0, MODAL_STEP_CLASS, "gap-[var(--spacing-system-m)]"), children: [
           summary && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-primary text-h4", children: summary }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             DetailsForm,
@@ -3765,29 +3937,33 @@ function HubSpotMeetingScheduler({
             }
           )
         ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          bookingError === "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFMH2DYBCcjs.Alert, { variant: "warning", className: "mx-[var(--spacing-system-m)] mt-[var(--spacing-system-m)] w-auto", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFMH2DYBCcjs.AlertDescription, { children: "That time was just taken \u2014 pick another slot below. (If you already submitted, check your email for a confirmation before rebooking.)" }) }),
-          timezone && durationMs != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            SlotPicker,
-            {
-              layout: "modal",
-              slots,
-              timezone,
-              monthOffset,
-              onMonthOffsetChange: (o) => {
-                setSelectedDay(null);
-                setSelectedSlot(null);
-                setMonthOffset(o);
-              },
-              selectedSlot,
-              onSelectSlot: setSelectedSlot,
-              selectedDay,
-              onSelectDay: setSelectedDay,
-              isLoading: isLoadingAvailability
-            }
-          ) : durations.length === 0 && !isFetchingAvailability ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, MODAL_STEP_CLASS, "items-start gap-[var(--spacing-system-m)]"), children: [
+          bookingError === "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.Alert, { variant: "warning", className: "mx-[var(--spacing-system-m)] mt-[var(--spacing-system-m)] w-auto", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.AlertDescription, { children: "That time was just taken \u2014 pick another slot below. (If you already submitted, check your email for a confirmation before rebooking.)" }) }),
+          !coldStart && (!timezone || durationMs == null) && durations.length === 0 && !isFetchingAvailability ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, MODAL_STEP_CLASS, "items-start gap-[var(--spacing-system-m)]"), children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "No call times are published right now." }),
             escapeHatch
-          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, { monthOffset, layout: "modal" })
+          ] }) : (
+            // On a cold start, or waiting for the zone or the length, the picker draws its own skeleton (`loading`).
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              SlotPicker,
+              {
+                loading: coldStart || !timezone || durationMs == null,
+                layout: "modal",
+                slots,
+                timezone,
+                monthOffset,
+                onMonthOffsetChange: (o) => {
+                  setSelectedDay(null);
+                  setSelectedSlot(null);
+                  setMonthOffset(o);
+                },
+                selectedSlot,
+                onSelectSlot: setSelectedSlot,
+                selectedDay,
+                onSelectDay: setSelectedDay,
+                isLoading: isLoadingAvailability
+              }
+            )
+          )
         ] })
       ] }),
       step === "slot" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3795,7 +3971,7 @@ function HubSpotMeetingScheduler({
         {
           onCancel: onBack,
           primary: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk2QMBXGMQcjs.Button,
+            _chunkTF5D5MNOcjs.Button,
             {
               disabled: selectedSlot == null || durationMs == null,
               onClick: () => setStep("details"),
@@ -3810,7 +3986,7 @@ function HubSpotMeetingScheduler({
         {
           onCancel: onBack,
           primary: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk2QMBXGMQcjs.Button,
+            _chunkTF5D5MNOcjs.Button,
             {
               type: "submit",
               form: modalFormId,
@@ -3824,10 +4000,11 @@ function HubSpotMeetingScheduler({
       )
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cardClass, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: innerClass, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cardClass, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label: "Loading available times", announce: coldStart, className: innerClass, children: [
     !formOnly && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       SchedulerContextPanel,
       {
+        loading: coldStart,
         hosts: shownHosts,
         title,
         description,
@@ -3848,19 +4025,53 @@ function HubSpotMeetingScheduler({
         className: CONTEXT_PANEL_CLASS
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: actionPanelClass, children: step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: stepPanelClass, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Confirmation, { confirmation, timezone }) }) : step === "details" && (detailsFirst ? (
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: actionPanelClass, children: coldStart ? (
+      // The month is not here yet: the step's own part draws its skeleton in the loaded wrapper. Both terms
+      // matter: without `formOnly` this would be a calendar where the form belongs; paging a month AFTER
+      // Continue (at `step === 'slot'`) keeps the calendar.
+      formOnly ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: stepPanelClass, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DetailsForm,
+        {
+          loading: true,
+          ...detailsFormProps,
+          availability,
+          meetingId,
+          timezone,
+          deferSlot: detailsFirst,
+          submitLabel: preset.submitLabel,
+          footerNote: preset.footerNote,
+          isSubmitting: false,
+          onSubmit: NOOP_SUBMIT,
+          honeypotInputProps,
+          getSignals
+        }
+      ) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-m)] content-md:min-h-0 content-md:flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        SlotPicker,
+        {
+          loading: true,
+          slots,
+          timezone,
+          monthOffset,
+          onMonthOffsetChange: NOOP2,
+          selectedSlot: null,
+          onSelectSlot: NOOP2,
+          selectedDay: null,
+          onSelectDay: NOOP2
+        }
+      ) })
+    ) : step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: stepPanelClass, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Confirmation, { confirmation, timezone }) }) : step === "details" && (detailsFirst ? (
       // The form is step ONE here: no slot yet, and `timezone` is null
       // on the server render, so neither may gate the PANEL. A link
       // publishing no durations has no form worth showing; it gets the
       // "nothing published" message below at every moment, refetch or
       // not — never a calendar skeleton in the form-only layout.
       durations.length > 0
-    ) : durationMs != null && selectedSlot != null && timezone) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, stepPanelClass, "gap-[var(--spacing-system-m)]"), children: [
+    ) : durationMs != null && selectedSlot != null && timezone) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, stepPanelClass, "gap-[var(--spacing-system-m)]"), children: [
       selectedSlot != null && durationMs != null && timezone != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-primary text-h4", children: [
-        _chunkEQZXJUYVcjs.formatDateWithTimezone.call(void 0, selectedSlot, timezone, "weekdayDateTimeZoned", { viewerLocale: true }),
+        _chunkJTSUAHDLcjs.formatDateWithTimezone.call(void 0, selectedSlot, timezone, "weekdayDateTimeZoned", { viewerLocale: true }),
         " \xB7",
         " ",
-        _chunkEQZXJUYVcjs.formatDurationCompact.call(void 0, durationMs / 1e3)
+        _chunkJTSUAHDLcjs.formatDurationCompact.call(void 0, durationMs / 1e3)
       ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         DetailsForm,
@@ -3874,7 +4085,7 @@ function HubSpotMeetingScheduler({
           deferSlot: detailsFirst,
           submitLabel: preset.submitLabel,
           footerNote: preset.footerNote,
-          initialValues: detailsFirst ? _optionalChain([stash, 'optionalAccess', _50 => _50.payload]) : void 0,
+          initialValues: detailsFirst ? _optionalChain([stash, 'optionalAccess', _63 => _63.payload]) : void 0,
           isSubmitting,
           onSubmit: detailsFirst ? stashDetails : handleSubmit,
           honeypotInputProps,
@@ -3884,20 +4095,33 @@ function HubSpotMeetingScheduler({
       )
     ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-m)] content-md:min-h-0 content-md:flex-1", children: [
       bookingError === "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkFMH2DYBCcjs.Alert,
+        _chunkVRDHAR3Xcjs.Alert,
         {
           variant: "warning",
           className: "mx-[var(--spacing-system-l)] mt-[var(--spacing-system-l)] w-auto content-lg:m-0 content-lg:w-full",
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFMH2DYBCcjs.AlertDescription, { children: "That time was just taken \u2014 pick another slot below. (If you already submitted, check your email for a confirmation before rebooking.)" })
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.AlertDescription, { children: "That time was just taken \u2014 pick another slot below. (If you already 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.
+      (!timezone || durationMs == null) && durations.length === 0 && (!isFetchingAvailability || formOnly) ? (
+        // 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. In the form-only layout it holds through
+        // a refetch too: the alternative frame is a calendar skeleton
+        // where a form belongs.
+        /* @__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-ods-text-secondary text-h6", children: "No call times are published right now." }),
+          escapeHatch
+        ] })
+      ) : (
+        // The picker owns the loading and the empty month — it keeps
+        // the calendar up either way, so there is no branch here that
+        // can take it off screen mid-flow. In the pre-mount
+        // timezone-resolution window (every SSR load hits it for one
+        // frame-batch) it draws its own skeleton (`loading`).
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           SlotPicker,
           {
+            loading: !timezone || durationMs == null,
             slots,
             timezone,
             monthOffset,
@@ -3942,21 +4166,6 @@ function HubSpotMeetingScheduler({
             isSubmitting: detailsFirst ? isSubmitting : void 0
           }
         )
-      ) : durations.length === 0 && (!isFetchingAvailability || formOnly) ? (
-        // 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. In the form-only layout it holds through
-        // a refetch too: the alternative frame is a calendar skeleton
-        // where a form belongs.
-        /* @__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-ods-text-secondary text-h6", children: "No call times are published right now." }),
-          escapeHatch
-        ] })
-      ) : (
-        // Pre-mount timezone-resolution window (every SSR load hits
-        // 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 })
       )
     ] }) })
   ] }) });
@@ -3972,4 +4181,7 @@ function HubSpotMeetingScheduler({
 
 
 
-exports.BookingForm = BookingForm; exports.BookingFormSkeleton = BookingFormSkeleton; exports.DEFAULT_SCHEDULER_FLOW = DEFAULT_SCHEDULER_FLOW; exports.HubSpotMeetingScheduler = HubSpotMeetingScheduler; exports.MEETING_SCHEDULER_DETAILS_FIRST_H = MEETING_SCHEDULER_DETAILS_FIRST_H; exports.MEETING_SCHEDULER_H = MEETING_SCHEDULER_H; exports.MeetingSchedulerDirectory = MeetingSchedulerDirectory; exports.MeetingSchedulerDirectoryRowSkeleton = MeetingSchedulerDirectoryRowSkeleton; exports.SCHEDULER_FLOW_PRESETS = SCHEDULER_FLOW_PRESETS; exports.SchedulerDegradedCard = SchedulerDegradedCard;
+
+
+
+exports.BookingForm = BookingForm; exports.BookingFormSkeleton = BookingFormSkeleton; exports.DEFAULT_SCHEDULER_FLOW = DEFAULT_SCHEDULER_FLOW; exports.HubSpotMeetingScheduler = HubSpotMeetingScheduler; exports.MEETING_DIRECTORY_PAGE_SIZE = MEETING_DIRECTORY_PAGE_SIZE; exports.MEETING_SCHEDULER_DETAILS_FIRST_H = MEETING_SCHEDULER_DETAILS_FIRST_H; exports.MEETING_SCHEDULER_H = MEETING_SCHEDULER_H; exports.MeetingSchedulerDirectory = MeetingSchedulerDirectory; exports.MeetingSchedulerDirectoryRowSkeleton = MeetingSchedulerDirectoryRowSkeleton; exports.MeetingSchedulerDirectorySkeleton = MeetingSchedulerDirectorySkeleton; exports.SCHEDULER_FLOW_PRESETS = SCHEDULER_FLOW_PRESETS; exports.SchedulerDegradedCard = SchedulerDegradedCard; exports.formFieldOptionLabel = formFieldOptionLabel;