@riverbankcms/sdk 0.98.0 → 0.99.0

package/dist/client/{bookingForm-ZMP4P7EK.mjs → bookingForm-QYGAHPDP.mjs}

@@ -1,15 +1,15 @@
 "use client";
-import { buildBookingPaymentSelectionViewModel, usePolling } from './chunk-DRRQ7QSL.mjs';
-import { SpinnerNode } from './chunk-OLAOAZEO.mjs';
+import { buildBookingPaymentSelectionViewModel, usePolling } from './chunk-WEVT46PX.mjs';
+import { SpinnerNode } from './chunk-K7KTSACR.mjs';
 import { buildRouteIslandApiConfig } from './chunk-L4J5Y62O.mjs';
-import { scrollToBlock, useDiscountCodeUi, buildCheckoutReturnUrls, DiscountCodeDisclosure } from './chunk-SK2BMD22.mjs';
+import { scrollToBlock, useDiscountCodeUi, TerminalPanel, StateIcon, CheckIcon, StepIndicator, buildCheckoutReturnUrls, DiscountCodeDisclosure } from './chunk-CLZ7NBSP.mjs';
 import { FieldValidationMessage, getFieldValidationControlProps } from './chunk-3DCJ45Z2.mjs';
 import './chunk-WBQG7VJA.mjs';
 import { isSpamProtectionEnabled, getChallengeUrl, AltchaWidget } from './chunk-LJCX6V7Q.mjs';
-import { BlockApiProvider, useBlockApi, FeedbackMessage } from './chunk-KDP7ZRZV.mjs';
+import { BlockApiProvider, useBlockApi, FeedbackMessage } from './chunk-IOAHWAQG.mjs';
 import { mountReactIsland } from './chunk-N7PBWBWQ.mjs';
-import { defineIslandPropsDecoder, resolveBookingSiteId, resolveDefaultBookingServiceId, getBookingRedirectStateFromLocation, deriveBookingFormViewState, logger, getBookingSuccessMessage, getBookingServiceSlidingScale, formatBookingCentsAsCurrencyInput, parseBookingCurrencyInputToCents, themeButtonClassName, toSelectedCollectionOptionKind, assertNever, prepareBookingSubmission, formatBookingSubmissionPreparationError, resolveBookingPaymentStep, resolveAppointmentCheckoutVerificationState, BOOKING_FORM_DATA_RESERVED_KEYS, isBookingServiceSlidingAmountInRange, clearWorkflowFeedback, reportWorkflowError, reportWorkflowSuccess, okWith, err } from './chunk-R4XK3CKR.mjs';
-import { resolveBookingTimeZoneId, DEFAULT_BOOKING_TIME_ZONE, unsafeAsFormId, unsafeAsAppointmentResourceId, unsafeAsCustomerPassId, unsafeAsAppointmentServiceId, formatLocalScheduleDate, addLocalScheduleDays, parseBookingLocalDate, unsafeAsPassId, formatCurrencyAmount, formatBookingInstant } from './chunk-PCHACQEB.mjs';
+import { defineIslandPropsDecoder, resolveBookingSiteId, resolveDefaultBookingServiceId, getBookingRedirectStateFromLocation, deriveBookingFormViewState, logger, getBookingSuccessMessage, getBookingServiceSlidingScale, formatBookingCentsAsCurrencyInput, parseBookingCurrencyInputToCents, themeButtonClassName, toSelectedCollectionOptionKind, assertNever, prepareBookingSubmission, formatBookingSubmissionPreparationError, resolveBookingPaymentStep, resolveAppointmentCheckoutVerificationState, BOOKING_FORM_DATA_RESERVED_KEYS, isBookingServiceSlidingAmountInRange, clearWorkflowFeedback, reportWorkflowError, reportWorkflowSuccess, okWith, err } from './chunk-CYJ3MUFP.mjs';
+import { resolveBookingTimeZoneId, DEFAULT_BOOKING_TIME_ZONE, unsafeAsFormId, unsafeAsAppointmentResourceId, unsafeAsCustomerPassId, unsafeAsAppointmentServiceId, formatLocalScheduleDate, addLocalScheduleDays, parseBookingLocalDate, unsafeAsPassId, formatCurrencyAmount, formatBookingInstant } from './chunk-IIUIKJ4K.mjs';
 import React2, { useRef, useState, useMemo, useReducer, useEffect, useCallback, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -19,19 +19,20 @@ var SuccessMessage = ({
   className
 }) => {
   return /* @__PURE__ */ jsx(
-    FeedbackMessage,
+    TerminalPanel,
     {
       tone: "success",
-      className: `ab-alert ab-alert--success ${className ?? ""}`,
+      title: "Booking confirmed",
+      icon: /* @__PURE__ */ jsx(StateIcon, { variant: "success", children: /* @__PURE__ */ jsx(CheckIcon, { strokeWidth: 3 }) }),
+      body: /* @__PURE__ */ jsx("p", { className: "ab-text", children: message }),
+      secondaryBody: resourceName ? /* @__PURE__ */ jsxs("p", { className: "ab-text rb-on-surface--muted", children: [
+        "Practitioner: ",
+        resourceName
+      ] }) : null,
+      className: ["ab-center", className ?? ""].join(" ").trim(),
+      titleClassName: "ab-terminal-title",
       role: "alert",
-      live: "polite",
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { className: "ab-text", children: message }),
-        resourceName ? /* @__PURE__ */ jsxs("p", { className: "ab-text ab-text--muted", children: [
-          "Practitioner: ",
-          resourceName
-        ] }) : null
-      ] })
+      live: "polite"
     }
   );
 };
@@ -72,9 +73,30 @@ function formatDate(dateStr) {
     }
   });
 }
-function formatTime(isoString) {
-  return formatBookingInstant(isoString, {
+function formatDatePillParts(dateStr) {
+  const instant = `${dateStr}T00:00:00.000Z`;
+  const partFormat = (format) => formatBookingInstant(instant, {
     timeZone: DEFAULT_BOOKING_TIME_ZONE,
+    format
+  });
+  return {
+    weekday: partFormat({ weekday: "short" }),
+    day: partFormat({ day: "numeric" }),
+    month: partFormat({ month: "short" })
+  };
+}
+function formatTimeShort(isoString, timeZone = DEFAULT_BOOKING_TIME_ZONE) {
+  return formatBookingInstant(isoString, {
+    timeZone,
+    format: {
+      hour: "numeric",
+      minute: "2-digit"
+    }
+  });
+}
+function formatTime(isoString, timeZone = DEFAULT_BOOKING_TIME_ZONE) {
+  return formatBookingInstant(isoString, {
+    timeZone,
     format: {
       hour: "numeric",
       minute: "2-digit",
@@ -794,6 +816,24 @@ function toBookingSlotView(slot) {
 function toBookingSlotViews(slots) {
   return slots.map(toBookingSlotView);
 }
+function deriveBookingSlotDisplayOptions(input) {
+  const seenStartTimes = /* @__PURE__ */ new Set();
+  const options = [];
+  for (const slot of input.slots) {
+    if (!input.hasSelectedResource) {
+      if (seenStartTimes.has(slot.startAt)) continue;
+      seenStartTimes.add(slot.startAt);
+    }
+    options.push({
+      key: slot.key,
+      startAt: slot.startAt,
+      endAt: slot.endAt,
+      resourceId: slot.resourceId,
+      slot
+    });
+  }
+  return options;
+}
 function toBookingFormData(state) {
   return {
     ...state.fieldValues,
@@ -1909,63 +1949,96 @@ function useAppointmentCheckoutVerificationWithDeps(config, deps) {
     retry: polling.retry
   };
 }
+function DateFieldLabel({
+  labelId,
+  required
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: "form-label", id: labelId, children: [
+    "Select Date",
+    required && /* @__PURE__ */ jsx("span", { className: "required-marker", children: "*" })
+  ] });
+}
 var DatePicker = ({
   value,
   onChange,
   dateOptions,
   required = true,
+  ariaDescribedBy,
+  ariaInvalid,
   isLoading = false,
   isEmpty = false,
   hasMore = false,
   onLoadMore
 }) => {
+  const generatedId = React2.useId();
+  const labelId = `${generatedId}-date-label`;
+  const gridRef = React2.useRef(null);
+  const previousCountRef = React2.useRef(dateOptions.length);
+  React2.useEffect(() => {
+    const previousCount = previousCountRef.current;
+    previousCountRef.current = dateOptions.length;
+    if (previousCount === 0 || dateOptions.length <= previousCount) return;
+    const pills = gridRef.current?.querySelectorAll(
+      "button[aria-pressed]"
+    );
+    pills?.[previousCount]?.focus();
+  }, [dateOptions.length]);
   if (isLoading) {
-    return /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsxs("label", { className: "ab-label", children: [
-        "Select Date",
-        required && /* @__PURE__ */ jsx("span", { className: "ab-required", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "ab-skeleton" }),
-      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted ab-text--sm", children: "Loading available dates..." })
+    return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsx(DateFieldLabel, { labelId, required }),
+      /* @__PURE__ */ jsx("div", { className: "rb-shell-block" }),
+      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--sm rb-on-surface--muted", children: "Loading available dates..." })
     ] });
   }
   if (isEmpty) {
-    return /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsxs("label", { className: "ab-label", children: [
-        "Select Date",
-        required && /* @__PURE__ */ jsx("span", { className: "ab-required", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsx(FeedbackMessage, { tone: "warning", className: "ab-alert ab-alert--warning", role: "status", children: /* @__PURE__ */ jsxs("p", { className: "ab-text", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsx(DateFieldLabel, { labelId, required }),
+      /* @__PURE__ */ jsx(FeedbackMessage, { tone: "warning", className: "alert alert-warning", role: "status", children: /* @__PURE__ */ jsxs("p", { className: "ab-text", children: [
         "No available dates in this period.",
         hasMore && onLoadMore && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: onLoadMore,
-            className: "ab-link",
+            className: "ab-link rb-ml-2",
             children: "Check later dates"
           }
         )
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: "booking-date", className: "ab-label", children: [
-      "Select Date",
-      required && /* @__PURE__ */ jsx("span", { className: "ab-required", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "select",
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+    /* @__PURE__ */ jsx(DateFieldLabel, { labelId, required }),
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        id: "booking-date",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        required,
-        className: "ab-select",
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "Choose a date..." }),
-          dateOptions.map((date) => /* @__PURE__ */ jsx("option", { value: date, children: formatDate(date) }, date))
-        ]
+        ref: gridRef,
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid || void 0,
+        "aria-required": required || void 0,
+        className: "ab-pill-grid",
+        children: dateOptions.map((date) => {
+          const isSelected = value === date;
+          const parts = formatDatePillParts(date);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange(isSelected ? "" : date),
+              "aria-pressed": isSelected,
+              "aria-label": formatDate(date),
+              className: `rb-option-card ab-date-pill${isSelected ? " rb-option-card--selected" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "ab-pill-caption", "aria-hidden": "true", children: parts.weekday }),
+                /* @__PURE__ */ jsx("span", { className: "ab-pill-value", "aria-hidden": "true", children: parts.day }),
+                /* @__PURE__ */ jsx("span", { className: "ab-pill-caption", "aria-hidden": "true", children: parts.month })
+              ]
+            },
+            date
+          );
+        })
       }
     ),
     hasMore && onLoadMore && /* @__PURE__ */ jsx(
@@ -1974,7 +2047,7 @@ var DatePicker = ({
         type: "button",
         onClick: onLoadMore,
         className: "ab-link",
-        children: "Load more dates \u2192"
+        children: "More dates \u2192"
       }
     )
   ] });
@@ -1984,40 +2057,59 @@ var TimeSlotSelector = ({
   onChange,
   slots,
   isLoading,
-  required = true
+  timezone,
+  required = true,
+  ariaDescribedBy,
+  ariaInvalid
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: "booking-slot", className: "ab-label", children: [
+  const generatedId = React2.useId();
+  const labelId = `${generatedId}-time-label`;
+  const groupRef = React2.useRef(null);
+  const hadSlotsRef = React2.useRef(false);
+  React2.useEffect(() => {
+    const hasSlots = !isLoading && slots.length > 0;
+    if (hasSlots && !hadSlotsRef.current) {
+      groupRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+    hadSlotsRef.current = hasSlots;
+  }, [isLoading, slots.length]);
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+    /* @__PURE__ */ jsxs("span", { className: "form-label", id: labelId, children: [
       "Select Time",
-      required && /* @__PURE__ */ jsx("span", { className: "ab-required", children: "*" })
+      required && /* @__PURE__ */ jsx("span", { className: "required-marker", children: "*" })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "Loading available times..." }) : slots.length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "No available times for this date" }) : /* @__PURE__ */ jsxs(
-      "select",
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "rb-shell-block" }) : slots.length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: "No available times for this date" }) : /* @__PURE__ */ jsx(
+      "div",
       {
-        id: "booking-slot",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        required,
-        className: "ab-select",
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "Choose a time..." }),
-          slots.map((slot) => /* @__PURE__ */ jsx("option", { value: slot.startAt, children: formatTime(slot.startAt) }, slot.startAt))
-        ]
+        ref: groupRef,
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid || void 0,
+        "aria-required": required || void 0,
+        className: "ab-pill-grid",
+        children: slots.map((slot) => {
+          const isSelected = value === slot.key;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange(isSelected ? "" : slot.key),
+              "aria-pressed": isSelected,
+              "aria-label": formatTime(slot.startAt, timezone),
+              className: `rb-option-card ab-time-pill${isSelected ? " rb-option-card--selected" : ""}`,
+              children: formatTimeShort(slot.startAt, timezone)
+            },
+            slot.key
+          );
+        })
       }
     )
   ] });
 };
-var paymentOptionLayoutStyle = {
-  alignItems: "flex-start",
-  display: "flex",
-  flexDirection: "column",
-  gap: "0.25rem",
-  justifyContent: "flex-start",
-  width: "100%"
-};
-var summaryStackStyle = {
-  gap: "0.125rem"
-};
+function optionCardClassName(isSelected) {
+  return `rb-option-card${isSelected ? " rb-option-card--selected" : ""}`;
+}
 function formatBookingAmount(amount, currency) {
   return formatCurrencyAmount(amount, currency, { decimals: "auto" });
 }
@@ -2026,6 +2118,7 @@ function HeadlessBookingDefaultForm({
   onSubmit
 }) {
   const currentStep = booking.currentStep;
+  const errorSummaryId = React2.useId();
   const currentStepIndex = currentStep?.visibleIndex ?? 0;
   const isFirstStep = currentStepIndex === 0;
   const isLastStep = currentStepIndex === booking.steps.length - 1;
@@ -2041,16 +2134,30 @@ function HeadlessBookingDefaultForm({
     return /* @__PURE__ */ jsx("div", { className: "rb-text-center rb-py-12", children: /* @__PURE__ */ jsx("p", { className: "status-muted", children: "No steps available" }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "multi-step-form", children: [
-    /* @__PURE__ */ jsx("div", { className: "rb-mb-8", children: /* @__PURE__ */ jsx(
-      DefaultBookingProgress,
+    booking.steps.length > 1 ? /* @__PURE__ */ jsx(
+      StepIndicator,
+      {
+        currentStep: currentStepIndex + 1,
+        totalSteps: booking.steps.length,
+        stepLabels: booking.steps.map((step) => step.label),
+        emitSharedClasses: true
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("div", { className: "step-content", children: /* @__PURE__ */ jsx(
+      DefaultBookingStepContent,
       {
-        steps: booking.steps,
-        currentIndex: currentStepIndex
+        booking,
+        errorSummaryId
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "step-content", children: /* @__PURE__ */ jsx(DefaultBookingStepContent, { booking }) }),
-    /* @__PURE__ */ jsx(DefaultBookingErrorSummary, { errors: currentStep.errors }),
-    /* @__PURE__ */ jsxs("div", { className: "rb-flex rb-gap-3 rb-mt-8", children: [
+    /* @__PURE__ */ jsx(
+      DefaultBookingErrorSummary,
+      {
+        errors: currentStep.errors,
+        id: errorSummaryId
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "rb-wizard-actions", children: [
       !isFirstStep ? /* @__PURE__ */ jsx(
         "button",
         {
@@ -2068,11 +2175,7 @@ function HeadlessBookingDefaultForm({
             void handlePrimaryAction();
           },
           disabled: isSubmitting,
-          className: themeButtonClassName({
-            variant: "primary",
-            size: "md",
-            extraClassName: "rb-flex-1"
-          }),
+          className: themeButtonClassName({ variant: "primary", size: "md" }),
           children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               SpinnerNode,
@@ -2093,44 +2196,9 @@ function HeadlessBookingDefaultForm({
     /* @__PURE__ */ jsx(DefaultBookingAltcha, { booking })
   ] });
 }
-function DefaultBookingProgress({
-  steps,
-  currentIndex
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "rb-flex rb-items-center rb-justify-between", children: steps.map((step, index) => {
-    const isActive = index === currentIndex;
-    const isCompleted = index < currentIndex;
-    const isLast = index === steps.length - 1;
-    return /* @__PURE__ */ jsxs("div", { className: "rb-flex rb-items-center rb-flex-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-default", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `
-                  step-circle transition-theme-standard
-                  ${isActive ? "step-circle-active" : ""}
-                  ${isCompleted ? "step-circle-complete" : ""}
-                `,
-            children: isCompleted ? "\u2713" : index + 1
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `
-                  rb-caption rb-hidden rb-sm-inline
-                  ${isCompleted || !isActive ? "status-muted" : ""}
-                `,
-            children: step.label
-          }
-        )
-      ] }),
-      !isLast ? /* @__PURE__ */ jsx("div", { className: "step-connector rb-ml-2 rb-mr-2 rb-hidden rb-sm-block" }) : null
-    ] }, step.id);
-  }) });
-}
 function DefaultBookingStepContent({
-  booking
+  booking,
+  errorSummaryId
 }) {
   const stepId = booking.currentStep?.id;
   if (!stepId) return null;
@@ -2138,7 +2206,13 @@ function DefaultBookingStepContent({
     case "service-selection":
       return /* @__PURE__ */ jsx(DefaultServiceSelectionStep, { booking });
     case "datetime-selection":
-      return /* @__PURE__ */ jsx(DefaultDateTimeSelectionStep, { booking });
+      return /* @__PURE__ */ jsx(
+        DefaultDateTimeSelectionStep,
+        {
+          booking,
+          errorSummaryId
+        }
+      );
     case "payment-selection":
       return /* @__PURE__ */ jsx(HeadlessBookingPaymentSelectionStep, { booking });
     case "custom-fields":
@@ -2157,32 +2231,33 @@ function DefaultServiceSelectionStep({
   const showServiceSelect = booking.services.requiresSelection || services.length > 1;
   const showResourceSelect = booking.resources.requiresSelection || resources.length > 1;
   const allowAnyResource = !booking.resources.requiresSelection;
-  return /* @__PURE__ */ jsxs("div", { className: "ab-stack", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h2", { className: "ab-title", children: "Select Service" }),
-      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: "Choose the service you'd like to book" })
+      /* @__PURE__ */ jsx("p", { className: "ab-text rb-on-surface--muted", children: "Choose the service you'd like to book" })
     ] }),
-    showServiceSelect ? /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsx("label", { className: "ab-subtitle", children: "Service" }),
-      /* @__PURE__ */ jsx("div", { className: "ab-grid", children: services.map((service) => {
+    showServiceSelect ? /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "ab-subtitle", children: "Service" }),
+      /* @__PURE__ */ jsx("div", { className: "rb-reg-grid", children: services.map((service) => {
         const isSelected = selectedServiceId === service.id;
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             onClick: () => booking.actions.selectService(service.id),
-            className: `ab-card ${isSelected ? "ab-card--selected" : ""}`,
-            children: /* @__PURE__ */ jsxs("div", { className: "ab-row--between", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
+            className: optionCardClassName(isSelected),
+            "aria-pressed": isSelected,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "rb-flex-1", children: [
                 /* @__PURE__ */ jsx("div", { className: "ab-subtitle", children: service.title }),
-                service.description ? /* @__PURE__ */ jsx("div", { className: "ab-text ab-text--muted", children: service.description }) : null,
-                service.durationMinutes ? /* @__PURE__ */ jsxs("div", { className: "ab-text ab-text--muted", children: [
+                service.description ? /* @__PURE__ */ jsx("div", { className: "ab-text rb-on-surface--muted", children: service.description }) : null,
+                service.durationMinutes ? /* @__PURE__ */ jsxs("div", { className: "ab-text rb-on-surface--muted", children: [
                   service.durationMinutes,
                   " minutes"
                 ] }) : null
               ] }),
               isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null
-            ] })
+            ]
           },
           service.id
         );
@@ -2190,41 +2265,43 @@ function DefaultServiceSelectionStep({
     ] }) : null,
     booking.resources.state.tag === "loading" ? /* @__PURE__ */ jsxs("div", { className: "ab-center", children: [
       /* @__PURE__ */ jsx(SpinnerNode, { size: "md", srLabel: "Loading practitioners" }),
-      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: "Loading practitioners..." })
+      /* @__PURE__ */ jsx("p", { className: "ab-text rb-on-surface--muted", children: "Loading practitioners..." })
     ] }) : null,
-    booking.resources.state.tag === "error" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: booking.resources.state.message }) : null,
-    showResourceSelect && booking.resources.state.tag === "loaded" && resources.length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: "No practitioners are available for this service right now." }) : null,
-    showResourceSelect && booking.resources.state.tag !== "loading" && (allowAnyResource || resources.length > 0) ? /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsxs("label", { className: "ab-subtitle", children: [
+    booking.resources.state.tag === "error" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: booking.resources.state.message }) : null,
+    showResourceSelect && booking.resources.state.tag === "loaded" && resources.length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: "No practitioners are available for this service right now." }) : null,
+    showResourceSelect && booking.resources.state.tag !== "loading" && (allowAnyResource || resources.length > 0) ? /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsxs("span", { className: "ab-subtitle", children: [
         "Practitioner",
         booking.resources.requiresSelection ? "" : " (Optional)"
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: allowAnyResource ? 'Choose a specific practitioner or select "Any Available"' : "Choose the practitioner you'd like to book" }),
-      /* @__PURE__ */ jsxs("div", { className: "ab-grid", children: [
-        allowAnyResource ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("p", { className: "ab-text rb-on-surface--muted", children: allowAnyResource ? 'Choose a specific practitioner or select "Any Available"' : "Choose the practitioner you'd like to book" }),
+      /* @__PURE__ */ jsxs("div", { className: "rb-reg-grid", children: [
+        allowAnyResource ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             onClick: () => booking.actions.selectResource(null),
-            className: `ab-card ${!selectedResourceId ? "ab-card--selected" : ""}`,
-            children: /* @__PURE__ */ jsxs("div", { className: "ab-row--between", children: [
-              /* @__PURE__ */ jsx("div", { className: "ab-subtitle", children: "Any Available" }),
+            className: optionCardClassName(!selectedResourceId),
+            "aria-pressed": !selectedResourceId,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "rb-flex-1 ab-subtitle", children: "Any Available" }),
               !selectedResourceId ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null
-            ] })
+            ]
           }
         ) : null,
         resources.map((resource) => {
           const isSelected = selectedResourceId === resource.id;
-          return /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
               onClick: () => booking.actions.selectResource(resource.id),
-              className: `ab-card ${isSelected ? "ab-card--selected" : ""}`,
-              children: /* @__PURE__ */ jsxs("div", { className: "ab-row--between", children: [
-                /* @__PURE__ */ jsx("div", { className: "ab-subtitle", children: resource.label }),
+              className: optionCardClassName(isSelected),
+              "aria-pressed": isSelected,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "rb-flex-1 ab-subtitle", children: resource.label }),
                 isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null
-              ] })
+              ]
             },
             resource.id
           );
@@ -2234,27 +2311,30 @@ function DefaultServiceSelectionStep({
   ] });
 }
 function DefaultDateTimeSelectionStep({
-  booking
+  booking,
+  errorSummaryId
 }) {
   const selectedDate = booking.availability.selectedDate ?? "";
-  const selectedSlotStart = booking.availability.selectedSlot?.startAt ?? "";
+  const selectedSlotKey = booking.availability.selectedSlot?.key ?? "";
   const singleService = booking.services.items.length === 1 ? booking.services.items[0] : void 0;
-  const slots = collapseHeadlessSlotsForDisplay({
+  const slots = deriveBookingSlotDisplayOptions({
     slots: booking.availability.slots,
     hasSelectedResource: Boolean(booking.resources.selectedResourceId)
   });
   const error = booking.availability.datesState.tag === "error" ? booking.availability.datesState.message : booking.availability.slotsState.tag === "error" ? booking.availability.slotsState.message : null;
-  return /* @__PURE__ */ jsxs("div", { className: "ab-stack", children: [
-    singleService ? /* @__PURE__ */ jsxs("div", { className: "ab-info-box", children: [
+  const hasValidationError = Boolean(booking.currentStep?.errors.formError);
+  const validationDescribedBy = hasValidationError ? errorSummaryId : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack", children: [
+    singleService ? /* @__PURE__ */ jsxs("div", { className: "rb-reg-summary", children: [
       /* @__PURE__ */ jsx("h3", { className: "ab-subtitle", children: singleService.title }),
-      singleService.description ? /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: singleService.description }) : null,
-      singleService.durationMinutes ? /* @__PURE__ */ jsxs("p", { className: "ab-text ab-text--muted", children: [
+      singleService.description ? /* @__PURE__ */ jsx("p", { className: "ab-text rb-on-surface--muted", children: singleService.description }) : null,
+      singleService.durationMinutes ? /* @__PURE__ */ jsxs("p", { className: "ab-text rb-on-surface--muted", children: [
         "Duration: ",
         singleService.durationMinutes,
         " minutes"
       ] }) : null
     ] }) : null,
-    error ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: error }) : null,
+    error ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: error }) : null,
     /* @__PURE__ */ jsx(
       DatePicker,
       {
@@ -2263,6 +2343,8 @@ function DefaultDateTimeSelectionStep({
         dateOptions: [...booking.availability.availableDates],
         isLoading: booking.availability.datesState.tag === "loading",
         isEmpty: booking.availability.datesState.tag !== "loading" && booking.availability.availableDates.length === 0,
+        ariaDescribedBy: validationDescribedBy,
+        ariaInvalid: hasValidationError,
         hasMore: booking.availability.hasMoreDates,
         onLoadMore: booking.availability.loadMoreDates
       }
@@ -2270,16 +2352,17 @@ function DefaultDateTimeSelectionStep({
     selectedDate ? /* @__PURE__ */ jsx(
       TimeSlotSelector,
       {
-        value: selectedSlotStart,
-        onChange: (slotStartTime) => {
+        value: selectedSlotKey,
+        onChange: (slotKey) => {
           booking.actions.selectSlot(
-            booking.availability.slots.find(
-              (slot) => slot.startAt === slotStartTime
-            ) ?? null
+            slots.find((slot) => slot.key === slotKey)?.slot ?? null
           );
         },
         slots,
-        isLoading: booking.availability.slotsState.tag === "loading"
+        isLoading: booking.availability.slotsState.tag === "loading",
+        timezone: booking.availability.timezone,
+        ariaDescribedBy: validationDescribedBy,
+        ariaInvalid: hasValidationError
       }
     ) : null
   ] });
@@ -2290,21 +2373,21 @@ function HeadlessBookingPaymentSelectionStep({
   const service = booking.services.selected;
   const viewModel = booking.payment.selection;
   if (booking.payment.kind === "unsupported") {
-    return /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: booking.payment.errorMessage });
+    return /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: booking.payment.errorMessage });
   }
   if (!service || !viewModel) {
-    return /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: "Payment options are unavailable for this service right now." });
+    return /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: "Payment options are unavailable for this service right now." });
   }
   const packageOptions = booking.payment.appointmentPackages.items;
   const hasPackageOptions = packageOptions.length > 0;
   const slidingScale = booking.payment.slidingScale;
-  return /* @__PURE__ */ jsxs("div", { className: "ab-stack", children: [
-    /* @__PURE__ */ jsxs("div", { className: "ab-info-box", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rb-reg-summary", children: [
       /* @__PURE__ */ jsx("h3", { className: "ab-subtitle", children: viewModel.sectionTitle }),
-      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: service.title })
+      /* @__PURE__ */ jsx("p", { className: "ab-text rb-on-surface--muted", children: service.title })
     ] }),
-    booking.payment.appointmentPackages.state.tag === "loading" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: "Checking package credits..." }) : null,
-    booking.payment.appointmentPackages.state.tag === "error" ? /* @__PURE__ */ jsxs(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: [
+    booking.payment.appointmentPackages.state.tag === "loading" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: "Checking package credits..." }) : null,
+    booking.payment.appointmentPackages.state.tag === "error" ? /* @__PURE__ */ jsxs(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: [
       booking.payment.appointmentPackages.state.message,
       " You can continue with the normal payment option."
     ] }) : null,
@@ -2330,47 +2413,47 @@ function HeadlessBookingPaymentSelectionStep({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "ab-stack", role: "list", "aria-label": "Payment options", children: [
-      packageOptions.map((appointmentPackage) => {
-        const isSelected = booking.payment.selectedAppointmentPackageId === appointmentPackage.customerPassId;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: themeButtonClassName({
-              variant: isSelected ? "primary" : "outline",
-              size: "md"
-            }),
-            style: paymentOptionLayoutStyle,
-            onClick: () => booking.actions.selectAppointmentPackage(
-              appointmentPackage.customerPassId
-            ),
-            "aria-pressed": isSelected,
-            children: /* @__PURE__ */ jsx(
-              PaymentOptionContent,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rb-reg-stack rb-reg-stack--sm",
+        role: "list",
+        "aria-label": "Payment options",
+        children: [
+          packageOptions.map((appointmentPackage) => {
+            const isSelected = booking.payment.selectedAppointmentPackageId === appointmentPackage.customerPassId;
+            return /* @__PURE__ */ jsxs(
+              "button",
               {
-                id: appointmentPackage.customerPassId,
-                title: appointmentPackage.passName,
-                description: "Use 1 package credit",
-                summaryRows: [{
-                  label: "Balance",
-                  value: `${appointmentPackage.creditsRemaining} of ${appointmentPackage.creditsTotal} credits remaining`
-                }]
-              }
-            )
-          },
-          appointmentPackage.customerPassId
-        );
-      }),
-      viewModel.options.map((option) => {
-        const isSelected = !booking.payment.selectedAppointmentPackageId && (booking.payment.selectedCollectionOptionKind === option.kind || viewModel.mode === "single_option");
-        if (viewModel.mode === "single_option" && !hasPackageOptions) {
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "ab-card",
-              style: paymentOptionLayoutStyle,
-              children: /* @__PURE__ */ jsx(
+                type: "button",
+                className: optionCardClassName(isSelected),
+                onClick: () => booking.actions.selectAppointmentPackage(
+                  appointmentPackage.customerPassId
+                ),
+                "aria-pressed": isSelected,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    PaymentOptionContent,
+                    {
+                      id: appointmentPackage.customerPassId,
+                      title: appointmentPackage.passName,
+                      description: "Use 1 package credit",
+                      summaryRows: [{
+                        label: "Balance",
+                        value: `${appointmentPackage.creditsRemaining} of ${appointmentPackage.creditsTotal} credits remaining`
+                      }]
+                    }
+                  ),
+                  isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null
+                ]
+              },
+              appointmentPackage.customerPassId
+            );
+          }),
+          viewModel.options.map((option) => {
+            const isSelected = !booking.payment.selectedAppointmentPackageId && (booking.payment.selectedCollectionOptionKind === option.kind || viewModel.mode === "single_option");
+            if (viewModel.mode === "single_option" && !hasPackageOptions) {
+              return /* @__PURE__ */ jsx("div", { className: "rb-reg-summary", children: /* @__PURE__ */ jsx(
                 PaymentOptionContent,
                 {
                   id: option.kind,
@@ -2379,37 +2462,35 @@ function HeadlessBookingPaymentSelectionStep({
                   summaryRows: option.summaryRows,
                   helperText: option.helperText
                 }
-              )
-            },
-            option.kind
-          );
-        }
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: themeButtonClassName({
-              variant: isSelected ? "primary" : "outline",
-              size: "md"
-            }),
-            style: paymentOptionLayoutStyle,
-            onClick: () => booking.actions.selectPaymentOption(option.kind),
-            "aria-pressed": isSelected,
-            children: /* @__PURE__ */ jsx(
-              PaymentOptionContent,
+              ) }, option.kind);
+            }
+            return /* @__PURE__ */ jsxs(
+              "button",
               {
-                id: option.kind,
-                title: option.title,
-                description: option.description,
-                summaryRows: option.summaryRows,
-                helperText: option.helperText
-              }
-            )
-          },
-          option.kind
-        );
-      })
-    ] })
+                type: "button",
+                className: optionCardClassName(isSelected),
+                onClick: () => booking.actions.selectPaymentOption(option.kind),
+                "aria-pressed": isSelected,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    PaymentOptionContent,
+                    {
+                      id: option.kind,
+                      title: option.title,
+                      description: option.description,
+                      summaryRows: option.summaryRows,
+                      helperText: option.helperText
+                    }
+                  ),
+                  isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null
+                ]
+              },
+              option.kind
+            );
+          })
+        ]
+      }
+    )
   ] });
 }
 function PaymentOptionContent({
@@ -2419,15 +2500,15 @@ function PaymentOptionContent({
   summaryRows,
   title
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: title }),
-    /* @__PURE__ */ jsx("span", { className: "ab-text ab-text--muted", children: description }),
-    /* @__PURE__ */ jsx("div", { className: "ab-stack", style: summaryStackStyle, children: summaryRows.map((row) => /* @__PURE__ */ jsxs("span", { className: "ab-text ab-text--muted", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rb-flex-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "ab-subtitle", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "ab-text rb-on-surface--muted", children: description }),
+    /* @__PURE__ */ jsx("div", { className: "ab-option-rows", children: summaryRows.map((row) => /* @__PURE__ */ jsxs("span", { className: "ab-text rb-on-surface--muted", children: [
       row.label,
       ": ",
       row.value
     ] }, `${id}-${row.label}`)) }),
-    helperText ? /* @__PURE__ */ jsx("span", { className: "ab-text ab-text--muted", children: helperText }) : null
+    helperText ? /* @__PURE__ */ jsx("div", { className: "ab-text rb-on-surface--muted", children: helperText }) : null
   ] });
 }
 function DefaultDynamicFields({
@@ -2699,7 +2780,7 @@ function DefaultBookingDiscount({
         }
       }
     ) : null,
-    booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs("p", { className: "ab-text", children: [
+    booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "alert alert-info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs("p", { className: "ab-text", children: [
       "Discount available: ",
       booking.discount.autoAppliedDiscount.publicLabel,
       " ",
@@ -2711,7 +2792,7 @@ function DefaultBookingFeedback({
   booking
 }) {
   if (booking.feedback.kind !== "error") return null;
-  return /* @__PURE__ */ jsxs(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: [
+  return /* @__PURE__ */ jsxs(FeedbackMessage, { tone: "error", className: "alert alert-error rb-mt-4", role: "alert", children: [
     /* @__PURE__ */ jsx("p", { className: "ab-text", children: booking.feedback.message }),
     /* @__PURE__ */ jsx(
       "button",
@@ -2737,43 +2818,26 @@ function DefaultBookingAltcha({
   ) });
 }
 function DefaultBookingErrorSummary({
-  errors
+  errors,
+  id
 }) {
   if (!hasBookingValidationErrors(errors)) return null;
-  return /* @__PURE__ */ jsxs(FeedbackMessage, { tone: "error", className: "rb-mt-6 alert alert-error", role: "alert", children: [
-    errors.formError ? /* @__PURE__ */ jsx("p", { className: "rb-caption", children: /* @__PURE__ */ jsx("strong", { children: errors.formError }) }) : null,
-    Object.entries(errors.fieldErrors).map(([key, message]) => /* @__PURE__ */ jsx("p", { className: "rb-caption", children: message }, key))
-  ] });
-}
-function SelectedCheck() {
-  return /* @__PURE__ */ jsx("div", { className: "ab-check", children: /* @__PURE__ */ jsx(
-    "svg",
+  return /* @__PURE__ */ jsxs(
+    FeedbackMessage,
     {
-      fill: "none",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "2",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+      tone: "error",
+      className: "rb-mt-6 alert alert-error",
+      id,
+      role: "alert",
+      children: [
+        errors.formError ? /* @__PURE__ */ jsx("p", { className: "rb-caption", children: /* @__PURE__ */ jsx("strong", { children: errors.formError }) }) : null,
+        Object.entries(errors.fieldErrors).map(([key, message]) => /* @__PURE__ */ jsx("p", { className: "rb-caption", children: message }, key))
+      ]
     }
-  ) });
+  );
 }
-function collapseHeadlessSlotsForDisplay(input) {
-  const seenStartTimes = /* @__PURE__ */ new Set();
-  const visibleSlots = [];
-  for (const slot of input.slots) {
-    if (!input.hasSelectedResource) {
-      if (seenStartTimes.has(slot.startAt)) continue;
-      seenStartTimes.add(slot.startAt);
-    }
-    visibleSlots.push({
-      startAt: slot.startAt,
-      endAt: slot.endAt,
-      resourceId: unsafeAsAppointmentResourceId(slot.resourceId)
-    });
-  }
-  return visibleSlots;
+function SelectedCheck() {
+  return /* @__PURE__ */ jsx("div", { className: "rb-option-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) });
 }
 var PORTAL_REBOOK_QUERY_PARAM = "rebook";
 var PORTAL_REBOOK_QUERY_VALUE = "1";
@@ -2799,6 +2863,14 @@ function appendRebookFlag(url, enabled) {
   );
   return nextUrl.toString();
 }
+function BookingSurface({
+  id,
+  className,
+  children
+}) {
+  const classes = ["rb-reg-surface", className ?? ""].join(" ").trim();
+  return /* @__PURE__ */ jsx("div", { id, className: classes, children });
+}
 var BookingFormClient = ({
   siteId: siteIdProp,
   render
@@ -2896,7 +2968,7 @@ var BookingFormClient = ({
       FeedbackMessage,
       {
         tone: "error",
-        className: `ab-alert ab-alert--error ${render.display.className ?? ""}`.trim(),
+        className: `alert alert-error ${render.display.className ?? ""}`.trim(),
         role: "alert",
         children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: render.display.message ?? "Booking form not found. Please check your configuration." })
       }
@@ -2918,28 +2990,20 @@ var BookingFormClient = ({
     }
   };
   if (viewState.kind === "success") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: /* @__PURE__ */ jsx(
       SuccessMessage,
       {
         message: getBookingSuccessMessage(render.display.successMessage),
-        resourceName: viewState.resourceName,
-        className: render.display.className ?? void 0
+        resourceName: viewState.resourceName
       }
-    );
+    ) });
   }
   if (viewState.kind === "verifying") {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: bookingAnchorId,
-        className: render.display.className ?? void 0,
-        children: /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: viewState.message }) })
-      }
-    );
+    return /* @__PURE__ */ jsx(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: viewState.message }) }) });
   }
-  return /* @__PURE__ */ jsxs("div", { id: bookingAnchorId, className: render.display.className ?? void 0, children: [
-    render.hydration.noticeMessage ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
-    viewState.kind === "error" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: viewState.message }) }) : null,
+  return /* @__PURE__ */ jsxs(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: [
+    render.hydration.noticeMessage ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "alert alert-info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
+    viewState.kind === "error" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "alert alert-error rb-mb-4", role: "alert", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: viewState.message }) }) : null,
     /* @__PURE__ */ jsx(HeadlessBookingDefaultForm, { booking, onSubmit: handleComplete })
   ] });
 };