@flamingo-stack/openframe-frontend-core 0.0.594 → 0.0.595-snapshot.20260905173123

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

@@ -22,13 +22,14 @@ var _chunkO4VZOA2Qcjs = require('../../chunk-O4VZOA2Q.cjs');
 
 
 
-var _chunkUBRVIVY4cjs = require('../../chunk-UBRVIVY4.cjs');
+
+var _chunkB2CSYMKWcjs = require('../../chunk-B2CSYMKW.cjs');
 require('../../chunk-GQWM3ECA.cjs');
 require('../../chunk-TON3YCCW.cjs');
 
 
 
-var _chunkFKXDDJEQcjs = require('../../chunk-FKXDDJEQ.cjs');
+var _chunkM4YQUHORcjs = require('../../chunk-M4YQUHOR.cjs');
 require('../../chunk-D55IENZJ.cjs');
 require('../../chunk-N6CULJYR.cjs');
 
@@ -42,10 +43,10 @@ var _chunkH64ZHSYRcjs = require('../../chunk-H64ZHSYR.cjs');
 var _chunkY7ITKISQcjs = require('../../chunk-Y7ITKISQ.cjs');
 
 
-var _chunkYLVPQNLOcjs = require('../../chunk-YLVPQNLO.cjs');
+var _chunk5MSHWXJ5cjs = require('../../chunk-5MSHWXJ5.cjs');
 require('../../chunk-YXWGSDK4.cjs');
 require('../../chunk-SADRZ4YI.cjs');
-require('../../chunk-5EM6NGBK.cjs');
+require('../../chunk-KOQCA5X5.cjs');
 require('../../chunk-GSQM4PDR.cjs');
 require('../../chunk-XQFFGR6U.cjs');
 
@@ -53,7 +54,7 @@ require('../../chunk-XQFFGR6U.cjs');
 
 
 
-var _chunkY6I2DGKCcjs = require('../../chunk-Y6I2DGKC.cjs');
+var _chunkOMKI5T2Gcjs = require('../../chunk-OMKI5T2G.cjs');
 require('../../chunk-WLSFBRT5.cjs');
 require('../../chunk-YH6IQTPI.cjs');
 require('../../chunk-63QUMV72.cjs');
@@ -113,7 +114,7 @@ function isValidBcp47Locale(locale) {
     return false;
   }
 }
-function makeBookingSchema(formFields, legalConsent) {
+function buildBookingSchema(formFields, legalConsent, slot) {
   const answers = {};
   for (const field of formFields) {
     if (!isSupportedFormField(field)) continue;
@@ -150,12 +151,12 @@ function makeBookingSchema(formFields, legalConsent) {
   const answersObject = _zod.z.object(answers);
   return _zod.z.object({
     meetingId: _zod.z.string().min(1),
-    startTimeMs: _zod.z.number().int().positive(),
-    durationMs: _zod.z.number().int().positive(),
+    startTimeMs: slot.startTimeMs,
+    durationMs: slot.durationMs,
     firstName: _zod.z.string().min(1, { message: "First name is required" }).max(255),
     lastName: _zod.z.string().min(1, { message: "Last name is required" }).max(255),
     email: _zod.z.string().email({ message: "Please enter a valid email address" }).max(255),
-    timezone: _zod.z.string().refine(isValidIanaTimezone, { message: "Invalid timezone" }),
+    timezone: slot.timezone,
     locale: _zod.z.string().refine(isValidBcp47Locale, { message: "Invalid locale" }).optional(),
     // Plain `.optional()` (no `.default()`) so zod's input and output types
     // match — react-hook-form's zodResolver needs them identical, and the
@@ -177,6 +178,13 @@ function makeBookingSchema(formFields, legalConsent) {
     }
   });
 }
+function makeDeferredBookingSchema(formFields, legalConsent) {
+  return buildBookingSchema(formFields, legalConsent, {
+    startTimeMs: _zod.z.number().int().positive().nullish(),
+    durationMs: _zod.z.number().int().positive().nullish(),
+    timezone: _zod.z.string().refine(isValidIanaTimezone, { message: "Invalid timezone" }).nullish()
+  });
+}
 
 // src/hooks/use-meeting-booking.ts
 var AVAILABILITY_STALE_MS = 0;
@@ -189,7 +197,7 @@ function useMeetingBooking(options) {
   const seededOffset = _optionalChain([initialAvailability, 'optionalAccess', _3 => _3.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(_chunkUBRVIVY4cjs.MAX_MONTH_OFFSET, offset)));
+    setMonthOffsetState(Math.max(0, Math.min(_chunkB2CSYMKWcjs.MAX_MONTH_OFFSET, offset)));
   }, []);
   const prevMeetingIdRef = _react.useRef.call(void 0, meetingId);
   _react.useLayoutEffect.call(void 0, () => {
@@ -271,12 +279,25 @@ var _zod3 = require('@hookform/resolvers/zod');
 
 var _reacthookform = require('react-hook-form');
 var _jsxruntime = require('react/jsx-runtime');
+var SPAN_CLASS = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4"
+};
+var evenSpan = (count) => Math.min(4, Math.max(1, Math.floor(4 / Math.max(1, count))));
 function BookingForm({
   availability,
   meetingId,
   startTimeMs,
   durationMs,
   timezone,
+  deferSlot = false,
+  initialValues,
+  submitLabel,
+  footerNote,
+  fieldRows,
+  consent,
   isSubmitting,
   onSubmit,
   honeypotInputProps,
@@ -284,42 +305,75 @@ function BookingForm({
 }) {
   const { formFields, legalConsent } = availability;
   const supportedFields = _react.useMemo.call(void 0, () => formFields.filter(isSupportedFormField), [formFields]);
-  const schema = _react.useMemo.call(void 0, () => makeBookingSchema(supportedFields, legalConsent), [supportedFields, legalConsent]);
+  const schema = _react.useMemo.call(void 0, 
+    () => makeDeferredBookingSchema(supportedFields, legalConsent),
+    [supportedFields, legalConsent]
+  );
+  const consentDefaults = _react.useMemo.call(void 0, 
+    () => (_nullishCoalesce(_optionalChain([legalConsent, 'optionalAccess', _5 => _5.communicationConsentCheckboxes]), () => ( []))).map((c) => ({
+      communicationTypeId: c.communicationTypeId,
+      consented: false
+    })),
+    [legalConsent]
+  );
   const {
     register,
     control,
     handleSubmit,
+    setValue,
     formState: { errors }
   } = _reacthookform.useForm.call(void 0, {
     resolver: _zod3.zodResolver.call(void 0, schema),
     defaultValues: {
       meetingId,
-      startTimeMs,
-      durationMs,
+      // Genuinely OMITTED, not present-as-undefined, when the slot is deferred.
+      ...deferSlot ? {} : { startTimeMs, durationMs },
       timezone,
       locale: typeof navigator !== "undefined" ? navigator.language : void 0,
       firstName: "",
       lastName: "",
       email: "",
       formFields: {},
-      legalConsentResponses: (_nullishCoalesce(_optionalChain([legalConsent, 'optionalAccess', _5 => _5.communicationConsentCheckboxes]), () => ( []))).map((c) => ({
-        communicationTypeId: c.communicationTypeId,
-        consented: false
-      }))
+      legalConsentResponses: consentDefaults,
+      // A remount (back edge, or an error return) would otherwise lose every
+      // answer — `defaultValues` is snapshotted once and never re-read.
+      ..._nullishCoalesce(initialValues, () => ( {}))
     }
   });
-  const submit = handleSubmit(async (data) => {
-    await onSubmit({ ...data, meetingId, startTimeMs, durationMs, timezone, ...getSignals() });
+  const priorConsents = _optionalChain([initialValues, 'optionalAccess', _6 => _6.legalConsentResponses]);
+  const [consented, setConsented] = _react.useState.call(void 0, _optionalChain([initialValues, 'optionalAccess', _7 => _7.hostConsent]) === true);
+  const [consentError, setConsentError] = _react.useState.call(void 0, null);
+  const consentMissing = Boolean(consent) && !consented;
+  _react.useEffect.call(void 0, () => {
+    setValue(
+      "legalConsentResponses",
+      consentDefaults.map((next) => ({
+        ...next,
+        consented: _nullishCoalesce(_optionalChain([priorConsents, 'optionalAccess', _8 => _8.find, 'call', _9 => _9((r) => r.communicationTypeId === next.communicationTypeId), 'optionalAccess', _10 => _10.consented]), () => ( false))
+      })),
+      { shouldDirty: false }
+    );
+  }, [consentDefaults, priorConsents, setValue]);
+  const submitValid = handleSubmit(async (data) => {
+    if (consentMissing) return;
+    if (deferSlot) {
+      await onSubmit({ ...data, meetingId, hostConsent: consented });
+      return;
+    }
+    await onSubmit({ ...data, meetingId, hostConsent: consented, startTimeMs, durationMs, timezone, ...getSignals() });
   });
+  const submit = (event) => {
+    if (consentMissing) setConsentError(_nullishCoalesce(_optionalChain([consent, 'optionalAccess', _11 => _11.errorMessage]), () => ( "Please agree to continue.")));
+    return submitValid(event);
+  };
   const fieldError = (name) => {
-    const err = _optionalChain([errors, 'access', _6 => _6.formFields, 'optionalAccess', _7 => _7[name]]);
-    return _optionalChain([err, 'optionalAccess', _8 => _8.message]);
+    const err = _optionalChain([errors, 'access', _12 => _12.formFields, 'optionalAccess', _13 => _13[name]]);
+    return _optionalChain([err, 'optionalAccess', _14 => _14.message]);
   };
   const inputClass = "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-11 md:h-12";
   const FORM_STACK = "flex flex-col gap-[var(--spacing-system-l)]";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: submit, className: FORM_STACK, noValidate: true, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.HoneypotField, { ...honeypotInputProps }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY7ITKISQcjs.FieldWrapper, { label: "Email", htmlFor: "ms-email", error: _optionalChain([errors, 'access', _9 => _9.email, 'optionalAccess', _10 => _10.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  const builtInFields = {
+    email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY7ITKISQcjs.FieldWrapper, { label: "Email", htmlFor: "ms-email", error: _optionalChain([errors, 'access', _15 => _15.email, 'optionalAccess', _16 => _16.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _chunkY7ITKISQcjs.Input,
       {
         id: "ms-email",
@@ -332,129 +386,210 @@ function BookingForm({
         ...register("email")
       }
     ) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-2 gap-[var(--spacing-system-m)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY7ITKISQcjs.FieldWrapper, { label: "First Name", htmlFor: "ms-first-name", error: _optionalChain([errors, 'access', _11 => _11.firstName, 'optionalAccess', _12 => _12.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkY7ITKISQcjs.Input,
-        {
-          id: "ms-first-name",
-          required: true,
-          autoComplete: "given-name",
-          placeholder: "Jane",
-          "aria-invalid": !!errors.firstName,
-          className: inputClass,
-          ...register("firstName")
-        }
-      ) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY7ITKISQcjs.FieldWrapper, { label: "Last Name", htmlFor: "ms-last-name", error: _optionalChain([errors, 'access', _13 => _13.lastName, 'optionalAccess', _14 => _14.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkY7ITKISQcjs.Input,
-        {
-          id: "ms-last-name",
-          required: true,
-          autoComplete: "family-name",
-          placeholder: "Doe",
-          "aria-invalid": !!errors.lastName,
-          className: inputClass,
-          ...register("lastName")
-        }
-      ) })
-    ] }),
-    supportedFields.map((field) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkY7ITKISQcjs.FieldWrapper,
+    firstName: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY7ITKISQcjs.FieldWrapper, { label: "First Name", htmlFor: "ms-first-name", error: _optionalChain([errors, 'access', _17 => _17.firstName, 'optionalAccess', _18 => _18.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkY7ITKISQcjs.Input,
       {
-        label: field.label,
-        htmlFor: `ms-q-${field.name}`,
-        error: fieldError(field.name),
-        children: [
-          field.type === "textarea" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkUBRVIVY4cjs.Textarea,
-            {
-              id: `ms-q-${field.name}`,
-              className: "border-ods-border bg-ods-card px-3 text-ods-text-primary placeholder-ods-text-secondary",
-              ...register(`formFields.${field.name}`)
-            }
-          ),
-          field.type === "text" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkY7ITKISQcjs.Input,
+        id: "ms-first-name",
+        required: true,
+        autoComplete: "given-name",
+        placeholder: "Jane",
+        "aria-invalid": !!errors.firstName,
+        className: inputClass,
+        ...register("firstName")
+      }
+    ) }),
+    lastName: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY7ITKISQcjs.FieldWrapper, { label: "Last Name", htmlFor: "ms-last-name", error: _optionalChain([errors, 'access', _19 => _19.lastName, 'optionalAccess', _20 => _20.message]), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkY7ITKISQcjs.Input,
+      {
+        id: "ms-last-name",
+        required: true,
+        autoComplete: "family-name",
+        placeholder: "Doe",
+        "aria-invalid": !!errors.lastName,
+        className: inputClass,
+        ...register("lastName")
+      }
+    ) })
+  };
+  const renderDeclaredField = (field) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkY7ITKISQcjs.FieldWrapper, { label: field.label, htmlFor: `ms-q-${field.name}`, error: fieldError(field.name), children: [
+    field.type === "textarea" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkB2CSYMKWcjs.Textarea,
+      {
+        id: `ms-q-${field.name}`,
+        className: "border-ods-border bg-ods-card px-3 text-ods-text-primary placeholder-ods-text-secondary",
+        ...register(`formFields.${field.name}`)
+      }
+    ),
+    field.type === "text" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkY7ITKISQcjs.Input,
+      {
+        id: `ms-q-${field.name}`,
+        className: "h-11 border-ods-border bg-ods-card px-3 text-ods-text-primary placeholder-ods-text-secondary md:h-12",
+        ...register(`formFields.${field.name}`)
+      }
+    ),
+    (field.type === "select" || field.type === "radio") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reacthookform.Controller,
+      {
+        control,
+        name: `formFields.${field.name}`,
+        render: ({ field: rhf }) => field.type === "select" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkB2CSYMKWcjs.Select, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.SelectTrigger, { id: `ms-q-${field.name}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.SelectValue, { placeholder: "Select\u2026" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.SelectContent, { children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.SelectItem, { value: opt, children: opt }, opt)) })
+        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.RadioGroup, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.RadioGroupItem, { id: `ms-q-${field.name}-${opt}`, value: opt }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Label, { htmlFor: `ms-q-${field.name}-${opt}`, children: opt })
+        ] }, opt)) })
+      }
+    ),
+    field.type === "checkbox" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reacthookform.Controller,
+      {
+        control,
+        name: `formFields.${field.name}`,
+        render: ({ field: rhf }) => (
+          // The question's Label above already carries the text and
+          // binds to this id — a second inline label would double the
+          // visible text AND the accessible name.
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkY7ITKISQcjs.Checkbox,
             {
               id: `ms-q-${field.name}`,
-              className: "h-11 border-ods-border bg-ods-card px-3 text-ods-text-primary placeholder-ods-text-secondary md:h-12",
-              ...register(`formFields.${field.name}`)
+              checked: Boolean(rhf.value),
+              onCheckedChange: (v) => rhf.onChange(v === true)
             }
-          ),
-          (field.type === "select" || field.type === "radio") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _reacthookform.Controller,
-            {
-              control,
-              name: `formFields.${field.name}`,
-              render: ({ field: rhf }) => field.type === "select" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUBRVIVY4cjs.Select, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.SelectTrigger, { id: `ms-q-${field.name}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.SelectValue, { placeholder: "Select\u2026" }) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.SelectContent, { children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.SelectItem, { value: opt, children: opt }, opt)) })
-              ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.RadioGroup, { value: _nullishCoalesce(rhf.value, () => ( "")), onValueChange: rhf.onChange, children: (_nullishCoalesce(field.options, () => ( []))).map((opt) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.RadioGroupItem, { id: `ms-q-${field.name}-${opt}`, value: opt }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Label, { htmlFor: `ms-q-${field.name}-${opt}`, children: opt })
-              ] }, opt)) })
-            }
-          ),
-          field.type === "checkbox" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _reacthookform.Controller,
+          ) })
+        )
+      }
+    )
+  ] }, field.name);
+  const declaredByName = new Map(supportedFields.map((f) => [f.name, f]));
+  const slotResolves = (name) => Boolean(builtInFields[name] || declaredByName.has(name));
+  const slotNode = (name) => {
+    const builtIn = builtInFields[name];
+    if (builtIn) return builtIn;
+    const declared = declaredByName.get(name);
+    return declared ? renderDeclaredField(declared) : null;
+  };
+  const unplacedFields = fieldRows ? supportedFields.filter((f) => !fieldRows.some((row) => row.some((slot) => slot.name === f.name))) : [];
+  const placedRows = (_nullishCoalesce(fieldRows, () => ( []))).map((row) => row.filter((slot) => slotResolves(slot.name))).filter((row) => row.length > 0);
+  const submitButton = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkCJBSU3XBcjs.Button,
+    {
+      type: "submit",
+      loading: isSubmitting,
+      disabled: isSubmitting,
+      className: footerNote ? "md:w-60" : void 0,
+      children: _nullishCoalesce(submitLabel, () => ( "Confirm Booking"))
+    }
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: submit, className: FORM_STACK, noValidate: true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.HoneypotField, { ...honeypotInputProps }),
+    fieldRows ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      placedRows.map((row, rowIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: "grid grid-cols-2 gap-[var(--spacing-system-m)] md:grid-cols-4",
+          children: row.map((slot) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
             {
-              control,
-              name: `formFields.${field.name}`,
-              render: ({ field: rhf }) => (
-                // The question's Label above already carries the text and
-                // binds to this id — a second inline label would double the
-                // visible text AND the accessible name.
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkY7ITKISQcjs.Checkbox,
-                  {
-                    id: `ms-q-${field.name}`,
-                    checked: Boolean(rhf.value),
-                    onCheckedChange: (v) => rhf.onChange(v === true)
-                  }
-                ) })
-              )
-            }
-          )
-        ]
-      },
-      field.name
-    )),
+              className: _chunk23V5BSHDcjs.cn.call(void 0, 
+                // A two-field row stays side by side on a phone — the rule
+                // the built-in name pair has always followed: two short
+                // fields cost one line instead of two on the layout that can
+                // least afford them.
+                row.length === 2 ? "col-span-1" : "col-span-2",
+                SPAN_CLASS[_nullishCoalesce(slot.span, () => ( evenSpan(row.length)))]
+              ),
+              children: slotNode(slot.name)
+            },
+            slot.name
+          ))
+        },
+        row.map((s) => s.name).join("|") || rowIndex
+      )),
+      unplacedFields.map((field) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: renderDeclaredField(field) }, field.name))
+    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      builtInFields.email,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-2 gap-[var(--spacing-system-m)]", children: [
+        builtInFields.firstName,
+        builtInFields.lastName
+      ] }),
+      supportedFields.map((field) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: renderDeclaredField(field) }, field.name))
+    ] }),
+    consent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkB2CSYMKWcjs.CheckboxBlock,
+      {
+        id: "ms-host-consent",
+        checked: consented,
+        onCheckedChange: (v) => {
+          setConsented(v);
+          if (v) setConsentError(null);
+        },
+        disabled: isSubmitting,
+        error: _nullishCoalesce(consentError, () => ( void 0)),
+        label: consent.label,
+        description: consent.description
+      }
+    ),
     legalConsent && // Same out-of-flow message as the fields above, so a missed consent
     // box doesn't shove the submit button down the card. With no error the
     // wrapper is `display:contents` and the panel below is the flex item,
     // exactly as it was.
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY7ITKISQcjs.FieldWrapper, { error: _optionalChain([errors, 'access', _15 => _15.legalConsentResponses, 'optionalAccess', _16 => _16.message]), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xs)] rounded-md border border-ods-border p-[var(--spacing-system-m)]", 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, _chunkY7ITKISQcjs.FieldWrapper, { error: _optionalChain([errors, 'access', _21 => _21.legalConsentResponses, 'optionalAccess', _22 => _22.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, 
         _reacthookform.Controller,
         {
           control,
           name: "legalConsentResponses",
-          render: ({ field: rhf }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: legalConsent.communicationConsentCheckboxes.map((box) => {
+          render: ({ field: rhf }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: legalConsent.communicationConsentCheckboxes.map((box, index) => {
             const responses = _nullishCoalesce(rhf.value, () => ( []));
             const current = responses.find((r) => r.communicationTypeId === box.communicationTypeId);
-            return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+            return (
+              // The design system's consent row (`checkbox-block`, the
+              // same block the waitlist form uses): box, label, caption
+              // in one bordered row. GDPR surface — HubSpot's copy is
+              // rendered VERBATIM, never edited. The processing statement
+              // rides as the caption of the FIRST row, once: it describes
+              // the consent as a whole, not each channel.
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkY7ITKISQcjs.Checkbox,
+                _chunkB2CSYMKWcjs.CheckboxBlock,
                 {
                   id: `ms-consent-${box.communicationTypeId}`,
-                  checked: _nullishCoalesce(_optionalChain([current, 'optionalAccess', _17 => _17.consented]), () => ( false)),
+                  checked: _nullishCoalesce(_optionalChain([current, 'optionalAccess', _23 => _23.consented]), () => ( false)),
                   onCheckedChange: (v) => rhf.onChange(
                     responses.map(
-                      (r) => r.communicationTypeId === box.communicationTypeId ? { ...r, consented: v === true } : r
+                      (r) => r.communicationTypeId === box.communicationTypeId ? { ...r, consented: v } : r
                     )
-                  )
-                }
-              ),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Label, { htmlFor: `ms-consent-${box.communicationTypeId}`, children: box.label })
-            ] }, box.communicationTypeId);
+                  ),
+                  label: box.label,
+                  description: index === 0 ? legalConsent.processingConsentText : void 0
+                },
+                box.communicationTypeId
+              )
+            );
           }) })
         }
       ),
+      legalConsent.communicationConsentText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: legalConsent.communicationConsentText }),
       legalConsent.privacyPolicyText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: legalConsent.privacyPolicyText })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCJBSU3XBcjs.Button, { type: "submit", loading: isSubmitting, disabled: isSubmitting, children: "Confirm Booking" }) })
+    footerNote ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-[var(--spacing-system-m)]", 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: "flex", children: submitButton })
+  ] });
+}
+function BookingFormSkeleton() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)] lg:p-0", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-1 gap-[var(--spacing-system-m)] md:grid-cols-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Skeleton, { className: "h-[4.75rem] w-full" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Skeleton, { className: "h-[4.75rem] w-full" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Skeleton, { className: "h-[4.75rem] w-full" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Skeleton, { className: "h-[7.75rem] w-full" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Skeleton, { className: "h-[4.25rem] w-full" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex justify-end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHIHYC7Qcjs.Skeleton, { className: "h-12 w-40" }) })
   ] });
 }
 
@@ -477,7 +612,7 @@ function Confirmation({ confirmation, timezone }) {
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: [
       when,
       " \xB7 ",
-      _chunkY6I2DGKCcjs.formatDurationCompact.call(void 0, confirmation.durationMs / 1e3)
+      _chunkOMKI5T2Gcjs.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." })
   ] });
@@ -499,7 +634,7 @@ function zoneLabel(tz) {
       timeZone: tz,
       timeZoneName: "shortOffset"
     }).formatToParts(/* @__PURE__ */ new Date());
-    const offset = _nullishCoalesce(_optionalChain([parts, 'access', _18 => _18.find, 'call', _19 => _19((p) => p.type === "timeZoneName"), 'optionalAccess', _20 => _20.value]), () => ( ""));
+    const offset = _nullishCoalesce(_optionalChain([parts, 'access', _24 => _24.find, 'call', _25 => _25((p) => p.type === "timeZoneName"), 'optionalAccess', _26 => _26.value]), () => ( ""));
     return offset ? `${tz.replace(/_/g, " ")} (${offset})` : tz.replace(/_/g, " ");
   } catch (e4) {
     return tz.replace(/_/g, " ");
@@ -511,7 +646,7 @@ function ContextPanelSkeleton({
   backLabel = "Back"
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, PANEL_STACK, className), children: [
-    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
+    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_BODY, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: STRIP_MAIN, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: IDENTITY_ROW, children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xs)] lg:flex-none", children: [
@@ -542,6 +677,7 @@ function SchedulerContextPanel({
   onBack,
   backLabel = "Back",
   locked = false,
+  fixedDuration = false,
   showTimezone = true,
   className
 }) {
@@ -558,13 +694,13 @@ function SchedulerContextPanel({
     return zones.map((tz) => ({ value: tz, label: zoneLabel(tz) }));
   }, [timezone]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, PANEL_STACK, className), children: [
-    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
+    onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2CSYMKWcjs.BackButton, { label: backLabel, onClick: onBack, className: BACK_BUTTON_CLASS }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_BODY, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STRIP_MAIN, children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: IDENTITY_ROW, children: [
           hosts.length > 0 && hosts.length <= 3 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-s)]", children: hosts.map((host) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkY6I2DGKCcjs.SquareAvatar,
+              _chunkOMKI5T2Gcjs.SquareAvatar,
               {
                 variant: "round",
                 size: "sm",
@@ -579,24 +715,25 @@ function SchedulerContextPanel({
             ] })
           ] }, 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, _chunkY6I2DGKCcjs.AvatarStack, { people: hosts, max: 4, size: "lg" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOMKI5T2Gcjs.AvatarStack, { people: hosts, max: 4, size: "lg" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: [
               hosts.length,
               " hosts on this calendar"
             ] })
           ] }),
-          locked || durationsMs.length <= 1 ? (
-            // Post-selection, or a link that offers one length: a static line,
+          locked || fixedDuration || durationsMs.length <= 1 ? (
+            // Post-selection, a fixed-length flow, 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: [
-              _chunkY6I2DGKCcjs.formatDurationCompact.call(void 0, selectedDurationMs / 1e3),
+              _chunkOMKI5T2Gcjs.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 && !fixedDuration && durationsMs.length > 1 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Duration" }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap gap-[var(--spacing-system-xs)]", children: durationsMs.map((ms) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _chunkCJBSU3XBcjs.Button,
@@ -604,7 +741,7 @@ function SchedulerContextPanel({
               variant: selectedDurationMs === ms ? void 0 : "outline",
               size: "small-legacy",
               onClick: () => onSelectDuration(ms),
-              children: _chunkY6I2DGKCcjs.formatDurationCompact.call(void 0, ms / 1e3)
+              children: _chunkOMKI5T2Gcjs.formatDurationCompact.call(void 0, ms / 1e3)
             },
             ms
           )) })
@@ -619,11 +756,11 @@ function SchedulerContextPanel({
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, STRIP_ASIDE, locked && "max-lg:hidden"), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
         timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkUBRVIVY4cjs.Autocomplete,
+          _chunkB2CSYMKWcjs.Autocomplete,
           {
             value: timezone,
             onChange: (tz) => {
-              if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _21 => _21(tz)]);
+              if (tz) _optionalChain([onTimezoneChange, 'optionalCall', _27 => _27(tz)]);
             },
             options: zoneOptions,
             placeholder: "Search timezone\u2026",
@@ -705,18 +842,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() + _chunkUBRVIVY4cjs.MAX_MONTH_OFFSET + 1, 0);
+  const endMonth = new Date(now.getFullYear(), now.getMonth() + _chunkB2CSYMKWcjs.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', _22 => _22.has, 'call', _23 => _23(calendarDayKey(day))]), [slotsByDay]);
+  const dayHasNoSlots = _react.useCallback.call(void 0, (day) => !_optionalChain([slotsByDay, 'optionalAccess', _28 => _28.has, 'call', _29 => _29(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, 
-    _chunkUBRVIVY4cjs.DatePickerCalendar,
+    _chunkB2CSYMKWcjs.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(_chunkUBRVIVY4cjs.MAX_MONTH_OFFSET, offset)));
+        onMonthOffsetChange(Math.max(0, Math.min(_chunkB2CSYMKWcjs.MAX_MONTH_OFFSET, offset)));
       },
       fromDate: startMonth,
       toDate: endMonth,
@@ -725,7 +862,7 @@ function DayCalendar({ monthOffset, onMonthOffsetChange, selectedDay, onSelectDa
         const day = value;
         if (!day) return;
         const key = calendarDayKey(day);
-        if (_optionalChain([slotsByDay, 'optionalAccess', _24 => _24.has, 'call', _25 => _25(key)])) onSelectDay(key);
+        if (_optionalChain([slotsByDay, 'optionalAccess', _30 => _30.has, 'call', _31 => _31(key)])) onSelectDay(key);
       },
       disabledDays: slotsByDay === null ? DISABLE_EVERY_DAY : dayHasNoSlots
     }
@@ -767,7 +904,8 @@ function SlotPicker({
   onSelectSlot,
   selectedDay,
   onSelectDay,
-  isLoading = false
+  isLoading = false,
+  isSubmitting = false
 }) {
   const slotsByDay = _react.useMemo.call(void 0, () => {
     const map = /* @__PURE__ */ new Map();
@@ -813,7 +951,12 @@ function SlotPicker({
           _chunkCJBSU3XBcjs.Button,
           {
             variant: isSelected ? void 0 : "outline",
-            onClick: () => onSelectSlot(ms),
+            disabled: isSubmitting,
+            loading: isSubmitting && isSelected,
+            onClick: () => {
+              if (isSubmitting) return;
+              onSelectSlot(ms);
+            },
             className: CHIP_CLASS,
             children: timeLabelInZone(ms, timezone)
           },
@@ -830,7 +973,7 @@ function SlotPicker({
           monthLabelFor(monthOffset),
           "."
         ] }),
-        monthOffset < _chunkUBRVIVY4cjs.MAX_MONTH_OFFSET && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        monthOffset < _chunkB2CSYMKWcjs.MAX_MONTH_OFFSET && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           _chunkCJBSU3XBcjs.Button,
           {
             variant: "outline",
@@ -852,7 +995,7 @@ function SlotPicker({
 
 
 function useNextAvailableLabel(ms) {
-  const hydrated = _chunkYLVPQNLOcjs.useIsHydrated.call(void 0, );
+  const hydrated = _chunk5MSHWXJ5cjs.useIsHydrated.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (!hydrated || ms == null) return null;
     try {
@@ -876,7 +1019,7 @@ function DirectoryRow({
   const nextLabel = useNextAvailableLabel(link.nextAvailableMs);
   const subtitle = [
     link.description,
-    link.durationsMinutes.length > 0 ? link.durationsMinutes.map((m) => _chunkY6I2DGKCcjs.formatDurationCompact.call(void 0, m * 60)).join(" / ") : null,
+    link.durationsMinutes.length > 0 ? link.durationsMinutes.map((m) => _chunkOMKI5T2Gcjs.formatDurationCompact.call(void 0, m * 60)).join(" / ") : null,
     link.kind === "team" ? "Team" : null
   ].filter(Boolean).join(" \u2022 ");
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -890,8 +1033,8 @@ 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, _chunkY6I2DGKCcjs.StatusBadge, { text: `For ${audienceLabel}`, singleLine: true, className: "hidden shrink-0 sm:inline-flex" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY6I2DGKCcjs.AvatarStack, { people: link.hosts, max: 3, size: "md", className: "flex shrink-0" }),
+        audienceLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOMKI5T2Gcjs.StatusBadge, { text: `For ${audienceLabel}`, singleLine: true, className: "hidden shrink-0 sm:inline-flex" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOMKI5T2Gcjs.AvatarStack, { people: link.hosts, max: 3, size: "md", className: "flex shrink-0" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "hidden w-44 shrink-0 flex-col items-end justify-center md:flex", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", 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, () => ( " ")) })
@@ -957,7 +1100,7 @@ function MeetingSchedulerDirectory({
     };
   }, [initialData, includeAll, apiBaseUrl]);
   const rows = _react.useMemo.call(void 0, () => {
-    const purposes = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _26 => _26.purposes]), () => ( []));
+    const purposes = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _32 => _32.purposes]), () => ( []));
     return purposes.flatMap((p) => p.links.map((link) => ({ link, audienceLabel: p.label })));
   }, [data]);
   const totalPages = _chunkH64ZHSYRcjs.pageCount.call(void 0, rows.length, pageSize);
@@ -1019,16 +1162,18 @@ var CONTEXT_PANEL_CLASS = "p-[var(--spacing-system-l)] shrink-0 lg:w-[280px] bor
 var ACTION_PANEL_CLASS = "flex-1 min-w-0 flex flex-col md:min-h-0 lg:p-[var(--spacing-system-l)]";
 var PANEL_STEP_CLASS = "p-[var(--spacing-system-l)] md:min-h-0 md:overflow-y-auto lg:p-0";
 var MEETING_SCHEDULER_H = "md:h-[34.375rem] lg:h-[23.75rem]";
+var MEETING_SCHEDULER_DETAILS_FIRST_H = "md:h-[39.875rem]";
 var CARD_CLASS = _chunk23V5BSHDcjs.cn.call(void 0, 
   "overflow-hidden rounded-md border border-ods-border bg-ods-card",
-  "md:flex md:flex-col",
-  MEETING_SCHEDULER_H
+  "md:flex md:flex-col"
+  // The height is NOT baked in any more: it is chosen per flow at each render
+  // site (`flowHeight`), because details-first needs a taller box and both
+  // constants are module scope.
 );
 var CARD_INNER_CLASS = "flex flex-col md:min-h-0 md:flex-1 lg:h-full lg:flex-row";
 var CARD_DEGRADED_CLASS = _chunk23V5BSHDcjs.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)]",
-  "md:justify-center md:overflow-y-auto",
-  MEETING_SCHEDULER_H
+  "md:justify-center md:overflow-y-auto"
 );
 function isNativelyBookable(availability) {
   if (!availability.formFields.every(isSupportedFormField)) return false;
@@ -1050,7 +1195,9 @@ function HubSpotMeetingScheduler({
   fallbackUrl,
   onBack,
   onBooked,
-  className
+  className,
+  flow = "slot-first",
+  detailsForm: DetailsForm = BookingForm
 }) {
   const {
     availability,
@@ -1063,7 +1210,8 @@ function HubSpotMeetingScheduler({
     book,
     isSubmitting
   } = useMeetingBooking({ meetingId, apiBaseUrl, initialAvailability });
-  const hydrated = _chunkYLVPQNLOcjs.useIsHydrated.call(void 0, );
+  const detailsFirst = flow === "details-first";
+  const hydrated = _chunk5MSHWXJ5cjs.useIsHydrated.call(void 0, );
   const [pickedTimezone, setTimezone] = _react.useState.call(void 0, null);
   const resolvedLocalTimezone = _react.useMemo.call(void 0, () => {
     if (!hydrated) return null;
@@ -1074,30 +1222,33 @@ function HubSpotMeetingScheduler({
     }
   }, [hydrated]);
   const timezone = _nullishCoalesce(_nullishCoalesce(pickedTimezone, () => ( displayTimezone)), () => ( resolvedLocalTimezone));
-  const [step, setStep] = _react.useState.call(void 0, "slot");
+  const [step, setStep] = _react.useState.call(void 0, detailsFirst ? "details" : "slot");
+  const [stash, setStash] = _react.useState.call(void 0, null);
+  const formOnly = detailsFirst && step === "details";
   const [pickedDurationMs, setDurationMs] = _react.useState.call(void 0, null);
   const [pickedDay, setSelectedDay] = _react.useState.call(void 0, null);
   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 } = _chunkFKXDDJEQcjs.useHumanitySignals.call(void 0, );
-  const { toast } = _chunkFKXDDJEQcjs.useToast.call(void 0, );
+  const { honeypotInputProps, getSignals, resetSignals } = _chunkM4YQUHORcjs.useHumanitySignals.call(void 0, );
+  const { toast } = _chunkM4YQUHORcjs.useToast.call(void 0, );
   const autoAdvanceCount = _react.useRef.call(void 0, 0);
   const [machineFor, setMachineFor] = _react.useState.call(void 0, meetingId);
   if (machineFor !== meetingId) {
     setMachineFor(meetingId);
-    setStep("slot");
+    setStep(detailsFirst ? "details" : "slot");
     setDurationMs(null);
     setSelectedDay(null);
     setSelectedSlot(null);
     setConfirmation(null);
     setBookingError(null);
+    setStash(null);
   }
   _react.useEffect.call(void 0, () => {
     autoAdvanceCount.current = 0;
   }, [meetingId]);
-  const durations = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([availability, 'optionalAccess', _27 => _27.durationsMs]), () => ( [])), [_optionalChain([availability, 'optionalAccess', _28 => _28.durationsMs])]);
-  const shownHosts = _nullishCoalesce(_nullishCoalesce(hosts, () => ( _optionalChain([availability, 'optionalAccess', _29 => _29.hosts]))), () => ( []));
+  const durations = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([availability, 'optionalAccess', _33 => _33.durationsMs]), () => ( [])), [_optionalChain([availability, 'optionalAccess', _34 => _34.durationsMs])]);
+  const shownHosts = _nullishCoalesce(_nullishCoalesce(hosts, () => ( _optionalChain([availability, 'optionalAccess', _35 => _35.hosts]))), () => ( []));
   const durationMs = _nullishCoalesce(_nullishCoalesce(pickedDurationMs, () => ( durations[0])), () => ( null));
   const slots = _react.useMemo.call(void 0, () => {
     if (!availability || durationMs == null) return [];
@@ -1126,14 +1277,34 @@ function HubSpotMeetingScheduler({
     setStep("slot");
     setBookingError(null);
   }, []);
+  const backToDetails = _react.useCallback.call(void 0, () => {
+    setStep("details");
+    setBookingError(null);
+  }, []);
+  const stashDetails = _react.useCallback.call(void 0, 
+    (payload) => {
+      setBookingError(null);
+      setStash({ payload, signals: getSignals() });
+      setStep("slot");
+      autoAdvanceCount.current = 0;
+      void refetchAvailability();
+      return Promise.resolve();
+    },
+    [getSignals, refetchAvailability]
+  );
   const handleSubmit = _react.useCallback.call(void 0, 
     async (payload) => {
+      const priorError = bookingError;
       setBookingError(null);
       const result = await book(payload);
+      if (!result.ok && result.message === "Already submitting") {
+        setBookingError(priorError);
+        return;
+      }
       if (result.ok && result.confirmation) {
         setConfirmation(result.confirmation);
         setStep("confirmed");
-        _optionalChain([onBooked, 'optionalCall', _30 => _30(result.confirmation)]);
+        _optionalChain([onBooked, 'optionalCall', _36 => _36(result.confirmation)]);
         return;
       }
       const code = _nullishCoalesce(result.code, () => ( "TEMPORARILY_UNAVAILABLE"));
@@ -1141,8 +1312,10 @@ function HubSpotMeetingScheduler({
       if (code === "SLOT_TAKEN") {
         setSelectedSlot(null);
         setStep("slot");
-        resetSignals();
+        if (!detailsFirst) resetSignals();
         void refetchAvailability();
+      } else if (detailsFirst && (code === "VALIDATION" || code === "INVALID_EMAIL")) {
+        setStep("details");
       } else {
         toast({
           variant: "error",
@@ -1151,29 +1324,31 @@ function HubSpotMeetingScheduler({
         });
       }
     },
-    [book, onBooked, refetchAvailability, resetSignals, toast]
+    [book, bookingError, detailsFirst, onBooked, refetchAvailability, resetSignals, toast]
   );
   const escapeHatch = fallbackUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCJBSU3XBcjs.Button, { variant: "outline", size: "small-legacy", href: fallbackUrl, openInNewTab: true, children: "Open in HubSpot" }) : null;
+  const flowHeight = detailsFirst ? MEETING_SCHEDULER_DETAILS_FIRST_H : MEETING_SCHEDULER_H;
+  const unseededDetailsFirstFailure = detailsFirst && step === "details" && !availability && !initialAvailability && !hydrated;
+  const degradedCard = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, CARD_DEGRADED_CLASS, flowHeight, className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "We couldn't load available call times. Please try again shortly." }),
+    escapeHatch
+  ] });
+  if (unseededDetailsFirstFailure) return degradedCard;
   if (isLoadingAvailability && !availability) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, CARD_CLASS, className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_INNER_CLASS, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextPanelSkeleton, { onBack, className: CONTEXT_PANEL_CLASS }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ACTION_PANEL_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, { monthOffset }) })
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, CARD_CLASS, flowHeight, formOnly && "bg-ods-bg", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_INNER_CLASS, children: [
+      !formOnly && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextPanelSkeleton, { onBack, className: CONTEXT_PANEL_CLASS }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ACTION_PANEL_CLASS, children: detailsFirst && step === "details" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BookingFormSkeleton, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SlotPickerSkeleton, { monthOffset }) })
     ] }) });
   }
-  if (availabilityError || !availability) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, CARD_DEGRADED_CLASS, className), children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "We couldn't load available call times. Please try again shortly." }),
-      escapeHatch
-    ] });
-  }
+  if (availabilityError || !availability) return degradedCard;
   if (!isNativelyBookable(availability)) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, CARD_DEGRADED_CLASS, className), children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, CARD_DEGRADED_CLASS, flowHeight, className), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "This meeting type is booked directly on HubSpot." }),
       escapeHatch
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, CARD_CLASS, className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_INNER_CLASS, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, CARD_CLASS, flowHeight, formOnly && "bg-ods-bg", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_INNER_CLASS, children: [
+    !formOnly && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       SchedulerContextPanel,
       {
         hosts: shownHosts,
@@ -1185,18 +1360,24 @@ function HubSpotMeetingScheduler({
           setDurationMs(ms);
           setSelectedDay(null);
           setSelectedSlot(null);
-          if (step === "details") setStep("slot");
+          if (!detailsFirst && step === "details") setStep("slot");
         },
         timezone,
         onTimezoneChange: setTimezone,
-        onBack: step === "details" ? backToSlot : onBack,
-        locked: step !== "slot",
+        onBack: detailsFirst ? step === "slot" ? backToDetails : onBack : step === "details" ? backToSlot : onBack,
+        locked: detailsFirst ? step === "confirmed" || isSubmitting : step !== "slot",
         showTimezone: step !== "confirmed",
+        fixedDuration: detailsFirst,
         className: CONTEXT_PANEL_CLASS
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ACTION_PANEL_CLASS, children: step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, "flex flex-1 flex-col", PANEL_STEP_CLASS), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Confirmation, { confirmation, timezone }) }) : step === "details" && durationMs != null && selectedSlot != null && timezone ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, "flex flex-1 flex-col gap-[var(--spacing-system-m)]", PANEL_STEP_CLASS), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-primary text-h4", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ACTION_PANEL_CLASS, children: step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, "flex flex-1 flex-col", PANEL_STEP_CLASS), 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.
+      durations.length > 0
+    ) : durationMs != null && selectedSlot != null && timezone) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk23V5BSHDcjs.cn.call(void 0, "flex flex-1 flex-col gap-[var(--spacing-system-m)]", PANEL_STEP_CLASS), children: [
+      selectedSlot != null && durationMs != null && timezone != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-primary text-h4", children: [
         new Intl.DateTimeFormat(void 0, {
           timeZone: timezone,
           weekday: "long",
@@ -1208,29 +1389,33 @@ function HubSpotMeetingScheduler({
         }).format(new Date(selectedSlot)),
         " ",
         "\xB7 ",
-        _chunkY6I2DGKCcjs.formatDurationCompact.call(void 0, durationMs / 1e3)
+        _chunkOMKI5T2Gcjs.formatDurationCompact.call(void 0, durationMs / 1e3)
       ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        BookingForm,
+        DetailsForm,
         {
           availability,
           meetingId,
-          startTimeMs: selectedSlot,
-          durationMs,
+          startTimeMs: _nullishCoalesce(selectedSlot, () => ( void 0)),
+          durationMs: _nullishCoalesce(durationMs, () => ( void 0)),
           timezone,
+          deferSlot: detailsFirst,
+          submitLabel: detailsFirst ? "Continue" : void 0,
+          footerNote: detailsFirst ? "Next step: pick a slot that works. Calendar invite lands right after." : void 0,
+          initialValues: detailsFirst ? _optionalChain([stash, 'optionalAccess', _37 => _37.payload]) : void 0,
           isSubmitting,
-          onSubmit: handleSubmit,
+          onSubmit: detailsFirst ? stashDetails : handleSubmit,
           honeypotInputProps,
           getSignals
         }
       )
     ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-m)] md:min-h-0 md:flex-1", children: [
       bookingError === "SLOT_TAKEN" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkUBRVIVY4cjs.Alert,
+        _chunkB2CSYMKWcjs.Alert,
         {
           variant: "warning",
           className: "mx-[var(--spacing-system-l)] mt-[var(--spacing-system-l)] w-auto lg:m-0 lg:w-full",
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBRVIVY4cjs.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, _chunkB2CSYMKWcjs.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 ? (
@@ -1250,12 +1435,31 @@ function HubSpotMeetingScheduler({
             },
             selectedSlot,
             onSelectSlot: (ms) => {
+              if (!detailsFirst) {
+                setSelectedSlot(ms);
+                setStep("details");
+                return;
+              }
+              if (isSubmitting || !stash) return;
               setSelectedSlot(ms);
-              setStep("details");
+              void handleSubmit({
+                ...stash.payload,
+                ...stash.signals,
+                meetingId,
+                // `ms`, NOT `selectedSlot` — the setState above has not
+                // committed inside this handler, so state holds null on
+                // the first booking and the PREVIOUS slot on a retry.
+                startTimeMs: ms,
+                // Live values: both stay editable after Continue, so the
+                // copies frozen at that point can be stale.
+                durationMs,
+                timezone
+              });
             },
             selectedDay,
             onSelectDay: setSelectedDay,
-            isLoading: isLoadingAvailability
+            isLoading: isLoadingAvailability,
+            isSubmitting: detailsFirst ? isSubmitting : void 0
           }
         )
       ) : durations.length === 0 && !isFetchingAvailability ? (
@@ -1280,5 +1484,8 @@ function HubSpotMeetingScheduler({
 
 
 
-exports.HubSpotMeetingScheduler = HubSpotMeetingScheduler; exports.MEETING_SCHEDULER_H = MEETING_SCHEDULER_H; exports.MeetingSchedulerDirectory = MeetingSchedulerDirectory; exports.MeetingSchedulerDirectoryRowSkeleton = MeetingSchedulerDirectoryRowSkeleton;
+
+
+
+exports.BookingForm = BookingForm; exports.BookingFormSkeleton = BookingFormSkeleton; 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;
 //# sourceMappingURL=index.cjs.map