@riverbankcms/sdk 0.98.0 → 0.99.0

package/dist/{chunk-DBRI3PQF.mjs → chunk-XO34WBBP.mjs}

@@ -1,5 +1,5 @@
 "use client";
-import { unwrapResponse, ApiRequestError, ApiEnvelopeError, extractApiEnvelopeErrorDetails } from './chunk-V2BYFSPW.mjs';
+import { unwrapResponse, ApiRequestError, ApiEnvelopeError, extractApiEnvelopeErrorDetails } from './chunk-YWTCCOSF.mjs';
 import { __commonJS, __export, __toESM } from './chunk-R7POPVJR.mjs';
 import * as React61 from 'react';
 import React61__default, { createContext, forwardRef, useContext, createElement, useRef, useMemo, useEffect, useState, useCallback, useImperativeHandle, useLayoutEffect, memo, createRef, Component as Component$1, useDebugValue, useId as useId$1, useSyncExternalStore, isValidElement, cloneElement, useReducer, startTransition } from 'react';
@@ -429,6 +429,13 @@ function assertNever3(value) {
 // ../core/src/booking-date-time.ts
 var DEFAULT_LOCALE = "en-US";
 var FALLBACK_TIMEZONE = "UTC";
+var DEFAULT_BOOKING_DATE_TIME_FORMAT = {
+  weekday: "short",
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit"
+};
 var LOCAL_DATE_PATTERN = /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/u;
 function isValidTimeZone(timeZone) {
   try {
@@ -631,13 +638,14 @@ function formatBookingTime(input, format2 = {
     format: format2
   });
 }
-function formatBookingDateTime(input, format2 = {
-  weekday: "short",
-  month: "short",
-  day: "numeric",
-  hour: "numeric",
-  minute: "2-digit"
-}) {
+function formatBookingDateTime(input, format2 = DEFAULT_BOOKING_DATE_TIME_FORMAT) {
+  if (format2 === DEFAULT_BOOKING_DATE_TIME_FORMAT) {
+    return `${formatBookingDate(input, {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    })}, ${formatBookingTime(input)}`;
+  }
   return formatBookingInstant(input.startsAt, {
     locale: input.locale,
     timeZone: input.timeZone,
@@ -37427,6 +37435,79 @@ var TokenResolver = class {
   }
 };
 
+// ../theme-core/src/interactive/generateBaseCSS.ts
+var FONT_WEIGHT_MAP = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+function generateBaseInteractiveCSS(options) {
+  const {
+    typography,
+    padding,
+    borderRadius,
+    includeTransition = true,
+    includeFlexCenter = false,
+    borderWidth
+  } = options;
+  const rules = [];
+  if (typography.fontWeight !== void 0) {
+    const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP[typography.fontWeight];
+    rules.push(`font-weight: ${weight};`);
+  }
+  if (typography.typography === "heading") {
+    rules.push(`font-family: var(--font-heading);`);
+    rules.push(`letter-spacing: var(--ls-heading);`);
+  } else if (typography.typography === "body") {
+    rules.push(`font-family: var(--font-body);`);
+  }
+  if (typography.italic) {
+    rules.push(`font-style: italic;`);
+  }
+  if (typography.textTransform && typography.textTransform !== "none") {
+    rules.push(`text-transform: ${typography.textTransform};`);
+  }
+  if (padding) {
+    if (borderWidth && borderWidth !== "0px") {
+      const paddingParts = padding.split(" ");
+      const verticalPadding = paddingParts[0] || "0.5rem";
+      const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
+      rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
+      rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
+      rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
+      rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
+    } else {
+      rules.push(`padding: ${padding};`);
+    }
+  }
+  if (borderRadius) {
+    rules.push(`border-radius: ${borderRadius};`);
+  }
+  if (includeTransition) {
+    rules.push(`transition: all 200ms ease;`);
+  }
+  if (includeFlexCenter) {
+    rules.push(`display: inline-flex;`);
+    rules.push(`align-items: center;`);
+    rules.push(`justify-content: center;`);
+    rules.push(`cursor: pointer;`);
+  }
+  return rules;
+}
+function generateInteractiveChildInheritanceCSS(selector) {
+  return `
+${selector} * {
+  font-family: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+}
+`;
+}
+
 // ../theme-core/src/buttons/effects/presets/background.ts
 var darkenBackgroundEffect = {
   id: "darken-background",
@@ -38908,7 +38989,9 @@ function resolveAliasSource(enabled) {
 function variantChunks(variant, global, themeSizes, themeId, tokens, theme) {
   const out = [];
   const variantId = parseButtonVariantIdForCss(variant.id);
-  out.push(variantBaseRule(variant, variantId, global, themeId, tokens, theme));
+  const selector = `:where([data-theme-scope="${themeId}"]) ${themeButtonSelector(variantId)}`;
+  out.push(variantBaseRule(variant, selector, global, tokens, theme));
+  out.push({ raw: generateInteractiveChildInheritanceCSS(selector) });
   const hoverBg = variantHoverBackgroundRule(variant, variantId, global, themeId, tokens);
   if (hoverBg) out.push(hoverBg);
   out.push(variantFocusVisibleRule(variantId, themeId));
@@ -38925,8 +39008,7 @@ function parseButtonVariantIdForCss(value) {
   }
   return variantId;
 }
-function variantBaseRule(variant, variantId, global, themeId, tokens, theme) {
-  const selector = `:where([data-theme-scope="${themeId}"]) ${themeButtonSelector(variantId)}`;
+function variantBaseRule(variant, selector, global, tokens, theme) {
   const decls = [];
   decls.push(["font-weight", String(global.fontWeight)]);
   decls.push(["font-family", resolveFontFamily(global)]);
@@ -39559,15 +39641,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: [
       {
@@ -40150,6 +40233,20 @@ function generateDefaultCardSystem(theme) {
   };
 }
 
+// ../theme-core/src/status/contextualColors.ts
+var STATUS_MUTED_COLOR_VAR = "--rb-status-muted-color";
+var DEFAULT_STATUS_MUTED_COLOR = "rgb(var(--tb-mutedText))";
+var SURFACE_MUTED_STATUS_COLOR = "color-mix(in oklab, currentColor, transparent 18%)";
+function statusMutedColorValue() {
+  return `var(${STATUS_MUTED_COLOR_VAR}, ${DEFAULT_STATUS_MUTED_COLOR})`;
+}
+function statusMutedColorDeclaration() {
+  return `color: ${statusMutedColorValue()};`;
+}
+function contextualMutedStatusColorDeclaration(value) {
+  return `${STATUS_MUTED_COLOR_VAR}: ${value}`;
+}
+
 // ../theme-core/src/cards/generateCardCss.ts
 var PER_CORNER_RADIUS_MAP = {
   square: "0",
@@ -40223,6 +40320,7 @@ function generateVariantCSS(variant, themeId, tokens, theme) {
   if (variant.foregroundToken) {
     rules.push(`color: ${tokens.getColor(variant.foregroundToken)}`);
   }
+  rules.push(contextualMutedStatusColorDeclaration(SURFACE_MUTED_STATUS_COLOR));
   if (variant.accentEdge) {
     const side = ACCENT_EDGE_SIDE_MAP[variant.accentEdge.edge];
     const width = ACCENT_EDGE_WIDTH_MAP[variant.accentEdge.width];
@@ -40475,7 +40573,7 @@ var LABEL_FONT_SIZE_MAP = {
   base: "1rem"
   // 16px
 };
-var FONT_WEIGHT_MAP = {
+var FONT_WEIGHT_MAP2 = {
   regular: "400",
   medium: "500",
   semibold: "600",
@@ -75290,14 +75388,27 @@ function BookingFormSSR({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `booking-form-ssr ${className ?? ""}`.trim(),
+      className: `rb-reg-surface booking-form-ssr ${display.state === "missing" ? "" : "ab-shell "}${className ?? ""}`.trim(),
       ...getIslandRootProps("booking-form", blockId),
+      "aria-busy": display.state === "missing" ? void 0 : true,
+      "aria-label": display.state === "missing" ? void 0 : "Loading booking form",
+      role: display.state === "missing" ? void 0 : "status",
       children: [
         /* @__PURE__ */ jsx(IslandPropsScript, { value: islandProps }),
-        /* @__PURE__ */ jsx("div", { className: "booking-form-ssr__summary", children: display.state === "missing" ? /* @__PURE__ */ jsx("p", { className: "booking-form-ssr__error", children: display.message }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("strong", { children: display.submitLabel }),
-          display.successMessage ? /* @__PURE__ */ jsx("p", { className: "booking-form-ssr__success", children: display.successMessage }) : null
-        ] }) }),
+        display.state === "missing" ? /* @__PURE__ */ jsx("div", { className: "alert alert-error", role: "alert", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: display.message }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "rb-sr-only", children: "Loading booking form..." }),
+          /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("div", { className: "rb-reg-summary", children: /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+              /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--md" }),
+              /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--sm" })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+              /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--lg" }),
+              /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--xs" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "rb-wizard-actions", children: /* @__PURE__ */ jsx("div", { className: "ab-shell-button", children: display.submitLabel }) })
+          ] })
+        ] }),
         children
       ]
     }
@@ -77855,20 +77966,38 @@ function EventRegistrationShell({
     "div",
     {
       id: EVENT_REGISTRATION_ANCHOR_ID,
-      className: "er-container er-registration-shell",
+      className: "rb-reg-surface er-container er-registration-shell",
       "aria-busy": "true",
       role: "status",
       children: /* @__PURE__ */ jsxs("div", { className: "er-payment-layout er-payment-layout--no-sidebar", children: [
         /* @__PURE__ */ jsxs("div", { className: "er-payment-layout-main", children: [
-          /* @__PURE__ */ jsx("div", { className: "er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx("ol", { className: "er-steps", children: display.stepLabels.map((label, index2) => {
+          /* @__PURE__ */ jsx("div", { className: "rb-steps-nav er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx("ol", { className: "rb-steps er-steps", children: display.stepLabels.map((label, index2) => {
             const isActive2 = index2 === 0;
-            return /* @__PURE__ */ jsxs("li", { className: "er-step", children: [
-              /* @__PURE__ */ jsx("span", { className: cx("er-step-circle", isActive2 && "er-step-circle--active"), children: index2 + 1 }),
-              /* @__PURE__ */ jsx("span", { className: cx("er-step-label", isActive2 && "er-step-label--active"), children: label }),
-              index2 < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx("span", { className: "er-step-connector" }) : null
+            return /* @__PURE__ */ jsxs("li", { className: "rb-step er-step", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cx(
+                    "rb-step-circle er-step-circle",
+                    isActive2 && "rb-step-circle--active er-step-circle--active"
+                  ),
+                  children: index2 + 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cx(
+                    "rb-step-label er-step-label",
+                    isActive2 && "rb-step-label--active er-step-label--active"
+                  ),
+                  children: label
+                }
+              ),
+              index2 < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx("span", { className: "rb-step-connector er-step-connector" }) : null
             ] }, label);
           }) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+          /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "er-registration-shell__eyebrow", children: "Registration" }),
               /* @__PURE__ */ jsx("h3", { className: "er-title er-registration-shell__title", children: display.titleText }),
@@ -77876,20 +78005,20 @@ function EventRegistrationShell({
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "er-event-grid er-registration-shell__cards", "aria-hidden": "true", children: [
               /* @__PURE__ */ jsxs("div", { className: "er-event-card er-registration-shell__card", children: [
-                /* @__PURE__ */ jsx("div", { className: "er-registration-shell__line er-registration-shell__line--lg" }),
-                /* @__PURE__ */ jsx("div", { className: "er-registration-shell__line er-registration-shell__line--sm" })
+                /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--lg er-registration-shell__line er-registration-shell__line--lg" }),
+                /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--sm er-registration-shell__line er-registration-shell__line--sm" })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "er-event-card er-registration-shell__card", children: [
-                /* @__PURE__ */ jsx("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
-                /* @__PURE__ */ jsx("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
+                /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
+                /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
               ] })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "er-payment-layout-footer", children: /* @__PURE__ */ jsxs("div", { className: "er-summary-bar er-registration-shell__summary", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsxs("div", { className: "er-summary-bar-info", children: [
-            /* @__PURE__ */ jsx("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
-            /* @__PURE__ */ jsx("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
+            /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
+            /* @__PURE__ */ jsx("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "er-registration-shell__button-placeholder", children: display.summaryButtonText })
         ] }) })
@@ -77905,6 +78034,7 @@ function FeedbackMessage({
   tone,
   children,
   className,
+  id,
   title,
   titleClassName,
   bodyClassName,
@@ -77916,6 +78046,7 @@ function FeedbackMessage({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       className,
       "data-feedback-tone": tone,
       role,
@@ -80127,7 +80258,7 @@ function generateInputCss({
   const labelSelector = `${rootSelector} .form-label`;
   const labelRules = [];
   labelRules.push(`color: ${rgbColorValue(inputSystem.label.textColorToken)}`);
-  labelRules.push(`font-weight: ${FONT_WEIGHT_MAP[inputSystem.label.fontWeight]}`);
+  labelRules.push(`font-weight: ${FONT_WEIGHT_MAP2[inputSystem.label.fontWeight]}`);
   labelRules.push(`font-size: ${LABEL_FONT_SIZE_MAP[inputSystem.label.fontSize]}`);
   if (inputSystem.label.textTransform && inputSystem.label.textTransform !== "none") {
     labelRules.push(`text-transform: ${inputSystem.label.textTransform}`);
@@ -80368,67 +80499,6 @@ function generateDefaultInputSystem(theme) {
   };
 }
 
-// ../theme-core/src/interactive/generateBaseCSS.ts
-var FONT_WEIGHT_MAP2 = {
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
-function generateBaseInteractiveCSS(options) {
-  const {
-    typography,
-    padding,
-    borderRadius,
-    includeTransition = true,
-    includeFlexCenter = false,
-    borderWidth
-  } = options;
-  const rules = [];
-  if (typography.fontWeight !== void 0) {
-    const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP2[typography.fontWeight];
-    rules.push(`font-weight: ${weight};`);
-  }
-  if (typography.typography === "heading") {
-    rules.push(`font-family: var(--font-heading);`);
-    rules.push(`letter-spacing: var(--ls-heading);`);
-  } else if (typography.typography === "body") {
-    rules.push(`font-family: var(--font-body);`);
-  }
-  if (typography.italic) {
-    rules.push(`font-style: italic;`);
-  }
-  if (typography.textTransform && typography.textTransform !== "none") {
-    rules.push(`text-transform: ${typography.textTransform};`);
-  }
-  if (padding) {
-    if (borderWidth && borderWidth !== "0px") {
-      const paddingParts = padding.split(" ");
-      const verticalPadding = paddingParts[0] || "0.5rem";
-      const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
-      rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
-      rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
-      rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
-      rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
-    } else {
-      rules.push(`padding: ${padding};`);
-    }
-  }
-  if (borderRadius) {
-    rules.push(`border-radius: ${borderRadius};`);
-  }
-  if (includeTransition) {
-    rules.push(`transition: all 200ms ease;`);
-  }
-  if (includeFlexCenter) {
-    rules.push(`display: inline-flex;`);
-    rules.push(`align-items: center;`);
-    rules.push(`justify-content: center;`);
-    rules.push(`cursor: pointer;`);
-  }
-  return rules;
-}
-
 // ../theme-core/src/navigation/generateNavLinkCSS.ts
 function generateNavLinkCSS(options) {
   const { themeId, tokens, theme, style: style2, className } = options;
@@ -80515,14 +80585,7 @@ ${activeSelector} {
 }
 `);
   }
-  cssChunks.push(`
-${selector} * {
-  font-family: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-}
-`);
+  cssChunks.push(generateInteractiveChildInheritanceCSS(selector));
   return cssChunks.join("");
 }
 function buildTextContrastShadow(input) {
@@ -81819,7 +81882,7 @@ ${root} .status-error { color: rgb(var(--tb-destructive)); }
 ${root} .status-success { color: rgb(var(--tb-success)); }
 ${root} .status-warning { color: rgb(var(--tb-warning)); }
 ${root} .status-info { color: rgb(var(--tb-info)); }
-${root} .status-muted { color: rgb(var(--tb-mutedText)); }`);
+${root} .status-muted { ${statusMutedColorDeclaration()} }`);
   cssBlocks.push(`/* Alert containers */
 ${root} .alert {
   padding: 1rem;
@@ -82135,6 +82198,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);
 }
 `;
 }
@@ -82267,25 +82358,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);
 }
 `;
 }
@@ -82576,6 +82682,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);
 }
 `;
 }
@@ -83838,6 +83973,8 @@ var MemoBlockSection = React61.memo(
           occurrenceContext: dataContext?.occurrenceContext ?? null,
           entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
           contentEntry: dataContext?.contentEntry ?? null,
+          pageSurface: dataContext?.pageSurface ?? null,
+          subject: dataContext?.subject ?? null,
           supabaseUrl: dataContext?.supabaseUrl,
           imageResolveContext: resolvedImageResolveContext,
           blockId: block.id ?? null,
@@ -83966,6 +84103,8 @@ var MemoBlockSection = React61.memo(
         occurrenceContext: dataContext?.occurrenceContext ?? null,
         entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
         contentEntry: dataContext?.contentEntry ?? null,
+        pageSurface: dataContext?.pageSurface ?? null,
+        subject: dataContext?.subject ?? null,
         supabaseUrl: dataContext?.supabaseUrl,
         imageResolveContext: resolvedImageResolveContext,
         blockId: block.id ?? null,
@@ -83993,7 +84132,9 @@ var MemoBlockSection = React61.memo(
             // Occurrence and content entry context for template pages
             occurrenceContext: dataContext?.occurrenceContext ?? null,
             entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
-            contentEntry: dataContext?.contentEntry ?? null
+            contentEntry: dataContext?.contentEntry ?? null,
+            pageSurface: dataContext?.pageSurface ?? null,
+            subject: dataContext?.subject ?? null
           }
         };
         const blockBindings = block.bindings;
@@ -87390,13 +87531,36 @@ var containerResponsiveThemeCss = `/*
  */
 
 /* =============================================================================
- * Shared: Registration Terminal State Icons
- * Used by event-registration and course-registration blocks.
+ * Shared: Registration Surface (issue 1174)
  *
- * Layout rules only \u2014 block-specific colors are defined in each block's CSS
- * via scoped \`.rb-state-icon--{variant}\` rules.
+ * Wizard-surface primitives shared by the event-registration,
+ * course-registration and appointment-booking blocks: surface container,
+ * selectable option cards, step indicator, wizard actions row, on-surface
+ * text ramp, layout stacks, summary box and skeleton shell lines.
+ *
+ * Uses:
+ * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks
+ * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
+ * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;
+ *   canonical name list in blocks/registrationSurfaceVars.ts)
+ *
+ * Defaults intentionally match the event-registration (issue 1089) values; blocks
+ * that need to preserve a different look override in their own block CSS,
+ * which is imported after this file (cascade order is the override contract \u2014
+ * all selectors here are zero-specificity \`:where()\`).
+ *
+ * Layout-only \`.rb-state-icon\` rules (formerly registration-shared.css) live
+ * here too; block CSS provides the \`.rb-state-icon--{variant}\` colors.
+ *
+ * Naming: component-like primitives follow the existing bare \`rb-\` shared
+ * precedent (\`.rb-state-icon\`, \`.rb-tile\`): \`.rb-option-card\`, \`.rb-step-*\`,
+ * \`.rb-wizard-actions\`, \`.rb-on-surface\`, \`.rb-shell-*\`. Container/layout
+ * pieces that would otherwise collide with the global \`.rb-*\` utility layer
+ * are namespaced \`rb-reg-*\` (\`.rb-reg-surface\`, \`.rb-reg-stack\`, ...). All of
+ * them are scoped to the three registration blocks either way.
  * ============================================================================= */
 
+/* Terminal state icon (layout only \u2014 colors are per-block) */
 :where(.theme-scope) .rb-state-icon {
   width: 4rem;
   height: 4rem;
@@ -87412,6 +87576,273 @@ var containerResponsiveThemeCss = `/*
   height: 2rem;
 }
 
+/* Surface container */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  padding: clamp(1rem, 2vw, 1.5rem);
+  background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  transition: border-color var(--rb-block-transition, 150ms) ease;
+  width: 100%;
+  max-width: 800px;
+  margin-inline: 0;
+}
+
+/* Selectable option card */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-option-bg, transparent);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--rb-block-transition, 150ms) ease,
+              background-color var(--rb-block-transition, 150ms) ease,
+              box-shadow var(--rb-block-transition, 150ms) ease;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:hover:not(:disabled):not([aria-disabled="true"]) {
+  border-color: var(--rb-reg-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
+  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:focus-visible {
+  outline: 2px solid var(--rb-reg-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--selected {
+  border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
+  background-color: var(--rb-reg-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.08));
+  box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled:hover {
+  border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  box-shadow: none;
+}
+
+/* Check indicator */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--rb-reg-check-text, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+/* Step indicator */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps-nav {
+  margin-bottom: 1.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--rb-reg-step-inactive, rgb(var(--tb-mutedText, 100 116 139)));
+  color: var(--rb-reg-step-text, rgb(var(--tb-primaryForeground, 255 255 255)));
+  transition: background-color var(--rb-block-transition, 150ms) ease;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--active {
+  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--completed {
+  background: var(--rb-reg-step-completed, rgb(var(--tb-success, 22 163 74)));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-check {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-connector {
+  width: 2rem;
+  height: 2px;
+  background: var(--rb-reg-step-connector, rgba(var(--tb-border, 226 232 240), 0.5));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
+  font-size: 0.75rem;
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  display: none;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label--active {
+  font-weight: 500;
+}
+
+@container rb-site (min-width: 640px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
+    display: inline;
+  }
+}
+}
+
+/* Wizard actions row */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+/* When there's only one action (no back button), push it to the right */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions > :only-child {
+  margin-inline-start: auto;
+}
+
+/* On-surface text ramp */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface {
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--muted {
+  color: var(--rb-reg-on-surface-muted, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.7));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--subtle {
+  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--faint {
+  color: var(--rb-reg-on-surface-faint, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.5));
+}
+
+/* Layout stacks */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack--sm {
+  gap: 0.75rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row--between {
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+/* Summary box */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-summary {
+  padding: 1rem;
+  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);
+  border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));
+  background: var(--rb-reg-summary-bg, rgba(var(--tb-muted, 241 245 249), 0.42));
+}
+
+/* Skeleton shell lines */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line {
+  height: 0.75rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    90deg,
+    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22)),
+    rgba(var(--tb-primary, 17 24 39), 0.12),
+    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22))
+  );
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--lg {
+  width: min(26rem, 82%);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--md {
+  width: min(19rem, 68%);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--sm {
+  width: min(14rem, 52%);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--xs {
+  width: min(10rem, 42%);
+}
+
+/* Skeleton block (rectangular placeholder, pulses) */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22));
+  animation: rb-reg-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes rb-reg-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
+    animation: none;
+  }
+}
+
 /* =============================================================================
  * Block: Event Registration (pilot #76)
  * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
@@ -87435,18 +87866,9 @@ var containerResponsiveThemeCss = `/*
   --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
 }
 
-/* Container */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-container {
-  border-radius: var(--rb-block-radius);
-  border: 1px solid var(--er-border);
-  padding: clamp(1rem, 2vw, 1.5rem);
-  background: rgb(var(--tb-surface));
-  color: var(--er-on-surface);
-  transition: border-color var(--rb-block-transition) ease;
-  width: 100%;
-  max-width: 800px;
-  margin-inline: 0;
-}
+/* Container: styled by the shared .rb-reg-surface (registration-surface.css);
+   .er-container remains in markup as a hook and for the overlay/embedded
+   variants below. */
 
 /* SSR shell / required-island fallback */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell {
@@ -87491,32 +87913,8 @@ var containerResponsiveThemeCss = `/*
   padding: 1rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line {
-  height: 0.75rem;
-  border-radius: 9999px;
-  background: linear-gradient(
-    90deg,
-    var(--er-shell-line),
-    rgba(var(--tb-primary), 0.12),
-    var(--er-shell-line)
-  );
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--lg {
-  width: min(26rem, 82%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--md {
-  width: min(19rem, 68%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--sm {
-  width: min(14rem, 52%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--xs {
-  width: min(10rem, 42%);
-}
+/* Shell skeleton lines: styled by the shared .rb-shell-line family
+   (registration-surface.css); legacy classes remain in markup as hooks. */
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__summary {
   align-items: center;
@@ -87593,13 +87991,8 @@ var containerResponsiveThemeCss = `/*
   color: var(--er-capacity-soldout-text);
 }
 
-/* Selected event summary */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-event-summary {
-  padding: 1rem;
-  border-radius: calc(var(--rb-block-radius) * 0.75);
-  border: 1px solid var(--er-border);
-  background: var(--er-surface-muted);
-}
+/* Selected event summary: superseded by the shared .rb-reg-summary
+   (registration-surface.css); no markup emitted .er-event-summary anymore. */
 
 /* Ticket counter */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-ticket-counter-group {
@@ -87805,7 +88198,7 @@ var containerResponsiveThemeCss = `/*
   opacity: 1;
 }
 
-/* State icon color variants (layout from registration-shared.css) */
+/* State icon color variants (layout from registration-surface.css) */
 :where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--success {
   background: var(--er-success-bg);
   color: var(--er-success-text);
@@ -87961,16 +88354,8 @@ var containerResponsiveThemeCss = `/*
   text-align: center;
 }
 
-/* Layout */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-stack--sm {
-  gap: 0.75rem;
-}
+/* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row
+   (registration-surface.css); legacy classes remain in markup as hooks. */
 
 /* Event/date selection rows */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
@@ -87979,17 +88364,6 @@ var containerResponsiveThemeCss = `/*
   gap: 0;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-row {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-row--between {
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
 :where(.theme-scope) :where([data-block="event-registration"]) .er-center {
   text-align: center;
   padding: 2rem;
@@ -88001,18 +88375,8 @@ var containerResponsiveThemeCss = `/*
   margin-bottom: 1rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  margin-top: 1.5rem;
-}
-
-/* When there's only one button (no back), push to the right */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-actions > :only-child {
-  margin-inline-start: auto;
-}
+/* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);
+   .er-actions remains in markup as a hook. */
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-button-with-spinner {
   display: inline-flex;
@@ -88264,23 +88628,8 @@ var containerResponsiveThemeCss = `/*
   color: var(--er-on-surface-faint);
 }
 
-/* Checkmark indicator */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-check {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background: var(--er-check-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-check svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--er-check-text);
-}
+/* Checkmark indicator: styled by the shared .rb-option-check
+   (registration-surface.css); .er-check remains in markup as a hook. */
 
 /* Payment summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-summary {
@@ -88328,78 +88677,12 @@ var containerResponsiveThemeCss = `/*
   margin-bottom: 1.5rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: var(--er-step-inactive);
-  color: var(--er-step-text);
-  transition: background-color var(--rb-block-transition) ease;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--active {
-  background: var(--er-step-active);
-  color: var(--er-step-text-active);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--completed {
-  background: var(--er-step-completed);
-  color: var(--er-step-text-active);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-check {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector {
-  width: 2rem;
-  height: 2px;
-  background: var(--er-step-connector);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector--completed {
-  background: var(--er-step-connector);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
-  font-size: 0.75rem;
-  color: var(--er-on-surface);
-  display: none;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label--active {
-  font-weight: 500;
-}
-
-@container rb-site (min-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
-    display: inline;
-  }
-}
-}
+/* Step indicator internals: styled by the shared .rb-steps / .rb-step-*
+   family (registration-surface.css) via the --rb-reg-step-* mappings in the
+   event-registration var generator; er-* classes remain in markup as hooks.
+   Note: .er-steps-nav above is intentionally retained \u2014 its source position
+   keeps the wizard's 1.5rem step margin winning over the SSR shell's
+   1.25rem .er-registration-shell__steps override. */
 
 /* Sticky order summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
@@ -90632,69 +90915,34 @@ var containerResponsiveThemeCss = `/*
 
 /* =============================================================================
  * Block: Appointment Booking
+ *
+ * Structural styling comes from the shared registration-surface layer
+ * (registration-surface.css): surface container, option cards + check,
+ * step indicator, wizard actions, on-surface text ramp, stacks, summary box
+ * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped
+ * from this block's --ab-* Tier 3 vars by its var generator.
+ *
+ * Inputs use the theme-generated form-* classes; feedback boxes use the
+ * theme-generated alert / alert-{tone} classes. Only genuinely
+ * booking-specific rules live here.
+ *
  * Uses:
- * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)
- * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
+ * - Tier 1 vars: --tb-* (from theme palette)
  * - Tier 3 vars: --ab-* (from appointment-booking var generator)
  * =============================================================================
  */
 
-/* Main container */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-container {
-  width: 100%;
-}
-
-/* Stack layout utilities */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--sm {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--xs {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Row layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row--between {
-  justify-content: space-between;
-}
-
-/* Grid layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-grid {
-  display: grid;
-  gap: 0.75rem;
-}
-
-/* Center layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
-  text-align: center;
-  padding: 2rem;
-}
-
-/* Typography */
+/* Typography helpers */
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
@@ -90705,211 +90953,111 @@ var containerResponsiveThemeCss = `/*
   font-size: 0.75rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--muted {
-  opacity: var(--ab-text-muted-opacity, 0.6);
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--faint {
-  opacity: var(--ab-text-faint-opacity, 0.4);
-}
-
-/* Selection cards (service, resource, time slot) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card {
-  position: relative;
-  padding: 1rem;
-  border: 2px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  text-align: left;
-  background: transparent;
-  cursor: pointer;
-  transition: border-color var(--rb-block-transition, 150ms) ease, background-color var(--rb-block-transition, 150ms) ease;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card:hover {
-  border-color: var(--ab-card-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card--selected {
-  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
-  background-color: var(--ab-card-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.05));
-}
-
-/* Checkmark indicator */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background-color: var(--ab-check-bg, rgb(var(--tb-primary, 17 24 39)));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--ab-check-text, rgb(var(--tb-background, 255 255 255)));
-}
-
-/* Info box (service summary) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-info-box {
-  padding: 1rem;
-  border: 1px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
+/* Centered state (loading / terminal panels) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
+  text-align: center;
+  padding: 2rem;
 }
 
-/* Alert states */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert {
-  padding: 0.75rem 1rem;
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  font-size: 0.875rem;
+/* Terminal state title (below the state icon) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-terminal-title {
+  margin: 0.75rem 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 700;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--success {
-  background-color: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
+/* State icon color variants (layout from registration-surface.css) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--success {
+  background: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
   color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--error {
-  background-color: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--error {
+  background: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
   color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--warning {
-  background-color: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
-  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--info {
-  background-color: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--info {
+  background: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
   color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
 }
 
-/* Form elements */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--warning {
+  background: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
+  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-required {
-  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
-  margin-left: 0.125rem;
+/* Payment option summary rows (label/value lines inside an option card) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-option-rows {
+  display: grid;
+  gap: 0.125rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-input-radius, var(--rb-input-radius, var(--radius-control, var(--rb-block-radius, 1rem))));
-  background: transparent;
-  font-size: 0.875rem;
-  transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;
+/* Date/time pill grids (selection pills extend .rb-option-card) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input:focus,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select:focus,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea:focus {
-  outline: none;
-  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
-  box-shadow: 0 0 0 3px var(--ab-input-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-date-pill {
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.5rem 0.875rem;
+  min-width: 4.25rem;
+  text-align: center;
 }
 
-/* Buttons */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn {
-  display: inline-flex;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-time-pill {
   align-items: center;
   justify-content: center;
-  padding: 0.5rem 1.5rem;
-  border-radius: var(--ab-button-radius, var(--rb-button-radius, var(--rb-block-radius, 1rem)));
+  padding: 0.5rem 0.875rem;
+  min-width: 5.5rem;
   font-size: 0.875rem;
   font-weight: 500;
-  cursor: pointer;
-  transition: background-color var(--rb-block-transition, 150ms) ease, border-color var(--rb-block-transition, 150ms) ease;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary {
-  flex: 1;
-  background-color: var(--ab-btn-primary-bg, rgb(var(--tb-primary, 17 24 39)));
-  color: var(--ab-btn-primary-text, rgb(var(--tb-primaryForeground, 255 255 255)));
-  border: none;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary:hover:not(:disabled) {
-  background-color: var(--ab-btn-primary-hover, rgba(var(--tb-primary, 17 24 39), 0.9));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary {
-  background: transparent;
-  border: 1px solid var(--ab-btn-secondary-border, rgb(var(--tb-border, 226 232 240)));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary:hover:not(:disabled) {
-  background-color: var(--ab-btn-secondary-hover, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link {
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-decoration: underline;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link:hover {
-  text-decoration: none;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Actions row */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-actions {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
+  text-align: center;
 }
 
-/* Skeleton loading */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-skeleton {
-  height: 2.5rem;
-  width: 100%;
-  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  animation: ab-pulse 1.5s ease-in-out infinite;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-caption {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-transform: uppercase;
+  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
 }
 
-@keyframes ab-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.2;
 }
 
-/* Field wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell {
+  min-height: 18rem;
 }
 
-/* Altcha wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
-  margin-top: 1rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell-button {
+  display: inline-flex;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);
+  background: rgb(var(--tb-primary, 17 24 39));
+  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
 }
 
-/* Link button (inline text link) */
+/* Inline text-link button (e.g. "Load more dates") */
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
   display: inline;
-  margin-left: 0.5rem;
   color: rgb(var(--tb-primary, 17 24 39));
   background: none;
   border: none;
@@ -90923,91 +91071,9 @@ var containerResponsiveThemeCss = `/*
   text-decoration: none;
 }
 
-/* =============================================================================
- * Form Block (fb-*)
- *
- * Uses:
- * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive
- * - Tier 2 vars: --rb-block-radius
- * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*
- *
- * Note: Form input styling (form-input, form-select, etc.) is handled by
- * the input CSS generator. These styles are for form container/state only.
- * ============================================================================= */
-
-/* Form container */
-:where(.theme-scope) :where([data-block="form"]) .fb-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Two-column row (opt-in per field via schema layout) */
-:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
-  gap: 1rem;
-}
-
-/* Field wrapper */
-:where(.theme-scope) :where([data-block="form"]) .fb-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-/* Fieldset (for radio groups) */
-:where(.theme-scope) :where([data-block="form"]) .fb-fieldset {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-/* Inline field (checkbox, radio with label) */
-:where(.theme-scope) :where([data-block="form"]) .fb-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Success state */
-:where(.theme-scope) :where([data-block="form"]) .fb-success {
-  background-color: var(--fb-success-bg);
-  color: var(--fb-success-text);
-  border: 1px solid var(--fb-success-border);
-  border-radius: var(--rb-block-radius);
-  padding: 1rem;
-  font-size: 0.875rem;
-}
-
-/* Error banner */
-:where(.theme-scope) :where([data-block="form"]) .fb-error {
-  background-color: var(--fb-error-bg);
-  color: var(--fb-error-text);
-  border: 1px solid var(--fb-error-border);
-  border-radius: var(--rb-block-radius);
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
-}
-
-/* Empty state (no form data) */
-:where(.theme-scope) :where([data-block="form"]) .fb-empty {
-  background-color: var(--fb-empty-bg);
-  color: var(--fb-empty-text);
-  border: 1px dashed var(--fb-empty-border);
-  border-radius: var(--rb-block-radius);
-  padding: 1.5rem;
-  font-size: 0.875rem;
-  text-align: center;
-}
-
-/* Form actions (submit button container) */
-:where(.theme-scope) :where([data-block="form"]) .fb-actions {
-  margin-top: 0.5rem;
+/* Altcha wrapper */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
+  margin-top: 1rem;
 }
 
 /* =============================================================================
@@ -91265,6 +91331,93 @@ var containerResponsiveThemeCss = `/*
   color: var(--section-text-color, rgb(var(--tb-text)));
 }
 
+/* =============================================================================
+ * Form Block (fb-*)
+ *
+ * Uses:
+ * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive
+ * - Tier 2 vars: --rb-block-radius
+ * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*
+ *
+ * Note: Form input styling (form-input, form-select, etc.) is handled by
+ * the input CSS generator. These styles are for form container/state only.
+ * ============================================================================= */
+
+/* Form container */
+:where(.theme-scope) :where([data-block="form"]) .fb-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Two-column row (opt-in per field via schema layout) */
+:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+  gap: 1rem;
+}
+
+/* Field wrapper */
+:where(.theme-scope) :where([data-block="form"]) .fb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Fieldset (for radio groups) */
+:where(.theme-scope) :where([data-block="form"]) .fb-fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Inline field (checkbox, radio with label) */
+:where(.theme-scope) :where([data-block="form"]) .fb-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Success state */
+:where(.theme-scope) :where([data-block="form"]) .fb-success {
+  background-color: var(--fb-success-bg);
+  color: var(--fb-success-text);
+  border: 1px solid var(--fb-success-border);
+  border-radius: var(--rb-block-radius);
+  padding: 1rem;
+  font-size: 0.875rem;
+}
+
+/* Error banner */
+:where(.theme-scope) :where([data-block="form"]) .fb-error {
+  background-color: var(--fb-error-bg);
+  color: var(--fb-error-text);
+  border: 1px solid var(--fb-error-border);
+  border-radius: var(--rb-block-radius);
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Empty state (no form data) */
+:where(.theme-scope) :where([data-block="form"]) .fb-empty {
+  background-color: var(--fb-empty-bg);
+  color: var(--fb-empty-text);
+  border: 1px dashed var(--fb-empty-border);
+  border-radius: var(--rb-block-radius);
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+/* Form actions (submit button container) */
+:where(.theme-scope) :where([data-block="form"]) .fb-actions {
+  margin-top: 0.5rem;
+}
+
 /* =============================================================================
  * Block-Level Override Utilities
  *
@@ -92881,14 +93034,11 @@ var containerResponsiveThemeCss = `/*
   --cr-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);
 }
 
-/* Container */
+/* Container: base styling comes from the shared .rb-reg-surface
+   (registration-surface.css); these overrides preserve course
+   registration's pre-extraction look (fixed padding, centered). */
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-container {
-  border-radius: var(--rb-block-radius);
-  border: 1px solid var(--cr-border);
   padding: 1.5rem;
-  background: rgb(var(--tb-surface));
-  color: var(--cr-on-surface);
-  max-width: 50rem; /* 800px */
   margin-inline: auto;
 }
 
@@ -93565,7 +93715,7 @@ var containerResponsiveThemeCss = `/*
   padding: 2rem 1rem;
 }
 
-/* State icon color variants (layout from registration-shared.css) */
+/* State icon color variants (layout from registration-surface.css) */
 :where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--success {
   background: var(--cr-success-bg);
   color: var(--cr-success-text);
@@ -128242,25 +128392,87 @@ function AltchaWidget({
 function isSpamProtectionEnabled() {
   return process.env.NEXT_PUBLIC_SPAM_PROTECTION_ENABLED === "true";
 }
+function CheckIcon2({ className, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(
+    "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__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+    }
+  );
+}
+function StateIcon({ variant, children }) {
+  return /* @__PURE__ */ jsx("div", { className: `rb-state-icon rb-state-icon--${variant}`, "aria-hidden": "true", children });
+}
+function joinClasses7(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+function TerminalPanel({
+  tone,
+  title,
+  titleAs: Title = "h3",
+  body,
+  secondaryBody,
+  icon: icon2,
+  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__ */ jsxs(
+    "div",
+    {
+      className,
+      "data-terminal-panel": true,
+      "data-terminal-tone": tone,
+      role: resolvedRole,
+      "aria-live": resolvedLive === "off" ? void 0 : resolvedLive,
+      children: [
+        icon2 ? /* @__PURE__ */ jsx("div", { className: joinClasses7(iconClassName), "data-terminal-icon": true, children: icon2 }) : null,
+        /* @__PURE__ */ jsx(Title, { className: joinClasses7(titleClassName), "data-terminal-title": true, children: title }),
+        body ? /* @__PURE__ */ jsx("div", { className: joinClasses7(bodyClassName), "data-terminal-body": true, children: body }) : null,
+        actions ? /* @__PURE__ */ jsx("div", { className: joinClasses7(actionsClassName), "data-terminal-actions": true, children: actions }) : null,
+        secondaryBody ? /* @__PURE__ */ jsx("div", { className: joinClasses7(secondaryBodyClassName), "data-terminal-secondary-body": true, children: secondaryBody }) : null
+      ]
+    }
+  );
+}
 var SuccessMessage = ({
   message: message2,
   resourceName,
   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(CheckIcon2, { strokeWidth: 3 }) }),
+      body: /* @__PURE__ */ jsx("p", { className: "ab-text", children: message2 }),
+      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: message2 }),
-        resourceName ? /* @__PURE__ */ jsxs("p", { className: "ab-text ab-text--muted", children: [
-          "Practitioner: ",
-          resourceName
-        ] }) : null
-      ] })
+      live: "polite"
     }
   );
 };
@@ -128324,9 +128536,30 @@ function formatDate2(dateStr) {
     }
   });
 }
-function formatTime2(isoString) {
-  return formatBookingInstant(isoString, {
+function formatDatePillParts(dateStr) {
+  const instant = `${dateStr}T00:00:00.000Z`;
+  const partFormat = (format2) => formatBookingInstant(instant, {
     timeZone: DEFAULT_BOOKING_TIME_ZONE,
+    format: format2
+  });
+  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 formatTime2(isoString, timeZone = DEFAULT_BOOKING_TIME_ZONE) {
+  return formatBookingInstant(isoString, {
+    timeZone,
     format: {
       hour: "numeric",
       minute: "2-digit",
@@ -129456,6 +129689,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,
@@ -130752,63 +131003,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 = React61__default.useId();
+  const labelId = `${generatedId}-date-label`;
+  const gridRef = React61__default.useRef(null);
+  const previousCountRef = React61__default.useRef(dateOptions.length);
+  React61__default.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: (e3) => onChange(e3.target.value),
-        required,
-        className: "ab-select",
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "Choose a date..." }),
-          dateOptions.map((date) => /* @__PURE__ */ jsx("option", { value: date, children: formatDate2(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": formatDate2(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(
@@ -130817,7 +131101,7 @@ var DatePicker = ({
         type: "button",
         onClick: onLoadMore,
         className: "ab-link",
-        children: "Load more dates \u2192"
+        children: "More dates \u2192"
       }
     )
   ] });
@@ -130827,29 +131111,125 @@ 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 = React61__default.useId();
+  const labelId = `${generatedId}-time-label`;
+  const groupRef = React61__default.useRef(null);
+  const hadSlotsRef = React61__default.useRef(false);
+  React61__default.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: (e3) => onChange(e3.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: formatTime2(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": formatTime2(slot.startAt, timezone),
+              className: `rb-option-card ab-time-pill${isSelected ? " rb-option-card--selected" : ""}`,
+              children: formatTimeShort(slot.startAt, timezone)
+            },
+            slot.key
+          );
+        })
       }
     )
   ] });
 };
+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 base2 = buildClassChannels(slot, classPrefix, emitSharedClasses);
+    if (!modifier) return base2.join(" ");
+    const modified = buildClassChannels(
+      `${slot}--${modifier}`,
+      classPrefix,
+      emitSharedClasses
+    );
+    return [...base2, ...modified].join(" ");
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Registration progress", className: slotClass("steps-nav"), children: /* @__PURE__ */ jsx("ol", { className: slotClass("steps"), children: Array.from({ length: totalSteps }, (_2, i2) => {
+    const stepNum = i2 + 1;
+    const isActive2 = stepNum === currentStep;
+    const isComplete = stepNum < currentStep;
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: slotClass("step"),
+        "aria-current": isActive2 ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: slotClass(
+                "step-circle",
+                isActive2 ? "active" : isComplete ? "completed" : void 0
+              ),
+              children: isComplete ? /* @__PURE__ */ jsx(CheckIcon2, { className: slotClass("step-check"), strokeWidth: 3 }) : stepNum
+            }
+          ),
+          stepLabels?.[i2] && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: slotClass(
+                "step-label",
+                isActive2 ? "active" : void 0
+              ),
+              children: stepLabels[i2]
+            }
+          ),
+          stepNum < totalSteps && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: slotClass(
+                "step-connector",
+                isComplete ? "completed" : void 0
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      },
+      i2
+    );
+  }) }) });
+}
 var BLOCK_DISCOUNT_CODE_DISCLOSURE_CLASSES = {
   "course-registration": {
     root: "cr-discount",
@@ -131004,17 +131384,9 @@ function FieldValidationMessage({
     }
   );
 }
-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" });
 }
@@ -131023,6 +131395,7 @@ function HeadlessBookingDefaultForm({
   onSubmit
 }) {
   const currentStep = booking.currentStep;
+  const errorSummaryId = React61__default.useId();
   const currentStepIndex = currentStep?.visibleIndex ?? 0;
   const isFirstStep = currentStepIndex === 0;
   const isLastStep = currentStepIndex === booking.steps.length - 1;
@@ -131038,16 +131411,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",
         {
@@ -131065,11 +131452,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,
@@ -131090,44 +131473,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, index2) => {
-    const isActive2 = index2 === currentIndex;
-    const isCompleted = index2 < currentIndex;
-    const isLast = index2 === 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
-                  ${isActive2 ? "step-circle-active" : ""}
-                  ${isCompleted ? "step-circle-complete" : ""}
-                `,
-            children: isCompleted ? "\u2713" : index2 + 1
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `
-                  rb-caption rb-hidden rb-sm-inline
-                  ${isCompleted || !isActive2 ? "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;
@@ -131135,7 +131483,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":
@@ -131154,32 +131508,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
         );
@@ -131187,41 +131542,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
           );
@@ -131231,27 +131588,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,
       {
@@ -131260,6 +131620,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
       }
@@ -131267,16 +131629,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
   ] });
@@ -131287,21 +131650,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,
@@ -131327,47 +131690,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,
@@ -131376,37 +131739,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({
@@ -131416,15 +131777,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({
@@ -131696,7 +132057,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,
       " ",
@@ -131708,7 +132069,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",
@@ -131734,43 +132095,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, message2]) => /* @__PURE__ */ jsx("p", { className: "rb-caption", children: message2 }, 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, message2]) => /* @__PURE__ */ jsx("p", { className: "rb-caption", children: message2 }, 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(CheckIcon2, {}) });
 }
 
 // ../blocks/src/system/runtime/shared/utils/checkoutUrls.ts
@@ -131913,24 +132257,6 @@ function getStepNumber2(step, wizardSteps) {
   const index2 = wizardSteps.indexOf(step);
   return index2 >= 0 ? index2 + 1 : 1;
 }
-function CheckIcon2({ className, strokeWidth = 2 }) {
-  return /* @__PURE__ */ jsx(
-    "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__ */ jsx("path", { d: "M5 13l4 4L19 7" })
-    }
-  );
-}
 function ClockIcon2({ className, strokeWidth = 2 }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -131972,7 +132298,7 @@ var alignmentClasses = {
   end: "rb-justify-end",
   between: "rb-justify-between"
 };
-function joinClasses7(...parts) {
+function joinClasses8(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 function ActionRow({
@@ -131983,7 +132309,7 @@ function ActionRow({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: joinClasses7("rb-flex rb-flex-wrap rb-items-center rb-gap-2", alignmentClasses[align], className),
+      className: joinClasses8("rb-flex rb-flex-wrap rb-items-center rb-gap-2", alignmentClasses[align], className),
       "data-action-row": true,
       children
     }
@@ -131999,9 +132325,6 @@ function LoggedInAsUser({ email, onLogout, classPrefix }) {
     ] })
   ] });
 }
-function StateIcon({ variant, children }) {
-  return /* @__PURE__ */ jsx("div", { className: `rb-state-icon rb-state-icon--${variant}`, "aria-hidden": "true", children });
-}
 function MembershipHero({
   membershipName,
   classPrefix,
@@ -132199,89 +132522,51 @@ function TabBarFragment({
     }
   );
 }
-function joinClasses8(...parts) {
-  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
-}
-function TerminalPanel({
-  tone,
-  title,
-  titleAs: Title = "h3",
-  body,
-  secondaryBody,
-  icon: icon2,
-  actions,
-  className,
-  titleClassName,
-  bodyClassName,
-  secondaryBodyClassName,
-  iconClassName,
-  actionsClassName,
-  role,
-  live
-}) {
-  const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
-  const resolvedLive = live ?? (resolvedRole === "alert" ? "assertive" : "polite");
+function SelectableOptionCard(props2) {
+  const {
+    baseClassName,
+    selectedClassName,
+    disabledClassName,
+    iconClassName,
+    labelClassName,
+    detailClassName,
+    icon: icon2,
+    label,
+    detail,
+    selected,
+    disabled,
+    tooltip,
+    extraClassNames = [],
+    onClick,
+    renderCheck,
+    renderDisabledTooltip
+  } = props2;
+  const isSelected = selected && !disabled;
+  const className = [
+    baseClassName,
+    isSelected && selectedClassName,
+    disabled && disabledClassName,
+    ...extraClassNames
+  ].filter(Boolean).join(" ");
+  const showNativeTitle = Boolean(tooltip) && !(disabled && renderDisabledTooltip);
   return /* @__PURE__ */ jsxs(
-    "div",
+    "button",
     {
+      type: "button",
       className,
-      "data-terminal-panel": true,
-      "data-terminal-tone": tone,
-      role: resolvedRole,
-      "aria-live": resolvedLive === "off" ? void 0 : resolvedLive,
+      onClick: disabled ? void 0 : onClick,
+      title: showNativeTitle ? tooltip : void 0,
+      "aria-disabled": disabled || void 0,
       children: [
-        icon2 ? /* @__PURE__ */ jsx("div", { className: joinClasses8(iconClassName), "data-terminal-icon": true, children: icon2 }) : null,
-        /* @__PURE__ */ jsx(Title, { className: joinClasses8(titleClassName), "data-terminal-title": true, children: title }),
-        body ? /* @__PURE__ */ jsx("div", { className: joinClasses8(bodyClassName), "data-terminal-body": true, children: body }) : null,
-        actions ? /* @__PURE__ */ jsx("div", { className: joinClasses8(actionsClassName), "data-terminal-actions": true, children: actions }) : null,
-        secondaryBody ? /* @__PURE__ */ jsx("div", { className: joinClasses8(secondaryBodyClassName), "data-terminal-secondary-body": true, children: secondaryBody }) : null
+        /* @__PURE__ */ jsx("div", { className: iconClassName, children: icon2 }),
+        /* @__PURE__ */ jsx("div", { className: labelClassName, children: label }),
+        /* @__PURE__ */ jsx("div", { className: detailClassName, children: detail }),
+        isSelected && renderCheck?.(),
+        disabled && tooltip && renderDisabledTooltip?.(tooltip)
       ]
     }
   );
 }
-function StepIndicator({
-  currentStep,
-  totalSteps,
-  stepLabels,
-  classPrefix
-}) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Registration progress", className: `${classPrefix}-steps-nav`, children: /* @__PURE__ */ jsx("ol", { className: `${classPrefix}-steps`, children: Array.from({ length: totalSteps }, (_2, i2) => {
-    const stepNum = i2 + 1;
-    const isActive2 = stepNum === currentStep;
-    const isComplete = stepNum < currentStep;
-    return /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: `${classPrefix}-step`,
-        "aria-current": isActive2 ? "step" : void 0,
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${classPrefix}-step-circle${isActive2 ? ` ${classPrefix}-step-circle--active` : ""}${isComplete ? ` ${classPrefix}-step-circle--completed` : ""}`,
-              children: isComplete ? /* @__PURE__ */ jsx(CheckIcon2, { className: `${classPrefix}-step-check`, strokeWidth: 3 }) : stepNum
-            }
-          ),
-          stepLabels?.[i2] && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `${classPrefix}-step-label${isActive2 ? ` ${classPrefix}-step-label--active` : ""}`,
-              children: stepLabels[i2]
-            }
-          ),
-          stepNum < totalSteps && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${classPrefix}-step-connector${isComplete ? ` ${classPrefix}-step-connector--completed` : ""}`,
-              "aria-hidden": "true"
-            }
-          )
-        ]
-      },
-      i2
-    );
-  }) }) });
-}
 var PORTAL_REBOOK_QUERY_PARAM = "rebook";
 var PORTAL_REBOOK_QUERY_VALUE = "1";
 var REBOOK_COMPLETION_MODE_VERIFIED_CHECKOUT = "verified_checkout";
@@ -132306,6 +132591,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
@@ -132403,7 +132696,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." })
       }
@@ -132425,28 +132718,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 })
   ] });
 };
@@ -132455,7 +132740,7 @@ function buildBookingFormNodeClientProps(props2) {
   return buildBookingFormInteractiveIslandProps(props2);
 }
 function StepIndicator2(props2) {
-  return /* @__PURE__ */ jsx(StepIndicator, { ...props2, classPrefix: "er" });
+  return /* @__PURE__ */ jsx(StepIndicator, { ...props2, classPrefix: "er", emitSharedClasses: true });
 }
 
 // ../blocks/src/system/runtime/nodes/event-registration/registrationStateMachine.ts
@@ -133298,7 +133583,7 @@ var EventSelectionStep = ({
 }) => {
   const selectionMode = getEventSelectionMode(events2);
   const isDateSelection2 = selectionMode === "date";
-  return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
     /* @__PURE__ */ jsx("h3", { className: "er-title", children: isDateSelection2 ? "Choose a date" : "Select an event" }),
     /* @__PURE__ */ jsx("div", { className: "er-event-grid", children: events2.map((event) => {
       const isSelected = selectedEvent?.publicEventId === event.publicEventId;
@@ -133355,7 +133640,7 @@ function getEventAttendanceModeLabel(mode) {
 function TicketCounter(props2) {
   const { ticketsCount, maxAllowed, label, onTicketsChange } = props2;
   const minAllowed = props2.minAllowed ?? 1;
-  return /* @__PURE__ */ jsxs("div", { className: "er-row er-counter", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-row er-row er-counter", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -133580,7 +133865,7 @@ var TicketSelectionStep = ({
   });
   const eventAvailabilityLabel = !canJoinWaitlist && event?.availableSpots != null ? `${event.availableSpots} spots available` : null;
   if (deliveryMode === "hybrid" && !selectedAttendanceMode) {
-    return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
       /* @__PURE__ */ jsx("h3", { className: "er-title", children: "How will you attend?" }),
       /* @__PURE__ */ jsx(
         AttendanceModeTiles,
@@ -133594,12 +133879,12 @@ var TicketSelectionStep = ({
     ] });
   }
   if (isSoldOut && !canJoinWaitlist) {
-    return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
       /* @__PURE__ */ jsx("h3", { className: "er-title", children: "Sold Out" }),
       /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "Sorry you missed out! This event is fully booked." })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
     deliveryMode === "hybrid" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("h3", { className: "er-title", children: "How will you attend?" }),
       /* @__PURE__ */ jsx(
@@ -133793,7 +134078,7 @@ var AttendeeDetailsStep = ({
     messageId: emailErrorId
   });
   const showGuestSection = requireGuestDetails && ticketsCount > 1 && onGuestsChange;
-  return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
     /* @__PURE__ */ jsx("h3", { className: "er-title", children: "Your Information" }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "er-field", children: [
@@ -133887,7 +134172,7 @@ var AttendeeDetailsStep = ({
 var MembershipHero2 = ({
   membershipName
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: "er-stack", children: /* @__PURE__ */ jsxs("div", { className: "er-booking-mode-hero", children: [
+  return /* @__PURE__ */ jsx("div", { className: "rb-reg-stack er-stack", children: /* @__PURE__ */ jsxs("div", { className: "er-booking-mode-hero", children: [
     /* @__PURE__ */ jsx("div", { className: "er-booking-mode-hero-icon", children: /* @__PURE__ */ jsx(Sparkles, { size: 20, fill: "currentColor", "aria-hidden": "true" }) }),
     /* @__PURE__ */ jsxs("div", { className: "er-booking-mode-hero-content", children: [
       /* @__PURE__ */ jsxs("h3", { className: "er-booking-mode-hero-title", children: [
@@ -133898,51 +134183,6 @@ var MembershipHero2 = ({
     ] })
   ] }) });
 };
-function SelectableOptionCard(props2) {
-  const {
-    baseClassName,
-    selectedClassName,
-    disabledClassName,
-    iconClassName,
-    labelClassName,
-    detailClassName,
-    icon: icon2,
-    label,
-    detail,
-    selected,
-    disabled,
-    tooltip,
-    extraClassNames = [],
-    onClick,
-    renderCheck,
-    renderDisabledTooltip
-  } = props2;
-  const isSelected = selected && !disabled;
-  const className = [
-    baseClassName,
-    isSelected && selectedClassName,
-    disabled && disabledClassName,
-    ...extraClassNames
-  ].filter(Boolean).join(" ");
-  const showNativeTitle = Boolean(tooltip) && !(disabled && renderDisabledTooltip);
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      className,
-      onClick: disabled ? void 0 : onClick,
-      title: showNativeTitle ? tooltip : void 0,
-      "aria-disabled": disabled || void 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: iconClassName, children: icon2 }),
-        /* @__PURE__ */ jsx("div", { className: labelClassName, children: label }),
-        /* @__PURE__ */ jsx("div", { className: detailClassName, children: detail }),
-        isSelected && renderCheck?.(),
-        disabled && tooltip && renderDisabledTooltip?.(tooltip)
-      ]
-    }
-  );
-}
 
 // ../blocks/src/system/runtime/nodes/event-registration/eventPaymentOptions.ts
 var DEFAULT_EVENT_DIRECT_PAYMENT_OPTION = {
@@ -134024,7 +134264,7 @@ function resolveEventRegistrationDirectPaymentSelection(input) {
   };
 }
 function PaymentCheckIcon() {
-  return /* @__PURE__ */ jsx("div", { className: "er-check", children: /* @__PURE__ */ jsx(CheckIcon2, {}) });
+  return /* @__PURE__ */ jsx("div", { className: "rb-option-check er-check", children: /* @__PURE__ */ jsx(CheckIcon2, {}) });
 }
 function PaymentTile({
   icon: icon2,
@@ -134161,25 +134401,25 @@ var PaymentSelectionStep = ({
     getButtonText
   ]);
   if (eligibilityLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "er-stack", children: /* @__PURE__ */ jsxs("div", { className: "er-center", children: [
+    return /* @__PURE__ */ jsx("div", { className: "rb-reg-stack er-stack", children: /* @__PURE__ */ jsxs("div", { className: "er-center", children: [
       /* @__PURE__ */ jsx(SpinnerNode, { size: "lg", srLabel: "Checking payment options" }),
       /* @__PURE__ */ jsx("p", { className: "er-text--muted", children: "Checking payment options..." })
     ] }) });
   }
   if (eligibilityError) {
-    return /* @__PURE__ */ jsx("div", { className: "er-stack", children: /* @__PURE__ */ jsx("div", { className: "er-center", children: /* @__PURE__ */ jsx("p", { className: "er-text er-text--error", children: eligibilityError }) }) });
+    return /* @__PURE__ */ jsx("div", { className: "rb-reg-stack er-stack", children: /* @__PURE__ */ jsx("div", { className: "er-center", children: /* @__PURE__ */ jsx("p", { className: "er-text er-text--error", children: eligibilityError }) }) });
   }
   if (!eligibility) {
     const missing = [];
     if (!occurrenceId) missing.push("occurrenceId");
     if (!email) missing.push("email");
-    return /* @__PURE__ */ jsx("div", { className: "er-stack", children: /* @__PURE__ */ jsx("div", { className: "er-center", children: /* @__PURE__ */ jsxs("p", { className: "er-text er-text--error", children: [
+    return /* @__PURE__ */ jsx("div", { className: "rb-reg-stack er-stack", children: /* @__PURE__ */ jsx("div", { className: "er-center", children: /* @__PURE__ */ jsxs("p", { className: "er-text er-text--error", children: [
       "Unable to determine payment options",
       missing.length > 0 && ` (missing: ${missing.join(", ")})`
     ] }) }) });
   }
   if (eligibility.isFree) {
-    return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
       /* @__PURE__ */ jsx("h3", { className: "er-title", children: "Payment" }),
       /* @__PURE__ */ jsxs("div", { className: "er-payment-summary", children: [
         /* @__PURE__ */ jsx("p", { className: "er-text er-text--success", children: "This event is free!" }),
@@ -134193,13 +134433,13 @@ var PaymentSelectionStep = ({
   }
   if (!eligibility.eligible) {
     if (eligibility.isFull && !eligibility.canJoinWaitlist) {
-      return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
         /* @__PURE__ */ jsx("h3", { className: "er-title", children: "Sold Out" }),
         /* @__PURE__ */ jsx("div", { className: "er-center", children: /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "This event is fully booked and there is no waitlist available for this booking." }) })
       ] });
     }
     const shouldPromptLogin = !isAuthenticated && (eligibility.requiresAuthForPasses || eligibility.requiresAuthForMemberships);
-    return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
       /* @__PURE__ */ jsx("h3", { className: "er-title", children: shouldPromptLogin ? "Log In Required" : "Payment Required" }),
       /* @__PURE__ */ jsx("div", { className: "er-center", children: shouldPromptLogin ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("p", { className: "er-text er-text--muted", children: "Have a pass or membership? Log in to use it." }),
@@ -134225,7 +134465,7 @@ var PaymentSelectionStep = ({
     ] });
   }
   const isMultiTicket = areEntitlementsDisabledForTicketCount(ticketsCount);
-  return /* @__PURE__ */ jsxs("div", { className: "er-stack", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rb-reg-stack er-stack", children: [
     /* @__PURE__ */ jsx("h3", { className: "er-title", children: "Payment Options" }),
     /* @__PURE__ */ jsxs("div", { className: "er-payment-tiles", children: [
       canShowDirectPaymentOptions && /* @__PURE__ */ jsx(Fragment, { children: directPaymentOptions.map((option) => /* @__PURE__ */ jsx(
@@ -134600,7 +134840,7 @@ function EventRegistrationWizardActions(props2) {
       const ticketTypeSelectionBlocked = wizard.ticketTypeSelectionRequired && !wizard.hasValidTicketSelection;
       const isContinueDisabled = isWaitingForEligibility || isCheckingExistingRegistration || hasExistingRegistration || isSoldOutWithoutWaitlist || ticketTypeSelectionBlocked;
       const continueLabel = isCheckingExistingRegistration ? "Checking registration..." : hasExistingRegistration ? "Already registered" : isSoldOutWithoutWaitlist ? "Sold out" : ticketTypeSelectionBlocked ? "Choose a ticket" : "Continue";
-      return /* @__PURE__ */ jsxs("div", { className: "er-actions", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "rb-wizard-actions er-actions", children: [
         !wizard.hasPreSelectedContext && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => wizard.setStep("select-event"), className: "er-back-btn", children: "\u2190 Back" }),
         /* @__PURE__ */ jsx(
           "button",
@@ -134622,7 +134862,7 @@ function EventRegistrationWizardActions(props2) {
       const isSoldOut = !hasWaitlistClaim && wizard.eligibility?.isFull === true && wizard.eligibility.canJoinWaitlist !== true;
       const isContinueDisabled = isCheckingEligibility || isSoldOut;
       const continueLabel = isCheckingEligibility ? "Checking availability..." : getDetailsButtonText();
-      return /* @__PURE__ */ jsxs("div", { className: "er-actions", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "rb-wizard-actions er-actions", children: [
         /* @__PURE__ */ jsx("button", { type: "button", onClick: () => wizard.setStep(prevStepForDetails), className: "er-back-btn", children: "\u2190 Back" }),
         /* @__PURE__ */ jsx(
           "button",
@@ -134641,7 +134881,7 @@ function EventRegistrationWizardActions(props2) {
       const handlePaymentContinue = () => {
         void wizard.handlePaymentSelect();
       };
-      return /* @__PURE__ */ jsxs("div", { className: "er-actions", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "rb-wizard-actions er-actions", children: [
         /* @__PURE__ */ jsx("button", { type: "button", onClick: () => wizard.setStep("enter-details"), className: "er-back-btn", children: "\u2190 Back" }),
         status === "ready" && /* @__PURE__ */ jsx(
           "button",
@@ -136136,7 +136376,7 @@ function EventRegistrationWizard(props2) {
     description: wizard.waitlistClaim.loginMessage ?? "Log in to continue with your waitlist claim."
   } : EVENT_PORTAL_AUTH_COPY.membership;
   const showPortalAuthPrompt = waitlistClaimRequiresPortalLogin || wizard.step === "select-tickets" && wizard.portalAuthState !== "authenticated" && wizard.portalAuthState !== "checking" && hasPassOrMembershipProducts && summaryEventPricingType !== "free";
-  const renderRegistrationSurface = (variant) => /* @__PURE__ */ jsxs("div", { className: `er-container${variant === "overlay" ? " er-container--overlay" : ""}`, children: [
+  const renderRegistrationSurface = (variant) => /* @__PURE__ */ jsxs("div", { className: `rb-reg-surface er-container${variant === "overlay" ? " er-container--overlay" : ""}`, children: [
     isWizardStep && /* @__PURE__ */ jsxs("div", { className: "er-payment-layout er-payment-layout--no-sidebar", children: [
       /* @__PURE__ */ jsxs("div", { className: "er-payment-layout-main", children: [
         totalSteps > 1 && /* @__PURE__ */ jsx(StepIndicator2, { currentStep: currentStepNumber, totalSteps, stepLabels }),
@@ -137751,7 +137991,7 @@ function CourseRegistrationWizard(props2) {
       id: COURSE_REGISTRATION_ANCHOR_ID,
       className: `course-registration ${className || ""}`,
       "data-block": "course-registration",
-      children: /* @__PURE__ */ jsx("div", { className: "cr-container", children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: "rb-reg-surface cr-container", children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: `cr-layout${showSidebarLayout ? " cr-layout--with-sidebar" : ""}`,
@@ -145406,7 +145646,7 @@ function resolveStoragePathUrl(media2, options) {
     height: getNumber(media2.height)
   };
   try {
-    return resolveImageUrlWithContext(
+    return (options?.resolveImageUrl ?? resolveImageUrlWithContext)(
       mediaValue,
       {
         width: 320,
@@ -145447,7 +145687,7 @@ function resolveIdentifierUrl(media2, options) {
     height: getNumber(media2.height)
   };
   try {
-    return resolveImageUrlWithContext(
+    return (options?.resolveImageUrl ?? resolveImageUrlWithContext)(
       mediaValue,
       {
         width: 320,
@@ -164798,7 +165038,7 @@ function findDiffEnd(a2, b2, posA, posB) {
     posB -= size4;
   }
 }
-var Fragment54 = class _Fragment {
+var Fragment53 = class _Fragment {
   /**
   @internal
   */
@@ -165090,7 +165330,7 @@ var Fragment54 = class _Fragment {
     throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
   }
 };
-Fragment54.empty = new Fragment54([], 0);
+Fragment53.empty = new Fragment53([], 0);
 var found = { index: 0, offset: 0 };
 function retIndex(index2, offset4) {
   found.index = index2;
@@ -165315,7 +165555,7 @@ var Slice2 = class _Slice {
     let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
     if (typeof openStart != "number" || typeof openEnd != "number")
       throw new RangeError("Invalid input for Slice.fromJSON");
-    return new _Slice(Fragment54.fromJSON(schema, json.content), openStart, openEnd);
+    return new _Slice(Fragment53.fromJSON(schema, json.content), openStart, openEnd);
   }
   /**
   Create a slice from a fragment by taking the maximum possible
@@ -165330,7 +165570,7 @@ var Slice2 = class _Slice {
     return new _Slice(fragment, openStart, openEnd);
   }
 };
-Slice2.empty = new Slice2(Fragment54.empty, 0, 0);
+Slice2.empty = new Slice2(Fragment53.empty, 0, 0);
 function removeRange(content, from2, to) {
   let { index: index2, offset: offset4 } = content.findIndex(from2), child = content.maybeChild(index2);
   let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -165428,7 +165668,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
       addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment54(content);
+  return new Fragment53(content);
 }
 function replaceTwoWay($from, $to, depth) {
   let content = [];
@@ -165438,13 +165678,13 @@ function replaceTwoWay($from, $to, depth) {
     addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment54(content);
+  return new Fragment53(content);
 }
 function prepareSliceForReplace(slice2, $along) {
   let extra = $along.depth - slice2.openStart, parent = $along.node(extra);
   let node = parent.copy(slice2.content);
   for (let i2 = extra - 1; i2 >= 0; i2--)
-    node = $along.node(i2).copy(Fragment54.from(node));
+    node = $along.node(i2).copy(Fragment53.from(node));
   return {
     start: node.resolveNoCache(slice2.openStart + extra),
     end: node.resolveNoCache(node.content.size - slice2.openEnd - extra)
@@ -165783,7 +166023,7 @@ var Node2 = class _Node {
     this.type = type;
     this.attrs = attrs;
     this.marks = marks;
-    this.content = content || Fragment54.empty;
+    this.content = content || Fragment53.empty;
   }
   /**
   The array of this node's child nodes.
@@ -166088,7 +166328,7 @@ var Node2 = class _Node {
   can optionally pass `start` and `end` indices into the
   replacement fragment.
   */
-  canReplace(from2, to, replacement = Fragment54.empty, start = 0, end = replacement.childCount) {
+  canReplace(from2, to, replacement = Fragment53.empty, start = 0, end = replacement.childCount) {
     let one = this.contentMatchAt(from2).matchFragment(replacement, start, end);
     let two = one && one.matchFragment(this.content, to);
     if (!two || !two.validEnd)
@@ -166170,7 +166410,7 @@ var Node2 = class _Node {
         throw new RangeError("Invalid text node in JSON");
       return schema.text(json.text, marks);
     }
-    let content = Fragment54.fromJSON(schema, json.content);
+    let content = Fragment53.fromJSON(schema, json.content);
     let node = schema.nodeType(json.type).create(json.attrs, content, marks);
     node.type.checkAttrs(node.attrs);
     return node;
@@ -166312,7 +166552,7 @@ var ContentMatch = class _ContentMatch {
     function search(match2, types) {
       let finished = match2.matchFragment(after, startIndex);
       if (finished && (!toEnd || finished.validEnd))
-        return Fragment54.from(types.map((tp) => tp.createAndFill()));
+        return Fragment53.from(types.map((tp) => tp.createAndFill()));
       for (let i2 = 0; i2 < match2.next.length; i2++) {
         let { type, next } = match2.next[i2];
         if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -166764,7 +167004,7 @@ var NodeType = class _NodeType {
   create(attrs = null, content, marks) {
     if (this.isText)
       throw new Error("NodeType.create can't construct text nodes");
-    return new Node2(this, this.computeAttrs(attrs), Fragment54.from(content), Mark.setFrom(marks));
+    return new Node2(this, this.computeAttrs(attrs), Fragment53.from(content), Mark.setFrom(marks));
   }
   /**
   Like [`create`](https://prosemirror.net/docs/ref/#model.NodeType.create), but check the given content
@@ -166772,7 +167012,7 @@ var NodeType = class _NodeType {
   if it doesn't match.
   */
   createChecked(attrs = null, content, marks) {
-    content = Fragment54.from(content);
+    content = Fragment53.from(content);
     this.checkContent(content);
     return new Node2(this, this.computeAttrs(attrs), content, Mark.setFrom(marks));
   }
@@ -166786,7 +167026,7 @@ var NodeType = class _NodeType {
   */
   createAndFill(attrs = null, content, marks) {
     attrs = this.computeAttrs(attrs);
-    content = Fragment54.from(content);
+    content = Fragment53.from(content);
     if (content.size) {
       let before = this.contentMatch.fillBefore(content);
       if (!before)
@@ -166794,7 +167034,7 @@ var NodeType = class _NodeType {
       content = before.append(content);
     }
     let matched = this.contentMatch.matchFragment(content);
-    let after = matched && matched.fillBefore(Fragment54.empty, true);
+    let after = matched && matched.fillBefore(Fragment53.empty, true);
     if (!after)
       return null;
     return new Node2(this, attrs, content.append(after), Mark.setFrom(marks));
@@ -167258,7 +167498,7 @@ var NodeContext = class {
     if (!this.match) {
       if (!this.type)
         return [];
-      let fill = this.type.contentMatch.fillBefore(Fragment54.from(node));
+      let fill = this.type.contentMatch.fillBefore(Fragment53.from(node));
       if (fill) {
         this.match = this.type.contentMatch.matchFragment(fill);
       } else {
@@ -167284,9 +167524,9 @@ var NodeContext = class {
           this.content[this.content.length - 1] = text2.withText(text2.text.slice(0, text2.text.length - m2[0].length));
       }
     }
-    let content = Fragment54.from(this.content);
+    let content = Fragment53.from(this.content);
     if (!openEnd && this.match)
-      content = content.append(this.match.fillBefore(Fragment54.empty, true));
+      content = content.append(this.match.fillBefore(Fragment53.empty, true));
     return this.type ? this.type.create(this.attrs, content, this.marks) : content;
   }
   inlineContext(node) {
@@ -168302,7 +168542,7 @@ function mapFragment(fragment, f2, parent) {
       child = f2(child, parent, i2);
     mapped.push(child);
   }
-  return Fragment54.fromArray(mapped);
+  return Fragment53.fromArray(mapped);
 }
 var AddMarkStep = class _AddMarkStep extends Step {
   /**
@@ -168419,7 +168659,7 @@ var AddNodeMarkStep = class _AddNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
-    return StepResult.fromReplace(doc3, this.pos, this.pos + 1, new Slice2(Fragment54.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc3, this.pos, this.pos + 1, new Slice2(Fragment53.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc3) {
     let node = doc3.nodeAt(this.pos);
@@ -168465,7 +168705,7 @@ var RemoveNodeMarkStep = class _RemoveNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
-    return StepResult.fromReplace(doc3, this.pos, this.pos + 1, new Slice2(Fragment54.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc3, this.pos, this.pos + 1, new Slice2(Fragment53.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc3) {
     let node = doc3.nodeAt(this.pos);
@@ -168730,7 +168970,7 @@ function clearIncompatible(tr2, pos, parentType, match2 = parentType.contentMatc
         let m2, newline = /\r?\n|\r/g, slice2;
         while (m2 = newline.exec(child.text)) {
           if (!slice2)
-            slice2 = new Slice2(Fragment54.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
+            slice2 = new Slice2(Fragment53.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
           replSteps.push(new ReplaceStep(cur + m2.index, cur + m2.index + m2[0].length, slice2));
         }
       }
@@ -168738,7 +168978,7 @@ function clearIncompatible(tr2, pos, parentType, match2 = parentType.contentMatc
     cur = end;
   }
   if (!match2.validEnd) {
-    let fill = match2.fillBefore(Fragment54.empty, true);
+    let fill = match2.fillBefore(Fragment53.empty, true);
     tr2.replace(cur, cur, new Slice2(fill, 0, 0));
   }
   for (let i2 = replSteps.length - 1; i2 >= 0; i2--)
@@ -168764,20 +169004,20 @@ function lift(tr2, range, target) {
   let { $from, $to, depth } = range;
   let gapStart = $from.before(depth + 1), gapEnd = $to.after(depth + 1);
   let start = gapStart, end = gapEnd;
-  let before = Fragment54.empty, openStart = 0;
+  let before = Fragment53.empty, openStart = 0;
   for (let d2 = depth, splitting = false; d2 > target; d2--)
     if (splitting || $from.index(d2) > 0) {
       splitting = true;
-      before = Fragment54.from($from.node(d2).copy(before));
+      before = Fragment53.from($from.node(d2).copy(before));
       openStart++;
     } else {
       start--;
     }
-  let after = Fragment54.empty, openEnd = 0;
+  let after = Fragment53.empty, openEnd = 0;
   for (let d2 = depth, splitting = false; d2 > target; d2--)
     if (splitting || $to.after(d2 + 1) < $to.end(d2)) {
       splitting = true;
-      after = Fragment54.from($to.node(d2).copy(after));
+      after = Fragment53.from($to.node(d2).copy(after));
       openEnd++;
     } else {
       end++;
@@ -168817,14 +169057,14 @@ function findWrappingInside(range, type) {
   return inside;
 }
 function wrap(tr2, range, wrappers) {
-  let content = Fragment54.empty;
+  let content = Fragment53.empty;
   for (let i2 = wrappers.length - 1; i2 >= 0; i2--) {
     if (content.size) {
       let match2 = wrappers[i2].type.contentMatch.matchFragment(content);
       if (!match2 || !match2.validEnd)
         throw new RangeError("Wrapper type given to Transform.wrap does not form valid content of its parent wrapper");
     }
-    content = Fragment54.from(wrappers[i2].type.create(wrappers[i2].attrs, content));
+    content = Fragment53.from(wrappers[i2].type.create(wrappers[i2].attrs, content));
   }
   let start = range.start, end = range.end;
   tr2.step(new ReplaceAroundStep(start, end, start, end, new Slice2(content, 0, 0), wrappers.length, true));
@@ -168849,7 +169089,7 @@ function setBlockType(tr2, from2, to, type, attrs) {
       clearIncompatible(tr2, tr2.mapping.slice(mapFrom).map(pos, 1), type, void 0, convertNewlines === null);
       let mapping = tr2.mapping.slice(mapFrom);
       let startM = mapping.map(pos, 1), endM = mapping.map(pos + node.nodeSize, 1);
-      tr2.step(new ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new Slice2(Fragment54.from(type.create(attrsHere, null, node.marks)), 0, 0), 1, true));
+      tr2.step(new ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new Slice2(Fragment53.from(type.create(attrsHere, null, node.marks)), 0, 0), 1, true));
       if (convertNewlines === true)
         replaceNewlines(tr2, node, pos, mapFrom);
       return false;
@@ -168890,7 +169130,7 @@ function setNodeMarkup(tr2, pos, type, attrs, marks) {
     return tr2.replaceWith(pos, pos + node.nodeSize, newNode);
   if (!type.validContent(node.content))
     throw new RangeError("Invalid content for node type " + type.name);
-  tr2.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice2(Fragment54.from(newNode), 0, 0), 1, true));
+  tr2.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice2(Fragment53.from(newNode), 0, 0), 1, true));
 }
 function canSplit(doc3, pos, depth = 1, typesAfter) {
   let $pos = doc3.resolve(pos), base2 = $pos.depth - depth;
@@ -168914,11 +169154,11 @@ function canSplit(doc3, pos, depth = 1, typesAfter) {
   return $pos.node(base2).canReplaceWith(index2, index2, baseType ? baseType.type : $pos.node(base2 + 1).type);
 }
 function split(tr2, pos, depth = 1, typesAfter) {
-  let $pos = tr2.doc.resolve(pos), before = Fragment54.empty, after = Fragment54.empty;
+  let $pos = tr2.doc.resolve(pos), before = Fragment53.empty, after = Fragment53.empty;
   for (let d2 = $pos.depth, e3 = $pos.depth - depth, i2 = depth - 1; d2 > e3; d2--, i2--) {
-    before = Fragment54.from($pos.node(d2).copy(before));
+    before = Fragment53.from($pos.node(d2).copy(before));
     let typeAfter = typesAfter && typesAfter[i2];
-    after = Fragment54.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d2).copy(after));
+    after = Fragment53.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d2).copy(after));
   }
   tr2.step(new ReplaceStep(pos, pos, new Slice2(before.append(after), depth, depth), true));
 }
@@ -169057,7 +169297,7 @@ var Fitter = class {
     this.$to = $to;
     this.unplaced = unplaced;
     this.frontier = [];
-    this.placed = Fragment54.empty;
+    this.placed = Fragment53.empty;
     for (let i2 = 0; i2 <= $from.depth; i2++) {
       let node = $from.node(i2);
       this.frontier.push({
@@ -169066,7 +169306,7 @@ var Fitter = class {
       });
     }
     for (let i2 = $from.depth; i2 > 0; i2--)
-      this.placed = Fragment54.from($from.node(i2).copy(this.placed));
+      this.placed = Fragment53.from($from.node(i2).copy(this.placed));
   }
   get depth() {
     return this.frontier.length - 1;
@@ -169123,7 +169363,7 @@ var Fitter = class {
         let first2 = fragment.firstChild;
         for (let frontierDepth = this.depth; frontierDepth >= 0; frontierDepth--) {
           let { type, match: match2 } = this.frontier[frontierDepth], wrap2, inject = null;
-          if (pass == 1 && (first2 ? match2.matchType(first2.type) || (inject = match2.fillBefore(Fragment54.from(first2), false)) : parent && type.compatibleContent(parent.type)))
+          if (pass == 1 && (first2 ? match2.matchType(first2.type) || (inject = match2.fillBefore(Fragment53.from(first2), false)) : parent && type.compatibleContent(parent.type)))
             return { sliceDepth, frontierDepth, parent, inject };
           else if (pass == 2 && first2 && (wrap2 = match2.findWrapping(first2.type)))
             return { sliceDepth, frontierDepth, parent, wrap: wrap2 };
@@ -169183,7 +169423,7 @@ var Fitter = class {
     let toEnd = taken == fragment.childCount;
     if (!toEnd)
       openEndCount = -1;
-    this.placed = addToFragment(this.placed, frontierDepth, Fragment54.from(add2));
+    this.placed = addToFragment(this.placed, frontierDepth, Fragment53.from(add2));
     this.frontier[frontierDepth].match = match2;
     if (toEnd && openEndCount < 0 && parent && parent.type == this.frontier[this.depth].type && this.frontier.length > 1)
       this.closeFrontierNode();
@@ -169239,12 +169479,12 @@ var Fitter = class {
   openFrontierNode(type, attrs = null, content) {
     let top = this.frontier[this.depth];
     top.match = top.match.matchType(type);
-    this.placed = addToFragment(this.placed, this.depth, Fragment54.from(type.create(attrs, content)));
+    this.placed = addToFragment(this.placed, this.depth, Fragment53.from(type.create(attrs, content)));
     this.frontier.push({ type, match: type.contentMatch });
   }
   closeFrontierNode() {
     let open = this.frontier.pop();
-    let add2 = open.match.fillBefore(Fragment54.empty, true);
+    let add2 = open.match.fillBefore(Fragment53.empty, true);
     if (add2.childCount)
       this.placed = addToFragment(this.placed, this.frontier.length, add2);
   }
@@ -169273,7 +169513,7 @@ function closeNodeStart(node, openStart, openEnd) {
   if (openStart > 0) {
     frag = node.type.contentMatch.fillBefore(frag).append(frag);
     if (openEnd <= 0)
-      frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment54.empty, true));
+      frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment53.empty, true));
   }
   return node.copy(frag);
 }
@@ -169365,7 +169605,7 @@ function closeFragment(fragment, depth, oldOpen, newOpen, parent) {
   if (depth > newOpen) {
     let match2 = parent.contentMatchAt(0);
     let start = match2.fillBefore(fragment).append(fragment);
-    fragment = start.append(match2.matchFragment(start).fillBefore(Fragment54.empty, true));
+    fragment = start.append(match2.matchFragment(start).fillBefore(Fragment53.empty, true));
   }
   return fragment;
 }
@@ -169375,7 +169615,7 @@ function replaceRangeWith(tr2, from2, to, node) {
     if (point != null)
       from2 = to = point;
   }
-  tr2.replaceRange(from2, to, new Slice2(Fragment54.from(node), 0, 0));
+  tr2.replaceRange(from2, to, new Slice2(Fragment53.from(node), 0, 0));
 }
 function deleteRange(tr2, from2, to) {
   let $from = tr2.doc.resolve(from2), $to = tr2.doc.resolve(to);
@@ -169423,7 +169663,7 @@ var AttrStep = class _AttrStep extends Step {
       attrs[name] = node.attrs[name];
     attrs[this.attr] = this.value;
     let updated = node.type.create(attrs, null, node.marks);
-    return StepResult.fromReplace(doc3, this.pos, this.pos + 1, new Slice2(Fragment54.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc3, this.pos, this.pos + 1, new Slice2(Fragment53.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   getMap() {
     return StepMap.empty;
@@ -169558,7 +169798,7 @@ var Transform = class {
   fragment, node, or array of nodes.
   */
   replaceWith(from2, to, content) {
-    return this.replace(from2, to, new Slice2(Fragment54.from(content), 0, 0));
+    return this.replace(from2, to, new Slice2(Fragment53.from(content), 0, 0));
   }
   /**
   Delete the content between the given positions.
@@ -170060,7 +170300,7 @@ var NodeSelection = class _NodeSelection extends Selection {
     return new _NodeSelection($pos);
   }
   content() {
-    return new Slice2(Fragment54.from(this.node), 0, 0);
+    return new Slice2(Fragment53.from(this.node), 0, 0);
   }
   eq(other) {
     return other instanceof _NodeSelection && other.anchor == this.anchor;
@@ -171882,7 +172122,7 @@ var NodeViewDesc = class _NodeViewDesc extends ViewDesc {
         }
       }
       if (!rule2.contentElement)
-        rule2.getContent = () => Fragment54.empty;
+        rule2.getContent = () => Fragment53.empty;
     }
     return rule2;
   }
@@ -173194,7 +173434,7 @@ function parseFromClipboard(view, text2, html, plainText, $context) {
       text2 = f2(text2, inCode || plainText, view);
     });
     if (inCode) {
-      slice2 = new Slice2(Fragment54.from(view.state.schema.text(text2.replace(/\r\n?/g, "\n"))), 0, 0);
+      slice2 = new Slice2(Fragment53.from(view.state.schema.text(text2.replace(/\r\n?/g, "\n"))), 0, 0);
       view.someProp("transformPasted", (f2) => {
         slice2 = f2(slice2, view, true);
       });
@@ -173288,13 +173528,13 @@ function normalizeSiblings(fragment, $context) {
       }
     });
     if (result)
-      return Fragment54.from(result);
+      return Fragment53.from(result);
   }
   return fragment;
 }
 function withWrappers(node, wrap2, from2 = 0) {
   for (let i2 = wrap2.length - 1; i2 >= from2; i2--)
-    node = wrap2[i2].create(null, Fragment54.from(node));
+    node = wrap2[i2].create(null, Fragment53.from(node));
   return node;
 }
 function addToSibling(wrap2, lastWrap, node, sibling, depth) {
@@ -173304,14 +173544,14 @@ function addToSibling(wrap2, lastWrap, node, sibling, depth) {
       return sibling.copy(sibling.content.replaceChild(sibling.childCount - 1, inner));
     let match2 = sibling.contentMatchAt(sibling.childCount);
     if (match2.matchType(depth == wrap2.length - 1 ? node.type : wrap2[depth + 1]))
-      return sibling.copy(sibling.content.append(Fragment54.from(withWrappers(node, wrap2, depth + 1))));
+      return sibling.copy(sibling.content.append(Fragment53.from(withWrappers(node, wrap2, depth + 1))));
   }
 }
 function closeRight(node, depth) {
   if (depth == 0)
     return node;
   let fragment = node.content.replaceChild(node.childCount - 1, closeRight(node.lastChild, depth - 1));
-  let fill = node.contentMatchAt(node.childCount).fillBefore(Fragment54.empty, true);
+  let fill = node.contentMatchAt(node.childCount).fillBefore(Fragment53.empty, true);
   return node.copy(fragment.append(fill));
 }
 function closeRange(fragment, side, from2, to, depth, openEnd) {
@@ -173321,7 +173561,7 @@ function closeRange(fragment, side, from2, to, depth, openEnd) {
   if (depth < to - 1)
     inner = closeRange(inner, side, from2, to, depth + 1, openEnd);
   if (depth >= from2)
-    inner = side < 0 ? node.contentMatchAt(0).fillBefore(inner, openEnd <= depth).append(inner) : inner.append(node.contentMatchAt(node.childCount).fillBefore(Fragment54.empty, true));
+    inner = side < 0 ? node.contentMatchAt(0).fillBefore(inner, openEnd <= depth).append(inner) : inner.append(node.contentMatchAt(node.childCount).fillBefore(Fragment53.empty, true));
   return fragment.replaceChild(side < 0 ? 0 : fragment.childCount - 1, node.copy(inner));
 }
 function closeSlice(slice2, openStart, openEnd) {
@@ -173391,7 +173631,7 @@ function addContext(slice2, context) {
     let type = schema.nodes[array[i2]];
     if (!type || type.hasRequiredAttrs())
       break;
-    content = Fragment54.from(type.create(array[i2 + 1], content));
+    content = Fragment53.from(type.create(array[i2 + 1], content));
     openStart++;
     openEnd++;
   }
@@ -175250,7 +175490,7 @@ function isMarkChange(cur, prev) {
   let updated = [];
   for (let i2 = 0; i2 < prev.childCount; i2++)
     updated.push(update(prev.child(i2)));
-  if (Fragment54.from(updated).eq(cur))
+  if (Fragment53.from(updated).eq(cur))
     return { mark, type };
 }
 function looksLikeBackspace(old, start, end, $newStart, $newEnd) {
@@ -176400,10 +176640,10 @@ function deleteBarrier(state, $cut, dispatch, dir) {
   let canDelAfter = !isolated && $cut.parent.canReplace($cut.index(), $cut.index() + 1);
   if (canDelAfter && (conn = (match2 = before.contentMatchAt(before.childCount)).findWrapping(after.type)) && match2.matchType(conn[0] || after.type).validEnd) {
     if (dispatch) {
-      let end = $cut.pos + after.nodeSize, wrap2 = Fragment54.empty;
+      let end = $cut.pos + after.nodeSize, wrap2 = Fragment53.empty;
       for (let i2 = conn.length - 1; i2 >= 0; i2--)
-        wrap2 = Fragment54.from(conn[i2].create(null, wrap2));
-      wrap2 = Fragment54.from(before.copy(wrap2));
+        wrap2 = Fragment53.from(conn[i2].create(null, wrap2));
+      wrap2 = Fragment53.from(before.copy(wrap2));
       let tr2 = state.tr.step(new ReplaceAroundStep($cut.pos - 1, end, $cut.pos, end, new Slice2(wrap2, 1, 0), conn.length, true));
       let $joinAt = tr2.doc.resolve(end + 2 * conn.length);
       if ($joinAt.nodeAfter && $joinAt.nodeAfter.type == before.type && canJoin(tr2.doc, $joinAt.pos))
@@ -176432,9 +176672,9 @@ function deleteBarrier(state, $cut, dispatch, dir) {
       afterDepth++;
     if (at.canReplace(at.childCount, at.childCount, afterText.content)) {
       if (dispatch) {
-        let end = Fragment54.empty;
+        let end = Fragment53.empty;
         for (let i2 = wrap2.length - 1; i2 >= 0; i2--)
-          end = Fragment54.from(wrap2[i2].copy(end));
+          end = Fragment53.from(wrap2[i2].copy(end));
         let tr2 = state.tr.step(new ReplaceAroundStep($cut.pos - wrap2.length, $cut.pos + after.nodeSize, $cut.pos + afterDepth, $cut.pos + after.nodeSize - afterDepth, new Slice2(end, wrap2.length, 0), 0, true));
         dispatch(tr2.scrollIntoView());
       }
@@ -176551,9 +176791,9 @@ function wrapRangeInList(tr2, range, listType, attrs = null) {
   return true;
 }
 function doWrapInList(tr2, range, wrappers, joinBefore, listType) {
-  let content = Fragment54.empty;
+  let content = Fragment53.empty;
   for (let i2 = wrappers.length - 1; i2 >= 0; i2--)
-    content = Fragment54.from(wrappers[i2].type.create(wrappers[i2].attrs, content));
+    content = Fragment53.from(wrappers[i2].type.create(wrappers[i2].attrs, content));
   tr2.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice2(content, 0, 0), wrappers.length, true));
   let found2 = 0;
   for (let i2 = 0; i2 < wrappers.length; i2++)
@@ -176587,7 +176827,7 @@ function liftListItem(itemType) {
 function liftToOuterList(state, dispatch, itemType, range) {
   let tr2 = state.tr, end = range.end, endOfList = range.$to.end(range.depth);
   if (end < endOfList) {
-    tr2.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice2(Fragment54.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
+    tr2.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice2(Fragment53.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
     range = new NodeRange(tr2.doc.resolve(range.$from.pos), tr2.doc.resolve(endOfList), range.depth);
   }
   const target = liftTarget(range);
@@ -176611,10 +176851,10 @@ function liftOutOfList(state, dispatch, range) {
     return false;
   let atStart = range.startIndex == 0, atEnd = range.endIndex == list.childCount;
   let parent = $start.node(-1), indexBefore = $start.index(-1);
-  if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment54.empty : Fragment54.from(list))))
+  if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment53.empty : Fragment53.from(list))))
     return false;
   let start = $start.pos, end = start + item.nodeSize;
-  tr2.step(new ReplaceAroundStep(start - (atStart ? 1 : 0), end + (atEnd ? 1 : 0), start + 1, end - 1, new Slice2((atStart ? Fragment54.empty : Fragment54.from(list.copy(Fragment54.empty))).append(atEnd ? Fragment54.empty : Fragment54.from(list.copy(Fragment54.empty))), atStart ? 0 : 1, atEnd ? 0 : 1), atStart ? 0 : 1));
+  tr2.step(new ReplaceAroundStep(start - (atStart ? 1 : 0), end + (atEnd ? 1 : 0), start + 1, end - 1, new Slice2((atStart ? Fragment53.empty : Fragment53.from(list.copy(Fragment53.empty))).append(atEnd ? Fragment53.empty : Fragment53.from(list.copy(Fragment53.empty))), atStart ? 0 : 1, atEnd ? 0 : 1), atStart ? 0 : 1));
   dispatch(tr2.scrollIntoView());
   return true;
 }
@@ -176632,8 +176872,8 @@ function sinkListItem(itemType) {
       return false;
     if (dispatch) {
       let nestedBefore = nodeBefore.lastChild && nodeBefore.lastChild.type == parent.type;
-      let inner = Fragment54.from(nestedBefore ? itemType.create() : null);
-      let slice2 = new Slice2(Fragment54.from(itemType.create(null, Fragment54.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
+      let inner = Fragment53.from(nestedBefore ? itemType.create() : null);
+      let slice2 = new Slice2(Fragment53.from(itemType.create(null, Fragment53.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
       let before = range.start, after = range.end;
       dispatch(state.tr.step(new ReplaceAroundStep(before - (nestedBefore ? 3 : 1), after, before, after, slice2, 1, true)).scrollIntoView());
     }
@@ -177264,7 +177504,7 @@ function inputRulesPlugin(props2) {
             if (typeof text2 === "string") {
               text2 = text2;
             } else {
-              text2 = getHTMLFromFragment(Fragment54.from(text2), state.schema);
+              text2 = getHTMLFromFragment(Fragment53.from(text2), state.schema);
             }
             const { from: from2 } = simulatedInputMeta;
             const to = from2 + text2.length;
@@ -177623,7 +177863,7 @@ function pasteRulesPlugin(props2) {
           if (typeof text2 === "string") {
             text2 = text2;
           } else {
-            text2 = getHTMLFromFragment(Fragment54.from(text2), state.schema);
+            text2 = getHTMLFromFragment(Fragment53.from(text2), state.schema);
           }
           const { from: from3 } = simulatedPasteMeta;
           const to2 = from3 + text2.length;
@@ -178324,7 +178564,7 @@ function elementFromString(value) {
   return removeWhitespaces(html);
 }
 function createNodeFromContent(content, schema, options) {
-  if (content instanceof Node2 || content instanceof Fragment54) {
+  if (content instanceof Node2 || content instanceof Fragment53) {
     return content;
   }
   options = {
@@ -178338,7 +178578,7 @@ function createNodeFromContent(content, schema, options) {
     try {
       const isArrayContent = Array.isArray(content) && content.length > 0;
       if (isArrayContent) {
-        return Fragment54.fromArray(content.map((item) => schema.nodeFromJSON(item)));
+        return Fragment53.fromArray(content.map((item) => schema.nodeFromJSON(item)));
       }
       const node = schema.nodeFromJSON(content);
       if (options.errorOnInvalidContent) {
@@ -178483,7 +178723,7 @@ var insertContentAt = (position, value, options) => ({ tr: tr2, dispatch, editor
     if (isOnlyTextContent) {
       if (Array.isArray(value)) {
         newContent = value.map((v2) => v2.text || "").join("");
-      } else if (value instanceof Fragment54) {
+      } else if (value instanceof Fragment53) {
         let text2 = "";
         value.forEach((node) => {
           if (node.text) {
@@ -179282,10 +179522,10 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr: tr2, state, dispa
       return false;
     }
     if (dispatch) {
-      let wrap2 = Fragment54.empty;
+      let wrap2 = Fragment53.empty;
       const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3;
       for (let d2 = $from.depth - depthBefore; d2 >= $from.depth - 3; d2 -= 1) {
-        wrap2 = Fragment54.from($from.node(d2).copy(wrap2));
+        wrap2 = Fragment53.from($from.node(d2).copy(wrap2));
       }
       const depthAfter = $from.indexAfter(-1) < $from.node(-2).childCount ? 1 : $from.indexAfter(-2) < $from.node(-3).childCount ? 2 : 3;
       const newNextTypeAttributes2 = {
@@ -179293,7 +179533,7 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr: tr2, state, dispa
         ...overrideAttrs
       };
       const nextType2 = ((_a = type.contentMatch.defaultType) === null || _a === void 0 ? void 0 : _a.createAndFill(newNextTypeAttributes2)) || void 0;
-      wrap2 = wrap2.append(Fragment54.from(type.createAndFill(null, nextType2) || void 0));
+      wrap2 = wrap2.append(Fragment53.from(type.createAndFill(null, nextType2) || void 0));
       const start = $from.before($from.depth - (depthBefore - 1));
       tr2.replace(start, $from.after(-depthAfter), new Slice2(wrap2, 4 - depthBefore, 0));
       let sel = -1;
@@ -181594,9 +181834,9 @@ function beforeinput(view, event) {
   let insert2 = $from.parent.contentMatchAt($from.index()).findWrapping(view.state.schema.nodes.text);
   if (!insert2)
     return false;
-  let frag = Fragment54.empty;
+  let frag = Fragment53.empty;
   for (let i2 = insert2.length - 1; i2 >= 0; i2--)
-    frag = Fragment54.from(insert2[i2].createAndFill(null, frag));
+    frag = Fragment53.from(insert2[i2].createAndFill(null, frag));
   let tr2 = view.state.tr.replace($from.pos, $from.pos, new Slice2(frag, 0, 0));
   tr2.setSelection(TextSelection.near(tr2.doc.resolve($from.pos + 1)));
   view.dispatch(tr2);