@riverbankcms/sdk 0.98.0 → 0.99.0

package/dist/client/bookings.mjs

@@ -2765,7 +2765,7 @@ var init_altcha = __esm({
 });
 
 // src/bookings/index.ts
-import * as React5 from "react";
+import * as React8 from "react";
 
 // ../blocks/src/system/runtime/api/deduplication.ts
 function createDeduplicationCache(options = {}) {
@@ -4813,15 +4813,16 @@ var joyStamp = defineButtonPersonality({
       // 700, matching the mockup's chunky button labels.
       typography: "heading",
       fontWeight: 700,
+      fontSize: "text-lg",
       borderWidth: 2,
       hoverTransform: "none",
       hoverColor: "none"
     },
     sizes: {
-      sm: { padding: "0.625rem 1.25rem", fontSize: "text-sm" },
-      md: { padding: "0.875rem 1.75rem", fontSize: "text-base" },
-      lg: { padding: "1.125rem 2.25rem", fontSize: "text-lg" },
-      xl: { padding: "1.25rem 2.75rem", fontSize: "text-xl" }
+      sm: { padding: "0.625rem 1.25rem", fontSize: "text-base" },
+      md: { padding: "0.875rem 1.75rem", fontSize: "text-lg" },
+      lg: { padding: "1.125rem 2.25rem", fontSize: "text-xl" },
+      xl: { padding: "1.25rem 2.75rem", fontSize: "text-2xl" }
     },
     variants: [
       {
@@ -12498,6 +12499,7 @@ function FeedbackMessage({
   tone,
   children,
   className,
+  id,
   title,
   titleClassName,
   bodyClassName,
@@ -12509,6 +12511,7 @@ function FeedbackMessage({
   return /* @__PURE__ */ jsxs2(
     "div",
     {
+      id,
       className,
       "data-feedback-tone": tone,
       role,
@@ -12522,7 +12525,7 @@ function FeedbackMessage({
 }
 
 // ../blocks/src/system/runtime/nodes/booking-form.client.tsx
-import React3, { useRef as useRef8, useState as useState2 } from "react";
+import React6, { useRef as useRef8, useState as useState2 } from "react";
 
 // ../altcha/src/AltchaWidget.tsx
 import { createElement, useEffect, useRef } from "react";
@@ -12577,27 +12580,98 @@ function isSpamProtectionEnabled() {
   return process.env.NEXT_PUBLIC_SPAM_PROTECTION_ENABLED === "true";
 }
 
+// ../blocks/src/system/runtime/shared/components/CheckIcon.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function CheckIcon({ className, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth,
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      className,
+      width: "1em",
+      height: "1em",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx4("path", { d: "M5 13l4 4L19 7" })
+    }
+  );
+}
+
+// ../blocks/src/system/runtime/shared/components/StateIcon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function StateIcon({ variant, children }) {
+  return /* @__PURE__ */ jsx5("div", { className: `rb-state-icon rb-state-icon--${variant}`, "aria-hidden": "true", children });
+}
+
+// ../blocks/src/system/runtime/shared/components/TerminalPanel.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function joinClasses2(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+function TerminalPanel({
+  tone,
+  title,
+  titleAs: Title = "h3",
+  body,
+  secondaryBody,
+  icon,
+  actions,
+  className,
+  titleClassName,
+  bodyClassName,
+  secondaryBodyClassName,
+  iconClassName,
+  actionsClassName,
+  role,
+  live
+}) {
+  const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
+  const resolvedLive = live ?? (resolvedRole === "alert" ? "assertive" : "polite");
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      "data-terminal-panel": true,
+      "data-terminal-tone": tone,
+      role: resolvedRole,
+      "aria-live": resolvedLive === "off" ? void 0 : resolvedLive,
+      children: [
+        icon ? /* @__PURE__ */ jsx6("div", { className: joinClasses2(iconClassName), "data-terminal-icon": true, children: icon }) : null,
+        /* @__PURE__ */ jsx6(Title, { className: joinClasses2(titleClassName), "data-terminal-title": true, children: title }),
+        body ? /* @__PURE__ */ jsx6("div", { className: joinClasses2(bodyClassName), "data-terminal-body": true, children: body }) : null,
+        actions ? /* @__PURE__ */ jsx6("div", { className: joinClasses2(actionsClassName), "data-terminal-actions": true, children: actions }) : null,
+        secondaryBody ? /* @__PURE__ */ jsx6("div", { className: joinClasses2(secondaryBodyClassName), "data-terminal-secondary-body": true, children: secondaryBody }) : null
+      ]
+    }
+  );
+}
+
 // ../blocks/src/system/runtime/components/booking/SuccessMessage.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var SuccessMessage = ({
   message,
   resourceName,
   className
 }) => {
-  return /* @__PURE__ */ jsx4(
-    FeedbackMessage,
+  return /* @__PURE__ */ jsx7(
+    TerminalPanel,
     {
       tone: "success",
-      className: `ab-alert ab-alert--success ${className ?? ""}`,
+      title: "Booking confirmed",
+      icon: /* @__PURE__ */ jsx7(StateIcon, { variant: "success", children: /* @__PURE__ */ jsx7(CheckIcon, { strokeWidth: 3 }) }),
+      body: /* @__PURE__ */ jsx7("p", { className: "ab-text", children: message }),
+      secondaryBody: resourceName ? /* @__PURE__ */ jsxs4("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__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx4("p", { className: "ab-text", children: message }),
-        resourceName ? /* @__PURE__ */ jsxs3("p", { className: "ab-text ab-text--muted", children: [
-          "Practitioner: ",
-          resourceName
-        ] }) : null
-      ] })
+      live: "polite"
     }
   );
 };
@@ -12675,9 +12749,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",
@@ -13823,6 +13918,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,
@@ -15218,113 +15331,250 @@ function useAppointmentCheckoutVerificationWithDeps(config, deps) {
   };
 }
 
+// ../blocks/src/system/runtime/nodes/booking-form.default-ui.tsx
+import React5 from "react";
+
 // ../blocks/src/system/runtime/components/booking/DatePicker.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import React3 from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function DateFieldLabel({
+  labelId,
+  required
+}) {
+  return /* @__PURE__ */ jsxs5("span", { className: "form-label", id: labelId, children: [
+    "Select Date",
+    required && /* @__PURE__ */ jsx8("span", { className: "required-marker", children: "*" })
+  ] });
+}
 var DatePicker = ({
   value,
   onChange,
   dateOptions,
   required = true,
+  ariaDescribedBy,
+  ariaInvalid,
   isLoading = false,
   isEmpty = false,
   hasMore = false,
   onLoadMore
 }) => {
+  const generatedId = React3.useId();
+  const labelId = `${generatedId}-date-label`;
+  const gridRef = React3.useRef(null);
+  const previousCountRef = React3.useRef(dateOptions.length);
+  React3.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__ */ jsxs4("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsxs4("label", { className: "ab-label", children: [
-        "Select Date",
-        required && /* @__PURE__ */ jsx5("span", { className: "ab-required", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsx5("div", { className: "ab-skeleton" }),
-      /* @__PURE__ */ jsx5("p", { className: "ab-text ab-text--muted ab-text--sm", children: "Loading available dates..." })
+    return /* @__PURE__ */ jsxs5("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsx8(DateFieldLabel, { labelId, required }),
+      /* @__PURE__ */ jsx8("div", { className: "rb-shell-block" }),
+      /* @__PURE__ */ jsx8("p", { className: "ab-text ab-text--sm rb-on-surface--muted", children: "Loading available dates..." })
     ] });
   }
   if (isEmpty) {
-    return /* @__PURE__ */ jsxs4("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsxs4("label", { className: "ab-label", children: [
-        "Select Date",
-        required && /* @__PURE__ */ jsx5("span", { className: "ab-required", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsx5(FeedbackMessage, { tone: "warning", className: "ab-alert ab-alert--warning", role: "status", children: /* @__PURE__ */ jsxs4("p", { className: "ab-text", children: [
+    return /* @__PURE__ */ jsxs5("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsx8(DateFieldLabel, { labelId, required }),
+      /* @__PURE__ */ jsx8(FeedbackMessage, { tone: "warning", className: "alert alert-warning", role: "status", children: /* @__PURE__ */ jsxs5("p", { className: "ab-text", children: [
         "No available dates in this period.",
-        hasMore && onLoadMore && /* @__PURE__ */ jsx5(
+        hasMore && onLoadMore && /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
             onClick: onLoadMore,
-            className: "ab-link",
+            className: "ab-link rb-ml-2",
             children: "Check later dates"
           }
         )
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs4("div", { className: "ab-stack--sm", children: [
-    /* @__PURE__ */ jsxs4("label", { htmlFor: "booking-date", className: "ab-label", children: [
-      "Select Date",
-      required && /* @__PURE__ */ jsx5("span", { className: "ab-required", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs4(
-      "select",
+  return /* @__PURE__ */ jsxs5("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+    /* @__PURE__ */ jsx8(DateFieldLabel, { labelId, required }),
+    /* @__PURE__ */ jsx8(
+      "div",
       {
-        id: "booking-date",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        required,
-        className: "ab-select",
-        children: [
-          /* @__PURE__ */ jsx5("option", { value: "", children: "Choose a date..." }),
-          dateOptions.map((date) => /* @__PURE__ */ jsx5("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__ */ jsxs5(
+            "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__ */ jsx8("span", { className: "ab-pill-caption", "aria-hidden": "true", children: parts.weekday }),
+                /* @__PURE__ */ jsx8("span", { className: "ab-pill-value", "aria-hidden": "true", children: parts.day }),
+                /* @__PURE__ */ jsx8("span", { className: "ab-pill-caption", "aria-hidden": "true", children: parts.month })
+              ]
+            },
+            date
+          );
+        })
       }
     ),
-    hasMore && onLoadMore && /* @__PURE__ */ jsx5(
+    hasMore && onLoadMore && /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
         onClick: onLoadMore,
         className: "ab-link",
-        children: "Load more dates \u2192"
+        children: "More dates \u2192"
       }
     )
   ] });
 };
 
 // ../blocks/src/system/runtime/components/booking/TimeSlotSelector.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import React4 from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var TimeSlotSelector = ({
   value,
   onChange,
   slots,
   isLoading,
-  required = true
+  timezone,
+  required = true,
+  ariaDescribedBy,
+  ariaInvalid
 }) => {
-  return /* @__PURE__ */ jsxs5("div", { className: "ab-stack--sm", children: [
-    /* @__PURE__ */ jsxs5("label", { htmlFor: "booking-slot", className: "ab-label", children: [
+  const generatedId = React4.useId();
+  const labelId = `${generatedId}-time-label`;
+  const groupRef = React4.useRef(null);
+  const hadSlotsRef = React4.useRef(false);
+  React4.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__ */ jsxs6("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+    /* @__PURE__ */ jsxs6("span", { className: "form-label", id: labelId, children: [
       "Select Time",
-      required && /* @__PURE__ */ jsx6("span", { className: "ab-required", children: "*" })
+      required && /* @__PURE__ */ jsx9("span", { className: "required-marker", children: "*" })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx6(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "Loading available times..." }) : slots.length === 0 ? /* @__PURE__ */ jsx6(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "No available times for this date" }) : /* @__PURE__ */ jsxs5(
-      "select",
+    isLoading ? /* @__PURE__ */ jsx9("div", { className: "rb-shell-block" }) : slots.length === 0 ? /* @__PURE__ */ jsx9(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: "No available times for this date" }) : /* @__PURE__ */ jsx9(
+      "div",
       {
-        id: "booking-slot",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        required,
-        className: "ab-select",
-        children: [
-          /* @__PURE__ */ jsx6("option", { value: "", children: "Choose a time..." }),
-          slots.map((slot) => /* @__PURE__ */ jsx6("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__ */ jsx9(
+            "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
+          );
+        })
       }
     )
   ] });
 };
 
+// ../blocks/src/system/runtime/shared/components/StepIndicator.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function buildClassChannels(slot, classPrefix, emitSharedClasses) {
+  const classes = [];
+  if (emitSharedClasses) classes.push(`rb-${slot}`);
+  if (classPrefix) classes.push(`${classPrefix}-${slot}`);
+  return classes;
+}
+function StepIndicator({
+  currentStep,
+  totalSteps,
+  stepLabels,
+  classPrefix,
+  emitSharedClasses
+}) {
+  const slotClass = (slot, modifier) => {
+    const base = buildClassChannels(slot, classPrefix, emitSharedClasses);
+    if (!modifier) return base.join(" ");
+    const modified = buildClassChannels(
+      `${slot}--${modifier}`,
+      classPrefix,
+      emitSharedClasses
+    );
+    return [...base, ...modified].join(" ");
+  };
+  return /* @__PURE__ */ jsx10("nav", { "aria-label": "Registration progress", className: slotClass("steps-nav"), children: /* @__PURE__ */ jsx10("ol", { className: slotClass("steps"), children: Array.from({ length: totalSteps }, (_, i) => {
+    const stepNum = i + 1;
+    const isActive = stepNum === currentStep;
+    const isComplete = stepNum < currentStep;
+    return /* @__PURE__ */ jsxs7(
+      "li",
+      {
+        className: slotClass("step"),
+        "aria-current": isActive ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ jsx10(
+            "div",
+            {
+              className: slotClass(
+                "step-circle",
+                isActive ? "active" : isComplete ? "completed" : void 0
+              ),
+              children: isComplete ? /* @__PURE__ */ jsx10(CheckIcon, { className: slotClass("step-check"), strokeWidth: 3 }) : stepNum
+            }
+          ),
+          stepLabels?.[i] && /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: slotClass(
+                "step-label",
+                isActive ? "active" : void 0
+              ),
+              children: stepLabels[i]
+            }
+          ),
+          stepNum < totalSteps && /* @__PURE__ */ jsx10(
+            "div",
+            {
+              className: slotClass(
+                "step-connector",
+                isComplete ? "completed" : void 0
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) }) });
+}
+
 // ../blocks/src/system/runtime/shared/components/DiscountCodeDisclosure.tsx
 import { useId } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var BLOCK_DISCOUNT_CODE_DISCLOSURE_CLASSES = {
   "course-registration": {
     root: "cr-discount",
@@ -15400,10 +15650,10 @@ function DiscountCodeDisclosure({
     onApply();
   };
   const feedbackClassName = feedback ? `${classes.feedback} status-${feedback.tone}` : classes.feedback;
-  return /* @__PURE__ */ jsx7("div", { className: classes.root, children: !isOpen ? /* @__PURE__ */ jsx7("button", { type: "button", className: classes.toggle, onClick: onOpen, children: toggleLabel }) : /* @__PURE__ */ jsxs6("div", { className: classes.form, children: [
-    /* @__PURE__ */ jsx7("label", { htmlFor: inputId, className: classes.label, children: label }),
-    /* @__PURE__ */ jsxs6("div", { className: classes.row, children: [
-      /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11("div", { className: classes.root, children: !isOpen ? /* @__PURE__ */ jsx11("button", { type: "button", className: classes.toggle, onClick: onOpen, children: toggleLabel }) : /* @__PURE__ */ jsxs8("div", { className: classes.form, children: [
+    /* @__PURE__ */ jsx11("label", { htmlFor: inputId, className: classes.label, children: label }),
+    /* @__PURE__ */ jsxs8("div", { className: classes.row, children: [
+      /* @__PURE__ */ jsx11(
         "input",
         {
           id: inputId,
@@ -15416,7 +15666,7 @@ function DiscountCodeDisclosure({
           disabled: disabled || isApplying
         }
       ),
-      onApply ? /* @__PURE__ */ jsx7(
+      onApply ? /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -15426,7 +15676,7 @@ function DiscountCodeDisclosure({
           children: isApplying ? "Applying..." : applyLabel
         }
       ) : null,
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -15437,8 +15687,8 @@ function DiscountCodeDisclosure({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7("p", { className: classes.hint, children: hint }),
-    feedback ? /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx11("p", { className: classes.hint, children: hint }),
+    feedback ? /* @__PURE__ */ jsx11(
       "p",
       {
         className: feedbackClassName,
@@ -15450,7 +15700,7 @@ function DiscountCodeDisclosure({
 }
 
 // ../blocks/src/system/runtime/shared/components/FieldValidationMessage.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function getFieldValidationControlProps({
   message,
   messageId,
@@ -15469,7 +15719,7 @@ function FieldValidationMessage({
   className,
   live = "assertive"
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx12(
     "p",
     {
       id,
@@ -15484,18 +15734,10 @@ function FieldValidationMessage({
 }
 
 // ../blocks/src/system/runtime/nodes/booking-form.default-ui.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var paymentOptionLayoutStyle = {
-  alignItems: "flex-start",
-  display: "flex",
-  flexDirection: "column",
-  gap: "0.25rem",
-  justifyContent: "flex-start",
-  width: "100%"
-};
-var summaryStackStyle = {
-  gap: "0.125rem"
-};
+import { Fragment, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function optionCardClassName(isSelected) {
+  return `rb-option-card${isSelected ? " rb-option-card--selected" : ""}`;
+}
 function formatBookingAmount(amount, currency) {
   return formatCurrencyAmount(amount, currency, { decimals: "auto" });
 }
@@ -15504,6 +15746,7 @@ function HeadlessBookingDefaultForm({
   onSubmit
 }) {
   const currentStep = booking.currentStep;
+  const errorSummaryId = React5.useId();
   const currentStepIndex = currentStep?.visibleIndex ?? 0;
   const isFirstStep = currentStepIndex === 0;
   const isLastStep = currentStepIndex === booking.steps.length - 1;
@@ -15516,20 +15759,34 @@ function HeadlessBookingDefaultForm({
     }
   };
   if (!currentStep) {
-    return /* @__PURE__ */ jsx9("div", { className: "rb-text-center rb-py-12", children: /* @__PURE__ */ jsx9("p", { className: "status-muted", children: "No steps available" }) });
+    return /* @__PURE__ */ jsx13("div", { className: "rb-text-center rb-py-12", children: /* @__PURE__ */ jsx13("p", { className: "status-muted", children: "No steps available" }) });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "multi-step-form", children: [
-    /* @__PURE__ */ jsx9("div", { className: "rb-mb-8", children: /* @__PURE__ */ jsx9(
-      DefaultBookingProgress,
+  return /* @__PURE__ */ jsxs9("div", { className: "multi-step-form", children: [
+    booking.steps.length > 1 ? /* @__PURE__ */ jsx13(
+      StepIndicator,
       {
-        steps: booking.steps,
-        currentIndex: currentStepIndex
+        currentStep: currentStepIndex + 1,
+        totalSteps: booking.steps.length,
+        stepLabels: booking.steps.map((step) => step.label),
+        emitSharedClasses: true
+      }
+    ) : null,
+    /* @__PURE__ */ jsx13("div", { className: "step-content", children: /* @__PURE__ */ jsx13(
+      DefaultBookingStepContent,
+      {
+        booking,
+        errorSummaryId
       }
     ) }),
-    /* @__PURE__ */ jsx9("div", { className: "step-content", children: /* @__PURE__ */ jsx9(DefaultBookingStepContent, { booking }) }),
-    /* @__PURE__ */ jsx9(DefaultBookingErrorSummary, { errors: currentStep.errors }),
-    /* @__PURE__ */ jsxs7("div", { className: "rb-flex rb-gap-3 rb-mt-8", children: [
-      !isFirstStep ? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx13(
+      DefaultBookingErrorSummary,
+      {
+        errors: currentStep.errors,
+        id: errorSummaryId
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "rb-wizard-actions", children: [
+      !isFirstStep ? /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -15538,7 +15795,7 @@ function HeadlessBookingDefaultForm({
           children: "Back"
         }
       ) : null,
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -15546,13 +15803,9 @@ function HeadlessBookingDefaultForm({
             void handlePrimaryAction();
           },
           disabled: isSubmitting,
-          className: themeButtonClassName({
-            variant: "primary",
-            size: "md",
-            extraClassName: "rb-flex-1"
-          }),
-          children: isSubmitting ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-            /* @__PURE__ */ jsx9(
+          className: themeButtonClassName({ variant: "primary", size: "md" }),
+          children: isSubmitting ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+            /* @__PURE__ */ jsx13(
               SpinnerNode,
               {
                 size: "sm",
@@ -15566,61 +15819,32 @@ function HeadlessBookingDefaultForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx9(DefaultBookingDiscount, { booking }),
-    /* @__PURE__ */ jsx9(DefaultBookingFeedback, { booking }),
-    /* @__PURE__ */ jsx9(DefaultBookingAltcha, { booking })
+    /* @__PURE__ */ jsx13(DefaultBookingDiscount, { booking }),
+    /* @__PURE__ */ jsx13(DefaultBookingFeedback, { booking }),
+    /* @__PURE__ */ jsx13(DefaultBookingAltcha, { booking })
   ] });
 }
-function DefaultBookingProgress({
-  steps,
-  currentIndex
-}) {
-  return /* @__PURE__ */ jsx9("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__ */ jsxs7("div", { className: "rb-flex rb-items-center rb-flex-1", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-default", children: [
-        /* @__PURE__ */ jsx9(
-          "div",
-          {
-            className: `
-                  step-circle transition-theme-standard
-                  ${isActive ? "step-circle-active" : ""}
-                  ${isCompleted ? "step-circle-complete" : ""}
-                `,
-            children: isCompleted ? "\u2713" : index + 1
-          }
-        ),
-        /* @__PURE__ */ jsx9(
-          "span",
-          {
-            className: `
-                  rb-caption rb-hidden rb-sm-inline
-                  ${isCompleted || !isActive ? "status-muted" : ""}
-                `,
-            children: step.label
-          }
-        )
-      ] }),
-      !isLast ? /* @__PURE__ */ jsx9("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;
   switch (stepId) {
     case "service-selection":
-      return /* @__PURE__ */ jsx9(DefaultServiceSelectionStep, { booking });
+      return /* @__PURE__ */ jsx13(DefaultServiceSelectionStep, { booking });
     case "datetime-selection":
-      return /* @__PURE__ */ jsx9(DefaultDateTimeSelectionStep, { booking });
+      return /* @__PURE__ */ jsx13(
+        DefaultDateTimeSelectionStep,
+        {
+          booking,
+          errorSummaryId
+        }
+      );
     case "payment-selection":
-      return /* @__PURE__ */ jsx9(HeadlessBookingPaymentSelectionStep, { booking });
+      return /* @__PURE__ */ jsx13(HeadlessBookingPaymentSelectionStep, { booking });
     case "custom-fields":
-      return /* @__PURE__ */ jsx9(DefaultDynamicFields, { fields: booking.fields.items, booking });
+      return /* @__PURE__ */ jsx13(DefaultDynamicFields, { fields: booking.fields.items, booking });
     default:
       return assertNever4(stepId);
   }
@@ -15635,74 +15859,77 @@ 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__ */ jsxs7("div", { className: "ab-stack", children: [
-    /* @__PURE__ */ jsxs7("div", { children: [
-      /* @__PURE__ */ jsx9("h2", { className: "ab-title", children: "Select Service" }),
-      /* @__PURE__ */ jsx9("p", { className: "ab-text ab-text--muted", children: "Choose the service you'd like to book" })
+  return /* @__PURE__ */ jsxs9("div", { className: "rb-reg-stack", children: [
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsx13("h2", { className: "ab-title", children: "Select Service" }),
+      /* @__PURE__ */ jsx13("p", { className: "ab-text rb-on-surface--muted", children: "Choose the service you'd like to book" })
     ] }),
-    showServiceSelect ? /* @__PURE__ */ jsxs7("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsx9("label", { className: "ab-subtitle", children: "Service" }),
-      /* @__PURE__ */ jsx9("div", { className: "ab-grid", children: services.map((service) => {
+    showServiceSelect ? /* @__PURE__ */ jsxs9("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsx13("span", { className: "ab-subtitle", children: "Service" }),
+      /* @__PURE__ */ jsx13("div", { className: "rb-reg-grid", children: services.map((service) => {
         const isSelected = selectedServiceId === service.id;
-        return /* @__PURE__ */ jsx9(
+        return /* @__PURE__ */ jsxs9(
           "button",
           {
             type: "button",
             onClick: () => booking.actions.selectService(service.id),
-            className: `ab-card ${isSelected ? "ab-card--selected" : ""}`,
-            children: /* @__PURE__ */ jsxs7("div", { className: "ab-row--between", children: [
-              /* @__PURE__ */ jsxs7("div", { children: [
-                /* @__PURE__ */ jsx9("div", { className: "ab-subtitle", children: service.title }),
-                service.description ? /* @__PURE__ */ jsx9("div", { className: "ab-text ab-text--muted", children: service.description }) : null,
-                service.durationMinutes ? /* @__PURE__ */ jsxs7("div", { className: "ab-text ab-text--muted", children: [
+            className: optionCardClassName(isSelected),
+            "aria-pressed": isSelected,
+            children: [
+              /* @__PURE__ */ jsxs9("div", { className: "rb-flex-1", children: [
+                /* @__PURE__ */ jsx13("div", { className: "ab-subtitle", children: service.title }),
+                service.description ? /* @__PURE__ */ jsx13("div", { className: "ab-text rb-on-surface--muted", children: service.description }) : null,
+                service.durationMinutes ? /* @__PURE__ */ jsxs9("div", { className: "ab-text rb-on-surface--muted", children: [
                   service.durationMinutes,
                   " minutes"
                 ] }) : null
               ] }),
-              isSelected ? /* @__PURE__ */ jsx9(SelectedCheck, {}) : null
-            ] })
+              isSelected ? /* @__PURE__ */ jsx13(SelectedCheck, {}) : null
+            ]
           },
           service.id
         );
       }) })
     ] }) : null,
-    booking.resources.state.tag === "loading" ? /* @__PURE__ */ jsxs7("div", { className: "ab-center", children: [
-      /* @__PURE__ */ jsx9(SpinnerNode, { size: "md", srLabel: "Loading practitioners" }),
-      /* @__PURE__ */ jsx9("p", { className: "ab-text ab-text--muted", children: "Loading practitioners..." })
+    booking.resources.state.tag === "loading" ? /* @__PURE__ */ jsxs9("div", { className: "ab-center", children: [
+      /* @__PURE__ */ jsx13(SpinnerNode, { size: "md", srLabel: "Loading practitioners" }),
+      /* @__PURE__ */ jsx13("p", { className: "ab-text rb-on-surface--muted", children: "Loading practitioners..." })
     ] }) : null,
-    booking.resources.state.tag === "error" ? /* @__PURE__ */ jsx9(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__ */ jsx9(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__ */ jsxs7("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsxs7("label", { className: "ab-subtitle", children: [
+    booking.resources.state.tag === "error" ? /* @__PURE__ */ jsx13(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__ */ jsx13(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__ */ jsxs9("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "ab-subtitle", children: [
         "Practitioner",
         booking.resources.requiresSelection ? "" : " (Optional)"
       ] }),
-      /* @__PURE__ */ jsx9("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__ */ jsxs7("div", { className: "ab-grid", children: [
-        allowAnyResource ? /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx13("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__ */ jsxs9("div", { className: "rb-reg-grid", children: [
+        allowAnyResource ? /* @__PURE__ */ jsxs9(
           "button",
           {
             type: "button",
             onClick: () => booking.actions.selectResource(null),
-            className: `ab-card ${!selectedResourceId ? "ab-card--selected" : ""}`,
-            children: /* @__PURE__ */ jsxs7("div", { className: "ab-row--between", children: [
-              /* @__PURE__ */ jsx9("div", { className: "ab-subtitle", children: "Any Available" }),
-              !selectedResourceId ? /* @__PURE__ */ jsx9(SelectedCheck, {}) : null
-            ] })
+            className: optionCardClassName(!selectedResourceId),
+            "aria-pressed": !selectedResourceId,
+            children: [
+              /* @__PURE__ */ jsx13("div", { className: "rb-flex-1 ab-subtitle", children: "Any Available" }),
+              !selectedResourceId ? /* @__PURE__ */ jsx13(SelectedCheck, {}) : null
+            ]
           }
         ) : null,
         resources.map((resource) => {
           const isSelected = selectedResourceId === resource.id;
-          return /* @__PURE__ */ jsx9(
+          return /* @__PURE__ */ jsxs9(
             "button",
             {
               type: "button",
               onClick: () => booking.actions.selectResource(resource.id),
-              className: `ab-card ${isSelected ? "ab-card--selected" : ""}`,
-              children: /* @__PURE__ */ jsxs7("div", { className: "ab-row--between", children: [
-                /* @__PURE__ */ jsx9("div", { className: "ab-subtitle", children: resource.label }),
-                isSelected ? /* @__PURE__ */ jsx9(SelectedCheck, {}) : null
-              ] })
+              className: optionCardClassName(isSelected),
+              "aria-pressed": isSelected,
+              children: [
+                /* @__PURE__ */ jsx13("div", { className: "rb-flex-1 ab-subtitle", children: resource.label }),
+                isSelected ? /* @__PURE__ */ jsx13(SelectedCheck, {}) : null
+              ]
             },
             resource.id
           );
@@ -15712,28 +15939,31 @@ 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__ */ jsxs7("div", { className: "ab-stack", children: [
-    singleService ? /* @__PURE__ */ jsxs7("div", { className: "ab-info-box", children: [
-      /* @__PURE__ */ jsx9("h3", { className: "ab-subtitle", children: singleService.title }),
-      singleService.description ? /* @__PURE__ */ jsx9("p", { className: "ab-text ab-text--muted", children: singleService.description }) : null,
-      singleService.durationMinutes ? /* @__PURE__ */ jsxs7("p", { className: "ab-text ab-text--muted", children: [
+  const hasValidationError = Boolean(booking.currentStep?.errors.formError);
+  const validationDescribedBy = hasValidationError ? errorSummaryId : void 0;
+  return /* @__PURE__ */ jsxs9("div", { className: "rb-reg-stack", children: [
+    singleService ? /* @__PURE__ */ jsxs9("div", { className: "rb-reg-summary", children: [
+      /* @__PURE__ */ jsx13("h3", { className: "ab-subtitle", children: singleService.title }),
+      singleService.description ? /* @__PURE__ */ jsx13("p", { className: "ab-text rb-on-surface--muted", children: singleService.description }) : null,
+      singleService.durationMinutes ? /* @__PURE__ */ jsxs9("p", { className: "ab-text rb-on-surface--muted", children: [
         "Duration: ",
         singleService.durationMinutes,
         " minutes"
       ] }) : null
     ] }) : null,
-    error ? /* @__PURE__ */ jsx9(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx9(
+    error ? /* @__PURE__ */ jsx13(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx13(
       DatePicker,
       {
         value: selectedDate,
@@ -15741,23 +15971,26 @@ 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
       }
     ),
-    selectedDate ? /* @__PURE__ */ jsx9(
+    selectedDate ? /* @__PURE__ */ jsx13(
       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
   ] });
@@ -15768,33 +16001,33 @@ function HeadlessBookingPaymentSelectionStep({
   const service = booking.services.selected;
   const viewModel = booking.payment.selection;
   if (booking.payment.kind === "unsupported") {
-    return /* @__PURE__ */ jsx9(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: booking.payment.errorMessage });
+    return /* @__PURE__ */ jsx13(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: booking.payment.errorMessage });
   }
   if (!service || !viewModel) {
-    return /* @__PURE__ */ jsx9(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: "Payment options are unavailable for this service right now." });
+    return /* @__PURE__ */ jsx13(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__ */ jsxs7("div", { className: "ab-stack", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "ab-info-box", children: [
-      /* @__PURE__ */ jsx9("h3", { className: "ab-subtitle", children: viewModel.sectionTitle }),
-      /* @__PURE__ */ jsx9("p", { className: "ab-text ab-text--muted", children: service.title })
+  return /* @__PURE__ */ jsxs9("div", { className: "rb-reg-stack", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "rb-reg-summary", children: [
+      /* @__PURE__ */ jsx13("h3", { className: "ab-subtitle", children: viewModel.sectionTitle }),
+      /* @__PURE__ */ jsx13("p", { className: "ab-text rb-on-surface--muted", children: service.title })
     ] }),
-    booking.payment.appointmentPackages.state.tag === "loading" ? /* @__PURE__ */ jsx9(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: "Checking package credits..." }) : null,
-    booking.payment.appointmentPackages.state.tag === "error" ? /* @__PURE__ */ jsxs7(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: [
+    booking.payment.appointmentPackages.state.tag === "loading" ? /* @__PURE__ */ jsx13(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: "Checking package credits..." }) : null,
+    booking.payment.appointmentPackages.state.tag === "error" ? /* @__PURE__ */ jsxs9(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: [
       booking.payment.appointmentPackages.state.message,
       " You can continue with the normal payment option."
     ] }) : null,
-    slidingScale ? /* @__PURE__ */ jsxs7("div", { className: "rb-space-y-2", children: [
-      /* @__PURE__ */ jsx9("label", { htmlFor: "appointment-sliding-amount", className: "form-label", children: "Choose your price" }),
-      /* @__PURE__ */ jsxs7("p", { className: "rb-caption status-muted", children: [
+    slidingScale ? /* @__PURE__ */ jsxs9("div", { className: "rb-space-y-2", children: [
+      /* @__PURE__ */ jsx13("label", { htmlFor: "appointment-sliding-amount", className: "form-label", children: "Choose your price" }),
+      /* @__PURE__ */ jsxs9("p", { className: "rb-caption status-muted", children: [
         formatBookingAmount(slidingScale.minAmount, slidingScale.currency),
         " to ",
         formatBookingAmount(slidingScale.maxAmount, slidingScale.currency),
         slidingScale.suggestedAmount !== null ? `, suggested ${formatBookingAmount(slidingScale.suggestedAmount, slidingScale.currency)}` : ""
       ] }),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx13(
         "input",
         {
           id: "appointment-sliding-amount",
@@ -15808,47 +16041,47 @@ function HeadlessBookingPaymentSelectionStep({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsxs7("div", { className: "ab-stack", role: "list", "aria-label": "Payment options", children: [
-      packageOptions.map((appointmentPackage) => {
-        const isSelected = booking.payment.selectedAppointmentPackageId === appointmentPackage.customerPassId;
-        return /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            className: themeButtonClassName({
-              variant: isSelected ? "primary" : "outline",
-              size: "md"
-            }),
-            style: paymentOptionLayoutStyle,
-            onClick: () => booking.actions.selectAppointmentPackage(
-              appointmentPackage.customerPassId
-            ),
-            "aria-pressed": isSelected,
-            children: /* @__PURE__ */ jsx9(
-              PaymentOptionContent,
+    /* @__PURE__ */ jsxs9(
+      "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__ */ jsxs9(
+              "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__ */ jsx9(
-            "div",
-            {
-              className: "ab-card",
-              style: paymentOptionLayoutStyle,
-              children: /* @__PURE__ */ jsx9(
+                type: "button",
+                className: optionCardClassName(isSelected),
+                onClick: () => booking.actions.selectAppointmentPackage(
+                  appointmentPackage.customerPassId
+                ),
+                "aria-pressed": isSelected,
+                children: [
+                  /* @__PURE__ */ jsx13(
+                    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__ */ jsx13(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__ */ jsx13("div", { className: "rb-reg-summary", children: /* @__PURE__ */ jsx13(
                 PaymentOptionContent,
                 {
                   id: option.kind,
@@ -15857,37 +16090,35 @@ function HeadlessBookingPaymentSelectionStep({
                   summaryRows: option.summaryRows,
                   helperText: option.helperText
                 }
-              )
-            },
-            option.kind
-          );
-        }
-        return /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            className: themeButtonClassName({
-              variant: isSelected ? "primary" : "outline",
-              size: "md"
-            }),
-            style: paymentOptionLayoutStyle,
-            onClick: () => booking.actions.selectPaymentOption(option.kind),
-            "aria-pressed": isSelected,
-            children: /* @__PURE__ */ jsx9(
-              PaymentOptionContent,
+              ) }, option.kind);
+            }
+            return /* @__PURE__ */ jsxs9(
+              "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__ */ jsx13(
+                    PaymentOptionContent,
+                    {
+                      id: option.kind,
+                      title: option.title,
+                      description: option.description,
+                      summaryRows: option.summaryRows,
+                      helperText: option.helperText
+                    }
+                  ),
+                  isSelected ? /* @__PURE__ */ jsx13(SelectedCheck, {}) : null
+                ]
+              },
+              option.kind
+            );
+          })
+        ]
+      }
+    )
   ] });
 }
 function PaymentOptionContent({
@@ -15897,22 +16128,22 @@ function PaymentOptionContent({
   summaryRows,
   title
 }) {
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx9("span", { children: title }),
-    /* @__PURE__ */ jsx9("span", { className: "ab-text ab-text--muted", children: description }),
-    /* @__PURE__ */ jsx9("div", { className: "ab-stack", style: summaryStackStyle, children: summaryRows.map((row) => /* @__PURE__ */ jsxs7("span", { className: "ab-text ab-text--muted", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "rb-flex-1", children: [
+    /* @__PURE__ */ jsx13("div", { className: "ab-subtitle", children: title }),
+    /* @__PURE__ */ jsx13("div", { className: "ab-text rb-on-surface--muted", children: description }),
+    /* @__PURE__ */ jsx13("div", { className: "ab-option-rows", children: summaryRows.map((row) => /* @__PURE__ */ jsxs9("span", { className: "ab-text rb-on-surface--muted", children: [
       row.label,
       ": ",
       row.value
     ] }, `${id}-${row.label}`)) }),
-    helperText ? /* @__PURE__ */ jsx9("span", { className: "ab-text ab-text--muted", children: helperText }) : null
+    helperText ? /* @__PURE__ */ jsx13("div", { className: "ab-text rb-on-surface--muted", children: helperText }) : null
   ] });
 }
 function DefaultDynamicFields({
   booking,
   fields
 }) {
-  return /* @__PURE__ */ jsx9("div", { className: "rb-space-y-6", children: fields.map((field) => /* @__PURE__ */ jsx9(DefaultDynamicField, { booking, field }, field.id)) });
+  return /* @__PURE__ */ jsx13("div", { className: "rb-space-y-6", children: fields.map((field) => /* @__PURE__ */ jsx13(DefaultDynamicField, { booking, field }, field.id)) });
 }
 function DefaultDynamicField({
   booking,
@@ -15922,13 +16153,13 @@ function DefaultDynamicField({
   const error = field.error;
   const errorId = error ? field.errorId ?? `${field.inputId}-error` : null;
   const describedBy = [field.helpTextId, errorId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "rb-space-y-2", children: [
-    /* @__PURE__ */ jsxs7("label", { id: field.labelId, htmlFor: field.inputId, className: "form-label", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "rb-space-y-2", children: [
+    /* @__PURE__ */ jsxs9("label", { id: field.labelId, htmlFor: field.inputId, className: "form-label", children: [
       field.label,
-      field.required ? /* @__PURE__ */ jsx9("span", { className: "required-marker", children: "*" }) : null
+      field.required ? /* @__PURE__ */ jsx13("span", { className: "required-marker", children: "*" }) : null
     ] }),
-    field.helpText ? /* @__PURE__ */ jsx9("p", { id: field.helpTextId ?? void 0, className: "rb-caption status-muted", children: field.helpText }) : null,
-    /* @__PURE__ */ jsx9(
+    field.helpText ? /* @__PURE__ */ jsx13("p", { id: field.helpTextId ?? void 0, className: "rb-caption status-muted", children: field.helpText }) : null,
+    /* @__PURE__ */ jsx13(
       DefaultFieldInput,
       {
         field,
@@ -15940,7 +16171,7 @@ function DefaultDynamicField({
         describedBy
       }
     ),
-    error ? /* @__PURE__ */ jsx9(
+    error ? /* @__PURE__ */ jsx13(
       FieldValidationMessage,
       {
         id: errorId ?? `${field.inputId}-error`,
@@ -15974,7 +16205,7 @@ function DefaultFieldInput({
   };
   switch (field.type) {
     case "textarea":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx13(
         "textarea",
         {
           ...commonProps,
@@ -15989,7 +16220,7 @@ function DefaultFieldInput({
       );
     case "select":
       if (field.field.multiple) {
-        return /* @__PURE__ */ jsx9(
+        return /* @__PURE__ */ jsx13(
           "select",
           {
             ...commonProps,
@@ -16002,11 +16233,11 @@ function DefaultFieldInput({
             },
             multiple: true,
             className: "form-select rb-h-32",
-            children: field.field.options?.map((option) => /* @__PURE__ */ jsx9("option", { value: option.value, children: option.label }, option.value))
+            children: field.field.options?.map((option) => /* @__PURE__ */ jsx13("option", { value: option.value, children: option.label }, option.value))
           }
         );
       }
-      return /* @__PURE__ */ jsxs7(
+      return /* @__PURE__ */ jsxs9(
         "select",
         {
           ...commonProps,
@@ -16014,14 +16245,14 @@ function DefaultFieldInput({
           onChange: (event) => onChange(event.target.value),
           className: "form-select",
           children: [
-            /* @__PURE__ */ jsx9("option", { value: "", children: "Select an option..." }),
-            field.field.options?.map((option) => /* @__PURE__ */ jsx9("option", { value: option.value, children: option.label }, option.value))
+            /* @__PURE__ */ jsx13("option", { value: "", children: "Select an option..." }),
+            field.field.options?.map((option) => /* @__PURE__ */ jsx13("option", { value: option.value, children: option.label }, option.value))
           ]
         }
       );
     case "radio":
-      return /* @__PURE__ */ jsx9("div", { className: "rb-space-y-2", children: field.field.options?.map((option) => /* @__PURE__ */ jsxs7("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx13("div", { className: "rb-space-y-2", children: field.field.options?.map((option) => /* @__PURE__ */ jsxs9("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
+        /* @__PURE__ */ jsx13(
           "input",
           {
             type: "radio",
@@ -16035,13 +16266,13 @@ function DefaultFieldInput({
             className: "form-radio"
           }
         ),
-        /* @__PURE__ */ jsx9("span", { className: "rb-caption", children: option.label })
+        /* @__PURE__ */ jsx13("span", { className: "rb-caption", children: option.label })
       ] }, option.value)) });
     case "checkbox":
       if (field.field.options && field.field.options.length > 1) {
         const checkedValues = toStringArray(value);
-        return /* @__PURE__ */ jsx9("div", { className: "rb-space-y-2", children: field.field.options.map((option) => /* @__PURE__ */ jsxs7("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-          /* @__PURE__ */ jsx9(
+        return /* @__PURE__ */ jsx13("div", { className: "rb-space-y-2", children: field.field.options.map((option) => /* @__PURE__ */ jsxs9("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
+          /* @__PURE__ */ jsx13(
             "input",
             {
               type: "checkbox",
@@ -16058,11 +16289,11 @@ function DefaultFieldInput({
               className: "form-checkbox"
             }
           ),
-          /* @__PURE__ */ jsx9("span", { className: "rb-caption", children: option.label })
+          /* @__PURE__ */ jsx13("span", { className: "rb-caption", children: option.label })
         ] }, option.value)) });
       }
-      return /* @__PURE__ */ jsxs7("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsxs9("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
+        /* @__PURE__ */ jsx13(
           "input",
           {
             type: "checkbox",
@@ -16076,11 +16307,11 @@ function DefaultFieldInput({
             className: "form-checkbox"
           }
         ),
-        /* @__PURE__ */ jsx9("span", { className: "rb-caption", children: field.field.placeholder || field.label })
+        /* @__PURE__ */ jsx13("span", { className: "rb-caption", children: field.field.placeholder || field.label })
       ] });
     case "booking_requirement_consent":
-      return /* @__PURE__ */ jsxs7("label", { className: "rb-flex rb-items-start rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsxs9("label", { className: "rb-flex rb-items-start rb-gap-2 rb-cursor-pointer", children: [
+        /* @__PURE__ */ jsx13(
           "input",
           {
             type: "checkbox",
@@ -16094,10 +16325,10 @@ function DefaultFieldInput({
             className: "form-checkbox rb-mt-0.5"
           }
         ),
-        /* @__PURE__ */ jsx9("span", { className: "rb-caption", children: field.field.placeholder || field.label })
+        /* @__PURE__ */ jsx13("span", { className: "rb-caption", children: field.field.placeholder || field.label })
       ] });
     case "number":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx13(
         "input",
         {
           ...commonProps,
@@ -16111,7 +16342,7 @@ function DefaultFieldInput({
         }
       );
     case "date":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx13(
         "input",
         {
           ...commonProps,
@@ -16124,7 +16355,7 @@ function DefaultFieldInput({
         }
       );
     case "time":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx13(
         "input",
         {
           ...commonProps,
@@ -16138,7 +16369,7 @@ function DefaultFieldInput({
     case "email":
     case "tel":
     case "url":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx13(
         "input",
         {
           ...commonProps,
@@ -16162,8 +16393,8 @@ function DefaultBookingDiscount({
 }) {
   const shouldShowDiscountSection = !booking.payment.selectedAppointmentPackageId && !booking.discount.loading && (booking.discount.manualCodeEntryAllowed || Boolean(booking.discount.autoAppliedDiscount));
   if (!shouldShowDiscountSection) return null;
-  return /* @__PURE__ */ jsxs7("div", { className: "rb-mt-6", children: [
-    booking.discount.manualCodeEntryAllowed ? /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9("div", { className: "rb-mt-6", children: [
+    booking.discount.manualCodeEntryAllowed ? /* @__PURE__ */ jsx13(
       DiscountCodeDisclosure,
       {
         surface: "theme-form",
@@ -16177,7 +16408,7 @@ function DefaultBookingDiscount({
         }
       }
     ) : null,
-    booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx9(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs7("p", { className: "ab-text", children: [
+    booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx13(FeedbackMessage, { tone: "info", className: "alert alert-info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs9("p", { className: "ab-text", children: [
       "Discount available: ",
       booking.discount.autoAppliedDiscount.publicLabel,
       " ",
@@ -16189,9 +16420,9 @@ function DefaultBookingFeedback({
   booking
 }) {
   if (booking.feedback.kind !== "error") return null;
-  return /* @__PURE__ */ jsxs7(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: [
-    /* @__PURE__ */ jsx9("p", { className: "ab-text", children: booking.feedback.message }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9(FeedbackMessage, { tone: "error", className: "alert alert-error rb-mt-4", role: "alert", children: [
+    /* @__PURE__ */ jsx13("p", { className: "ab-text", children: booking.feedback.message }),
+    /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -16206,7 +16437,7 @@ function DefaultBookingAltcha({
   booking
 }) {
   if (!booking.spamProtection.enabled) return null;
-  return /* @__PURE__ */ jsx9("div", { className: "ab-altcha", children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx13("div", { className: "ab-altcha", children: /* @__PURE__ */ jsx13(
     AltchaWidget,
     {
       challengeUrl: booking.spamProtection.challenge.url,
@@ -16215,43 +16446,26 @@ function DefaultBookingAltcha({
   ) });
 }
 function DefaultBookingErrorSummary({
-  errors
+  errors,
+  id
 }) {
   if (!hasBookingValidationErrors(errors)) return null;
-  return /* @__PURE__ */ jsxs7(FeedbackMessage, { tone: "error", className: "rb-mt-6 alert alert-error", role: "alert", children: [
-    errors.formError ? /* @__PURE__ */ jsx9("p", { className: "rb-caption", children: /* @__PURE__ */ jsx9("strong", { children: errors.formError }) }) : null,
-    Object.entries(errors.fieldErrors).map(([key, message]) => /* @__PURE__ */ jsx9("p", { className: "rb-caption", children: message }, key))
-  ] });
-}
-function SelectedCheck() {
-  return /* @__PURE__ */ jsx9("div", { className: "ab-check", children: /* @__PURE__ */ jsx9(
-    "svg",
+  return /* @__PURE__ */ jsxs9(
+    FeedbackMessage,
     {
-      fill: "none",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "2",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      children: /* @__PURE__ */ jsx9("path", { d: "M5 13l4 4L19 7" })
+      tone: "error",
+      className: "rb-mt-6 alert alert-error",
+      id,
+      role: "alert",
+      children: [
+        errors.formError ? /* @__PURE__ */ jsx13("p", { className: "rb-caption", children: /* @__PURE__ */ jsx13("strong", { children: errors.formError }) }) : null,
+        Object.entries(errors.fieldErrors).map(([key, message]) => /* @__PURE__ */ jsx13("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__ */ jsx13("div", { className: "rb-option-check", children: /* @__PURE__ */ jsx13(CheckIcon, {}) });
 }
 
 // ../blocks/src/system/runtime/shared/utils/checkoutUrls.ts
@@ -16300,7 +16514,7 @@ function consumeSearchParam(paramName) {
 }
 
 // ../blocks/src/system/runtime/nodes/booking-form.client.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var PORTAL_REBOOK_QUERY_PARAM = "rebook";
 var PORTAL_REBOOK_QUERY_VALUE = "1";
 var REBOOK_COMPLETION_MODE_VERIFIED_CHECKOUT = "verified_checkout";
@@ -16325,6 +16539,14 @@ function appendRebookFlag(url, enabled) {
   );
   return nextUrl.toString();
 }
+function BookingSurface({
+  id,
+  className,
+  children
+}) {
+  const classes = ["rb-reg-surface", className ?? ""].join(" ").trim();
+  return /* @__PURE__ */ jsx14("div", { id, className: classes, children });
+}
 var BookingFormClient = ({
   siteId: siteIdProp,
   render
@@ -16361,7 +16583,7 @@ var BookingFormClient = ({
     successMessage: render.display.successMessage ?? void 0,
     viewerTimeZone
   });
-  React3.useEffect(() => {
+  React6.useEffect(() => {
     if (!siteId) {
       console.error("[BookingFormClient] ERROR: siteId is missing!");
     }
@@ -16378,7 +16600,7 @@ var BookingFormClient = ({
     redirectState,
     verificationState: verification.state
   });
-  React3.useEffect(() => {
+  React6.useEffect(() => {
     if (viewState.kind === "error") {
       scrollToBlock(bookingAnchorId);
     }
@@ -16387,12 +16609,12 @@ var BookingFormClient = ({
     viewState.kind,
     viewState.kind === "error" ? viewState.message : null
   ]);
-  React3.useEffect(() => {
+  React6.useEffect(() => {
     if (viewState.kind === "success" && redirectState.kind === "success") {
       scrollToBlock(bookingAnchorId);
     }
   }, [bookingAnchorId, redirectState.kind, viewState.kind]);
-  React3.useEffect(() => {
+  React6.useEffect(() => {
     if (!isPortalRebook || viewState.kind !== "success") {
       return;
     }
@@ -16418,13 +16640,13 @@ var BookingFormClient = ({
     viewState.kind
   ]);
   if (render.display.state === "missing" || !form || !render.hydration.formId) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx14(
       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__ */ jsx10("p", { className: "ab-text", children: render.display.message ?? "Booking form not found. Please check your configuration." })
+        children: /* @__PURE__ */ jsx14("p", { className: "ab-text", children: render.display.message ?? "Booking form not found. Please check your configuration." })
       }
     );
   }
@@ -16444,29 +16666,21 @@ var BookingFormClient = ({
     }
   };
   if (viewState.kind === "success") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx14(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: /* @__PURE__ */ jsx14(
       SuccessMessage,
       {
         message: getBookingSuccessMessage(render.display.successMessage),
-        resourceName: viewState.resourceName,
-        className: render.display.className ?? void 0
+        resourceName: viewState.resourceName
       }
-    );
+    ) });
   }
   if (viewState.kind === "verifying") {
-    return /* @__PURE__ */ jsx10(
-      "div",
-      {
-        id: bookingAnchorId,
-        className: render.display.className ?? void 0,
-        children: /* @__PURE__ */ jsx10(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: /* @__PURE__ */ jsx10("p", { className: "ab-text", children: viewState.message }) })
-      }
-    );
+    return /* @__PURE__ */ jsx14(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: /* @__PURE__ */ jsx14(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: /* @__PURE__ */ jsx14("p", { className: "ab-text", children: viewState.message }) }) });
   }
-  return /* @__PURE__ */ jsxs8("div", { id: bookingAnchorId, className: render.display.className ?? void 0, children: [
-    render.hydration.noticeMessage ? /* @__PURE__ */ jsx10(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx10("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
-    viewState.kind === "error" ? /* @__PURE__ */ jsx10(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: /* @__PURE__ */ jsx10("p", { className: "ab-text", children: viewState.message }) }) : null,
-    /* @__PURE__ */ jsx10(HeadlessBookingDefaultForm, { booking, onSubmit: handleComplete })
+  return /* @__PURE__ */ jsxs10(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: [
+    render.hydration.noticeMessage ? /* @__PURE__ */ jsx14(FeedbackMessage, { tone: "info", className: "alert alert-info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx14("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
+    viewState.kind === "error" ? /* @__PURE__ */ jsx14(FeedbackMessage, { tone: "error", className: "alert alert-error rb-mb-4", role: "alert", children: /* @__PURE__ */ jsx14("p", { className: "ab-text", children: viewState.message }) }) : null,
+    /* @__PURE__ */ jsx14(HeadlessBookingDefaultForm, { booking, onSubmit: handleComplete })
   ] });
 };
 
@@ -18906,6 +19120,34 @@ ${root} {
   /* Order summary */
   --er-summary-bg: rgba(var(--tb-primary), 0.1);
   --er-summary-border: rgb(var(--tb-border));
+
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's documented
+     Tier 3 vars so existing --er-* overrides keep working unchanged. */
+  --rb-reg-radius: var(--er-radius);
+  --rb-reg-border: var(--er-border);
+  --rb-reg-border-hover: var(--er-border-hover);
+  --rb-reg-border-selected: var(--er-border-selected);
+  --rb-reg-bg-selected: var(--er-payment-bg-selected);
+  --rb-reg-option-bg: var(--er-control-bg);
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: var(--er-on-surface);
+  --rb-reg-on-surface-muted: var(--er-on-surface-muted);
+  --rb-reg-on-surface-subtle: var(--er-on-surface-subtle);
+  --rb-reg-on-surface-faint: var(--er-on-surface-faint);
+  --rb-reg-check-bg: var(--er-check-bg);
+  --rb-reg-check-text: var(--er-check-text);
+  --rb-reg-step-active: var(--er-step-active);
+  --rb-reg-step-completed: var(--er-step-completed);
+  --rb-reg-step-inactive: var(--er-step-inactive);
+  --rb-reg-step-text: var(--er-step-text);
+  --rb-reg-step-text-active: var(--er-step-text-active);
+  --rb-reg-step-connector: var(--er-step-connector);
+  --rb-reg-summary-bg: var(--er-surface-muted);
+  --rb-reg-summary-border: var(--er-border);
+  --rb-reg-focus-ring: var(--er-focus-ring);
+  --rb-reg-shell-line: var(--er-shell-line);
 }
 `;
 }
@@ -19038,25 +19280,40 @@ ${root} {
   --ab-info-bg: rgba(var(--tb-info), 0.1);
   --ab-info-text: rgb(var(--tb-info));
 
-  /* Loading/muted states */
+  /* Muted summary state */
   --ab-muted-bg: rgba(var(--tb-text), 0.05);
-  --ab-muted-text: rgba(var(--tb-text), 0.6);
-  --ab-spinner-color: rgb(var(--tb-primary));
 
-  /* Form elements */
-  --ab-input-border: rgb(var(--tb-border));
+  /* Focus ring used by shared registration-surface controls */
   --ab-input-focus-ring: rgba(var(--tb-primary), 0.3);
 
-  /* Buttons */
-  --ab-btn-primary-bg: rgb(var(--tb-primary));
-  --ab-btn-primary-text: rgb(var(--tb-background));
-  --ab-btn-primary-hover: rgba(var(--tb-primary), 0.9);
-  --ab-btn-secondary-border: rgb(var(--tb-border));
-  --ab-btn-secondary-hover: rgba(var(--tb-text), 0.05);
-
-  /* Text opacity levels */
-  --ab-text-muted-opacity: 0.6;
-  --ab-text-faint-opacity: 0.4;
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's Tier 3 vars
+     (palette tokens where no --ab-* var exists) so --ab-* overrides keep
+     working as the block adopts the shared classes. */
+  --rb-reg-radius: var(--ab-card-radius, var(--rb-block-radius));
+  --rb-reg-border: var(--ab-card-border);
+  --rb-reg-border-hover: var(--ab-card-border-hover);
+  --rb-reg-border-selected: var(--ab-card-border-selected);
+  --rb-reg-bg-selected: var(--ab-card-bg-selected);
+  --rb-reg-option-bg: transparent;
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
+  --rb-reg-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
+  --rb-reg-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
+  --rb-reg-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
+  --rb-reg-check-bg: var(--ab-check-bg);
+  --rb-reg-check-text: var(--ab-check-text);
+  --rb-reg-step-active: rgb(var(--tb-primary));
+  --rb-reg-step-completed: rgb(var(--tb-success));
+  --rb-reg-step-inactive: rgb(var(--tb-mutedText));
+  --rb-reg-step-text: rgb(255 255 255);
+  --rb-reg-step-text-active: rgb(var(--tb-primaryText, 255 255 255));
+  --rb-reg-step-connector: rgba(var(--tb-border), 0.5);
+  --rb-reg-summary-bg: var(--ab-muted-bg);
+  --rb-reg-summary-border: var(--ab-card-border);
+  --rb-reg-focus-ring: var(--ab-input-focus-ring);
+  --rb-reg-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
 }
 `;
 }
@@ -19347,6 +19604,35 @@ ${root} {
   /* Summary */
   --cr-summary-bg: rgba(var(--tb-primary), 0.1);
   --cr-summary-border: rgb(var(--tb-border));
+
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's Tier 3 vars
+     (palette tokens where no --cr-* var exists) so existing --cr-* overrides
+     keep working unchanged. */
+  --rb-reg-radius: var(--rb-block-radius);
+  --rb-reg-border: var(--cr-border);
+  --rb-reg-border-hover: var(--cr-border-hover);
+  --rb-reg-border-selected: var(--cr-border-selected);
+  --rb-reg-bg-selected: var(--cr-payment-bg-selected);
+  --rb-reg-option-bg: rgb(var(--tb-background));
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: var(--cr-on-surface);
+  --rb-reg-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
+  --rb-reg-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
+  --rb-reg-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
+  --rb-reg-check-bg: var(--cr-check-bg);
+  --rb-reg-check-text: var(--cr-check-text);
+  --rb-reg-step-active: var(--cr-step-active);
+  --rb-reg-step-completed: var(--cr-step-completed);
+  --rb-reg-step-inactive: var(--cr-step-inactive);
+  --rb-reg-step-text: var(--cr-step-text);
+  --rb-reg-step-text-active: var(--cr-step-text-active);
+  --rb-reg-step-connector: var(--cr-step-connector);
+  --rb-reg-summary-bg: var(--cr-summary-bg);
+  --rb-reg-summary-border: var(--cr-summary-border);
+  --rb-reg-focus-ring: var(--cr-focus-ring);
+  --rb-reg-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
 }
 `;
 }
@@ -19393,13 +19679,13 @@ function buildResponsiveScopeRulePatternSource() {
 }
 
 // ../theme-core/src/ThemeScopeCore.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 
 // ../theme-core/src/ClientThemeScope.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 
 // ../blocks/src/system/runtime/hooks/useHeadlessEventRegistrationFlow.ts
-import React4, { useCallback as useCallback7, useMemo as useMemo8 } from "react";
+import React7, { useCallback as useCallback7, useMemo as useMemo8 } from "react";
 var eventRegistrationControllerDeps = {
   useEventRegistrationWizard
 };
@@ -19407,7 +19693,7 @@ function HeadlessEventRegistrationProvider({
   config,
   children
 }) {
-  return React4.createElement(BlockApiProvider, { config, children });
+  return React7.createElement(BlockApiProvider, { config, children });
 }
 function useHeadlessEventRegistrationFlow(options) {
   return useEventRegistrationController(options).flow;
@@ -19895,19 +20181,19 @@ async function loadBookingFormServices(api, formConfig) {
 
 // src/bookings/index.ts
 var BookingFormClient2 = (props) => {
-  return React5.createElement(BookingFormClient, props);
+  return React8.createElement(BookingFormClient, props);
 };
 function useBookingFormConfig2(siteId, formId) {
   return useBookingFormConfig(siteId, formId);
 }
 var HeadlessBookingProvider2 = (props) => {
-  return React5.createElement(HeadlessBookingProvider, props);
+  return React8.createElement(HeadlessBookingProvider, props);
 };
 var HeadlessEventRegistrationProvider2 = (props) => {
-  return React5.createElement(HeadlessEventRegistrationProvider, props);
+  return React8.createElement(HeadlessEventRegistrationProvider, props);
 };
 var HeadlessBookingPaymentSelectionStep2 = (props) => {
-  return React5.createElement(HeadlessBookingPaymentSelectionStep, props);
+  return React8.createElement(HeadlessBookingPaymentSelectionStep, props);
 };
 export {
   BOOKING_FORM_DATA_RESERVED_KEY_VALUES,