@flamingo-stack/openframe-frontend-core 0.0.742 → 0.0.743

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

@@ -2,10 +2,10 @@
 "use client";
 
 
-var _chunkBI3XBCQXcjs = require('../../chunk-BI3XBCQX.cjs');
+var _chunkYIOWV7LScjs = require('../../chunk-YIOWV7LS.cjs');
 
 
-var _chunkOBODY7F3cjs = require('../../chunk-OBODY7F3.cjs');
+var _chunk4N7KGOBScjs = require('../../chunk-4N7KGOBS.cjs');
 
 
 
@@ -16,7 +16,7 @@ var _chunkOBODY7F3cjs = require('../../chunk-OBODY7F3.cjs');
 
 
 
-var _chunk4PKORVOXcjs = require('../../chunk-4PKORVOX.cjs');
+var _chunkWCY35GB5cjs = require('../../chunk-WCY35GB5.cjs');
 require('../../chunk-URVIPSAJ.cjs');
 require('../../chunk-NTGIQP7O.cjs');
 
@@ -39,17 +39,17 @@ require('../../chunk-LU7TD6QS.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-YQGDXH3M.cjs');
+require('../../chunk-GAGNKWOC.cjs');
 
 
 var _chunkYUMFVQINcjs = require('../../chunk-YUMFVQIN.cjs');
 
 
 
-var _chunkPS6T65KAcjs = require('../../chunk-PS6T65KA.cjs');
+var _chunkBM6JZRVDcjs = require('../../chunk-BM6JZRVD.cjs');
 
 
-var _chunk32Q7K5OPcjs = require('../../chunk-32Q7K5OP.cjs');
+var _chunk7YDF3QBNcjs = require('../../chunk-7YDF3QBN.cjs');
 require('../../chunk-OWGLRE74.cjs');
 require('../../chunk-3RFQPQ7Z.cjs');
 require('../../chunk-5TCIRWHL.cjs');
@@ -1852,10 +1852,10 @@ require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-XAA5EZ5T.cjs');
+require('../../chunk-JGZEHBBD.cjs');
 
 
-var _chunk5MH6BRPYcjs = require('../../chunk-5MH6BRPY.cjs');
+var _chunkLJ46XYYPcjs = require('../../chunk-LJ46XYYP.cjs');
 require('../../chunk-QYLIHZKZ.cjs');
 require('../../chunk-63N4FN5V.cjs');
 
@@ -2190,7 +2190,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(_chunkPS6T65KAcjs.MAX_MONTH_OFFSET, offset)));
+    setMonthOffsetState(Math.max(0, Math.min(_chunkBM6JZRVDcjs.MAX_MONTH_OFFSET, offset)));
   }, []);
   const prevMeetingIdRef = _react.useRef.call(void 0, meetingId);
   _react.useLayoutEffect.call(void 0, () => {
@@ -2320,7 +2320,7 @@ var FIELD_CONTROLS = {
     }
   ),
   textarea: ({ field, id, registerName, error, register }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk4PKORVOXcjs.Textarea,
+    _chunkWCY35GB5cjs.Textarea,
     {
       id,
       required: field.required,
@@ -2397,14 +2397,14 @@ var FIELD_CONTROLS = {
       control,
       name: registerName,
       render: ({ field: rhf }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk4PKORVOXcjs.RadioGroup,
+        _chunkWCY35GB5cjs.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, _chunk4PKORVOXcjs.RadioGroupItem, { id: `${id}-${opt}`, value: opt }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWCY35GB5cjs.RadioGroupItem, { id: `${id}-${opt}`, value: opt }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkK6VWTUCHcjs.Label, { htmlFor: `${id}-${opt}`, children: optionLabel(field, opt) })
           ] }, opt))
         }
@@ -2476,6 +2476,9 @@ function BookingForm({
   submitLabel,
   footerNote,
   fieldRows,
+  formId,
+  hideSubmit = false,
+  onValidityChange,
   fieldCopy,
   deniedEmailDomains,
   consent,
@@ -2528,6 +2531,15 @@ function BookingForm({
   const [consented, setConsented] = _react.useState.call(void 0, _optionalChain([initialValues, 'optionalAccess', _21 => _21[HOST_CONSENT_KEY]]) === true);
   const [consentError, setConsentError] = _react.useState.call(void 0, null);
   const consentMissing = Boolean(consent) && !consented;
+  const watchedValues = watch();
+  const liveValid = onValidityChange ? schema.safeParse(watchedValues).success && !consentMissing : false;
+  const lastValidRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!onValidityChange) return;
+    if (lastValidRef.current === liveValid) return;
+    lastValidRef.current = liveValid;
+    onValidityChange(liveValid);
+  });
   _react.useEffect.call(void 0, () => {
     const current = _nullishCoalesce(_nullishCoalesce(getValues("legalConsentResponses"), () => ( priorConsents)), () => ( []));
     setValue(
@@ -2640,8 +2652,8 @@ function BookingForm({
       children: _nullishCoalesce(submitLabel, () => ( DEFAULT_SUBMIT_LABEL))
     }
   );
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: submit, className: FORM_STACK, noValidate: true, ..._chunkPS6T65KAcjs.HUBSPOT_DO_NOT_COLLECT_FORM_PROPS, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4PKORVOXcjs.HoneypotField, { ...honeypotInputProps }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { id: formId, onSubmit: submit, className: FORM_STACK, noValidate: true, ..._chunkBM6JZRVDcjs.HUBSPOT_DO_NOT_COLLECT_FORM_PROPS, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWCY35GB5cjs.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))
@@ -2654,7 +2666,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, 
-      _chunk4PKORVOXcjs.CheckboxBlock,
+      _chunkWCY35GB5cjs.CheckboxBlock,
       {
         id: "ms-host-consent",
         checked: consented,
@@ -2689,7 +2701,7 @@ function BookingForm({
               // same block the waitlist form uses): box + label in one
               // bordered row.
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunk4PKORVOXcjs.CheckboxBlock,
+                _chunkWCY35GB5cjs.CheckboxBlock,
                 {
                   id: `ms-consent-${box.communicationTypeId}`,
                   checked: _nullishCoalesce(_optionalChain([current, 'optionalAccess', _34 => _34.consented]), () => ( false)),
@@ -2709,7 +2721,7 @@ function BookingForm({
       ),
       legalConsent.privacyPolicyText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: legalConsent.privacyPolicyText })
     ] }) }),
-    footerNote ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: FOOTER_ROW_CLASS, children: [
+    hideSubmit ? null : 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 })
@@ -2884,7 +2896,7 @@ function SchedulerContextPanel({
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, STRIP_ASIDE, locked && "content-max-lg:hidden"), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
         timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk4PKORVOXcjs.TimezoneSelect,
+          _chunkWCY35GB5cjs.TimezoneSelect,
           {
             value: timezone,
             disabled,
@@ -2898,6 +2910,103 @@ 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 FIELD_LABEL_CLASS2 = "text-h4 text-ods-text-primary";
+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, _chunkUY6A6TEYcjs.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: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkABLUMGCIcjs.SquareAvatar,
+      {
+        variant: "round",
+        size: "sm",
+        src: _nullishCoalesce(host.avatarUrl, () => ( void 0)),
+        alt: host.name,
+        fallback: host.name
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col", 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)) });
+}
+function SchedulerModalHeader({
+  hosts,
+  durationsMs,
+  selectedDurationMs,
+  onSelectDuration,
+  timezone,
+  onTimezoneChange,
+  locked = false,
+  disabled = false,
+  showTimezone = true
+}) {
+  const chips = !locked && durationsMs.length > 1;
+  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,
+        {
+          variant: selectedDurationMs === ms ? void 0 : "outline",
+          size: "small-legacy",
+          disabled,
+          onClick: () => onSelectDuration(ms),
+          children: _chunkABLUMGCIcjs.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: [
+        _chunkABLUMGCIcjs.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: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS2, children: "Timezone" }),
+      timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkWCY35GB5cjs.TimezoneSelect,
+        {
+          value: timezone,
+          disabled,
+          onChange: (tz) => {
+            if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _36 => _36(tz)]);
+          }
+        }
+      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5M5C6UV4cjs.Skeleton, { className: "h-12 w-full" })
+    ] })
+  ] });
+}
+function SchedulerModalHeaderSkeleton() {
+  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, _chunk5M5C6UV4cjs.Skeleton, { 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, _chunk5M5C6UV4cjs.Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5M5C6UV4cjs.Skeleton, { className: "h-4 w-24" })
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5M5C6UV4cjs.Skeleton, { className: "h-4 w-20 shrink-0" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]"), children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS2, children: "Timezone" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5M5C6UV4cjs.Skeleton, { className: "h-12 w-full" })
+    ] })
+  ] });
+}
+
 // src/components/meeting-scheduler/slot-picker.tsx
 var _lucidereact = require('lucide-react');
 
@@ -2957,6 +3066,15 @@ var SLOT_ROW_CLASS = _chunk3ATAYP36cjs.cn.call(void 0,
 );
 var COLUMN_BOX = "p-[var(--spacing-system-l)] content-lg:p-0";
 var COLUMN_DIVIDER = "border-b border-ods-border content-md:border-b-0 content-md:border-r content-lg:border-0";
+var MODAL_ROW_CLASS = "flex min-w-0 flex-col content-md:flex-row content-md:items-start";
+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, 
+  "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);
@@ -2967,18 +3085,18 @@ 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() + _chunkPS6T65KAcjs.MAX_MONTH_OFFSET + 1, 0);
+  const endMonth = new Date(now.getFullYear(), now.getMonth() + _chunkBM6JZRVDcjs.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', _36 => _36.has, 'call', _37 => _37(calendarDayKey(day))]), [slotsByDay]);
+  const dayHasNoSlots = _react.useCallback.call(void 0, (day) => !_optionalChain([slotsByDay, 'optionalAccess', _37 => _37.has, 'call', _38 => _38(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, 
-    _chunk4PKORVOXcjs.DatePickerCalendar,
+    _chunkWCY35GB5cjs.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(_chunkPS6T65KAcjs.MAX_MONTH_OFFSET, offset)));
+        onMonthOffsetChange(Math.max(0, Math.min(_chunkBM6JZRVDcjs.MAX_MONTH_OFFSET, offset)));
       },
       fromDate: startMonth,
       toDate: endMonth,
@@ -2987,28 +3105,44 @@ function DayCalendar({ monthOffset, onMonthOffsetChange, selectedDay, onSelectDa
         const day = value;
         if (!day) return;
         const key = calendarDayKey(day);
-        if (_optionalChain([slotsByDay, 'optionalAccess', _38 => _38.has, 'call', _39 => _39(key)])) onSelectDay(key);
+        if (_optionalChain([slotsByDay, 'optionalAccess', _39 => _39.has, 'call', _40 => _40(key)])) onSelectDay(key);
       },
       disabledDays: slotsByDay === null ? DISABLE_EVERY_DAY : dayHasNoSlots
     }
   ) });
 }
-function SlotPickerSkeleton({ monthOffset = 0 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SLOT_ROW_CLASS, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.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, 
-        DayCalendar,
-        {
-          monthOffset,
-          onMonthOffsetChange: NOOP,
-          selectedDay: null,
-          onSelectDay: NOOP,
-          slotsByDay: null
-        }
-      )
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, COLUMN_STACK, COLUMN_BOX, "min-w-0 content-md:flex-1"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimeChipsSkeleton, {}) })
+function SlotPickerSkeleton({
+  monthOffset = 0,
+  layout = "card"
+}) {
+  const modal = layout === "modal";
+  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"),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: COLUMN_HEADING_CLASS, children: SLOT_PICKER_HEADING }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            DayCalendar,
+            {
+              monthOffset,
+              onMonthOffsetChange: NOOP,
+              selectedDay: null,
+              onSelectDay: NOOP,
+              slotsByDay: null
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: 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, {})
+      }
+    )
   ] });
 }
 function TimeChipsSkeleton() {
@@ -3022,6 +3156,7 @@ function TimeChipsSkeleton() {
 }
 function SlotPicker({
   slots,
+  layout = "card",
   timezone,
   monthOffset,
   onMonthOffsetChange,
@@ -3050,64 +3185,77 @@ function SlotPicker({
   const daySlots = selectedDay ? _nullishCoalesce(slotsByDay.get(selectedDay), () => ( [])) : [];
   const monthPrefix = `${visibleMonth.getFullYear()}-${String(visibleMonth.getMonth() + 1).padStart(2, "0")}`;
   const monthHasSlots = [...slotsByDay.keys()].some((key) => key.startsWith(monthPrefix));
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SLOT_ROW_CLASS, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.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, 
-        DayCalendar,
-        {
-          monthOffset,
-          onMonthOffsetChange,
-          selectedDay,
-          onSelectDay,
-          slotsByDay: isLoading ? null : slotsByDay
-        }
-      )
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _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: _chunkABLUMGCIcjs.formatDateWithTimezone.call(void 0, dateFromDayKey(selectedDay), _chunkABLUMGCIcjs.VIEWER_TIMEZONE, "weekday", { viewerLocale: true }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CHIP_GRID_CLASS, children: daySlots.map((ms) => {
-        const isSelected = selectedSlot === ms;
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
-          {
-            variant: isSelected ? void 0 : "outline",
-            disabled: isSubmitting,
-            loading: isSubmitting && isSelected,
-            onClick: () => {
-              if (isSubmitting) return;
-              onSelectSlot(ms);
-            },
-            className: CHIP_CLASS,
-            children: timeLabelInZone(ms, timezone)
-          },
-          ms
-        );
-      }) })
-    ] }) : monthHasSlots ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "Pick a day to see available times." }) : (
-      // A fully-booked month used to just SAY "try the next one" and leave
-      // the visitor to find the chevron in the other column. The way out
-      // of a dead end belongs in the dead end.
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start gap-[var(--spacing-system-s)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: [
-          "No available times in ",
-          monthLabelFor(monthOffset),
-          "."
-        ] }),
-        monthOffset < _chunkPS6T65KAcjs.MAX_MONTH_OFFSET && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
-          {
-            variant: "outline",
-            onClick: () => onMonthOffsetChange(monthOffset + 1),
-            rightIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "size-5" }),
-            children: [
-              "Check ",
-              monthLabelFor(monthOffset + 1)
-            ]
-          }
+  const modal = layout === "modal";
+  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"),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: COLUMN_HEADING_CLASS, children: SLOT_PICKER_HEADING }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            DayCalendar,
+            {
+              monthOffset,
+              onMonthOffsetChange,
+              selectedDay,
+              onSelectDay,
+              slotsByDay: isLoading ? null : slotsByDay
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: 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: _chunkABLUMGCIcjs.formatDateWithTimezone.call(void 0, dateFromDayKey(selectedDay), _chunkABLUMGCIcjs.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,
+              {
+                variant: isSelected ? void 0 : "outline",
+                disabled: isSubmitting,
+                loading: isSubmitting && isSelected,
+                onClick: () => {
+                  if (isSubmitting) return;
+                  onSelectSlot(ms);
+                },
+                className: CHIP_CLASS,
+                children: timeLabelInZone(ms, timezone)
+              },
+              ms
+            );
+          }) })
+        ] }) : monthHasSlots ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "Pick a day to see available times." }) : (
+          // A fully-booked month used to just SAY "try the next one" and leave
+          // the visitor to find the chevron in the other column. The way out
+          // of a dead end belongs in the dead end.
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start gap-[var(--spacing-system-s)]", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: [
+              "No available times in ",
+              monthLabelFor(monthOffset),
+              "."
+            ] }),
+            monthOffset < _chunkBM6JZRVDcjs.MAX_MONTH_OFFSET && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _chunk2QMBXGMQcjs.Button,
+              {
+                variant: "outline",
+                onClick: () => onMonthOffsetChange(monthOffset + 1),
+                rightIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "size-5" }),
+                children: [
+                  "Check ",
+                  monthLabelFor(monthOffset + 1)
+                ]
+              }
+            )
+          ] })
         )
-      ] })
-    ) })
+      }
+    )
   ] });
 }
 
@@ -3116,7 +3264,7 @@ function SlotPicker({
 
 
 function useNextAvailableLabel(ms) {
-  const hydrated = _chunk32Q7K5OPcjs.useIsHydrated.call(void 0, );
+  const hydrated = _chunk7YDF3QBNcjs.useIsHydrated.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (!hydrated || ms == null) return null;
     return _chunkABLUMGCIcjs.formatDateWithTimezone.call(void 0, ms, _chunkABLUMGCIcjs.VIEWER_TIMEZONE, "shortWeekdayDateTime", { viewerLocale: true }) || null;
@@ -3144,7 +3292,7 @@ function DirectoryRow({
           /* @__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, _chunk5MH6BRPYcjs.StatusBadge, { text: `For ${audienceLabel}`, singleLine: true, className: "hidden shrink-0 content-sm:inline-flex" }),
+        audienceLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLJ46XYYPcjs.StatusBadge, { text: `For ${audienceLabel}`, singleLine: true, className: "hidden shrink-0 content-sm:inline-flex" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUY6A6TEYcjs.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" }),
@@ -3211,7 +3359,7 @@ function MeetingSchedulerDirectory({
     };
   }, [initialData, includeAll, apiBaseUrl]);
   const rows = _react.useMemo.call(void 0, () => {
-    const purposes = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _40 => _40.purposes]), () => ( []));
+    const purposes = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _41 => _41.purposes]), () => ( []));
     return purposes.flatMap((p) => p.links.map((link) => ({ link, audienceLabel: p.label })));
   }, [data]);
   const totalPages = _chunkBLH2SFOOcjs.pageCount.call(void 0, rows.length, pageSize);
@@ -3225,7 +3373,7 @@ function MeetingSchedulerDirectory({
   }
   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, 
-      _chunkOBODY7F3cjs.EmptyState,
+      _chunk4N7KGOBScjs.EmptyState,
       {
         type: "generic",
         title: "We couldn't load available call times",
@@ -3236,7 +3384,7 @@ 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, 
-      _chunkOBODY7F3cjs.EmptyState,
+      _chunk4N7KGOBScjs.EmptyState,
       {
         type: "generic",
         title: "No call times are published right now",
@@ -3248,7 +3396,7 @@ 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, 
-      _chunkBI3XBCQXcjs.PersistentPaginationWrapper,
+      _chunkYIOWV7LScjs.PersistentPaginationWrapper,
       {
         isLoading,
         currentPage: page,
@@ -3319,6 +3467,18 @@ function isNativelyBookable(availability) {
   }
   return true;
 }
+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 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" }),
+    primary
+  ] });
+}
 function HubSpotMeetingScheduler({
   meetingId,
   apiBaseUrl = "",
@@ -3335,7 +3495,8 @@ function HubSpotMeetingScheduler({
   flow = DEFAULT_SCHEDULER_FLOW,
   detailsForm: DetailsForm = BookingForm,
   detailsFormProps,
-  rescue = null
+  rescue = null,
+  layout = "card"
 }) {
   const {
     availability,
@@ -3349,7 +3510,10 @@ function HubSpotMeetingScheduler({
     isSubmitting
   } = useMeetingBooking({ meetingId, apiBaseUrl, initialAvailability });
   const detailsFirst = flow === "details-first";
-  const hydrated = _chunk32Q7K5OPcjs.useIsHydrated.call(void 0, );
+  const modal = layout === "modal" && !detailsFirst;
+  const modalFormId = _react.useId.call(void 0, );
+  const [modalFormValid, setModalFormValid] = _react.useState.call(void 0, false);
+  const hydrated = _chunk7YDF3QBNcjs.useIsHydrated.call(void 0, );
   const [pickedTimezone, setTimezone] = _react.useState.call(void 0, null);
   const resolvedLocalTimezone = _react.useMemo.call(void 0, () => {
     if (!hydrated) return null;
@@ -3368,7 +3532,7 @@ function HubSpotMeetingScheduler({
     onStageChangeRef.current = onStageChange;
   });
   _react.useEffect.call(void 0, () => {
-    _optionalChain([onStageChangeRef, 'access', _41 => _41.current, 'optionalCall', _42 => _42(stage)]);
+    _optionalChain([onStageChangeRef, 'access', _42 => _42.current, 'optionalCall', _43 => _43(stage)]);
   }, [stage]);
   const [stash, setStash] = _react.useState.call(void 0, null);
   const inFlightRef = _react.useRef.call(void 0, false);
@@ -3399,8 +3563,8 @@ function HubSpotMeetingScheduler({
   _react.useEffect.call(void 0, () => {
     autoAdvanceCount.current = 0;
   }, [meetingId]);
-  const durations = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([availability, 'optionalAccess', _43 => _43.durationsMs]), () => ( [])), [_optionalChain([availability, 'optionalAccess', _44 => _44.durationsMs])]);
-  const shownHosts = _nullishCoalesce(_nullishCoalesce(hosts, () => ( _optionalChain([availability, 'optionalAccess', _45 => _45.hosts]))), () => ( []));
+  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 durationMs = _nullishCoalesce(_nullishCoalesce(pickedDurationMs, () => ( durations[0])), () => ( null));
   const slots = _react.useMemo.call(void 0, () => {
     if (!availability || durationMs == null) return [];
@@ -3460,7 +3624,7 @@ function HubSpotMeetingScheduler({
         _chunk4FWURR3Wcjs.completeFormRescue.call(void 0, rescue, payload[_chunkW2RM764Dcjs.FORM_RESCUE_ATTEMPT_FIELD]);
         setConfirmation(result.confirmation);
         setStep("confirmed");
-        _optionalChain([onBooked, 'optionalCall', _46 => _46(result.confirmation)]);
+        _optionalChain([onBooked, 'optionalCall', _47 => _47(result.confirmation)]);
         return;
       }
       const code = _nullishCoalesce(result.code, () => ( "TEMPORARILY_UNAVAILABLE"));
@@ -3499,6 +3663,21 @@ function HubSpotMeetingScheduler({
   const stepPanelClass = _chunk3ATAYP36cjs.cn.call(void 0, STEP_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto");
   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, "div", { 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, "div", { className: innerClass, children: [
       !formOnly && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextPanelSkeleton, { onBack: backEdge, className: CONTEXT_PANEL_CLASS }),
@@ -3508,8 +3687,8 @@ function HubSpotMeetingScheduler({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: stepPanelClass, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           BookingFormSkeleton,
           {
-            fieldRows: _optionalChain([detailsFormProps, 'optionalAccess', _47 => _47.fieldRows]),
-            consent: Boolean(_optionalChain([detailsFormProps, 'optionalAccess', _48 => _48.consent])),
+            fieldRows: _optionalChain([detailsFormProps, 'optionalAccess', _48 => _48.fieldRows]),
+            consent: Boolean(_optionalChain([detailsFormProps, 'optionalAccess', _49 => _49.consent])),
             footerNote: preset.footerNote
           }
         ) })
@@ -3520,6 +3699,121 @@ function HubSpotMeetingScheduler({
   if (!isNativelyBookable(availability)) {
     return degraded("This meeting type is booked directly on HubSpot.");
   }
+  if (modal) {
+    const modalBack = step === "details" ? backToSlot : onBack;
+    const onSelectDuration = (ms) => {
+      setDurationMs(ms);
+      setSelectedDay(null);
+      setSelectedSlot(null);
+    };
+    const summary = selectedSlot != null && durationMs != null && timezone != null ? `${_chunkABLUMGCIcjs.formatDateWithTimezone.call(void 0, selectedSlot, timezone, "weekdayDateTimeZoned", { viewerLocale: true })} \xB7 ${_chunkABLUMGCIcjs.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: [
+        modalBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkU2O5YQRPcjs.BackButton,
+          {
+            onClick: modalBack,
+            className: _chunk3ATAYP36cjs.cn.call(void 0, 
+              "px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]",
+              step === "slot" && "content-md:hidden"
+            )
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          SchedulerModalHeader,
+          {
+            hosts: shownHosts,
+            durationsMs: durations,
+            selectedDurationMs: durationMs,
+            onSelectDuration,
+            timezone,
+            onTimezoneChange: setTimezone,
+            locked: step !== "slot",
+            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: [
+          summary && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-primary text-h4", children: summary }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            DetailsForm,
+            {
+              fieldRows: MODAL_FIELD_ROWS,
+              ...detailsFormProps,
+              availability,
+              meetingId,
+              startTimeMs: selectedSlot,
+              durationMs,
+              timezone,
+              formId: modalFormId,
+              hideSubmit: true,
+              onValidityChange: setModalFormValid,
+              isSubmitting,
+              onSubmit: handleSubmit,
+              honeypotInputProps,
+              getSignals,
+              rescue
+            }
+          )
+        ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          bookingError === "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWCY35GB5cjs.Alert, { variant: "warning", className: "mx-[var(--spacing-system-m)] mt-[var(--spacing-system-m)] w-auto", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWCY35GB5cjs.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: [
+            /* @__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" })
+        ] })
+      ] }),
+      step === "slot" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ModalFooter,
+        {
+          onCancel: onBack,
+          primary: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk2QMBXGMQcjs.Button,
+            {
+              disabled: selectedSlot == null || durationMs == null,
+              onClick: () => setStep("details"),
+              className: MODAL_PRIMARY_CLASS,
+              children: "Continue"
+            }
+          )
+        }
+      ),
+      step === "details" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ModalFooter,
+        {
+          onCancel: onBack,
+          primary: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk2QMBXGMQcjs.Button,
+            {
+              type: "submit",
+              form: modalFormId,
+              loading: isSubmitting,
+              disabled: isSubmitting || !modalFormValid,
+              className: MODAL_PRIMARY_CLASS,
+              children: preset.submitLabel
+            }
+          )
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cardClass, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: innerClass, children: [
     !formOnly && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       SchedulerContextPanel,
@@ -3570,7 +3864,7 @@ function HubSpotMeetingScheduler({
           deferSlot: detailsFirst,
           submitLabel: preset.submitLabel,
           footerNote: preset.footerNote,
-          initialValues: detailsFirst ? _optionalChain([stash, 'optionalAccess', _49 => _49.payload]) : void 0,
+          initialValues: detailsFirst ? _optionalChain([stash, 'optionalAccess', _50 => _50.payload]) : void 0,
           isSubmitting,
           onSubmit: detailsFirst ? stashDetails : handleSubmit,
           honeypotInputProps,
@@ -3580,11 +3874,11 @@ 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, 
-        _chunk4PKORVOXcjs.Alert,
+        _chunkWCY35GB5cjs.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, _chunk4PKORVOXcjs.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, _chunkWCY35GB5cjs.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 ? (
@@ -3607,7 +3901,7 @@ function HubSpotMeetingScheduler({
             onSelectSlot: (ms) => {
               if (!detailsFirst) {
                 setSelectedSlot(ms);
-                setStep("details");
+                if (!modal) setStep("details");
                 return;
               }
               if (postInFlight() || !stash) return;