@riverbankcms/sdk 0.98.0 → 0.99.0

package/dist/client/rendering/client.mjs

@@ -1751,6 +1751,13 @@ var init_resolver = __esm({
   }
 });
 
+// ../theme-core/src/interactive/generateBaseCSS.ts
+var init_generateBaseCSS = __esm({
+  "../theme-core/src/interactive/generateBaseCSS.ts"() {
+    "use strict";
+  }
+});
+
 // ../theme-core/src/buttons/effects/presets/background.ts
 var init_background = __esm({
   "../theme-core/src/buttons/effects/presets/background.ts"() {
@@ -1886,6 +1893,7 @@ var init_generateButtonCss = __esm({
     init_types2();
     init_classNames();
     init_resolver();
+    init_generateBaseCSS();
     init_generateEffectsCSS();
     init_constants();
     init_generateDefaultButtonSystem();
@@ -2453,15 +2461,16 @@ var init_joy_stamp = __esm({
           // 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: [
           {
@@ -3605,13 +3614,14 @@ function formatBookingTime(input, format = {
     format
   });
 }
-function formatBookingDateTime(input, format = {
-  weekday: "short",
-  month: "short",
-  day: "numeric",
-  hour: "numeric",
-  minute: "2-digit"
-}) {
+function formatBookingDateTime(input, format = DEFAULT_BOOKING_DATE_TIME_FORMAT) {
+  if (format === 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,
@@ -3671,13 +3681,20 @@ function addLocalScheduleDays(date, days) {
     day: utcDate.getUTCDate()
   };
 }
-var DEFAULT_LOCALE, FALLBACK_TIMEZONE, LOCAL_DATE_PATTERN, DEFAULT_BOOKING_TIME_ZONE;
+var DEFAULT_LOCALE, FALLBACK_TIMEZONE, DEFAULT_BOOKING_DATE_TIME_FORMAT, LOCAL_DATE_PATTERN, DEFAULT_BOOKING_TIME_ZONE;
 var init_booking_date_time = __esm({
   "../core/src/booking-date-time.ts"() {
     "use strict";
     init_result();
     DEFAULT_LOCALE = "en-US";
     FALLBACK_TIMEZONE = "UTC";
+    DEFAULT_BOOKING_DATE_TIME_FORMAT = {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    };
     LOCAL_DATE_PATTERN = /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/u;
     DEFAULT_BOOKING_TIME_ZONE = FALLBACK_TIMEZONE;
   }
@@ -10055,6 +10072,13 @@ var init_generateDefaultCardSystem = __esm({
   }
 });
 
+// ../theme-core/src/status/contextualColors.ts
+var init_contextualColors = __esm({
+  "../theme-core/src/status/contextualColors.ts"() {
+    "use strict";
+  }
+});
+
 // ../theme-core/src/cards/generateCardCss.ts
 var init_generateCardCss = __esm({
   "../theme-core/src/cards/generateCardCss.ts"() {
@@ -10062,6 +10086,7 @@ var init_generateCardCss = __esm({
     init_resolver();
     init_constants2();
     init_generateDefaultCardSystem();
+    init_contextualColors();
   }
 });
 
@@ -25103,6 +25128,7 @@ function FeedbackMessage({
   tone,
   children,
   className,
+  id,
   title,
   titleClassName,
   bodyClassName,
@@ -25114,6 +25140,7 @@ function FeedbackMessage({
   return /* @__PURE__ */ jsxs37(
     "div",
     {
+      id,
       className,
       "data-feedback-tone": tone,
       role,
@@ -27952,32 +27979,120 @@ var init_client2 = __esm({
   }
 });
 
+// ../blocks/src/system/runtime/shared/components/CheckIcon.tsx
+import { jsx as jsx60 } from "react/jsx-runtime";
+function CheckIcon2({ className, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx60(
+    "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__ */ jsx60("path", { d: "M5 13l4 4L19 7" })
+    }
+  );
+}
+var init_CheckIcon = __esm({
+  "../blocks/src/system/runtime/shared/components/CheckIcon.tsx"() {
+    "use strict";
+  }
+});
+
+// ../blocks/src/system/runtime/shared/components/StateIcon.tsx
+import { jsx as jsx61 } from "react/jsx-runtime";
+function StateIcon({ variant, children }) {
+  return /* @__PURE__ */ jsx61("div", { className: `rb-state-icon rb-state-icon--${variant}`, "aria-hidden": "true", children });
+}
+var init_StateIcon = __esm({
+  "../blocks/src/system/runtime/shared/components/StateIcon.tsx"() {
+    "use strict";
+  }
+});
+
+// ../blocks/src/system/runtime/shared/components/TerminalPanel.tsx
+import { jsx as jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
+function joinClasses5(...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__ */ jsxs43(
+    "div",
+    {
+      className,
+      "data-terminal-panel": true,
+      "data-terminal-tone": tone,
+      role: resolvedRole,
+      "aria-live": resolvedLive === "off" ? void 0 : resolvedLive,
+      children: [
+        icon2 ? /* @__PURE__ */ jsx62("div", { className: joinClasses5(iconClassName), "data-terminal-icon": true, children: icon2 }) : null,
+        /* @__PURE__ */ jsx62(Title, { className: joinClasses5(titleClassName), "data-terminal-title": true, children: title }),
+        body ? /* @__PURE__ */ jsx62("div", { className: joinClasses5(bodyClassName), "data-terminal-body": true, children: body }) : null,
+        actions ? /* @__PURE__ */ jsx62("div", { className: joinClasses5(actionsClassName), "data-terminal-actions": true, children: actions }) : null,
+        secondaryBody ? /* @__PURE__ */ jsx62("div", { className: joinClasses5(secondaryBodyClassName), "data-terminal-secondary-body": true, children: secondaryBody }) : null
+      ]
+    }
+  );
+}
+var init_TerminalPanel = __esm({
+  "../blocks/src/system/runtime/shared/components/TerminalPanel.tsx"() {
+    "use strict";
+  }
+});
+
 // ../blocks/src/system/runtime/components/booking/SuccessMessage.tsx
-import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs44 } from "react/jsx-runtime";
 var SuccessMessage;
 var init_SuccessMessage = __esm({
   "../blocks/src/system/runtime/components/booking/SuccessMessage.tsx"() {
     "use strict";
-    init_FeedbackMessage();
+    init_CheckIcon();
+    init_StateIcon();
+    init_TerminalPanel();
     SuccessMessage = ({
       message,
       resourceName,
       className
     }) => {
-      return /* @__PURE__ */ jsx60(
-        FeedbackMessage,
+      return /* @__PURE__ */ jsx63(
+        TerminalPanel,
         {
           tone: "success",
-          className: `ab-alert ab-alert--success ${className ?? ""}`,
+          title: "Booking confirmed",
+          icon: /* @__PURE__ */ jsx63(StateIcon, { variant: "success", children: /* @__PURE__ */ jsx63(CheckIcon2, { strokeWidth: 3 }) }),
+          body: /* @__PURE__ */ jsx63("p", { className: "ab-text", children: message }),
+          secondaryBody: resourceName ? /* @__PURE__ */ jsxs44("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__ */ jsxs43(Fragment8, { children: [
-            /* @__PURE__ */ jsx60("p", { className: "ab-text", children: message }),
-            resourceName ? /* @__PURE__ */ jsxs43("p", { className: "ab-text ab-text--muted", children: [
-              "Practitioner: ",
-              resourceName
-            ] }) : null
-          ] })
+          live: "polite"
         }
       );
     };
@@ -28061,9 +28176,30 @@ function formatDate2(dateStr) {
     }
   });
 }
-function formatTime2(isoString) {
-  return formatBookingInstant(isoString, {
+function formatDatePillParts(dateStr) {
+  const instant = `${dateStr}T00:00:00.000Z`;
+  const partFormat = (format) => formatBookingInstant(instant, {
     timeZone: DEFAULT_BOOKING_TIME_ZONE,
+    format
+  });
+  return {
+    weekday: partFormat({ weekday: "short" }),
+    day: partFormat({ day: "numeric" }),
+    month: partFormat({ month: "short" })
+  };
+}
+function formatTimeShort(isoString, timeZone = DEFAULT_BOOKING_TIME_ZONE) {
+  return formatBookingInstant(isoString, {
+    timeZone,
+    format: {
+      hour: "numeric",
+      minute: "2-digit"
+    }
+  });
+}
+function formatTime2(isoString, timeZone = DEFAULT_BOOKING_TIME_ZONE) {
+  return formatBookingInstant(isoString, {
+    timeZone,
     format: {
       hour: "numeric",
       minute: "2-digit",
@@ -29306,6 +29442,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,
@@ -30675,7 +30829,17 @@ var init_useAppointmentCheckoutVerification = __esm({
 });
 
 // ../blocks/src/system/runtime/components/booking/DatePicker.tsx
-import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
+import React6 from "react";
+import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
+function DateFieldLabel({
+  labelId,
+  required
+}) {
+  return /* @__PURE__ */ jsxs45("span", { className: "form-label", id: labelId, children: [
+    "Select Date",
+    required && /* @__PURE__ */ jsx64("span", { className: "required-marker", children: "*" })
+  ] });
+}
 var DatePicker;
 var init_DatePicker = __esm({
   "../blocks/src/system/runtime/components/booking/DatePicker.tsx"() {
@@ -30687,67 +30851,91 @@ var init_DatePicker = __esm({
       onChange,
       dateOptions,
       required = true,
+      ariaDescribedBy,
+      ariaInvalid,
       isLoading = false,
       isEmpty = false,
       hasMore = false,
       onLoadMore
     }) => {
+      const generatedId = React6.useId();
+      const labelId = `${generatedId}-date-label`;
+      const gridRef = React6.useRef(null);
+      const previousCountRef = React6.useRef(dateOptions.length);
+      React6.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__ */ jsxs44("div", { className: "ab-stack--sm", children: [
-          /* @__PURE__ */ jsxs44("label", { className: "ab-label", children: [
-            "Select Date",
-            required && /* @__PURE__ */ jsx61("span", { className: "ab-required", children: "*" })
-          ] }),
-          /* @__PURE__ */ jsx61("div", { className: "ab-skeleton" }),
-          /* @__PURE__ */ jsx61("p", { className: "ab-text ab-text--muted ab-text--sm", children: "Loading available dates..." })
+        return /* @__PURE__ */ jsxs45("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+          /* @__PURE__ */ jsx64(DateFieldLabel, { labelId, required }),
+          /* @__PURE__ */ jsx64("div", { className: "rb-shell-block" }),
+          /* @__PURE__ */ jsx64("p", { className: "ab-text ab-text--sm rb-on-surface--muted", children: "Loading available dates..." })
         ] });
       }
       if (isEmpty) {
-        return /* @__PURE__ */ jsxs44("div", { className: "ab-stack--sm", children: [
-          /* @__PURE__ */ jsxs44("label", { className: "ab-label", children: [
-            "Select Date",
-            required && /* @__PURE__ */ jsx61("span", { className: "ab-required", children: "*" })
-          ] }),
-          /* @__PURE__ */ jsx61(FeedbackMessage, { tone: "warning", className: "ab-alert ab-alert--warning", role: "status", children: /* @__PURE__ */ jsxs44("p", { className: "ab-text", children: [
+        return /* @__PURE__ */ jsxs45("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+          /* @__PURE__ */ jsx64(DateFieldLabel, { labelId, required }),
+          /* @__PURE__ */ jsx64(FeedbackMessage, { tone: "warning", className: "alert alert-warning", role: "status", children: /* @__PURE__ */ jsxs45("p", { className: "ab-text", children: [
             "No available dates in this period.",
-            hasMore && onLoadMore && /* @__PURE__ */ jsx61(
+            hasMore && onLoadMore && /* @__PURE__ */ jsx64(
               "button",
               {
                 type: "button",
                 onClick: onLoadMore,
-                className: "ab-link",
+                className: "ab-link rb-ml-2",
                 children: "Check later dates"
               }
             )
           ] }) })
         ] });
       }
-      return /* @__PURE__ */ jsxs44("div", { className: "ab-stack--sm", children: [
-        /* @__PURE__ */ jsxs44("label", { htmlFor: "booking-date", className: "ab-label", children: [
-          "Select Date",
-          required && /* @__PURE__ */ jsx61("span", { className: "ab-required", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsxs44(
-          "select",
+      return /* @__PURE__ */ jsxs45("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+        /* @__PURE__ */ jsx64(DateFieldLabel, { labelId, required }),
+        /* @__PURE__ */ jsx64(
+          "div",
           {
-            id: "booking-date",
-            value,
-            onChange: (e) => onChange(e.target.value),
-            required,
-            className: "ab-select",
-            children: [
-              /* @__PURE__ */ jsx61("option", { value: "", children: "Choose a date..." }),
-              dateOptions.map((date) => /* @__PURE__ */ jsx61("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__ */ jsxs45(
+                "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__ */ jsx64("span", { className: "ab-pill-caption", "aria-hidden": "true", children: parts.weekday }),
+                    /* @__PURE__ */ jsx64("span", { className: "ab-pill-value", "aria-hidden": "true", children: parts.day }),
+                    /* @__PURE__ */ jsx64("span", { className: "ab-pill-caption", "aria-hidden": "true", children: parts.month })
+                  ]
+                },
+                date
+              );
+            })
           }
         ),
-        hasMore && onLoadMore && /* @__PURE__ */ jsx61(
+        hasMore && onLoadMore && /* @__PURE__ */ jsx64(
           "button",
           {
             type: "button",
             onClick: onLoadMore,
             className: "ab-link",
-            children: "Load more dates \u2192"
+            children: "More dates \u2192"
           }
         )
       ] });
@@ -30756,7 +30944,8 @@ var init_DatePicker = __esm({
 });
 
 // ../blocks/src/system/runtime/components/booking/TimeSlotSelector.tsx
-import { jsx as jsx62, jsxs as jsxs45 } from "react/jsx-runtime";
+import React7 from "react";
+import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
 var TimeSlotSelector;
 var init_TimeSlotSelector = __esm({
   "../blocks/src/system/runtime/components/booking/TimeSlotSelector.tsx"() {
@@ -30768,25 +30957,52 @@ var init_TimeSlotSelector = __esm({
       onChange,
       slots,
       isLoading,
-      required = true
+      timezone,
+      required = true,
+      ariaDescribedBy,
+      ariaInvalid
     }) => {
-      return /* @__PURE__ */ jsxs45("div", { className: "ab-stack--sm", children: [
-        /* @__PURE__ */ jsxs45("label", { htmlFor: "booking-slot", className: "ab-label", children: [
+      const generatedId = React7.useId();
+      const labelId = `${generatedId}-time-label`;
+      const groupRef = React7.useRef(null);
+      const hadSlotsRef = React7.useRef(false);
+      React7.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__ */ jsxs46("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+        /* @__PURE__ */ jsxs46("span", { className: "form-label", id: labelId, children: [
           "Select Time",
-          required && /* @__PURE__ */ jsx62("span", { className: "ab-required", children: "*" })
+          required && /* @__PURE__ */ jsx65("span", { className: "required-marker", children: "*" })
         ] }),
-        isLoading ? /* @__PURE__ */ jsx62(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "Loading available times..." }) : slots.length === 0 ? /* @__PURE__ */ jsx62(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "No available times for this date" }) : /* @__PURE__ */ jsxs45(
-          "select",
+        isLoading ? /* @__PURE__ */ jsx65("div", { className: "rb-shell-block" }) : slots.length === 0 ? /* @__PURE__ */ jsx65(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: "No available times for this date" }) : /* @__PURE__ */ jsx65(
+          "div",
           {
-            id: "booking-slot",
-            value,
-            onChange: (e) => onChange(e.target.value),
-            required,
-            className: "ab-select",
-            children: [
-              /* @__PURE__ */ jsx62("option", { value: "", children: "Choose a time..." }),
-              slots.map((slot) => /* @__PURE__ */ jsx62("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__ */ jsx65(
+                "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
+              );
+            })
           }
         )
       ] });
@@ -30794,9 +31010,87 @@ var init_TimeSlotSelector = __esm({
   }
 });
 
+// ../blocks/src/system/runtime/shared/components/StepIndicator.tsx
+import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
+function buildClassChannels(slot, classPrefix, emitSharedClasses) {
+  const classes = [];
+  if (emitSharedClasses) classes.push(`rb-${slot}`);
+  if (classPrefix) classes.push(`${classPrefix}-${slot}`);
+  return classes;
+}
+function StepIndicator({
+  currentStep,
+  totalSteps,
+  stepLabels,
+  classPrefix,
+  emitSharedClasses
+}) {
+  const slotClass = (slot, modifier) => {
+    const base = buildClassChannels(slot, classPrefix, emitSharedClasses);
+    if (!modifier) return base.join(" ");
+    const modified = buildClassChannels(
+      `${slot}--${modifier}`,
+      classPrefix,
+      emitSharedClasses
+    );
+    return [...base, ...modified].join(" ");
+  };
+  return /* @__PURE__ */ jsx66("nav", { "aria-label": "Registration progress", className: slotClass("steps-nav"), children: /* @__PURE__ */ jsx66("ol", { className: slotClass("steps"), children: Array.from({ length: totalSteps }, (_, i) => {
+    const stepNum = i + 1;
+    const isActive = stepNum === currentStep;
+    const isComplete = stepNum < currentStep;
+    return /* @__PURE__ */ jsxs47(
+      "li",
+      {
+        className: slotClass("step"),
+        "aria-current": isActive ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ jsx66(
+            "div",
+            {
+              className: slotClass(
+                "step-circle",
+                isActive ? "active" : isComplete ? "completed" : void 0
+              ),
+              children: isComplete ? /* @__PURE__ */ jsx66(CheckIcon2, { className: slotClass("step-check"), strokeWidth: 3 }) : stepNum
+            }
+          ),
+          stepLabels?.[i] && /* @__PURE__ */ jsx66(
+            "span",
+            {
+              className: slotClass(
+                "step-label",
+                isActive ? "active" : void 0
+              ),
+              children: stepLabels[i]
+            }
+          ),
+          stepNum < totalSteps && /* @__PURE__ */ jsx66(
+            "div",
+            {
+              className: slotClass(
+                "step-connector",
+                isComplete ? "completed" : void 0
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) }) });
+}
+var init_StepIndicator = __esm({
+  "../blocks/src/system/runtime/shared/components/StepIndicator.tsx"() {
+    "use strict";
+    init_CheckIcon();
+  }
+});
+
 // ../blocks/src/system/runtime/shared/components/DiscountCodeDisclosure.tsx
 import { useId } from "react";
-import { jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
 function getDiscountCodeDisclosureClasses(surface) {
   if (surface === "theme-form") return themeFormClasses;
   return BLOCK_DISCOUNT_CODE_DISCLOSURE_CLASSES[surface];
@@ -30833,10 +31127,10 @@ function DiscountCodeDisclosure({
     onApply();
   };
   const feedbackClassName = feedback ? `${classes.feedback} status-${feedback.tone}` : classes.feedback;
-  return /* @__PURE__ */ jsx63("div", { className: classes.root, children: !isOpen ? /* @__PURE__ */ jsx63("button", { type: "button", className: classes.toggle, onClick: onOpen, children: toggleLabel }) : /* @__PURE__ */ jsxs46("div", { className: classes.form, children: [
-    /* @__PURE__ */ jsx63("label", { htmlFor: inputId, className: classes.label, children: label }),
-    /* @__PURE__ */ jsxs46("div", { className: classes.row, children: [
-      /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx67("div", { className: classes.root, children: !isOpen ? /* @__PURE__ */ jsx67("button", { type: "button", className: classes.toggle, onClick: onOpen, children: toggleLabel }) : /* @__PURE__ */ jsxs48("div", { className: classes.form, children: [
+    /* @__PURE__ */ jsx67("label", { htmlFor: inputId, className: classes.label, children: label }),
+    /* @__PURE__ */ jsxs48("div", { className: classes.row, children: [
+      /* @__PURE__ */ jsx67(
         "input",
         {
           id: inputId,
@@ -30849,7 +31143,7 @@ function DiscountCodeDisclosure({
           disabled: disabled || isApplying
         }
       ),
-      onApply ? /* @__PURE__ */ jsx63(
+      onApply ? /* @__PURE__ */ jsx67(
         "button",
         {
           type: "button",
@@ -30859,7 +31153,7 @@ function DiscountCodeDisclosure({
           children: isApplying ? "Applying..." : applyLabel
         }
       ) : null,
-      /* @__PURE__ */ jsx63(
+      /* @__PURE__ */ jsx67(
         "button",
         {
           type: "button",
@@ -30870,8 +31164,8 @@ function DiscountCodeDisclosure({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx63("p", { className: classes.hint, children: hint }),
-    feedback ? /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx67("p", { className: classes.hint, children: hint }),
+    feedback ? /* @__PURE__ */ jsx67(
       "p",
       {
         className: feedbackClassName,
@@ -30929,7 +31223,7 @@ var init_DiscountCodeDisclosure = __esm({
 });
 
 // ../blocks/src/system/runtime/shared/components/FieldValidationMessage.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function getFieldValidationControlProps({
   message,
   messageId,
@@ -30948,7 +31242,7 @@ function FieldValidationMessage({
   className,
   live = "assertive"
 }) {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx68(
     "p",
     {
       id,
@@ -30968,7 +31262,11 @@ var init_FieldValidationMessage = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/booking-form.default-ui.tsx
-import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
+import React8 from "react";
+import { Fragment as Fragment8, jsx as jsx69, jsxs as jsxs49 } from "react/jsx-runtime";
+function optionCardClassName(isSelected) {
+  return `rb-option-card${isSelected ? " rb-option-card--selected" : ""}`;
+}
 function formatBookingAmount(amount, currency) {
   return formatCurrencyAmount(amount, currency, { decimals: "auto" });
 }
@@ -30977,6 +31275,7 @@ function HeadlessBookingDefaultForm({
   onSubmit
 }) {
   const currentStep = booking.currentStep;
+  const errorSummaryId = React8.useId();
   const currentStepIndex = currentStep?.visibleIndex ?? 0;
   const isFirstStep = currentStepIndex === 0;
   const isLastStep = currentStepIndex === booking.steps.length - 1;
@@ -30989,20 +31288,34 @@ function HeadlessBookingDefaultForm({
     }
   };
   if (!currentStep) {
-    return /* @__PURE__ */ jsx65("div", { className: "rb-text-center rb-py-12", children: /* @__PURE__ */ jsx65("p", { className: "status-muted", children: "No steps available" }) });
+    return /* @__PURE__ */ jsx69("div", { className: "rb-text-center rb-py-12", children: /* @__PURE__ */ jsx69("p", { className: "status-muted", children: "No steps available" }) });
   }
-  return /* @__PURE__ */ jsxs47("div", { className: "multi-step-form", children: [
-    /* @__PURE__ */ jsx65("div", { className: "rb-mb-8", children: /* @__PURE__ */ jsx65(
-      DefaultBookingProgress,
+  return /* @__PURE__ */ jsxs49("div", { className: "multi-step-form", children: [
+    booking.steps.length > 1 ? /* @__PURE__ */ jsx69(
+      StepIndicator,
       {
-        steps: booking.steps,
-        currentIndex: currentStepIndex
+        currentStep: currentStepIndex + 1,
+        totalSteps: booking.steps.length,
+        stepLabels: booking.steps.map((step) => step.label),
+        emitSharedClasses: true
+      }
+    ) : null,
+    /* @__PURE__ */ jsx69("div", { className: "step-content", children: /* @__PURE__ */ jsx69(
+      DefaultBookingStepContent,
+      {
+        booking,
+        errorSummaryId
       }
     ) }),
-    /* @__PURE__ */ jsx65("div", { className: "step-content", children: /* @__PURE__ */ jsx65(DefaultBookingStepContent, { booking }) }),
-    /* @__PURE__ */ jsx65(DefaultBookingErrorSummary, { errors: currentStep.errors }),
-    /* @__PURE__ */ jsxs47("div", { className: "rb-flex rb-gap-3 rb-mt-8", children: [
-      !isFirstStep ? /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx69(
+      DefaultBookingErrorSummary,
+      {
+        errors: currentStep.errors,
+        id: errorSummaryId
+      }
+    ),
+    /* @__PURE__ */ jsxs49("div", { className: "rb-wizard-actions", children: [
+      !isFirstStep ? /* @__PURE__ */ jsx69(
         "button",
         {
           type: "button",
@@ -31011,7 +31324,7 @@ function HeadlessBookingDefaultForm({
           children: "Back"
         }
       ) : null,
-      /* @__PURE__ */ jsx65(
+      /* @__PURE__ */ jsx69(
         "button",
         {
           type: "button",
@@ -31019,13 +31332,9 @@ function HeadlessBookingDefaultForm({
             void handlePrimaryAction();
           },
           disabled: isSubmitting,
-          className: themeButtonClassName({
-            variant: "primary",
-            size: "md",
-            extraClassName: "rb-flex-1"
-          }),
-          children: isSubmitting ? /* @__PURE__ */ jsxs47(Fragment9, { children: [
-            /* @__PURE__ */ jsx65(
+          className: themeButtonClassName({ variant: "primary", size: "md" }),
+          children: isSubmitting ? /* @__PURE__ */ jsxs49(Fragment8, { children: [
+            /* @__PURE__ */ jsx69(
               SpinnerNode,
               {
                 size: "sm",
@@ -31039,61 +31348,32 @@ function HeadlessBookingDefaultForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx65(DefaultBookingDiscount, { booking }),
-    /* @__PURE__ */ jsx65(DefaultBookingFeedback, { booking }),
-    /* @__PURE__ */ jsx65(DefaultBookingAltcha, { booking })
+    /* @__PURE__ */ jsx69(DefaultBookingDiscount, { booking }),
+    /* @__PURE__ */ jsx69(DefaultBookingFeedback, { booking }),
+    /* @__PURE__ */ jsx69(DefaultBookingAltcha, { booking })
   ] });
 }
-function DefaultBookingProgress({
-  steps,
-  currentIndex
-}) {
-  return /* @__PURE__ */ jsx65("div", { className: "rb-flex rb-items-center rb-justify-between", children: steps.map((step, index) => {
-    const isActive = index === currentIndex;
-    const isCompleted = index < currentIndex;
-    const isLast = index === steps.length - 1;
-    return /* @__PURE__ */ jsxs47("div", { className: "rb-flex rb-items-center rb-flex-1", children: [
-      /* @__PURE__ */ jsxs47("div", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-default", children: [
-        /* @__PURE__ */ jsx65(
-          "div",
-          {
-            className: `
-                  step-circle transition-theme-standard
-                  ${isActive ? "step-circle-active" : ""}
-                  ${isCompleted ? "step-circle-complete" : ""}
-                `,
-            children: isCompleted ? "\u2713" : index + 1
-          }
-        ),
-        /* @__PURE__ */ jsx65(
-          "span",
-          {
-            className: `
-                  rb-caption rb-hidden rb-sm-inline
-                  ${isCompleted || !isActive ? "status-muted" : ""}
-                `,
-            children: step.label
-          }
-        )
-      ] }),
-      !isLast ? /* @__PURE__ */ jsx65("div", { className: "step-connector rb-ml-2 rb-mr-2 rb-hidden rb-sm-block" }) : null
-    ] }, step.id);
-  }) });
-}
 function DefaultBookingStepContent({
-  booking
+  booking,
+  errorSummaryId
 }) {
   const stepId = booking.currentStep?.id;
   if (!stepId) return null;
   switch (stepId) {
     case "service-selection":
-      return /* @__PURE__ */ jsx65(DefaultServiceSelectionStep, { booking });
+      return /* @__PURE__ */ jsx69(DefaultServiceSelectionStep, { booking });
     case "datetime-selection":
-      return /* @__PURE__ */ jsx65(DefaultDateTimeSelectionStep, { booking });
+      return /* @__PURE__ */ jsx69(
+        DefaultDateTimeSelectionStep,
+        {
+          booking,
+          errorSummaryId
+        }
+      );
     case "payment-selection":
-      return /* @__PURE__ */ jsx65(HeadlessBookingPaymentSelectionStep, { booking });
+      return /* @__PURE__ */ jsx69(HeadlessBookingPaymentSelectionStep, { booking });
     case "custom-fields":
-      return /* @__PURE__ */ jsx65(DefaultDynamicFields, { fields: booking.fields.items, booking });
+      return /* @__PURE__ */ jsx69(DefaultDynamicFields, { fields: booking.fields.items, booking });
     default:
       return assertNever7(stepId);
   }
@@ -31108,74 +31388,77 @@ function DefaultServiceSelectionStep({
   const showServiceSelect = booking.services.requiresSelection || services.length > 1;
   const showResourceSelect = booking.resources.requiresSelection || resources.length > 1;
   const allowAnyResource = !booking.resources.requiresSelection;
-  return /* @__PURE__ */ jsxs47("div", { className: "ab-stack", children: [
-    /* @__PURE__ */ jsxs47("div", { children: [
-      /* @__PURE__ */ jsx65("h2", { className: "ab-title", children: "Select Service" }),
-      /* @__PURE__ */ jsx65("p", { className: "ab-text ab-text--muted", children: "Choose the service you'd like to book" })
+  return /* @__PURE__ */ jsxs49("div", { className: "rb-reg-stack", children: [
+    /* @__PURE__ */ jsxs49("div", { children: [
+      /* @__PURE__ */ jsx69("h2", { className: "ab-title", children: "Select Service" }),
+      /* @__PURE__ */ jsx69("p", { className: "ab-text rb-on-surface--muted", children: "Choose the service you'd like to book" })
     ] }),
-    showServiceSelect ? /* @__PURE__ */ jsxs47("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsx65("label", { className: "ab-subtitle", children: "Service" }),
-      /* @__PURE__ */ jsx65("div", { className: "ab-grid", children: services.map((service) => {
+    showServiceSelect ? /* @__PURE__ */ jsxs49("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsx69("span", { className: "ab-subtitle", children: "Service" }),
+      /* @__PURE__ */ jsx69("div", { className: "rb-reg-grid", children: services.map((service) => {
         const isSelected = selectedServiceId === service.id;
-        return /* @__PURE__ */ jsx65(
+        return /* @__PURE__ */ jsxs49(
           "button",
           {
             type: "button",
             onClick: () => booking.actions.selectService(service.id),
-            className: `ab-card ${isSelected ? "ab-card--selected" : ""}`,
-            children: /* @__PURE__ */ jsxs47("div", { className: "ab-row--between", children: [
-              /* @__PURE__ */ jsxs47("div", { children: [
-                /* @__PURE__ */ jsx65("div", { className: "ab-subtitle", children: service.title }),
-                service.description ? /* @__PURE__ */ jsx65("div", { className: "ab-text ab-text--muted", children: service.description }) : null,
-                service.durationMinutes ? /* @__PURE__ */ jsxs47("div", { className: "ab-text ab-text--muted", children: [
+            className: optionCardClassName(isSelected),
+            "aria-pressed": isSelected,
+            children: [
+              /* @__PURE__ */ jsxs49("div", { className: "rb-flex-1", children: [
+                /* @__PURE__ */ jsx69("div", { className: "ab-subtitle", children: service.title }),
+                service.description ? /* @__PURE__ */ jsx69("div", { className: "ab-text rb-on-surface--muted", children: service.description }) : null,
+                service.durationMinutes ? /* @__PURE__ */ jsxs49("div", { className: "ab-text rb-on-surface--muted", children: [
                   service.durationMinutes,
                   " minutes"
                 ] }) : null
               ] }),
-              isSelected ? /* @__PURE__ */ jsx65(SelectedCheck, {}) : null
-            ] })
+              isSelected ? /* @__PURE__ */ jsx69(SelectedCheck, {}) : null
+            ]
           },
           service.id
         );
       }) })
     ] }) : null,
-    booking.resources.state.tag === "loading" ? /* @__PURE__ */ jsxs47("div", { className: "ab-center", children: [
-      /* @__PURE__ */ jsx65(SpinnerNode, { size: "md", srLabel: "Loading practitioners" }),
-      /* @__PURE__ */ jsx65("p", { className: "ab-text ab-text--muted", children: "Loading practitioners..." })
+    booking.resources.state.tag === "loading" ? /* @__PURE__ */ jsxs49("div", { className: "ab-center", children: [
+      /* @__PURE__ */ jsx69(SpinnerNode, { size: "md", srLabel: "Loading practitioners" }),
+      /* @__PURE__ */ jsx69("p", { className: "ab-text rb-on-surface--muted", children: "Loading practitioners..." })
     ] }) : null,
-    booking.resources.state.tag === "error" ? /* @__PURE__ */ jsx65(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__ */ jsx65(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__ */ jsxs47("div", { className: "ab-stack--sm", children: [
-      /* @__PURE__ */ jsxs47("label", { className: "ab-subtitle", children: [
+    booking.resources.state.tag === "error" ? /* @__PURE__ */ jsx69(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__ */ jsx69(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__ */ jsxs49("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+      /* @__PURE__ */ jsxs49("span", { className: "ab-subtitle", children: [
         "Practitioner",
         booking.resources.requiresSelection ? "" : " (Optional)"
       ] }),
-      /* @__PURE__ */ jsx65("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__ */ jsxs47("div", { className: "ab-grid", children: [
-        allowAnyResource ? /* @__PURE__ */ jsx65(
+      /* @__PURE__ */ jsx69("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__ */ jsxs49("div", { className: "rb-reg-grid", children: [
+        allowAnyResource ? /* @__PURE__ */ jsxs49(
           "button",
           {
             type: "button",
             onClick: () => booking.actions.selectResource(null),
-            className: `ab-card ${!selectedResourceId ? "ab-card--selected" : ""}`,
-            children: /* @__PURE__ */ jsxs47("div", { className: "ab-row--between", children: [
-              /* @__PURE__ */ jsx65("div", { className: "ab-subtitle", children: "Any Available" }),
-              !selectedResourceId ? /* @__PURE__ */ jsx65(SelectedCheck, {}) : null
-            ] })
+            className: optionCardClassName(!selectedResourceId),
+            "aria-pressed": !selectedResourceId,
+            children: [
+              /* @__PURE__ */ jsx69("div", { className: "rb-flex-1 ab-subtitle", children: "Any Available" }),
+              !selectedResourceId ? /* @__PURE__ */ jsx69(SelectedCheck, {}) : null
+            ]
           }
         ) : null,
         resources.map((resource) => {
           const isSelected = selectedResourceId === resource.id;
-          return /* @__PURE__ */ jsx65(
+          return /* @__PURE__ */ jsxs49(
             "button",
             {
               type: "button",
               onClick: () => booking.actions.selectResource(resource.id),
-              className: `ab-card ${isSelected ? "ab-card--selected" : ""}`,
-              children: /* @__PURE__ */ jsxs47("div", { className: "ab-row--between", children: [
-                /* @__PURE__ */ jsx65("div", { className: "ab-subtitle", children: resource.label }),
-                isSelected ? /* @__PURE__ */ jsx65(SelectedCheck, {}) : null
-              ] })
+              className: optionCardClassName(isSelected),
+              "aria-pressed": isSelected,
+              children: [
+                /* @__PURE__ */ jsx69("div", { className: "rb-flex-1 ab-subtitle", children: resource.label }),
+                isSelected ? /* @__PURE__ */ jsx69(SelectedCheck, {}) : null
+              ]
             },
             resource.id
           );
@@ -31185,28 +31468,31 @@ function DefaultServiceSelectionStep({
   ] });
 }
 function DefaultDateTimeSelectionStep({
-  booking
+  booking,
+  errorSummaryId
 }) {
   const selectedDate = booking.availability.selectedDate ?? "";
-  const selectedSlotStart = booking.availability.selectedSlot?.startAt ?? "";
+  const selectedSlotKey = booking.availability.selectedSlot?.key ?? "";
   const singleService = booking.services.items.length === 1 ? booking.services.items[0] : void 0;
-  const slots = collapseHeadlessSlotsForDisplay({
+  const slots = deriveBookingSlotDisplayOptions({
     slots: booking.availability.slots,
     hasSelectedResource: Boolean(booking.resources.selectedResourceId)
   });
   const error = booking.availability.datesState.tag === "error" ? booking.availability.datesState.message : booking.availability.slotsState.tag === "error" ? booking.availability.slotsState.message : null;
-  return /* @__PURE__ */ jsxs47("div", { className: "ab-stack", children: [
-    singleService ? /* @__PURE__ */ jsxs47("div", { className: "ab-info-box", children: [
-      /* @__PURE__ */ jsx65("h3", { className: "ab-subtitle", children: singleService.title }),
-      singleService.description ? /* @__PURE__ */ jsx65("p", { className: "ab-text ab-text--muted", children: singleService.description }) : null,
-      singleService.durationMinutes ? /* @__PURE__ */ jsxs47("p", { className: "ab-text ab-text--muted", children: [
+  const hasValidationError = Boolean(booking.currentStep?.errors.formError);
+  const validationDescribedBy = hasValidationError ? errorSummaryId : void 0;
+  return /* @__PURE__ */ jsxs49("div", { className: "rb-reg-stack", children: [
+    singleService ? /* @__PURE__ */ jsxs49("div", { className: "rb-reg-summary", children: [
+      /* @__PURE__ */ jsx69("h3", { className: "ab-subtitle", children: singleService.title }),
+      singleService.description ? /* @__PURE__ */ jsx69("p", { className: "ab-text rb-on-surface--muted", children: singleService.description }) : null,
+      singleService.durationMinutes ? /* @__PURE__ */ jsxs49("p", { className: "ab-text rb-on-surface--muted", children: [
         "Duration: ",
         singleService.durationMinutes,
         " minutes"
       ] }) : null
     ] }) : null,
-    error ? /* @__PURE__ */ jsx65(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx65(
+    error ? /* @__PURE__ */ jsx69(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx69(
       DatePicker,
       {
         value: selectedDate,
@@ -31214,23 +31500,26 @@ function DefaultDateTimeSelectionStep({
         dateOptions: [...booking.availability.availableDates],
         isLoading: booking.availability.datesState.tag === "loading",
         isEmpty: booking.availability.datesState.tag !== "loading" && booking.availability.availableDates.length === 0,
+        ariaDescribedBy: validationDescribedBy,
+        ariaInvalid: hasValidationError,
         hasMore: booking.availability.hasMoreDates,
         onLoadMore: booking.availability.loadMoreDates
       }
     ),
-    selectedDate ? /* @__PURE__ */ jsx65(
+    selectedDate ? /* @__PURE__ */ jsx69(
       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
   ] });
@@ -31241,33 +31530,33 @@ function HeadlessBookingPaymentSelectionStep({
   const service = booking.services.selected;
   const viewModel = booking.payment.selection;
   if (booking.payment.kind === "unsupported") {
-    return /* @__PURE__ */ jsx65(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: booking.payment.errorMessage });
+    return /* @__PURE__ */ jsx69(FeedbackMessage, { tone: "error", className: "alert alert-error", role: "alert", children: booking.payment.errorMessage });
   }
   if (!service || !viewModel) {
-    return /* @__PURE__ */ jsx65(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: "Payment options are unavailable for this service right now." });
+    return /* @__PURE__ */ jsx69(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__ */ jsxs47("div", { className: "ab-stack", children: [
-    /* @__PURE__ */ jsxs47("div", { className: "ab-info-box", children: [
-      /* @__PURE__ */ jsx65("h3", { className: "ab-subtitle", children: viewModel.sectionTitle }),
-      /* @__PURE__ */ jsx65("p", { className: "ab-text ab-text--muted", children: service.title })
+  return /* @__PURE__ */ jsxs49("div", { className: "rb-reg-stack", children: [
+    /* @__PURE__ */ jsxs49("div", { className: "rb-reg-summary", children: [
+      /* @__PURE__ */ jsx69("h3", { className: "ab-subtitle", children: viewModel.sectionTitle }),
+      /* @__PURE__ */ jsx69("p", { className: "ab-text rb-on-surface--muted", children: service.title })
     ] }),
-    booking.payment.appointmentPackages.state.tag === "loading" ? /* @__PURE__ */ jsx65(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: "Checking package credits..." }) : null,
-    booking.payment.appointmentPackages.state.tag === "error" ? /* @__PURE__ */ jsxs47(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: [
+    booking.payment.appointmentPackages.state.tag === "loading" ? /* @__PURE__ */ jsx69(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: "Checking package credits..." }) : null,
+    booking.payment.appointmentPackages.state.tag === "error" ? /* @__PURE__ */ jsxs49(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: [
       booking.payment.appointmentPackages.state.message,
       " You can continue with the normal payment option."
     ] }) : null,
-    slidingScale ? /* @__PURE__ */ jsxs47("div", { className: "rb-space-y-2", children: [
-      /* @__PURE__ */ jsx65("label", { htmlFor: "appointment-sliding-amount", className: "form-label", children: "Choose your price" }),
-      /* @__PURE__ */ jsxs47("p", { className: "rb-caption status-muted", children: [
+    slidingScale ? /* @__PURE__ */ jsxs49("div", { className: "rb-space-y-2", children: [
+      /* @__PURE__ */ jsx69("label", { htmlFor: "appointment-sliding-amount", className: "form-label", children: "Choose your price" }),
+      /* @__PURE__ */ jsxs49("p", { className: "rb-caption status-muted", children: [
         formatBookingAmount(slidingScale.minAmount, slidingScale.currency),
         " to ",
         formatBookingAmount(slidingScale.maxAmount, slidingScale.currency),
         slidingScale.suggestedAmount !== null ? `, suggested ${formatBookingAmount(slidingScale.suggestedAmount, slidingScale.currency)}` : ""
       ] }),
-      /* @__PURE__ */ jsx65(
+      /* @__PURE__ */ jsx69(
         "input",
         {
           id: "appointment-sliding-amount",
@@ -31281,47 +31570,47 @@ function HeadlessBookingPaymentSelectionStep({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsxs47("div", { className: "ab-stack", role: "list", "aria-label": "Payment options", children: [
-      packageOptions.map((appointmentPackage) => {
-        const isSelected = booking.payment.selectedAppointmentPackageId === appointmentPackage.customerPassId;
-        return /* @__PURE__ */ jsx65(
-          "button",
-          {
-            type: "button",
-            className: themeButtonClassName({
-              variant: isSelected ? "primary" : "outline",
-              size: "md"
-            }),
-            style: paymentOptionLayoutStyle,
-            onClick: () => booking.actions.selectAppointmentPackage(
-              appointmentPackage.customerPassId
-            ),
-            "aria-pressed": isSelected,
-            children: /* @__PURE__ */ jsx65(
-              PaymentOptionContent,
+    /* @__PURE__ */ jsxs49(
+      "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__ */ jsxs49(
+              "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__ */ jsx65(
-            "div",
-            {
-              className: "ab-card",
-              style: paymentOptionLayoutStyle,
-              children: /* @__PURE__ */ jsx65(
+                type: "button",
+                className: optionCardClassName(isSelected),
+                onClick: () => booking.actions.selectAppointmentPackage(
+                  appointmentPackage.customerPassId
+                ),
+                "aria-pressed": isSelected,
+                children: [
+                  /* @__PURE__ */ jsx69(
+                    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__ */ jsx69(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__ */ jsx69("div", { className: "rb-reg-summary", children: /* @__PURE__ */ jsx69(
                 PaymentOptionContent,
                 {
                   id: option.kind,
@@ -31330,37 +31619,35 @@ function HeadlessBookingPaymentSelectionStep({
                   summaryRows: option.summaryRows,
                   helperText: option.helperText
                 }
-              )
-            },
-            option.kind
-          );
-        }
-        return /* @__PURE__ */ jsx65(
-          "button",
-          {
-            type: "button",
-            className: themeButtonClassName({
-              variant: isSelected ? "primary" : "outline",
-              size: "md"
-            }),
-            style: paymentOptionLayoutStyle,
-            onClick: () => booking.actions.selectPaymentOption(option.kind),
-            "aria-pressed": isSelected,
-            children: /* @__PURE__ */ jsx65(
-              PaymentOptionContent,
+              ) }, option.kind);
+            }
+            return /* @__PURE__ */ jsxs49(
+              "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__ */ jsx69(
+                    PaymentOptionContent,
+                    {
+                      id: option.kind,
+                      title: option.title,
+                      description: option.description,
+                      summaryRows: option.summaryRows,
+                      helperText: option.helperText
+                    }
+                  ),
+                  isSelected ? /* @__PURE__ */ jsx69(SelectedCheck, {}) : null
+                ]
+              },
+              option.kind
+            );
+          })
+        ]
+      }
+    )
   ] });
 }
 function PaymentOptionContent({
@@ -31370,22 +31657,22 @@ function PaymentOptionContent({
   summaryRows,
   title
 }) {
-  return /* @__PURE__ */ jsxs47(Fragment9, { children: [
-    /* @__PURE__ */ jsx65("span", { children: title }),
-    /* @__PURE__ */ jsx65("span", { className: "ab-text ab-text--muted", children: description }),
-    /* @__PURE__ */ jsx65("div", { className: "ab-stack", style: summaryStackStyle, children: summaryRows.map((row) => /* @__PURE__ */ jsxs47("span", { className: "ab-text ab-text--muted", children: [
+  return /* @__PURE__ */ jsxs49("div", { className: "rb-flex-1", children: [
+    /* @__PURE__ */ jsx69("div", { className: "ab-subtitle", children: title }),
+    /* @__PURE__ */ jsx69("div", { className: "ab-text rb-on-surface--muted", children: description }),
+    /* @__PURE__ */ jsx69("div", { className: "ab-option-rows", children: summaryRows.map((row) => /* @__PURE__ */ jsxs49("span", { className: "ab-text rb-on-surface--muted", children: [
       row.label,
       ": ",
       row.value
     ] }, `${id}-${row.label}`)) }),
-    helperText ? /* @__PURE__ */ jsx65("span", { className: "ab-text ab-text--muted", children: helperText }) : null
+    helperText ? /* @__PURE__ */ jsx69("div", { className: "ab-text rb-on-surface--muted", children: helperText }) : null
   ] });
 }
 function DefaultDynamicFields({
   booking,
   fields
 }) {
-  return /* @__PURE__ */ jsx65("div", { className: "rb-space-y-6", children: fields.map((field) => /* @__PURE__ */ jsx65(DefaultDynamicField, { booking, field }, field.id)) });
+  return /* @__PURE__ */ jsx69("div", { className: "rb-space-y-6", children: fields.map((field) => /* @__PURE__ */ jsx69(DefaultDynamicField, { booking, field }, field.id)) });
 }
 function DefaultDynamicField({
   booking,
@@ -31395,13 +31682,13 @@ function DefaultDynamicField({
   const error = field.error;
   const errorId = error ? field.errorId ?? `${field.inputId}-error` : null;
   const describedBy = [field.helpTextId, errorId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs47("div", { className: "rb-space-y-2", children: [
-    /* @__PURE__ */ jsxs47("label", { id: field.labelId, htmlFor: field.inputId, className: "form-label", children: [
+  return /* @__PURE__ */ jsxs49("div", { className: "rb-space-y-2", children: [
+    /* @__PURE__ */ jsxs49("label", { id: field.labelId, htmlFor: field.inputId, className: "form-label", children: [
       field.label,
-      field.required ? /* @__PURE__ */ jsx65("span", { className: "required-marker", children: "*" }) : null
+      field.required ? /* @__PURE__ */ jsx69("span", { className: "required-marker", children: "*" }) : null
     ] }),
-    field.helpText ? /* @__PURE__ */ jsx65("p", { id: field.helpTextId ?? void 0, className: "rb-caption status-muted", children: field.helpText }) : null,
-    /* @__PURE__ */ jsx65(
+    field.helpText ? /* @__PURE__ */ jsx69("p", { id: field.helpTextId ?? void 0, className: "rb-caption status-muted", children: field.helpText }) : null,
+    /* @__PURE__ */ jsx69(
       DefaultFieldInput,
       {
         field,
@@ -31413,7 +31700,7 @@ function DefaultDynamicField({
         describedBy
       }
     ),
-    error ? /* @__PURE__ */ jsx65(
+    error ? /* @__PURE__ */ jsx69(
       FieldValidationMessage,
       {
         id: errorId ?? `${field.inputId}-error`,
@@ -31447,7 +31734,7 @@ function DefaultFieldInput({
   };
   switch (field.type) {
     case "textarea":
-      return /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsx69(
         "textarea",
         {
           ...commonProps,
@@ -31462,7 +31749,7 @@ function DefaultFieldInput({
       );
     case "select":
       if (field.field.multiple) {
-        return /* @__PURE__ */ jsx65(
+        return /* @__PURE__ */ jsx69(
           "select",
           {
             ...commonProps,
@@ -31475,11 +31762,11 @@ function DefaultFieldInput({
             },
             multiple: true,
             className: "form-select rb-h-32",
-            children: field.field.options?.map((option) => /* @__PURE__ */ jsx65("option", { value: option.value, children: option.label }, option.value))
+            children: field.field.options?.map((option) => /* @__PURE__ */ jsx69("option", { value: option.value, children: option.label }, option.value))
           }
         );
       }
-      return /* @__PURE__ */ jsxs47(
+      return /* @__PURE__ */ jsxs49(
         "select",
         {
           ...commonProps,
@@ -31487,14 +31774,14 @@ function DefaultFieldInput({
           onChange: (event) => onChange(event.target.value),
           className: "form-select",
           children: [
-            /* @__PURE__ */ jsx65("option", { value: "", children: "Select an option..." }),
-            field.field.options?.map((option) => /* @__PURE__ */ jsx65("option", { value: option.value, children: option.label }, option.value))
+            /* @__PURE__ */ jsx69("option", { value: "", children: "Select an option..." }),
+            field.field.options?.map((option) => /* @__PURE__ */ jsx69("option", { value: option.value, children: option.label }, option.value))
           ]
         }
       );
     case "radio":
-      return /* @__PURE__ */ jsx65("div", { className: "rb-space-y-2", children: field.field.options?.map((option) => /* @__PURE__ */ jsxs47("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsx69("div", { className: "rb-space-y-2", children: field.field.options?.map((option) => /* @__PURE__ */ jsxs49("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
+        /* @__PURE__ */ jsx69(
           "input",
           {
             type: "radio",
@@ -31508,13 +31795,13 @@ function DefaultFieldInput({
             className: "form-radio"
           }
         ),
-        /* @__PURE__ */ jsx65("span", { className: "rb-caption", children: option.label })
+        /* @__PURE__ */ jsx69("span", { className: "rb-caption", children: option.label })
       ] }, option.value)) });
     case "checkbox":
       if (field.field.options && field.field.options.length > 1) {
         const checkedValues = toStringArray(value);
-        return /* @__PURE__ */ jsx65("div", { className: "rb-space-y-2", children: field.field.options.map((option) => /* @__PURE__ */ jsxs47("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-          /* @__PURE__ */ jsx65(
+        return /* @__PURE__ */ jsx69("div", { className: "rb-space-y-2", children: field.field.options.map((option) => /* @__PURE__ */ jsxs49("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
+          /* @__PURE__ */ jsx69(
             "input",
             {
               type: "checkbox",
@@ -31531,11 +31818,11 @@ function DefaultFieldInput({
               className: "form-checkbox"
             }
           ),
-          /* @__PURE__ */ jsx65("span", { className: "rb-caption", children: option.label })
+          /* @__PURE__ */ jsx69("span", { className: "rb-caption", children: option.label })
         ] }, option.value)) });
       }
-      return /* @__PURE__ */ jsxs47("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsxs49("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
+        /* @__PURE__ */ jsx69(
           "input",
           {
             type: "checkbox",
@@ -31549,11 +31836,11 @@ function DefaultFieldInput({
             className: "form-checkbox"
           }
         ),
-        /* @__PURE__ */ jsx65("span", { className: "rb-caption", children: field.field.placeholder || field.label })
+        /* @__PURE__ */ jsx69("span", { className: "rb-caption", children: field.field.placeholder || field.label })
       ] });
     case "booking_requirement_consent":
-      return /* @__PURE__ */ jsxs47("label", { className: "rb-flex rb-items-start rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsxs49("label", { className: "rb-flex rb-items-start rb-gap-2 rb-cursor-pointer", children: [
+        /* @__PURE__ */ jsx69(
           "input",
           {
             type: "checkbox",
@@ -31567,10 +31854,10 @@ function DefaultFieldInput({
             className: "form-checkbox rb-mt-0.5"
           }
         ),
-        /* @__PURE__ */ jsx65("span", { className: "rb-caption", children: field.field.placeholder || field.label })
+        /* @__PURE__ */ jsx69("span", { className: "rb-caption", children: field.field.placeholder || field.label })
       ] });
     case "number":
-      return /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsx69(
         "input",
         {
           ...commonProps,
@@ -31584,7 +31871,7 @@ function DefaultFieldInput({
         }
       );
     case "date":
-      return /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsx69(
         "input",
         {
           ...commonProps,
@@ -31597,7 +31884,7 @@ function DefaultFieldInput({
         }
       );
     case "time":
-      return /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsx69(
         "input",
         {
           ...commonProps,
@@ -31611,7 +31898,7 @@ function DefaultFieldInput({
     case "email":
     case "tel":
     case "url":
-      return /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsx69(
         "input",
         {
           ...commonProps,
@@ -31635,8 +31922,8 @@ function DefaultBookingDiscount({
 }) {
   const shouldShowDiscountSection = !booking.payment.selectedAppointmentPackageId && !booking.discount.loading && (booking.discount.manualCodeEntryAllowed || Boolean(booking.discount.autoAppliedDiscount));
   if (!shouldShowDiscountSection) return null;
-  return /* @__PURE__ */ jsxs47("div", { className: "rb-mt-6", children: [
-    booking.discount.manualCodeEntryAllowed ? /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsxs49("div", { className: "rb-mt-6", children: [
+    booking.discount.manualCodeEntryAllowed ? /* @__PURE__ */ jsx69(
       DiscountCodeDisclosure,
       {
         surface: "theme-form",
@@ -31650,7 +31937,7 @@ function DefaultBookingDiscount({
         }
       }
     ) : null,
-    booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx65(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs47("p", { className: "ab-text", children: [
+    booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx69(FeedbackMessage, { tone: "info", className: "alert alert-info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs49("p", { className: "ab-text", children: [
       "Discount available: ",
       booking.discount.autoAppliedDiscount.publicLabel,
       " ",
@@ -31662,9 +31949,9 @@ function DefaultBookingFeedback({
   booking
 }) {
   if (booking.feedback.kind !== "error") return null;
-  return /* @__PURE__ */ jsxs47(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: [
-    /* @__PURE__ */ jsx65("p", { className: "ab-text", children: booking.feedback.message }),
-    /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsxs49(FeedbackMessage, { tone: "error", className: "alert alert-error rb-mt-4", role: "alert", children: [
+    /* @__PURE__ */ jsx69("p", { className: "ab-text", children: booking.feedback.message }),
+    /* @__PURE__ */ jsx69(
       "button",
       {
         type: "button",
@@ -31679,7 +31966,7 @@ function DefaultBookingAltcha({
   booking
 }) {
   if (!booking.spamProtection.enabled) return null;
-  return /* @__PURE__ */ jsx65("div", { className: "ab-altcha", children: /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx69("div", { className: "ab-altcha", children: /* @__PURE__ */ jsx69(
     AltchaWidget,
     {
       challengeUrl: booking.spamProtection.challenge.url,
@@ -31688,45 +31975,27 @@ function DefaultBookingAltcha({
   ) });
 }
 function DefaultBookingErrorSummary({
-  errors
+  errors,
+  id
 }) {
   if (!hasBookingValidationErrors(errors)) return null;
-  return /* @__PURE__ */ jsxs47(FeedbackMessage, { tone: "error", className: "rb-mt-6 alert alert-error", role: "alert", children: [
-    errors.formError ? /* @__PURE__ */ jsx65("p", { className: "rb-caption", children: /* @__PURE__ */ jsx65("strong", { children: errors.formError }) }) : null,
-    Object.entries(errors.fieldErrors).map(([key, message]) => /* @__PURE__ */ jsx65("p", { className: "rb-caption", children: message }, key))
-  ] });
-}
-function SelectedCheck() {
-  return /* @__PURE__ */ jsx65("div", { className: "ab-check", children: /* @__PURE__ */ jsx65(
-    "svg",
+  return /* @__PURE__ */ jsxs49(
+    FeedbackMessage,
     {
-      fill: "none",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "2",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      children: /* @__PURE__ */ jsx65("path", { d: "M5 13l4 4L19 7" })
+      tone: "error",
+      className: "rb-mt-6 alert alert-error",
+      id,
+      role: "alert",
+      children: [
+        errors.formError ? /* @__PURE__ */ jsx69("p", { className: "rb-caption", children: /* @__PURE__ */ jsx69("strong", { children: errors.formError }) }) : null,
+        Object.entries(errors.fieldErrors).map(([key, message]) => /* @__PURE__ */ jsx69("p", { className: "rb-caption", children: message }, key))
+      ]
     }
-  ) });
+  );
 }
-function collapseHeadlessSlotsForDisplay(input) {
-  const seenStartTimes = /* @__PURE__ */ new Set();
-  const visibleSlots = [];
-  for (const slot of input.slots) {
-    if (!input.hasSelectedResource) {
-      if (seenStartTimes.has(slot.startAt)) continue;
-      seenStartTimes.add(slot.startAt);
-    }
-    visibleSlots.push({
-      startAt: slot.startAt,
-      endAt: slot.endAt,
-      resourceId: unsafeAsAppointmentResourceId(slot.resourceId)
-    });
-  }
-  return visibleSlots;
+function SelectedCheck() {
+  return /* @__PURE__ */ jsx69("div", { className: "rb-option-check", children: /* @__PURE__ */ jsx69(CheckIcon2, {}) });
 }
-var paymentOptionLayoutStyle, summaryStackStyle;
 var init_booking_form_default_ui = __esm({
   "../blocks/src/system/runtime/nodes/booking-form.default-ui.tsx"() {
     "use strict";
@@ -31739,20 +32008,11 @@ var init_booking_form_default_ui = __esm({
     init_DatePicker();
     init_TimeSlotSelector();
     init_spinner();
+    init_CheckIcon();
+    init_StepIndicator();
     init_FeedbackMessage();
     init_DiscountCodeDisclosure();
     init_FieldValidationMessage();
-    paymentOptionLayoutStyle = {
-      alignItems: "flex-start",
-      display: "flex",
-      flexDirection: "column",
-      gap: "0.25rem",
-      justifyContent: "flex-start",
-      width: "100%"
-    };
-    summaryStackStyle = {
-      gap: "0.125rem"
-    };
   }
 });
 
@@ -31952,36 +32212,10 @@ var init_utils2 = __esm({
   }
 });
 
-// ../blocks/src/system/runtime/shared/components/CheckIcon.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
-function CheckIcon2({ className, strokeWidth = 2 }) {
-  return /* @__PURE__ */ jsx66(
-    "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__ */ jsx66("path", { d: "M5 13l4 4L19 7" })
-    }
-  );
-}
-var init_CheckIcon = __esm({
-  "../blocks/src/system/runtime/shared/components/CheckIcon.tsx"() {
-    "use strict";
-  }
-});
-
 // ../blocks/src/system/runtime/shared/components/ClockIcon.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 function ClockIcon2({ className, strokeWidth = 2 }) {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx70(
     "svg",
     {
       fill: "none",
@@ -31994,7 +32228,7 @@ function ClockIcon2({ className, strokeWidth = 2 }) {
       width: "1em",
       height: "1em",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx67("path", { d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" })
+      children: /* @__PURE__ */ jsx70("path", { d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" })
     }
   );
 }
@@ -32005,9 +32239,9 @@ var init_ClockIcon = __esm({
 });
 
 // ../blocks/src/system/runtime/shared/components/CrossIcon.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 function CrossIcon({ className, strokeWidth = 2 }) {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx71(
     "svg",
     {
       fill: "none",
@@ -32020,7 +32254,7 @@ function CrossIcon({ className, strokeWidth = 2 }) {
       width: "1em",
       height: "1em",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx68("path", { d: "M6 18L18 6M6 6l12 12" })
+      children: /* @__PURE__ */ jsx71("path", { d: "M6 18L18 6M6 6l12 12" })
     }
   );
 }
@@ -32031,8 +32265,8 @@ var init_CrossIcon = __esm({
 });
 
 // ../blocks/src/system/runtime/shared/components/ActionRow.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
-function joinClasses5(...parts) {
+import { jsx as jsx72 } from "react/jsx-runtime";
+function joinClasses6(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 function ActionRow({
@@ -32040,10 +32274,10 @@ function ActionRow({
   className,
   align = "start"
 }) {
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx72(
     "div",
     {
-      className: joinClasses5("rb-flex rb-flex-wrap rb-items-center rb-gap-2", alignmentClasses[align], className),
+      className: joinClasses6("rb-flex rb-flex-wrap rb-items-center rb-gap-2", alignmentClasses[align], className),
       "data-action-row": true,
       children
     }
@@ -32062,14 +32296,14 @@ var init_ActionRow = __esm({
 });
 
 // ../blocks/src/system/runtime/shared/components/LoggedInAsUser.tsx
-import { Fragment as Fragment10, jsx as jsx70, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx73, jsxs as jsxs50 } from "react/jsx-runtime";
 function LoggedInAsUser({ email, onLogout, classPrefix }) {
-  return /* @__PURE__ */ jsxs48("p", { className: `${classPrefix}-logged-in-hint`, children: [
+  return /* @__PURE__ */ jsxs50("p", { className: `${classPrefix}-logged-in-hint`, children: [
     "Logged in as ",
     email,
-    onLogout && /* @__PURE__ */ jsxs48(Fragment10, { children: [
+    onLogout && /* @__PURE__ */ jsxs50(Fragment9, { children: [
       " \u2014 ",
-      /* @__PURE__ */ jsx70("button", { type: "button", className: `${classPrefix}-link`, onClick: onLogout, children: "Not you? Log out" })
+      /* @__PURE__ */ jsx73("button", { type: "button", className: `${classPrefix}-link`, onClick: onLogout, children: "Not you? Log out" })
     ] })
   ] });
 }
@@ -32079,32 +32313,21 @@ var init_LoggedInAsUser = __esm({
   }
 });
 
-// ../blocks/src/system/runtime/shared/components/StateIcon.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
-function StateIcon({ variant, children }) {
-  return /* @__PURE__ */ jsx71("div", { className: `rb-state-icon rb-state-icon--${variant}`, "aria-hidden": "true", children });
-}
-var init_StateIcon = __esm({
-  "../blocks/src/system/runtime/shared/components/StateIcon.tsx"() {
-    "use strict";
-  }
-});
-
 // ../blocks/src/system/runtime/shared/components/MembershipHero.tsx
-import { jsx as jsx72, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs51 } from "react/jsx-runtime";
 function MembershipHero({
   membershipName,
   classPrefix,
   onBookForSomeoneElse
 }) {
-  return /* @__PURE__ */ jsxs49(FeedbackMessage, { tone: "success", className: `${classPrefix}-membership-hero`, role: "status", children: [
-    /* @__PURE__ */ jsx72("div", { className: `${classPrefix}-membership-hero__icon`, "aria-hidden": "true", children: "\u2728" }),
-    /* @__PURE__ */ jsxs49("h3", { className: `${classPrefix}-membership-hero__title`, children: [
+  return /* @__PURE__ */ jsxs51(FeedbackMessage, { tone: "success", className: `${classPrefix}-membership-hero`, role: "status", children: [
+    /* @__PURE__ */ jsx74("div", { className: `${classPrefix}-membership-hero__icon`, "aria-hidden": "true", children: "\u2728" }),
+    /* @__PURE__ */ jsxs51("h3", { className: `${classPrefix}-membership-hero__title`, children: [
       "Included with your ",
       membershipName
     ] }),
-    /* @__PURE__ */ jsx72("p", { className: `${classPrefix}-membership-hero__subtitle`, children: "No payment required" }),
-    onBookForSomeoneElse && /* @__PURE__ */ jsx72(
+    /* @__PURE__ */ jsx74("p", { className: `${classPrefix}-membership-hero__subtitle`, children: "No payment required" }),
+    onBookForSomeoneElse && /* @__PURE__ */ jsx74(
       "button",
       {
         type: "button",
@@ -32123,9 +32346,9 @@ var init_MembershipHero = __esm({
 });
 
 // ../blocks/src/system/runtime/shared/components/ModalShell.tsx
-import * as React6 from "react";
+import * as React9 from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx73, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs52 } from "react/jsx-runtime";
 function lockBodyScroll() {
   if (typeof document === "undefined") {
     return;
@@ -32164,10 +32387,10 @@ function ModalShell({
   closeButtonClassName,
   closeIcon
 }) {
-  const closeButtonRef = React6.useRef(null);
-  const onCloseRef = React6.useRef(onClose);
+  const closeButtonRef = React9.useRef(null);
+  const onCloseRef = React9.useRef(onClose);
   onCloseRef.current = onClose;
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     closeButtonRef.current?.focus({ preventScroll: true });
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -32181,7 +32404,7 @@ function ModalShell({
       unlockBodyScroll();
     };
   }, []);
-  const srOnlyTitle = renderSrOnlyTitle ? /* @__PURE__ */ jsx73(
+  const srOnlyTitle = renderSrOnlyTitle ? /* @__PURE__ */ jsx75(
     "h2",
     {
       id: titleId,
@@ -32199,9 +32422,9 @@ function ModalShell({
       children: title
     }
   ) : null;
-  const header = renderHeader ? renderHeader({ title, titleId, onClose, closeButtonRef }) : /* @__PURE__ */ jsxs50("div", { className: headerClassName, children: [
-    !renderSrOnlyTitle ? /* @__PURE__ */ jsx73("h3", { className: titleClassName, id: titleId, children: title }) : null,
-    /* @__PURE__ */ jsx73(
+  const header = renderHeader ? renderHeader({ title, titleId, onClose, closeButtonRef }) : /* @__PURE__ */ jsxs52("div", { className: headerClassName, children: [
+    !renderSrOnlyTitle ? /* @__PURE__ */ jsx75("h3", { className: titleClassName, id: titleId, children: title }) : null,
+    /* @__PURE__ */ jsx75(
       "button",
       {
         ref: closeButtonRef,
@@ -32213,7 +32436,7 @@ function ModalShell({
       }
     )
   ] });
-  const modal = /* @__PURE__ */ jsx73("div", { className: overlayClassName, onClick: onClose, children: /* @__PURE__ */ jsxs50(
+  const modal = /* @__PURE__ */ jsx75("div", { className: overlayClassName, onClick: onClose, children: /* @__PURE__ */ jsxs52(
     "div",
     {
       className: modalClassName,
@@ -32237,7 +32460,7 @@ function ModalShell({
   if (!portalRoot) {
     return null;
   }
-  const modalNode = portalWrapperClassName || portalWrapperProps ? /* @__PURE__ */ jsx73("div", { ...portalWrapperProps, className: portalWrapperClassName, children: modal }) : modal;
+  const modalNode = portalWrapperClassName || portalWrapperProps ? /* @__PURE__ */ jsx75("div", { ...portalWrapperProps, className: portalWrapperClassName, children: modal }) : modal;
   return createPortal(modalNode, portalRoot);
 }
 var modalBodyScrollLockCount, modalBodyOriginalOverflow;
@@ -32251,7 +32474,7 @@ var init_ModalShell = __esm({
 });
 
 // ../blocks/src/system/runtime/shared/components/TabBarFragment.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 function clampIndex(idx, len) {
   if (len <= 0) return 0;
   const mod = idx % len;
@@ -32266,7 +32489,7 @@ function TabBarFragment({
   tabClassName,
   activeTabClassName
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className,
@@ -32274,7 +32497,7 @@ function TabBarFragment({
       "aria-label": ariaLabel,
       children: tabs.map((tab, idx) => {
         const isActive = tab.id === activeTab;
-        return /* @__PURE__ */ jsx74(
+        return /* @__PURE__ */ jsx76(
           "button",
           {
             type: "button",
@@ -32318,103 +32541,57 @@ var init_TabBarFragment = __esm({
   }
 });
 
-// ../blocks/src/system/runtime/shared/components/TerminalPanel.tsx
-import { jsx as jsx75, jsxs as jsxs51 } from "react/jsx-runtime";
-function joinClasses6(...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__ */ jsxs51(
-    "div",
+// ../blocks/src/system/runtime/shared/components/SelectableOptionCard.tsx
+import { jsx as jsx77, jsxs as jsxs53 } from "react/jsx-runtime";
+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__ */ jsxs53(
+    "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__ */ jsx75("div", { className: joinClasses6(iconClassName), "data-terminal-icon": true, children: icon2 }) : null,
-        /* @__PURE__ */ jsx75(Title, { className: joinClasses6(titleClassName), "data-terminal-title": true, children: title }),
-        body ? /* @__PURE__ */ jsx75("div", { className: joinClasses6(bodyClassName), "data-terminal-body": true, children: body }) : null,
-        actions ? /* @__PURE__ */ jsx75("div", { className: joinClasses6(actionsClassName), "data-terminal-actions": true, children: actions }) : null,
-        secondaryBody ? /* @__PURE__ */ jsx75("div", { className: joinClasses6(secondaryBodyClassName), "data-terminal-secondary-body": true, children: secondaryBody }) : null
+        /* @__PURE__ */ jsx77("div", { className: iconClassName, children: icon2 }),
+        /* @__PURE__ */ jsx77("div", { className: labelClassName, children: label }),
+        /* @__PURE__ */ jsx77("div", { className: detailClassName, children: detail }),
+        isSelected && renderCheck?.(),
+        disabled && tooltip && renderDisabledTooltip?.(tooltip)
       ]
     }
   );
 }
-var init_TerminalPanel = __esm({
-  "../blocks/src/system/runtime/shared/components/TerminalPanel.tsx"() {
-    "use strict";
-  }
-});
-
-// ../blocks/src/system/runtime/shared/components/StepIndicator.tsx
-import { jsx as jsx76, jsxs as jsxs52 } from "react/jsx-runtime";
-function StepIndicator({
-  currentStep,
-  totalSteps,
-  stepLabels,
-  classPrefix
-}) {
-  return /* @__PURE__ */ jsx76("nav", { "aria-label": "Registration progress", className: `${classPrefix}-steps-nav`, children: /* @__PURE__ */ jsx76("ol", { className: `${classPrefix}-steps`, children: Array.from({ length: totalSteps }, (_, i) => {
-    const stepNum = i + 1;
-    const isActive = stepNum === currentStep;
-    const isComplete = stepNum < currentStep;
-    return /* @__PURE__ */ jsxs52(
-      "li",
-      {
-        className: `${classPrefix}-step`,
-        "aria-current": isActive ? "step" : void 0,
-        children: [
-          /* @__PURE__ */ jsx76(
-            "div",
-            {
-              className: `${classPrefix}-step-circle${isActive ? ` ${classPrefix}-step-circle--active` : ""}${isComplete ? ` ${classPrefix}-step-circle--completed` : ""}`,
-              children: isComplete ? /* @__PURE__ */ jsx76(CheckIcon2, { className: `${classPrefix}-step-check`, strokeWidth: 3 }) : stepNum
-            }
-          ),
-          stepLabels?.[i] && /* @__PURE__ */ jsx76(
-            "span",
-            {
-              className: `${classPrefix}-step-label${isActive ? ` ${classPrefix}-step-label--active` : ""}`,
-              children: stepLabels[i]
-            }
-          ),
-          stepNum < totalSteps && /* @__PURE__ */ jsx76(
-            "div",
-            {
-              className: `${classPrefix}-step-connector${isComplete ? ` ${classPrefix}-step-connector--completed` : ""}`,
-              "aria-hidden": "true"
-            }
-          )
-        ]
-      },
-      i
-    );
-  }) }) });
-}
-var init_StepIndicator = __esm({
-  "../blocks/src/system/runtime/shared/components/StepIndicator.tsx"() {
+var init_SelectableOptionCard = __esm({
+  "../blocks/src/system/runtime/shared/components/SelectableOptionCard.tsx"() {
     "use strict";
-    init_CheckIcon();
+    "use client";
   }
 });
 
@@ -32432,6 +32609,7 @@ var init_components = __esm({
     init_MembershipHero();
     init_TerminalPanel();
     init_StepIndicator();
+    init_SelectableOptionCard();
   }
 });
 
@@ -32446,8 +32624,8 @@ var init_shared6 = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/booking-form.client.tsx
-import React7, { useRef as useRef9, useState as useState2 } from "react";
-import { jsx as jsx77, jsxs as jsxs53 } from "react/jsx-runtime";
+import React10, { useRef as useRef9, useState as useState2 } from "react";
+import { jsx as jsx78, jsxs as jsxs54 } from "react/jsx-runtime";
 function getBookingRedirectLocationSnapshot() {
   if (typeof window === "undefined") {
     return { search: "", hash: "" };
@@ -32468,6 +32646,14 @@ function appendRebookFlag(url, enabled) {
   );
   return nextUrl.toString();
 }
+function BookingSurface({
+  id,
+  className,
+  children
+}) {
+  const classes = ["rb-reg-surface", className ?? ""].join(" ").trim();
+  return /* @__PURE__ */ jsx78("div", { id, className: classes, children });
+}
 function buildBookingFormNodeClientProps(props2) {
   return buildBookingFormInteractiveIslandProps(props2);
 }
@@ -32528,7 +32714,7 @@ var init_booking_form_client = __esm({
         successMessage: render.display.successMessage ?? void 0,
         viewerTimeZone
       });
-      React7.useEffect(() => {
+      React10.useEffect(() => {
         if (!siteId) {
           console.error("[BookingFormClient] ERROR: siteId is missing!");
         }
@@ -32545,7 +32731,7 @@ var init_booking_form_client = __esm({
         redirectState,
         verificationState: verification.state
       });
-      React7.useEffect(() => {
+      React10.useEffect(() => {
         if (viewState.kind === "error") {
           scrollToBlock(bookingAnchorId);
         }
@@ -32554,12 +32740,12 @@ var init_booking_form_client = __esm({
         viewState.kind,
         viewState.kind === "error" ? viewState.message : null
       ]);
-      React7.useEffect(() => {
+      React10.useEffect(() => {
         if (viewState.kind === "success" && redirectState.kind === "success") {
           scrollToBlock(bookingAnchorId);
         }
       }, [bookingAnchorId, redirectState.kind, viewState.kind]);
-      React7.useEffect(() => {
+      React10.useEffect(() => {
         if (!isPortalRebook || viewState.kind !== "success") {
           return;
         }
@@ -32585,13 +32771,13 @@ var init_booking_form_client = __esm({
         viewState.kind
       ]);
       if (render.display.state === "missing" || !form2 || !render.hydration.formId) {
-        return /* @__PURE__ */ jsx77(
+        return /* @__PURE__ */ jsx78(
           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__ */ jsx77("p", { className: "ab-text", children: render.display.message ?? "Booking form not found. Please check your configuration." })
+            children: /* @__PURE__ */ jsx78("p", { className: "ab-text", children: render.display.message ?? "Booking form not found. Please check your configuration." })
           }
         );
       }
@@ -32611,39 +32797,31 @@ var init_booking_form_client = __esm({
         }
       };
       if (viewState.kind === "success") {
-        return /* @__PURE__ */ jsx77(
+        return /* @__PURE__ */ jsx78(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: /* @__PURE__ */ jsx78(
           SuccessMessage,
           {
             message: getBookingSuccessMessage(render.display.successMessage),
-            resourceName: viewState.resourceName,
-            className: render.display.className ?? void 0
+            resourceName: viewState.resourceName
           }
-        );
+        ) });
       }
       if (viewState.kind === "verifying") {
-        return /* @__PURE__ */ jsx77(
-          "div",
-          {
-            id: bookingAnchorId,
-            className: render.display.className ?? void 0,
-            children: /* @__PURE__ */ jsx77(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: /* @__PURE__ */ jsx77("p", { className: "ab-text", children: viewState.message }) })
-          }
-        );
+        return /* @__PURE__ */ jsx78(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: /* @__PURE__ */ jsx78(FeedbackMessage, { tone: "info", className: "alert alert-info", role: "status", children: /* @__PURE__ */ jsx78("p", { className: "ab-text", children: viewState.message }) }) });
       }
-      return /* @__PURE__ */ jsxs53("div", { id: bookingAnchorId, className: render.display.className ?? void 0, children: [
-        render.hydration.noticeMessage ? /* @__PURE__ */ jsx77(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx77("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
-        viewState.kind === "error" ? /* @__PURE__ */ jsx77(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: /* @__PURE__ */ jsx77("p", { className: "ab-text", children: viewState.message }) }) : null,
-        /* @__PURE__ */ jsx77(HeadlessBookingDefaultForm, { booking, onSubmit: handleComplete })
+      return /* @__PURE__ */ jsxs54(BookingSurface, { id: bookingAnchorId, className: render.display.className, children: [
+        render.hydration.noticeMessage ? /* @__PURE__ */ jsx78(FeedbackMessage, { tone: "info", className: "alert alert-info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx78("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
+        viewState.kind === "error" ? /* @__PURE__ */ jsx78(FeedbackMessage, { tone: "error", className: "alert alert-error rb-mb-4", role: "alert", children: /* @__PURE__ */ jsx78("p", { className: "ab-text", children: viewState.message }) }) : null,
+        /* @__PURE__ */ jsx78(HeadlessBookingDefaultForm, { booking, onSubmit: handleComplete })
       ] });
     };
-    BookingFormNodeClient = (props2) => /* @__PURE__ */ jsx77(BookingFormClient, { ...buildBookingFormNodeClientProps(props2) });
+    BookingFormNodeClient = (props2) => /* @__PURE__ */ jsx78(BookingFormClient, { ...buildBookingFormNodeClientProps(props2) });
   }
 });
 
 // ../blocks/src/system/runtime/nodes/event-registration/StepIndicator.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 function StepIndicator2(props2) {
-  return /* @__PURE__ */ jsx78(StepIndicator, { ...props2, classPrefix: "er" });
+  return /* @__PURE__ */ jsx79(StepIndicator, { ...props2, classPrefix: "er", emitSharedClasses: true });
 }
 var init_StepIndicator2 = __esm({
   "../blocks/src/system/runtime/nodes/event-registration/StepIndicator.tsx"() {
@@ -33558,7 +33736,7 @@ var init_sessionStorage = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/event-registration/EventSelectionStep.tsx
-import { Fragment as Fragment11, jsx as jsx79, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx80, jsxs as jsxs55 } from "react/jsx-runtime";
 function getEventSelectionMode(events) {
   const firstSeriesId = events[0]?.seriesId;
   if (events.length > 1 && firstSeriesId && events.every((event) => event.seriesId === firstSeriesId)) {
@@ -33581,9 +33759,9 @@ var init_EventSelectionStep = __esm({
     }) => {
       const selectionMode = getEventSelectionMode(events);
       const isDateSelection2 = selectionMode === "date";
-      return /* @__PURE__ */ jsxs54("div", { className: "er-stack", children: [
-        /* @__PURE__ */ jsx79("h3", { className: "er-title", children: isDateSelection2 ? "Choose a date" : "Select an event" }),
-        /* @__PURE__ */ jsx79("div", { className: "er-event-grid", children: events.map((event) => {
+      return /* @__PURE__ */ jsxs55("div", { className: "rb-reg-stack er-stack", children: [
+        /* @__PURE__ */ jsx80("h3", { className: "er-title", children: isDateSelection2 ? "Choose a date" : "Select an event" }),
+        /* @__PURE__ */ jsx80("div", { className: "er-event-grid", children: events.map((event) => {
           const isSelected = selectedEvent?.publicEventId === event.publicEventId;
           const isSoldOut = event.capacity !== null && event.availableSpots === 0;
           const canJoinWaitlist = isSoldOut && event.waitlistEnabled === true;
@@ -33601,25 +33779,25 @@ var init_EventSelectionStep = __esm({
             isLowCapacity && "er-capacity-badge--low",
             (canJoinWaitlist || !isUnavailable && !isLowCapacity) && "er-capacity-badge--available"
           ].filter(Boolean).join(" ");
-          return /* @__PURE__ */ jsx79(
+          return /* @__PURE__ */ jsx80(
             "button",
             {
               type: "button",
               onClick: () => !isUnavailable && onSelect(event),
               disabled: isUnavailable,
               className: cardClasses,
-              children: /* @__PURE__ */ jsxs54("div", { className: "er-event-option", children: [
-                /* @__PURE__ */ jsxs54("div", { className: "er-event-option-main", children: [
-                  /* @__PURE__ */ jsx79("h4", { className: "er-event-title", children: isDateSelection2 ? formatDate3(event.startsAt, { timeZone }) : event.title }),
-                  /* @__PURE__ */ jsxs54("p", { className: "er-text er-text--muted", children: [
+              children: /* @__PURE__ */ jsxs55("div", { className: "er-event-option", children: [
+                /* @__PURE__ */ jsxs55("div", { className: "er-event-option-main", children: [
+                  /* @__PURE__ */ jsx80("h4", { className: "er-event-title", children: isDateSelection2 ? formatDate3(event.startsAt, { timeZone }) : event.title }),
+                  /* @__PURE__ */ jsxs55("p", { className: "er-text er-text--muted", children: [
                     isDateSelection2 ? formatTime3(event.startsAt, { timeZone }) : `${formatDate3(event.startsAt, { timeZone })} at ${formatTime3(event.startsAt, { timeZone })}`,
-                    showVenue && event.venue && /* @__PURE__ */ jsxs54(Fragment11, { children: [
-                      /* @__PURE__ */ jsx79("span", { "aria-hidden": "true", children: " \xB7 " }),
+                    showVenue && event.venue && /* @__PURE__ */ jsxs55(Fragment10, { children: [
+                      /* @__PURE__ */ jsx80("span", { "aria-hidden": "true", children: " \xB7 " }),
                       event.venue.name
                     ] })
                   ] })
                 ] }),
-                showCapacity && event.capacity !== null && /* @__PURE__ */ jsx79("span", { className: badgeClasses, children: canJoinWaitlist ? "Waitlist" : isUnavailable ? "Sold Out" : `${event.availableSpots ?? 0} spots left` })
+                showCapacity && event.capacity !== null && /* @__PURE__ */ jsx80("span", { className: badgeClasses, children: canJoinWaitlist ? "Waitlist" : isUnavailable ? "Sold Out" : `${event.availableSpots ?? 0} spots left` })
               ] })
             },
             event.publicEventId
@@ -33631,7 +33809,7 @@ var init_EventSelectionStep = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/event-registration/TicketSelectionStep.tsx
-import { Fragment as Fragment12, jsx as jsx80, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx81, jsxs as jsxs56 } from "react/jsx-runtime";
 function getEventAttendanceModeLabel(mode) {
   switch (mode) {
     case "in_person":
@@ -33643,8 +33821,8 @@ function getEventAttendanceModeLabel(mode) {
 function TicketCounter(props2) {
   const { ticketsCount, maxAllowed, label, onTicketsChange } = props2;
   const minAllowed = props2.minAllowed ?? 1;
-  return /* @__PURE__ */ jsxs55("div", { className: "er-row er-counter", children: [
-    /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsxs56("div", { className: "rb-reg-row er-row er-counter", children: [
+    /* @__PURE__ */ jsx81(
       "button",
       {
         type: "button",
@@ -33655,8 +33833,8 @@ function TicketCounter(props2) {
         children: "-"
       }
     ),
-    /* @__PURE__ */ jsx80("span", { className: "er-counter-value", children: ticketsCount }),
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx81("span", { className: "er-counter-value", children: ticketsCount }),
+    /* @__PURE__ */ jsx81(
       "button",
       {
         type: "button",
@@ -33670,11 +33848,11 @@ function TicketCounter(props2) {
   ] });
 }
 function TicketCounterLimit(props2) {
-  return /* @__PURE__ */ jsxs55("p", { className: "er-ticket-counter-limit", children: [
-    /* @__PURE__ */ jsx80("span", { children: props2.maximumLabel }),
-    props2.availabilityLabel ? /* @__PURE__ */ jsxs55(Fragment12, { children: [
-      /* @__PURE__ */ jsx80("br", {}),
-      /* @__PURE__ */ jsx80("span", { children: props2.availabilityLabel })
+  return /* @__PURE__ */ jsxs56("p", { className: "er-ticket-counter-limit", children: [
+    /* @__PURE__ */ jsx81("span", { children: props2.maximumLabel }),
+    props2.availabilityLabel ? /* @__PURE__ */ jsxs56(Fragment11, { children: [
+      /* @__PURE__ */ jsx81("br", {}),
+      /* @__PURE__ */ jsx81("span", { children: props2.availabilityLabel })
     ] }) : null
   ] });
 }
@@ -33686,9 +33864,9 @@ function SlidingScaleAmountField(props2) {
   const minLabel = formatPrice(props2.slidingScale.minAmount, props2.currency);
   const maxLabel = formatPrice(props2.slidingScale.maxAmount, props2.currency);
   const suggestedLabel = props2.slidingScale.suggestedAmount !== null ? formatPrice(props2.slidingScale.suggestedAmount, props2.currency) : null;
-  return /* @__PURE__ */ jsxs55("div", { className: "er-field", children: [
-    /* @__PURE__ */ jsx80("label", { htmlFor: "er-sliding-amount", className: "er-label", children: "Amount" }),
-    /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsxs56("div", { className: "er-field", children: [
+    /* @__PURE__ */ jsx81("label", { htmlFor: "er-sliding-amount", className: "er-label", children: "Amount" }),
+    /* @__PURE__ */ jsx81(
       "input",
       {
         id: "er-sliding-amount",
@@ -33702,7 +33880,7 @@ function SlidingScaleAmountField(props2) {
         onChange: (event) => props2.onChange?.(event.target.value)
       }
     ),
-    /* @__PURE__ */ jsxs55("p", { className: "er-text er-text--muted", children: [
+    /* @__PURE__ */ jsxs56("p", { className: "er-text er-text--muted", children: [
       "Choose between ",
       minLabel,
       " and ",
@@ -33710,13 +33888,13 @@ function SlidingScaleAmountField(props2) {
       suggestedLabel ? `; suggested ${suggestedLabel}` : "",
       "."
     ] }),
-    props2.message ? /* @__PURE__ */ jsx80("p", { className: "er-text er-text--muted", children: props2.message }) : null
+    props2.message ? /* @__PURE__ */ jsx81("p", { className: "er-text er-text--muted", children: props2.message }) : null
   ] });
 }
 function TicketTypeQuantityRows(props2) {
   const totalSelectedQuantity = getTicketSelectionTotal(props2.ticketSelections);
-  return /* @__PURE__ */ jsxs55("div", { className: "er-ticket-lines", children: [
-    /* @__PURE__ */ jsx80("div", { className: "er-ticket-line-list", role: "list", "aria-label": "Tickets", children: props2.ticketTypes.map((ticketType) => {
+  return /* @__PURE__ */ jsxs56("div", { className: "er-ticket-lines", children: [
+    /* @__PURE__ */ jsx81("div", { className: "er-ticket-line-list", role: "list", "aria-label": "Tickets", children: props2.ticketTypes.map((ticketType) => {
       const quantity = getTicketLineQuantity(props2.ticketSelections, ticketType.id);
       const disabled = ticketType.availability.kind === "unavailable";
       const availabilityLabel = getTicketTypeAvailabilityLabel(ticketType);
@@ -33728,24 +33906,24 @@ function TicketTypeQuantityRows(props2) {
         availableSpots: props2.availableSpots,
         ticketTypeRemainingCapacity: ticketType.availability.remainingCapacity
       });
-      return /* @__PURE__ */ jsxs55(
+      return /* @__PURE__ */ jsxs56(
         "div",
         {
           className: `er-ticket-line${disabled ? " er-ticket-line--disabled" : ""}`,
           role: "listitem",
           children: [
-            /* @__PURE__ */ jsxs55("div", { className: "er-ticket-line-main", children: [
-              /* @__PURE__ */ jsxs55("div", { className: "er-ticket-line-heading", children: [
-                /* @__PURE__ */ jsx80("span", { className: "er-ticket-line-name", children: ticketType.name }),
-                /* @__PURE__ */ jsx80("span", { className: "er-ticket-line-price", children: priceLabel })
+            /* @__PURE__ */ jsxs56("div", { className: "er-ticket-line-main", children: [
+              /* @__PURE__ */ jsxs56("div", { className: "er-ticket-line-heading", children: [
+                /* @__PURE__ */ jsx81("span", { className: "er-ticket-line-name", children: ticketType.name }),
+                /* @__PURE__ */ jsx81("span", { className: "er-ticket-line-price", children: priceLabel })
               ] }),
-              ticketType.description ? /* @__PURE__ */ jsx80("p", { className: "er-ticket-line-detail", children: ticketType.description }) : null,
-              availabilityLabel ? /* @__PURE__ */ jsx80("p", { className: "er-ticket-line-detail", children: availabilityLabel }) : ticketType.availability.remainingCapacity !== null ? /* @__PURE__ */ jsxs55("p", { className: "er-ticket-line-detail", children: [
+              ticketType.description ? /* @__PURE__ */ jsx81("p", { className: "er-ticket-line-detail", children: ticketType.description }) : null,
+              availabilityLabel ? /* @__PURE__ */ jsx81("p", { className: "er-ticket-line-detail", children: availabilityLabel }) : ticketType.availability.remainingCapacity !== null ? /* @__PURE__ */ jsxs56("p", { className: "er-ticket-line-detail", children: [
                 ticketType.availability.remainingCapacity,
                 " remaining for this ticket type"
               ] }) : null
             ] }),
-            /* @__PURE__ */ jsx80(
+            /* @__PURE__ */ jsx81(
               TicketCounter,
               {
                 ticketsCount: quantity,
@@ -33766,14 +33944,14 @@ function TicketTypeQuantityRows(props2) {
         ticketType.id
       );
     }) }),
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx81(
       TicketCounterLimit,
       {
         maximumLabel: `${props2.maxTickets} tickets maximum`,
         availabilityLabel: props2.availableSpots != null ? `${props2.availableSpots} spots available` : null
       }
     ),
-    totalSelectedQuantity === 0 && props2.hasAvailableTicketTypes ? /* @__PURE__ */ jsx80("p", { className: "er-text er-text--muted", children: "Choose at least one ticket to continue." }) : totalSelectedQuantity === 0 ? /* @__PURE__ */ jsx80("p", { className: "er-text er-text--muted", children: "No ticket types are currently available." }) : null
+    totalSelectedQuantity === 0 && props2.hasAvailableTicketTypes ? /* @__PURE__ */ jsx81("p", { className: "er-text er-text--muted", children: "Choose at least one ticket to continue." }) : totalSelectedQuantity === 0 ? /* @__PURE__ */ jsx81("p", { className: "er-text er-text--muted", children: "No ticket types are currently available." }) : null
   ] });
 }
 function getAttendanceModeDetail(attendanceMode) {
@@ -33786,9 +33964,9 @@ function getAttendanceModeDetail(attendanceMode) {
   return `${attendanceMode.availableSpots} spots available`;
 }
 function AttendanceModeTiles(props2) {
-  return /* @__PURE__ */ jsx80("div", { className: "er-payment-tiles", role: "list", "aria-label": "Attendance mode", children: props2.attendanceModes.map((attendanceMode) => {
+  return /* @__PURE__ */ jsx81("div", { className: "er-payment-tiles", role: "list", "aria-label": "Attendance mode", children: props2.attendanceModes.map((attendanceMode) => {
     const isSelected = props2.selectedAttendanceMode === attendanceMode.mode;
-    return /* @__PURE__ */ jsx80("div", { role: "listitem", children: /* @__PURE__ */ jsxs55(
+    return /* @__PURE__ */ jsx81("div", { role: "listitem", children: /* @__PURE__ */ jsxs56(
       "button",
       {
         type: "button",
@@ -33796,8 +33974,8 @@ function AttendanceModeTiles(props2) {
         className: `er-payment-tile${isSelected ? " er-payment-tile--selected" : ""}`,
         onClick: () => props2.onAttendanceModeChange?.(attendanceMode.mode),
         children: [
-          /* @__PURE__ */ jsx80("div", { className: "er-payment-tile-label", children: getEventAttendanceModeLabel(attendanceMode.mode) }),
-          /* @__PURE__ */ jsx80("div", { className: "er-payment-tile-detail", children: getAttendanceModeDetail(attendanceMode) })
+          /* @__PURE__ */ jsx81("div", { className: "er-payment-tile-label", children: getEventAttendanceModeLabel(attendanceMode.mode) }),
+          /* @__PURE__ */ jsx81("div", { className: "er-payment-tile-detail", children: getAttendanceModeDetail(attendanceMode) })
         ]
       }
     ) }, attendanceMode.mode);
@@ -33877,9 +34055,9 @@ var init_TicketSelectionStep = __esm({
       });
       const eventAvailabilityLabel = !canJoinWaitlist && event?.availableSpots != null ? `${event.availableSpots} spots available` : null;
       if (deliveryMode === "hybrid" && !selectedAttendanceMode) {
-        return /* @__PURE__ */ jsxs55("div", { className: "er-stack", children: [
-          /* @__PURE__ */ jsx80("h3", { className: "er-title", children: "How will you attend?" }),
-          /* @__PURE__ */ jsx80(
+        return /* @__PURE__ */ jsxs56("div", { className: "rb-reg-stack er-stack", children: [
+          /* @__PURE__ */ jsx81("h3", { className: "er-title", children: "How will you attend?" }),
+          /* @__PURE__ */ jsx81(
             AttendanceModeTiles,
             {
               attendanceModes,
@@ -33887,19 +34065,19 @@ var init_TicketSelectionStep = __esm({
               onAttendanceModeChange
             }
           ),
-          /* @__PURE__ */ jsx80("p", { className: "er-text er-text--muted", children: "Choose whether you want to attend in person or online." })
+          /* @__PURE__ */ jsx81("p", { className: "er-text er-text--muted", children: "Choose whether you want to attend in person or online." })
         ] });
       }
       if (isSoldOut && !canJoinWaitlist) {
-        return /* @__PURE__ */ jsxs55("div", { className: "er-stack", children: [
-          /* @__PURE__ */ jsx80("h3", { className: "er-title", children: "Sold Out" }),
-          /* @__PURE__ */ jsx80("p", { className: "er-text er-text--muted", children: "Sorry you missed out! This event is fully booked." })
+        return /* @__PURE__ */ jsxs56("div", { className: "rb-reg-stack er-stack", children: [
+          /* @__PURE__ */ jsx81("h3", { className: "er-title", children: "Sold Out" }),
+          /* @__PURE__ */ jsx81("p", { className: "er-text er-text--muted", children: "Sorry you missed out! This event is fully booked." })
         ] });
       }
-      return /* @__PURE__ */ jsxs55("div", { className: "er-stack", children: [
-        deliveryMode === "hybrid" ? /* @__PURE__ */ jsxs55(Fragment12, { children: [
-          /* @__PURE__ */ jsx80("h3", { className: "er-title", children: "How will you attend?" }),
-          /* @__PURE__ */ jsx80(
+      return /* @__PURE__ */ jsxs56("div", { className: "rb-reg-stack er-stack", children: [
+        deliveryMode === "hybrid" ? /* @__PURE__ */ jsxs56(Fragment11, { children: [
+          /* @__PURE__ */ jsx81("h3", { className: "er-title", children: "How will you attend?" }),
+          /* @__PURE__ */ jsx81(
             AttendanceModeTiles,
             {
               attendanceModes,
@@ -33908,9 +34086,9 @@ var init_TicketSelectionStep = __esm({
             }
           )
         ] }) : null,
-        usesTicketTypes ? /* @__PURE__ */ jsx80(Fragment12, { children: noVisibleTicketTypes ? /* @__PURE__ */ jsx80("p", { className: "er-text er-text--muted", children: "No ticket types are currently available." }) : /* @__PURE__ */ jsxs55(Fragment12, { children: [
-          /* @__PURE__ */ jsx80("h3", { className: "er-title", children: "Choose tickets" }),
-          /* @__PURE__ */ jsx80(
+        usesTicketTypes ? /* @__PURE__ */ jsx81(Fragment11, { children: noVisibleTicketTypes ? /* @__PURE__ */ jsx81("p", { className: "er-text er-text--muted", children: "No ticket types are currently available." }) : /* @__PURE__ */ jsxs56(Fragment11, { children: [
+          /* @__PURE__ */ jsx81("h3", { className: "er-title", children: "Choose tickets" }),
+          /* @__PURE__ */ jsx81(
             TicketTypeQuantityRows,
             {
               ticketTypes: visibleTicketTypes,
@@ -33922,8 +34100,8 @@ var init_TicketSelectionStep = __esm({
               onTicketSelectionsChange
             }
           )
-        ] }) }) : /* @__PURE__ */ jsxs55(Fragment12, { children: [
-          slidingScale ? /* @__PURE__ */ jsx80(
+        ] }) }) : /* @__PURE__ */ jsxs56(Fragment11, { children: [
+          slidingScale ? /* @__PURE__ */ jsx81(
             SlidingScaleAmountField,
             {
               slidingScale,
@@ -33933,9 +34111,9 @@ var init_TicketSelectionStep = __esm({
               onChange: onSlidingAmountChange
             }
           ) : null,
-          /* @__PURE__ */ jsx80("h3", { className: "er-title", children: canJoinWaitlist ? "How many waitlist spots?" : "How many tickets?" }),
-          /* @__PURE__ */ jsxs55("div", { className: "er-ticket-counter-group", children: [
-            /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx81("h3", { className: "er-title", children: canJoinWaitlist ? "How many waitlist spots?" : "How many tickets?" }),
+          /* @__PURE__ */ jsxs56("div", { className: "er-ticket-counter-group", children: [
+            /* @__PURE__ */ jsx81(
               TicketCounter,
               {
                 ticketsCount,
@@ -33944,7 +34122,7 @@ var init_TicketSelectionStep = __esm({
                 onTicketsChange
               }
             ),
-            /* @__PURE__ */ jsx80(
+            /* @__PURE__ */ jsx81(
               TicketCounterLimit,
               {
                 maximumLabel: `${maxAllowed} ${canJoinWaitlist ? "waitlist spots" : "tickets"} maximum`,
@@ -33953,7 +34131,7 @@ var init_TicketSelectionStep = __esm({
             )
           ] })
         ] }),
-        canJoinWaitlist && /* @__PURE__ */ jsx80("p", { className: "er-text er-text--muted", children: "This event is currently full. Continue to join the waitlist if a spot opens up." })
+        canJoinWaitlist && /* @__PURE__ */ jsx81("p", { className: "er-text er-text--muted", children: "This event is currently full. Continue to join the waitlist if a spot opens up." })
       ] });
     };
   }
@@ -33961,7 +34139,7 @@ var init_TicketSelectionStep = __esm({
 
 // ../blocks/src/system/runtime/nodes/event-registration/GuestDetailsSection.tsx
 import { useRef as useRef11, useEffect as useEffect10 } from "react";
-import { jsx as jsx81, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs57 } from "react/jsx-runtime";
 function hasGuestErrors(errors) {
   return Object.keys(errors).length > 0;
 }
@@ -34004,16 +34182,16 @@ var init_GuestDetailsSection = __esm({
       if (guests.length === 0) return null;
       const showErrorBanner = hasGuestErrors(errors);
       const firstErrorIndex = Object.keys(errors).length > 0 ? Math.min(...Object.keys(errors).map(Number)) : -1;
-      return /* @__PURE__ */ jsxs56(
+      return /* @__PURE__ */ jsxs57(
         "div",
         {
           ref: sectionRef,
           className: `er-guest-section ${shake ? "er-guest-section--shake" : ""}`,
           onAnimationEnd: handleAnimationEnd,
           children: [
-            /* @__PURE__ */ jsx81("h3", { className: "er-title", children: "Who else is coming?" }),
-            showErrorBanner && /* @__PURE__ */ jsx81(FeedbackMessage, { tone: "error", className: "er-guest-section-error", role: "alert", children: errorMessage }),
-            /* @__PURE__ */ jsx81("div", { className: "er-guest-cards", children: guests.map((guest, index) => {
+            /* @__PURE__ */ jsx82("h3", { className: "er-title", children: "Who else is coming?" }),
+            showErrorBanner && /* @__PURE__ */ jsx82(FeedbackMessage, { tone: "error", className: "er-guest-section-error", role: "alert", children: errorMessage }),
+            /* @__PURE__ */ jsx82("div", { className: "er-guest-cards", children: guests.map((guest, index) => {
               const guestError = errors?.[index]?.name;
               const guestErrorId = `guest-${index}-error`;
               const guestValidationProps = getFieldValidationControlProps({
@@ -34021,13 +34199,13 @@ var init_GuestDetailsSection = __esm({
                 messageId: guestErrorId
               });
               const isFirstError = index === firstErrorIndex;
-              return /* @__PURE__ */ jsxs56("div", { className: "er-guest-card", children: [
-                /* @__PURE__ */ jsxs56("div", { className: "er-field", children: [
-                  /* @__PURE__ */ jsxs56("label", { className: "er-label", children: [
+              return /* @__PURE__ */ jsxs57("div", { className: "er-guest-card", children: [
+                /* @__PURE__ */ jsxs57("div", { className: "er-field", children: [
+                  /* @__PURE__ */ jsxs57("label", { className: "er-label", children: [
                     "Name ",
-                    /* @__PURE__ */ jsx81("span", { className: "er-required", children: "*" })
+                    /* @__PURE__ */ jsx82("span", { className: "er-required", children: "*" })
                   ] }),
-                  /* @__PURE__ */ jsx81(
+                  /* @__PURE__ */ jsx82(
                     "input",
                     {
                       ref: isFirstError ? firstErrorRef : void 0,
@@ -34039,11 +34217,11 @@ var init_GuestDetailsSection = __esm({
                       ...guestValidationProps
                     }
                   ),
-                  guestError && /* @__PURE__ */ jsx81(FieldValidationMessage, { id: guestErrorId, className: "er-error", children: guestError })
+                  guestError && /* @__PURE__ */ jsx82(FieldValidationMessage, { id: guestErrorId, className: "er-error", children: guestError })
                 ] }),
-                /* @__PURE__ */ jsxs56("div", { className: "er-field", children: [
-                  /* @__PURE__ */ jsx81("label", { className: "er-label", children: "Email" }),
-                  /* @__PURE__ */ jsx81(
+                /* @__PURE__ */ jsxs57("div", { className: "er-field", children: [
+                  /* @__PURE__ */ jsx82("label", { className: "er-label", children: "Email" }),
+                  /* @__PURE__ */ jsx82(
                     "input",
                     {
                       type: "email",
@@ -34054,9 +34232,9 @@ var init_GuestDetailsSection = __esm({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs56("div", { className: "er-field", children: [
-                  /* @__PURE__ */ jsx81("label", { className: "er-label", children: "Phone" }),
-                  /* @__PURE__ */ jsx81(
+                /* @__PURE__ */ jsxs57("div", { className: "er-field", children: [
+                  /* @__PURE__ */ jsx82("label", { className: "er-label", children: "Phone" }),
+                  /* @__PURE__ */ jsx82(
                     "input",
                     {
                       type: "tel",
@@ -34078,7 +34256,7 @@ var init_GuestDetailsSection = __esm({
 
 // ../blocks/src/system/runtime/nodes/event-registration/AttendeeDetailsStep.tsx
 import { useId as useId2 } from "react";
-import { jsx as jsx82, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs58 } from "react/jsx-runtime";
 var AttendeeDetailsStep;
 var init_AttendeeDetailsStep = __esm({
   "../blocks/src/system/runtime/nodes/event-registration/AttendeeDetailsStep.tsx"() {
@@ -34117,15 +34295,15 @@ var init_AttendeeDetailsStep = __esm({
         messageId: emailErrorId
       });
       const showGuestSection = requireGuestDetails && ticketsCount > 1 && onGuestsChange;
-      return /* @__PURE__ */ jsxs57("div", { className: "er-stack", children: [
-        /* @__PURE__ */ jsx82("h3", { className: "er-title", children: "Your Information" }),
-        /* @__PURE__ */ jsxs57("div", { children: [
-          /* @__PURE__ */ jsxs57("div", { className: "er-field", children: [
-            /* @__PURE__ */ jsxs57("label", { className: "er-label", htmlFor: nameId, children: [
+      return /* @__PURE__ */ jsxs58("div", { className: "rb-reg-stack er-stack", children: [
+        /* @__PURE__ */ jsx83("h3", { className: "er-title", children: "Your Information" }),
+        /* @__PURE__ */ jsxs58("div", { children: [
+          /* @__PURE__ */ jsxs58("div", { className: "er-field", children: [
+            /* @__PURE__ */ jsxs58("label", { className: "er-label", htmlFor: nameId, children: [
               "Name ",
-              /* @__PURE__ */ jsx82("span", { className: "er-required", children: "*" })
+              /* @__PURE__ */ jsx83("span", { className: "er-required", children: "*" })
             ] }),
-            /* @__PURE__ */ jsx82(
+            /* @__PURE__ */ jsx83(
               "input",
               {
                 id: nameId,
@@ -34137,14 +34315,14 @@ var init_AttendeeDetailsStep = __esm({
                 ...nameValidationProps
               }
             ),
-            errors.name && /* @__PURE__ */ jsx82(FieldValidationMessage, { id: nameErrorId, className: "er-error", children: errors.name })
+            errors.name && /* @__PURE__ */ jsx83(FieldValidationMessage, { id: nameErrorId, className: "er-error", children: errors.name })
           ] }),
-          /* @__PURE__ */ jsxs57("div", { className: "er-field", children: [
-            /* @__PURE__ */ jsxs57("label", { className: "er-label", htmlFor: emailId, children: [
+          /* @__PURE__ */ jsxs58("div", { className: "er-field", children: [
+            /* @__PURE__ */ jsxs58("label", { className: "er-label", htmlFor: emailId, children: [
               "Email ",
-              /* @__PURE__ */ jsx82("span", { className: "er-required", children: "*" })
+              /* @__PURE__ */ jsx83("span", { className: "er-required", children: "*" })
             ] }),
-            /* @__PURE__ */ jsx82(
+            /* @__PURE__ */ jsx83(
               "input",
               {
                 id: emailId,
@@ -34157,7 +34335,7 @@ var init_AttendeeDetailsStep = __esm({
                 ...emailValidationProps
               }
             ),
-            emailLocked && /* @__PURE__ */ jsx82(
+            emailLocked && /* @__PURE__ */ jsx83(
               LoggedInAsUser,
               {
                 email: formData.email,
@@ -34165,11 +34343,11 @@ var init_AttendeeDetailsStep = __esm({
                 classPrefix: "er"
               }
             ),
-            errors.email && /* @__PURE__ */ jsx82(FieldValidationMessage, { id: emailErrorId, className: "er-error", children: errors.email })
+            errors.email && /* @__PURE__ */ jsx83(FieldValidationMessage, { id: emailErrorId, className: "er-error", children: errors.email })
           ] }),
-          /* @__PURE__ */ jsxs57("div", { className: "er-field", children: [
-            /* @__PURE__ */ jsx82("label", { className: "er-label", htmlFor: phoneId, children: "Phone" }),
-            /* @__PURE__ */ jsx82(
+          /* @__PURE__ */ jsxs58("div", { className: "er-field", children: [
+            /* @__PURE__ */ jsx83("label", { className: "er-label", htmlFor: phoneId, children: "Phone" }),
+            /* @__PURE__ */ jsx83(
               "input",
               {
                 id: phoneId,
@@ -34181,9 +34359,9 @@ var init_AttendeeDetailsStep = __esm({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs57("div", { className: "er-field", children: [
-            /* @__PURE__ */ jsx82("label", { className: "er-label", htmlFor: notesId, children: "Notes" }),
-            /* @__PURE__ */ jsx82(
+          /* @__PURE__ */ jsxs58("div", { className: "er-field", children: [
+            /* @__PURE__ */ jsx83("label", { className: "er-label", htmlFor: notesId, children: "Notes" }),
+            /* @__PURE__ */ jsx83(
               "textarea",
               {
                 id: notesId,
@@ -34196,7 +34374,7 @@ var init_AttendeeDetailsStep = __esm({
             )
           ] })
         ] }),
-        showGuestSection && /* @__PURE__ */ jsx82(
+        showGuestSection && /* @__PURE__ */ jsx83(
           GuestDetailsSection,
           {
             guests,
@@ -34574,7 +34752,7 @@ var init_lucide_react = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/event-registration/MembershipHero.tsx
-import { jsx as jsx83, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs59 } from "react/jsx-runtime";
 var MembershipHero2;
 var init_MembershipHero2 = __esm({
   "../blocks/src/system/runtime/nodes/event-registration/MembershipHero.tsx"() {
@@ -34584,14 +34762,14 @@ var init_MembershipHero2 = __esm({
     MembershipHero2 = ({
       membershipName
     }) => {
-      return /* @__PURE__ */ jsx83("div", { className: "er-stack", children: /* @__PURE__ */ jsxs58("div", { className: "er-booking-mode-hero", children: [
-        /* @__PURE__ */ jsx83("div", { className: "er-booking-mode-hero-icon", children: /* @__PURE__ */ jsx83(Sparkles, { size: 20, fill: "currentColor", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsxs58("div", { className: "er-booking-mode-hero-content", children: [
-          /* @__PURE__ */ jsxs58("h3", { className: "er-booking-mode-hero-title", children: [
+      return /* @__PURE__ */ jsx84("div", { className: "rb-reg-stack er-stack", children: /* @__PURE__ */ jsxs59("div", { className: "er-booking-mode-hero", children: [
+        /* @__PURE__ */ jsx84("div", { className: "er-booking-mode-hero-icon", children: /* @__PURE__ */ jsx84(Sparkles, { size: 20, fill: "currentColor", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs59("div", { className: "er-booking-mode-hero-content", children: [
+          /* @__PURE__ */ jsxs59("h3", { className: "er-booking-mode-hero-title", children: [
             "This event is included with your ",
             membershipName
           ] }),
-          /* @__PURE__ */ jsx83("p", { className: "er-booking-mode-hero-subtitle", children: "No payment required - your membership covers this event." })
+          /* @__PURE__ */ jsx84("p", { className: "er-booking-mode-hero-subtitle", children: "No payment required - your membership covers this event." })
         ] })
       ] }) });
     };
@@ -34606,60 +34784,6 @@ var init_CheckIcon2 = __esm({
   }
 });
 
-// ../blocks/src/system/runtime/nodes/event-registration/SelectableOptionCard.tsx
-import { jsx as jsx84, jsxs as jsxs59 } from "react/jsx-runtime";
-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__ */ jsxs59(
-    "button",
-    {
-      type: "button",
-      className,
-      onClick: disabled ? void 0 : onClick,
-      title: showNativeTitle ? tooltip : void 0,
-      "aria-disabled": disabled || void 0,
-      children: [
-        /* @__PURE__ */ jsx84("div", { className: iconClassName, children: icon2 }),
-        /* @__PURE__ */ jsx84("div", { className: labelClassName, children: label }),
-        /* @__PURE__ */ jsx84("div", { className: detailClassName, children: detail }),
-        isSelected && renderCheck?.(),
-        disabled && tooltip && renderDisabledTooltip?.(tooltip)
-      ]
-    }
-  );
-}
-var init_SelectableOptionCard = __esm({
-  "../blocks/src/system/runtime/nodes/event-registration/SelectableOptionCard.tsx"() {
-    "use strict";
-    "use client";
-  }
-});
-
 // ../blocks/src/system/runtime/nodes/event-registration/eventPaymentOptions.ts
 function buildEventRegistrationPaymentOptionsViewModel(input) {
   const supportedOptions = selectSupportedEventDirectPaymentOptions(
@@ -34749,9 +34873,9 @@ var init_eventPaymentOptions = __esm({
 
 // ../blocks/src/system/runtime/nodes/event-registration/PaymentSelectionStep.tsx
 import { useEffect as useEffect11, useCallback as useCallback6 } from "react";
-import { Fragment as Fragment13, jsx as jsx85, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx85, jsxs as jsxs60 } from "react/jsx-runtime";
 function PaymentCheckIcon() {
-  return /* @__PURE__ */ jsx85("div", { className: "er-check", children: /* @__PURE__ */ jsx85(CheckIcon2, {}) });
+  return /* @__PURE__ */ jsx85("div", { className: "rb-option-check er-check", children: /* @__PURE__ */ jsx85(CheckIcon2, {}) });
 }
 function PaymentTile({
   icon: icon2,
@@ -34808,7 +34932,7 @@ var init_PaymentSelectionStep = __esm({
     init_spinner();
     init_buttons();
     init_CheckIcon2();
-    init_SelectableOptionCard();
+    init_shared6();
     init_eventPaymentOptions();
     PaymentSelectionStep = ({
       event,
@@ -34900,25 +35024,25 @@ var init_PaymentSelectionStep = __esm({
         getButtonText
       ]);
       if (eligibilityLoading) {
-        return /* @__PURE__ */ jsx85("div", { className: "er-stack", children: /* @__PURE__ */ jsxs60("div", { className: "er-center", children: [
+        return /* @__PURE__ */ jsx85("div", { className: "rb-reg-stack er-stack", children: /* @__PURE__ */ jsxs60("div", { className: "er-center", children: [
           /* @__PURE__ */ jsx85(SpinnerNode, { size: "lg", srLabel: "Checking payment options" }),
           /* @__PURE__ */ jsx85("p", { className: "er-text--muted", children: "Checking payment options..." })
         ] }) });
       }
       if (eligibilityError) {
-        return /* @__PURE__ */ jsx85("div", { className: "er-stack", children: /* @__PURE__ */ jsx85("div", { className: "er-center", children: /* @__PURE__ */ jsx85("p", { className: "er-text er-text--error", children: eligibilityError }) }) });
+        return /* @__PURE__ */ jsx85("div", { className: "rb-reg-stack er-stack", children: /* @__PURE__ */ jsx85("div", { className: "er-center", children: /* @__PURE__ */ jsx85("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__ */ jsx85("div", { className: "er-stack", children: /* @__PURE__ */ jsx85("div", { className: "er-center", children: /* @__PURE__ */ jsxs60("p", { className: "er-text er-text--error", children: [
+        return /* @__PURE__ */ jsx85("div", { className: "rb-reg-stack er-stack", children: /* @__PURE__ */ jsx85("div", { className: "er-center", children: /* @__PURE__ */ jsxs60("p", { className: "er-text er-text--error", children: [
           "Unable to determine payment options",
           missing.length > 0 && ` (missing: ${missing.join(", ")})`
         ] }) }) });
       }
       if (eligibility.isFree) {
-        return /* @__PURE__ */ jsxs60("div", { className: "er-stack", children: [
+        return /* @__PURE__ */ jsxs60("div", { className: "rb-reg-stack er-stack", children: [
           /* @__PURE__ */ jsx85("h3", { className: "er-title", children: "Payment" }),
           /* @__PURE__ */ jsxs60("div", { className: "er-payment-summary", children: [
             /* @__PURE__ */ jsx85("p", { className: "er-text er-text--success", children: "This event is free!" }),
@@ -34932,15 +35056,15 @@ var init_PaymentSelectionStep = __esm({
       }
       if (!eligibility.eligible) {
         if (eligibility.isFull && !eligibility.canJoinWaitlist) {
-          return /* @__PURE__ */ jsxs60("div", { className: "er-stack", children: [
+          return /* @__PURE__ */ jsxs60("div", { className: "rb-reg-stack er-stack", children: [
             /* @__PURE__ */ jsx85("h3", { className: "er-title", children: "Sold Out" }),
             /* @__PURE__ */ jsx85("div", { className: "er-center", children: /* @__PURE__ */ jsx85("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__ */ jsxs60("div", { className: "er-stack", children: [
+        return /* @__PURE__ */ jsxs60("div", { className: "rb-reg-stack er-stack", children: [
           /* @__PURE__ */ jsx85("h3", { className: "er-title", children: shouldPromptLogin ? "Log In Required" : "Payment Required" }),
-          /* @__PURE__ */ jsx85("div", { className: "er-center", children: shouldPromptLogin ? /* @__PURE__ */ jsxs60(Fragment13, { children: [
+          /* @__PURE__ */ jsx85("div", { className: "er-center", children: shouldPromptLogin ? /* @__PURE__ */ jsxs60(Fragment12, { children: [
             /* @__PURE__ */ jsx85("p", { className: "er-text er-text--muted", children: "Have a pass or membership? Log in to use it." }),
             /* @__PURE__ */ jsx85(
               "button",
@@ -34956,7 +35080,7 @@ var init_PaymentSelectionStep = __esm({
               }
             ),
             !email.trim() && /* @__PURE__ */ jsx85("p", { className: "er-text er-text--muted", children: "Enter your email to request a login link." })
-          ] }) : /* @__PURE__ */ jsxs60(Fragment13, { children: [
+          ] }) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
             /* @__PURE__ */ jsx85("p", { className: "er-text er-text--error", children: "This event requires a valid pass or membership to register." }),
             eligibility.eventAcceptsPasses && !eligibility.eventAcceptsMemberships && /* @__PURE__ */ jsx85("p", { className: "er-text er-text--muted", children: "You need a pass with credits for this event category." }),
             eligibility.eventAcceptsMemberships && !eligibility.eventAcceptsPasses && /* @__PURE__ */ jsx85("p", { className: "er-text er-text--muted", children: "You need an active membership for this event category." })
@@ -34964,10 +35088,10 @@ var init_PaymentSelectionStep = __esm({
         ] });
       }
       const isMultiTicket = areEntitlementsDisabledForTicketCount(ticketsCount);
-      return /* @__PURE__ */ jsxs60("div", { className: "er-stack", children: [
+      return /* @__PURE__ */ jsxs60("div", { className: "rb-reg-stack er-stack", children: [
         /* @__PURE__ */ jsx85("h3", { className: "er-title", children: "Payment Options" }),
         /* @__PURE__ */ jsxs60("div", { className: "er-payment-tiles", children: [
-          canShowDirectPaymentOptions && /* @__PURE__ */ jsx85(Fragment13, { children: directPaymentOptions.map((option) => /* @__PURE__ */ jsx85(
+          canShowDirectPaymentOptions && /* @__PURE__ */ jsx85(Fragment12, { children: directPaymentOptions.map((option) => /* @__PURE__ */ jsx85(
             PaymentTile,
             {
               icon: /* @__PURE__ */ jsx85(CreditCard, { size: 24, "aria-hidden": "true" }),
@@ -35066,7 +35190,7 @@ var init_PaymentSelectionStep = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/event-registration/SuccessStep.tsx
-import { Fragment as Fragment14, jsx as jsx86, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx86, jsxs as jsxs61 } from "react/jsx-runtime";
 var SuccessStep;
 var init_SuccessStep = __esm({
   "../blocks/src/system/runtime/nodes/event-registration/SuccessStep.tsx"() {
@@ -35087,7 +35211,7 @@ var init_SuccessStep = __esm({
           iconClassName: "er-icon",
           titleClassName: "er-title--lg er-message",
           bodyClassName: "er-text--muted",
-          icon: /* @__PURE__ */ jsx86(StateIcon, { variant: variant === "info" ? "info" : "success", children: /* @__PURE__ */ jsx86("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: variant === "info" ? /* @__PURE__ */ jsxs61(Fragment14, { children: [
+          icon: /* @__PURE__ */ jsx86(StateIcon, { variant: variant === "info" ? "info" : "success", children: /* @__PURE__ */ jsx86("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: variant === "info" ? /* @__PURE__ */ jsxs61(Fragment13, { children: [
             /* @__PURE__ */ jsx86("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8h.01" }),
             /* @__PURE__ */ jsx86("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 12h1v4h1" }),
             /* @__PURE__ */ jsx86("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" })
@@ -35250,7 +35374,7 @@ var init_event_registration = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/event-registration/EventRegistrationWizardContent.tsx
-import { Fragment as Fragment15, jsx as jsx91, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx91, jsxs as jsxs64 } from "react/jsx-runtime";
 function EventRegistrationWizardContent(props2) {
   const { wizard } = props2;
   const showSpamProtection = props2.showSpamProtection ?? isSpamProtectionEnabled();
@@ -35277,7 +35401,7 @@ function EventRegistrationWizardContent(props2) {
     case "select-tickets": {
       if (!wizard.selectedEvent && !wizard.occurrenceContext) return null;
       const hasExistingRegistration = wizard.portalAuthState === "authenticated" && wizard.existingRegistration !== null;
-      return /* @__PURE__ */ jsxs64(Fragment15, { children: [
+      return /* @__PURE__ */ jsxs64(Fragment14, { children: [
         hasExistingRegistration && /* @__PURE__ */ jsx91(
           TerminalPanel,
           {
@@ -35322,7 +35446,7 @@ function EventRegistrationWizardContent(props2) {
     }
     case "enter-details": {
       const showMembershipNotice = wizard.portalAuthState === "authenticated" && wizard.ticketsCount === 1 && wizard.eligibility?.eligibleMemberships[0];
-      return /* @__PURE__ */ jsxs64(Fragment15, { children: [
+      return /* @__PURE__ */ jsxs64(Fragment14, { children: [
         showMembershipNotice && /* @__PURE__ */ jsx91(MembershipHero2, { membershipName: showMembershipNotice.membershipName }),
         /* @__PURE__ */ jsx91(
           AttendeeDetailsStep,
@@ -35346,7 +35470,7 @@ function EventRegistrationWizardContent(props2) {
     }
     case "select-payment":
       if (!wizard.api.config.siteId) return null;
-      return /* @__PURE__ */ jsxs64(Fragment15, { children: [
+      return /* @__PURE__ */ jsxs64(Fragment14, { children: [
         /* @__PURE__ */ jsx91(
           PaymentSelectionStep,
           {
@@ -35434,7 +35558,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__ */ jsxs65("div", { className: "er-actions", children: [
+      return /* @__PURE__ */ jsxs65("div", { className: "rb-wizard-actions er-actions", children: [
         !wizard.hasPreSelectedContext && /* @__PURE__ */ jsx92("button", { type: "button", onClick: () => wizard.setStep("select-event"), className: "er-back-btn", children: "\u2190 Back" }),
         /* @__PURE__ */ jsx92(
           "button",
@@ -35456,7 +35580,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__ */ jsxs65("div", { className: "er-actions", children: [
+      return /* @__PURE__ */ jsxs65("div", { className: "rb-wizard-actions er-actions", children: [
         /* @__PURE__ */ jsx92("button", { type: "button", onClick: () => wizard.setStep(prevStepForDetails), className: "er-back-btn", children: "\u2190 Back" }),
         /* @__PURE__ */ jsx92(
           "button",
@@ -35475,7 +35599,7 @@ function EventRegistrationWizardActions(props2) {
       const handlePaymentContinue = () => {
         void wizard.handlePaymentSelect();
       };
-      return /* @__PURE__ */ jsxs65("div", { className: "er-actions", children: [
+      return /* @__PURE__ */ jsxs65("div", { className: "rb-wizard-actions er-actions", children: [
         /* @__PURE__ */ jsx92("button", { type: "button", onClick: () => wizard.setStep("enter-details"), className: "er-back-btn", children: "\u2190 Back" }),
         status === "ready" && /* @__PURE__ */ jsx92(
           "button",
@@ -35502,7 +35626,7 @@ var init_EventRegistrationWizardActions = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/event-registration/EventRegistrationSummaryBar.tsx
-import { Fragment as Fragment16, jsx as jsx93, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx93, jsxs as jsxs66 } from "react/jsx-runtime";
 function isProductMethod(method) {
   return method !== null && ["pass", "membership", "pass_bundle", "membership_bundle"].includes(method);
 }
@@ -35555,7 +35679,7 @@ function EventRegistrationSummaryBar(props2) {
   } : null;
   if (!summaryTitle) return null;
   const productMethod = isProductMethod(wizard.paymentSelection.method);
-  return /* @__PURE__ */ jsxs66(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs66(Fragment15, { children: [
     productMethod && wizard.paymentSelection.productName && /* @__PURE__ */ jsxs66("div", { className: "er-summary-bar-product", children: [
       /* @__PURE__ */ jsxs66("div", { children: [
         /* @__PURE__ */ jsx93("div", { className: "er-summary-bar-product-name", children: wizard.paymentSelection.productName }),
@@ -35577,7 +35701,7 @@ function EventRegistrationSummaryBar(props2) {
         /* @__PURE__ */ jsx93("h4", { className: "er-summary-bar-event", children: summaryTitle }),
         /* @__PURE__ */ jsxs66("span", { className: "er-summary-bar-meta", children: [
           summaryDate && formatEventDateTime(summaryDate, { timeZone: summaryTimeZone }),
-          wizard.step !== "select-event" && wizard.step !== "select-tickets" && wizard.ticketsCount > 0 && /* @__PURE__ */ jsxs66(Fragment16, { children: [
+          wizard.step !== "select-event" && wizard.step !== "select-tickets" && wizard.ticketsCount > 0 && /* @__PURE__ */ jsxs66(Fragment15, { children: [
             " \xB7 ",
             wizard.ticketsCount,
             " ticket",
@@ -35589,10 +35713,10 @@ function EventRegistrationSummaryBar(props2) {
           teamMemberNames.join(", ")
         ] })
       ] }),
-      subtotalCents > 0 && /* @__PURE__ */ jsx93("div", { className: "er-summary-bar-pricing", children: productMethod ? /* @__PURE__ */ jsxs66(Fragment16, { children: [
+      subtotalCents > 0 && /* @__PURE__ */ jsx93("div", { className: "er-summary-bar-pricing", children: productMethod ? /* @__PURE__ */ jsxs66(Fragment15, { children: [
         /* @__PURE__ */ jsx93("span", { className: "er-summary-bar-price er-summary-bar-price--struck", children: formatPrice(subtotalCents, summaryCurrency) }),
         /* @__PURE__ */ jsx93("div", { className: "er-summary-bar-included", children: wizard.paymentSelection.method === "pass" || wizard.paymentSelection.method === "pass_bundle" ? "1 pass credit" : "Included in membership" })
-      ] }) : flexibleBalanceSummary ? /* @__PURE__ */ jsxs66(Fragment16, { children: [
+      ] }) : flexibleBalanceSummary ? /* @__PURE__ */ jsxs66(Fragment15, { children: [
         flexibleBalanceSummary.total ? /* @__PURE__ */ jsxs66("div", { className: "er-summary-bar-product-detail", children: [
           "Total: ",
           flexibleBalanceSummary.total
@@ -35608,7 +35732,7 @@ function EventRegistrationSummaryBar(props2) {
           "Deposit: ",
           flexibleBalanceSummary.depositPolicy
         ] }) : null
-      ] }) : autoAppliedDiscount && autoAppliedDiscountCents > 0 ? /* @__PURE__ */ jsxs66(Fragment16, { children: [
+      ] }) : autoAppliedDiscount && autoAppliedDiscountCents > 0 ? /* @__PURE__ */ jsxs66(Fragment15, { children: [
         /* @__PURE__ */ jsx93("span", { className: "er-summary-bar-price er-summary-bar-price--struck", children: formatPrice(subtotalCents, summaryCurrency) }),
         /* @__PURE__ */ jsx93("div", { className: "er-summary-bar-price", children: formatPrice(discountedTotalCents, summaryCurrency) }),
         /* @__PURE__ */ jsxs66("div", { className: "er-summary-bar-included", children: [
@@ -36946,9 +37070,9 @@ var init_MagicLinkForm = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/event-registration/EventRegistrationWizard.tsx
-import React12, { useEffect as useEffect15, useMemo as useMemo8, useState as useState6 } from "react";
+import React15, { useEffect as useEffect15, useMemo as useMemo8, useState as useState6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment17, jsx as jsx95, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx95, jsxs as jsxs68 } from "react/jsx-runtime";
 function EventPortalAuthPrompt(props2) {
   return /* @__PURE__ */ jsxs68("div", { className: "er-portal-auth", children: [
     /* @__PURE__ */ jsx95("p", { className: "er-portal-auth-title", children: props2.copy.title }),
@@ -36984,7 +37108,7 @@ function EventRegistrationWizard(props2) {
   const showSpamProtection = spamProtectionEnabled ?? isSpamProtectionEnabled();
   const buttonClass = themeButtonClassName({ variant: buttonVariant, size: "md" });
   const registrationRootClassName = `event-registration ${className || ""}`;
-  const registrationRootRef = React12.useRef(null);
+  const registrationRootRef = React15.useRef(null);
   const wizard = useEventRegistrationWizard({
     anchorId: EVENT_REGISTRATION_ANCHOR_ID,
     occurrenceContext: occurrenceContext ?? null,
@@ -37081,7 +37205,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__ */ jsxs68("div", { className: `er-container${variant === "overlay" ? " er-container--overlay" : ""}`, children: [
+  const renderRegistrationSurface = (variant) => /* @__PURE__ */ jsxs68("div", { className: `rb-reg-surface er-container${variant === "overlay" ? " er-container--overlay" : ""}`, children: [
     isWizardStep && /* @__PURE__ */ jsxs68("div", { className: "er-payment-layout er-payment-layout--no-sidebar", children: [
       /* @__PURE__ */ jsxs68("div", { className: "er-payment-layout-main", children: [
         totalSteps > 1 && /* @__PURE__ */ jsx95(StepIndicator2, { currentStep: currentStepNumber, totalSteps, stepLabels }),
@@ -37167,7 +37291,7 @@ function EventRegistrationWizard(props2) {
   const bookingSummaryMeta = [summaryPriceLabel, summaryAvailabilityLabel].filter(Boolean).join(" \xB7 ");
   const bookingTicketTypes = getActiveTicketTypes2(summaryEvent);
   const bookingTicketTypesCurrency = summaryEvent?.pricing.kind === "ticket_types" ? summaryEvent.pricing.currency : null;
-  const renderBookingEntry = (base) => /* @__PURE__ */ jsxs68(Fragment17, { children: [
+  const renderBookingEntry = (base) => /* @__PURE__ */ jsxs68(Fragment16, { children: [
     /* @__PURE__ */ jsxs68("div", { className: `${base}__info`, children: [
       /* @__PURE__ */ jsx95("span", { className: `${base}__title`, children: "Book this event" }),
       bookingSummaryMeta && /* @__PURE__ */ jsx95("span", { className: `${base}__meta`, children: bookingSummaryMeta }),
@@ -37576,7 +37700,7 @@ var init_BookingModeStep = __esm({
 
 // ../blocks/src/system/runtime/nodes/course-registration/PortalAuthSidebar.tsx
 import { useEffect as useEffect17, useState as useState8 } from "react";
-import { Fragment as Fragment18, jsx as jsx101, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx101, jsxs as jsxs71 } from "react/jsx-runtime";
 function PortalAuthSidebar({
   onMagicLinkSent,
   autoOpen = false,
@@ -37590,7 +37714,7 @@ function PortalAuthSidebar({
     if (!autoOpen) return;
     setShowModal(true);
   }, [autoOpen]);
-  return /* @__PURE__ */ jsxs71(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment17, { children: [
     /* @__PURE__ */ jsxs71("div", { className: "cr-portal-sidebar", children: [
       /* @__PURE__ */ jsx101("div", { className: "cr-portal-sidebar__icon", "aria-hidden": "true", children: "\u{1F464}" }),
       /* @__PURE__ */ jsx101("h3", { className: "cr-portal-sidebar__title", children: copy.title }),
@@ -37685,7 +37809,7 @@ var init_PortalAuthSidebar = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/course-registration/SuccessStep.tsx
-import { Fragment as Fragment19, jsx as jsx102, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx102, jsxs as jsxs72 } from "react/jsx-runtime";
 function SuccessStep2({
   usedMembership,
   successMessage,
@@ -37699,7 +37823,7 @@ function SuccessStep2({
       titleClassName: "cr-success__title",
       icon: /* @__PURE__ */ jsx102(StateIcon, { variant: "success", children: /* @__PURE__ */ jsx102(CheckIcon2, { strokeWidth: 2 }) }),
       title: "Enrollment Complete!",
-      body: /* @__PURE__ */ jsxs72(Fragment19, { children: [
+      body: /* @__PURE__ */ jsxs72(Fragment18, { children: [
         /* @__PURE__ */ jsx102("p", { className: "cr-success__message", children: usedMembership ? membershipMessage : successMessage }),
         usedMembership && /* @__PURE__ */ jsx102("p", { className: "cr-success__membership", children: "Enrolled using your membership" })
       ] })
@@ -37745,7 +37869,7 @@ var init_ErrorStep2 = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/course-registration/VerifyingTimeoutStep.tsx
-import { Fragment as Fragment20, jsx as jsx104, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx104, jsxs as jsxs73 } from "react/jsx-runtime";
 function VerifyingTimeoutStep2({
   buttonText = "Check Again",
   buttonVariant = "primary",
@@ -37761,7 +37885,7 @@ function VerifyingTimeoutStep2({
       titleClassName: "cr-error__title",
       icon: /* @__PURE__ */ jsx104(StateIcon, { variant: "warning", children: /* @__PURE__ */ jsx104(ClockIcon2, {}) }),
       title: "Payment Verification Taking Longer",
-      body: /* @__PURE__ */ jsxs73(Fragment20, { children: [
+      body: /* @__PURE__ */ jsxs73(Fragment19, { children: [
         /* @__PURE__ */ jsx104("p", { className: "cr-error__message", children: "Your payment may still be processing. Please check your email for confirmation." }),
         supportEmail && /* @__PURE__ */ jsxs73("p", { className: "cr-error__message", children: [
           "If you need help, contact us at",
@@ -37814,7 +37938,7 @@ var init_PaymentFailedStep2 = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/course-registration/WaitlistStep.tsx
-import { Fragment as Fragment21, jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
 function WaitlistStep({ message, position }) {
   return /* @__PURE__ */ jsx106(
     TerminalPanel,
@@ -37824,7 +37948,7 @@ function WaitlistStep({ message, position }) {
       titleClassName: "cr-waitlist__title",
       icon: /* @__PURE__ */ jsx106(StateIcon, { variant: "waitlist", children: /* @__PURE__ */ jsx106(ClockIcon2, {}) }),
       title: "Added to Waitlist",
-      body: /* @__PURE__ */ jsxs74(Fragment21, { children: [
+      body: /* @__PURE__ */ jsxs74(Fragment20, { children: [
         /* @__PURE__ */ jsx106("p", { className: "cr-waitlist__message", children: message }),
         typeof position === "number" && /* @__PURE__ */ jsxs74("p", { className: "cr-waitlist__position", children: [
           "Your position: #",
@@ -37891,12 +38015,12 @@ var init_CourseRegistrationErrorBoundary = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/course-registration/components.tsx
-import React15 from "react";
-import { Fragment as Fragment22, jsx as jsx108, jsxs as jsxs76 } from "react/jsx-runtime";
+import React18 from "react";
+import { Fragment as Fragment21, jsx as jsx108, jsxs as jsxs76 } from "react/jsx-runtime";
 function TeamMemberInlineList({
   teamMembers
 }) {
-  return /* @__PURE__ */ jsx108(Fragment22, { children: teamMembers.map((teamMember, index) => /* @__PURE__ */ jsxs76(React15.Fragment, { children: [
+  return /* @__PURE__ */ jsx108(Fragment21, { children: teamMembers.map((teamMember, index) => /* @__PURE__ */ jsxs76(React18.Fragment, { children: [
     index > 0 ? ", " : "",
     teamMember.profilePath ? /* @__PURE__ */ jsx108("a", { href: teamMember.profilePath, children: teamMember.name }) : teamMember.name
   ] }, teamMember.id)) });
@@ -38084,7 +38208,7 @@ function EnrollmentForm({ formData, errors, onChange, isEmailLocked, isLoading,
     message: errors.email,
     messageId: emailErrorId
   });
-  return /* @__PURE__ */ jsxs76(Fragment22, { children: [
+  return /* @__PURE__ */ jsxs76(Fragment21, { children: [
     /* @__PURE__ */ jsxs76("div", { className: "cr-form__field", children: [
       /* @__PURE__ */ jsx108("label", { htmlFor: "cr-name", className: "cr-form__label", children: "Name *" }),
       /* @__PURE__ */ jsx108(
@@ -38804,7 +38928,7 @@ var init_useCourseRegistrationWizard = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/course-registration/CourseRegistrationWizard.tsx
-import { Fragment as Fragment23, jsx as jsx109, jsxs as jsxs77 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx109, jsxs as jsxs77 } from "react/jsx-runtime";
 function getCourseSlidingScaleMessage(pricing) {
   if (!pricing.slidingScale) {
     return null;
@@ -38930,7 +39054,7 @@ function CourseRegistrationWizard(props2) {
       id: COURSE_REGISTRATION_ANCHOR_ID,
       className: `course-registration ${className || ""}`,
       "data-block": "course-registration",
-      children: /* @__PURE__ */ jsx109("div", { className: "cr-container", children: /* @__PURE__ */ jsxs77(
+      children: /* @__PURE__ */ jsx109("div", { className: "rb-reg-surface cr-container", children: /* @__PURE__ */ jsxs77(
         "div",
         {
           className: `cr-layout${showSidebarLayout ? " cr-layout--with-sidebar" : ""}`,
@@ -38980,7 +39104,7 @@ function CourseRegistrationWizard(props2) {
                     }
                   ) }),
                   /* @__PURE__ */ jsx109("p", { className: "cr-text cr-text--muted", children: "Registration closed." })
-                ] }) : /* @__PURE__ */ jsxs77(Fragment23, { children: [
+                ] }) : /* @__PURE__ */ jsxs77(Fragment22, { children: [
                   /* @__PURE__ */ jsxs77(
                     "form",
                     {
@@ -39622,7 +39746,7 @@ var init_location_map_client = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/shop-commerce-store.ts
-import * as React17 from "react";
+import * as React20 from "react";
 function storageKey(siteId) {
   return `riverbank:shop-cart:${siteId}`;
 }
@@ -39638,8 +39762,8 @@ function addPassToCommerceCart(siteId, input) {
 }
 function useCommerceCart(siteId) {
   const effectiveSiteId = siteId ?? "unknown";
-  const store = React17.useMemo(() => getStore(effectiveSiteId), [effectiveSiteId]);
-  const state = React17.useSyncExternalStore(
+  const store = React20.useMemo(() => getStore(effectiveSiteId), [effectiveSiteId]);
+  const state = React20.useSyncExternalStore(
     (listener) => store.subscribe(listener),
     () => store.getSnapshot(),
     () => EMPTY_STATE
@@ -39735,11 +39859,11 @@ var init_shop_commerce_store = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/shop-add-feedback.tsx
-import * as React18 from "react";
+import * as React21 from "react";
 import { jsx as jsx114, jsxs as jsxs80 } from "react/jsx-runtime";
 function useTransientShopAddFeedback(timeoutMs = DEFAULT_TIMEOUT_MS) {
-  const [activeKey, setActiveKey] = React18.useState(null);
-  React18.useEffect(() => {
+  const [activeKey, setActiveKey] = React21.useState(null);
+  React21.useEffect(() => {
     if (!activeKey) return;
     const timeoutId = window.setTimeout(() => {
       setActiveKey((current) => current === activeKey ? null : current);
@@ -40218,8 +40342,8 @@ var init_useDiscountApply = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/shop.client.tsx
-import React19, { useCallback as useCallback9, useEffect as useEffect21, useRef as useRef13, useState as useState12 } from "react";
-import { Fragment as Fragment24, jsx as jsx115, jsxs as jsxs81 } from "react/jsx-runtime";
+import React22, { useCallback as useCallback9, useEffect as useEffect21, useRef as useRef13, useState as useState12 } from "react";
+import { Fragment as Fragment23, jsx as jsx115, jsxs as jsxs81 } from "react/jsx-runtime";
 function ShopClient(props2) {
   return /* @__PURE__ */ jsx115(PassesMembershipsController, { render: props2.render });
 }
@@ -40243,11 +40367,11 @@ function getCheckoutDiscountApplyLine(checkout2) {
 }
 function PassesMembershipsController({ render }) {
   const api = useBlockApi();
-  const [state, dispatch] = React19.useReducer(
+  const [state, dispatch] = React22.useReducer(
     shopPassesMembershipsReducer,
     initialShopPassesMembershipsState
   );
-  const [discountApply, dispatchDiscountApply] = React19.useReducer(
+  const [discountApply, dispatchDiscountApply] = React22.useReducer(
     discountApplyReducer,
     initialDiscountApplyState
   );
@@ -40260,7 +40384,7 @@ function PassesMembershipsController({ render }) {
   const display = render.display;
   const hydration = render.hydration;
   const checkoutTitle = getCheckoutModalTitle(checkout2);
-  const discountContext = React19.useMemo(() => {
+  const discountContext = React22.useMemo(() => {
     if (!checkout2) return null;
     return checkout2.item.productType === "pass" ? { type: "pass", passId: checkout2.item.product.id } : { type: "membership", membershipId: checkout2.item.product.id };
   }, [checkout2]);
@@ -40398,12 +40522,12 @@ function PassesMembershipsController({ render }) {
   const handleConfirmDuplicate = useCallback9(() => {
     void submitCheckout(true);
   }, [submitCheckout]);
-  return /* @__PURE__ */ jsxs81(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs81(Fragment23, { children: [
     /* @__PURE__ */ jsx115("div", { ref: shopRootRef, children: /* @__PURE__ */ jsx115(
       PassesMembershipsSectionView,
       {
         display,
-        beforeContent: /* @__PURE__ */ jsx115(Fragment24, { children: state.returnNotice ? /* @__PURE__ */ jsx115(
+        beforeContent: /* @__PURE__ */ jsx115(Fragment23, { children: state.returnNotice ? /* @__PURE__ */ jsx115(
           TerminalPanel,
           {
             tone: state.returnNotice.kind === "success" ? "success" : "warning",
@@ -40517,7 +40641,7 @@ function PassesMembershipsController({ render }) {
                 /* @__PURE__ */ jsxs81("p", { className: "shop__modal-warning-text", children: [
                   "Your current membership: ",
                   /* @__PURE__ */ jsx115("strong", { children: checkout2.duplicateWarning.existingMembership.name }),
-                  checkout2.duplicateWarning.existingMembership.expiresAt ? /* @__PURE__ */ jsxs81(Fragment24, { children: [
+                  checkout2.duplicateWarning.existingMembership.expiresAt ? /* @__PURE__ */ jsxs81(Fragment23, { children: [
                     " (expires ",
                     new Date(checkout2.duplicateWarning.existingMembership.expiresAt).toLocaleDateString(),
                     ")"
@@ -42585,8 +42709,8 @@ var init_embla_carousel_react_esm = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/carousel.client.tsx
-import React20 from "react";
-import { Fragment as Fragment25, jsx as jsx116, jsxs as jsxs82 } from "react/jsx-runtime";
+import React23 from "react";
+import { Fragment as Fragment24, jsx as jsx116, jsxs as jsxs82 } from "react/jsx-runtime";
 function normalizeCarouselProps(input) {
   const transition = input.transition === "fade" ? "fade" : "slide";
   const arrowVisibility = input.arrowVisibility === "never" ? "never" : input.arrowVisibility === "hover" ? "hover" : "always";
@@ -42640,8 +42764,8 @@ var init_carousel_client = __esm({
       autoplayDelay,
       loop
     }) => {
-      const slides = React20.Children.toArray(children).filter(Boolean);
-      const normalized = React20.useMemo(
+      const slides = React23.Children.toArray(children).filter(Boolean);
+      const normalized = React23.useMemo(
         () => normalizeCarouselProps({
           slidesToShow,
           transition,
@@ -42665,11 +42789,11 @@ var init_carousel_client = __esm({
       );
       const resolvedSlides = resolveSlidesToShowMobile(normalized.slidesToShow);
       const canAutoplay = normalized.autoplay && slides.length > 1;
-      const cssVars = React20.useMemo(
+      const cssVars = React23.useMemo(
         () => getCarouselSlidesToShowCssVars(normalized.slidesToShow),
         [normalized.slidesToShow]
       );
-      const plugins = React20.useMemo(() => {
+      const plugins = React23.useMemo(() => {
         if (!canAutoplay) return void 0;
         return [
           Autoplay({
@@ -42691,11 +42815,11 @@ var init_carousel_client = __esm({
         },
         plugins
       );
-      const [selectedIndex, setSelectedIndex] = React20.useState(0);
-      const [scrollSnaps, setScrollSnaps] = React20.useState([]);
-      const [canScrollPrev, setCanScrollPrev] = React20.useState(false);
-      const [canScrollNext, setCanScrollNext] = React20.useState(false);
-      React20.useEffect(() => {
+      const [selectedIndex, setSelectedIndex] = React23.useState(0);
+      const [scrollSnaps, setScrollSnaps] = React23.useState([]);
+      const [canScrollPrev, setCanScrollPrev] = React23.useState(false);
+      const [canScrollNext, setCanScrollNext] = React23.useState(false);
+      React23.useEffect(() => {
         if (!api) return;
         const onInit = () => {
           setScrollSnaps(api.scrollSnapList());
@@ -42718,7 +42842,7 @@ var init_carousel_client = __esm({
           api.off("reInit", onSelect);
         };
       }, [api]);
-      React20.useEffect(() => {
+      React23.useEffect(() => {
         if (!api || !canAutoplay) return;
         const autoplayPlugin = api.plugins()?.autoplay;
         if (!autoplayPlugin) return;
@@ -42729,7 +42853,7 @@ var init_carousel_client = __esm({
         document.addEventListener("visibilitychange", handleVisibility);
         return () => document.removeEventListener("visibilitychange", handleVisibility);
       }, [api, canAutoplay]);
-      const inner = /* @__PURE__ */ jsxs82(Fragment25, { children: [
+      const inner = /* @__PURE__ */ jsxs82(Fragment24, { children: [
         /* @__PURE__ */ jsx116("div", { className: "carousel-frame rb-overflow-hidden rb-w-full", children: /* @__PURE__ */ jsx116(
           "div",
           {
@@ -42793,7 +42917,7 @@ var init_carousel_client = __esm({
       canScrollNext
     }) => {
       if (slidesCount <= resolvedSlides) return null;
-      return /* @__PURE__ */ jsxs82(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs82(Fragment24, { children: [
         /* @__PURE__ */ jsx116(
           "button",
           {
@@ -42969,16 +43093,16 @@ var init_shop_cart_discount_ui = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/shop-commerce.tsx
-import * as React21 from "react";
-import { Fragment as Fragment26, jsx as jsx117, jsxs as jsxs83 } from "react/jsx-runtime";
+import * as React24 from "react";
+import { Fragment as Fragment25, jsx as jsx117, jsxs as jsxs83 } from "react/jsx-runtime";
 function ProductListController(props2) {
   const api = useBlockApi();
   const cart2 = useCommerceCart(api.config.siteId);
   const addFeedback = useTransientShopAddFeedback();
-  const [variantSelection, setVariantSelection] = React21.useState(
+  const [variantSelection, setVariantSelection] = React24.useState(
     () => Object.fromEntries(props2.render.display.cards.map((card) => [card.productId, card.selectedVariantId]))
   );
-  const cards = React21.useMemo(
+  const cards = React24.useMemo(
     () => props2.render.hydration.products.map(
       (product) => buildProductCardDisplay(
         product,
@@ -42992,7 +43116,7 @@ function ProductListController(props2) {
     ),
     [props2.render.hydration, variantSelection]
   );
-  const display = React21.useMemo(
+  const display = React24.useMemo(
     () => ({
       ...props2.render.display,
       state: cards.length === 0 ? "empty" : "ready",
@@ -43016,7 +43140,7 @@ function ProductListController(props2) {
           }))
         }
       ),
-      actions: /* @__PURE__ */ jsxs83(Fragment26, { children: [
+      actions: /* @__PURE__ */ jsxs83(Fragment25, { children: [
         /* @__PURE__ */ jsx117(
           "button",
           {
@@ -43061,17 +43185,17 @@ function ProductDetailController(props2) {
   const api = useBlockApi();
   const cart2 = useCommerceCart(api.config.siteId);
   const addFeedback = useTransientShopAddFeedback();
-  const selectedProduct = React21.useMemo(
+  const selectedProduct = React24.useMemo(
     () => props2.render.hydration.products.find((product) => product.id === props2.render.hydration.productId) ?? null,
     [props2.render.hydration.productId, props2.render.hydration.products]
   );
-  const [variantId, setVariantId] = React21.useState(
+  const [variantId, setVariantId] = React24.useState(
     props2.render.display.state === "ready" ? props2.render.display.selectedVariantId : null
   );
-  React21.useEffect(() => {
+  React24.useEffect(() => {
     setVariantId(props2.render.display.state === "ready" ? props2.render.display.selectedVariantId : null);
   }, [props2.render.display]);
-  const display = React21.useMemo(
+  const display = React24.useMemo(
     () => buildProductDetailDisplay(
       selectedProduct,
       {
@@ -43138,7 +43262,7 @@ function ProductDetailController(props2) {
 function CartController(props2) {
   const api = useBlockApi();
   const cart2 = useCommerceCart(api.config.siteId);
-  const display = React21.useMemo(
+  const display = React24.useMemo(
     () => getShopDisplayForItems(props2.render, cart2.items),
     [cart2.items, props2.render]
   );
@@ -43146,7 +43270,7 @@ function CartController(props2) {
     CartShellView,
     {
       display,
-      renderControls: (item) => /* @__PURE__ */ jsxs83(Fragment26, { children: [
+      renderControls: (item) => /* @__PURE__ */ jsxs83(Fragment25, { children: [
         /* @__PURE__ */ jsx117(
           "input",
           {
@@ -43169,7 +43293,7 @@ function CartController(props2) {
           }
         )
       ] }),
-      footerActions: /* @__PURE__ */ jsxs83(Fragment26, { children: [
+      footerActions: /* @__PURE__ */ jsxs83(Fragment25, { children: [
         /* @__PURE__ */ jsx117(
           "button",
           {
@@ -43197,15 +43321,15 @@ function CartController(props2) {
 function CheckoutController(props2) {
   const api = useBlockApi();
   const cart2 = useCommerceCart(api.config.siteId);
-  const [state, dispatch] = React21.useReducer(
+  const [state, dispatch] = React24.useReducer(
     shopCheckoutReducer,
     initialShopCheckoutState
   );
-  const [discountApply, dispatchDiscountApply] = React21.useReducer(
+  const [discountApply, dispatchDiscountApply] = React24.useReducer(
     discountApplyReducer,
     initialDiscountApplyState
   );
-  React21.useEffect(() => {
+  React24.useEffect(() => {
     const checkout2 = consumeSearchParam("checkout");
     if (checkout2 === "success") {
       cart2.clear();
@@ -43214,15 +43338,15 @@ function CheckoutController(props2) {
       dispatch({ type: "setNotice", notice: "cancelled" });
     }
   }, [cart2]);
-  const display = React21.useMemo(
+  const display = React24.useMemo(
     () => getShopDisplayForItems(props2.render, cart2.items),
     [cart2.items, props2.render]
   );
-  const checkoutState = React21.useMemo(
+  const checkoutState = React24.useMemo(
     () => deriveCommerceCheckoutState({ items: cart2.items }),
     [cart2.items]
   );
-  const discountAvailabilityPlan = React21.useMemo(
+  const discountAvailabilityPlan = React24.useMemo(
     () => planCartDiscountAvailabilityRequests(checkoutState),
     [checkoutState]
   );
@@ -43231,15 +43355,15 @@ function CheckoutController(props2) {
     discountApply.status,
     formatCommercePrice
   );
-  React21.useEffect(() => {
+  React24.useEffect(() => {
     if (discountUiState.type === "manual-allowed") return;
     dispatchDiscountApply({ type: "remove" });
   }, [discountUiState.type]);
-  const checkoutIdentity = React21.useMemo(() => {
+  const checkoutIdentity = React24.useMemo(() => {
     if (checkoutState.kind !== "ready") return checkoutState.kind;
     return checkoutState.items.map((item) => `${item.key}:${item.quantity}:${item.unitPriceCents}`).join("|");
   }, [checkoutState]);
-  React21.useEffect(() => {
+  React24.useEffect(() => {
     dispatchDiscountApply({ type: "resetApplied" });
   }, [checkoutIdentity, state.form.email]);
   const applyDiscountCode = useDiscountApply({
@@ -43468,7 +43592,7 @@ var init_navDropdownSizing = __esm({
 });
 
 // ../blocks/src/system/runtime/header/HeaderCartDrawer.tsx
-import * as React38 from "react";
+import * as React40 from "react";
 import { jsx as jsx131, jsxs as jsxs86 } from "react/jsx-runtime";
 function normalizeQuantityInput(value) {
   const parsed = Number(value);
@@ -43518,8 +43642,8 @@ function HeaderCartDrawerItems(props2) {
   )) });
 }
 function HeaderCartDrawer(props2) {
-  const titleId = React38.useId();
-  const display = React38.useMemo(
+  const titleId = React40.useId();
+  const display = React40.useMemo(
     () => buildCartDisplay(props2.cart.items, {
       heading: "Cart",
       emptyMessage: "Your cart is empty.",
@@ -43742,22 +43866,22 @@ var init_HeaderCartTrigger = __esm({
 });
 
 // ../blocks/src/system/runtime/header/headerCartRuntime.tsx
-import * as React39 from "react";
+import * as React41 from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { Fragment as Fragment28, jsx as jsx133, jsxs as jsxs88 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx133, jsxs as jsxs88 } from "react/jsx-runtime";
 function HeaderCartRuntime(props2) {
   const cart2 = useCommerceCart(props2.siteId);
-  const itemCount = React39.useMemo(() => getCartItemCount(cart2.items), [cart2.items]);
-  const [open, setOpen] = React39.useState(false);
-  const checkoutHref = React39.useMemo(
+  const itemCount = React41.useMemo(() => getCartItemCount(cart2.items), [cart2.items]);
+  const [open, setOpen] = React41.useState(false);
+  const checkoutHref = React41.useMemo(
     () => resolveHeaderCartCheckoutHref(
       props2.mounts,
       typeof window === "undefined" ? null : window.location.pathname
     ),
     [props2.mounts]
   );
-  return /* @__PURE__ */ jsxs88(Fragment28, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment27, { children: [
     props2.mounts.map(
       (mount) => createPortal3(
         /* @__PURE__ */ jsx133(
@@ -44480,7 +44604,7 @@ var init_EventCard_client = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/events/shared/EventPaginatedListView.client.tsx
-import { Fragment as Fragment29, jsx as jsx137, jsxs as jsxs90 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx137, jsxs as jsxs90 } from "react/jsx-runtime";
 var EventPaginatedListView;
 var init_EventPaginatedListView_client = __esm({
   "../blocks/src/system/runtime/nodes/events/shared/EventPaginatedListView.client.tsx"() {
@@ -44523,7 +44647,7 @@ var init_EventPaginatedListView_client = __esm({
               resetFiltersText
             }
           ),
-          footer: /* @__PURE__ */ jsxs90(Fragment29, { children: [
+          footer: /* @__PURE__ */ jsxs90(Fragment28, { children: [
             error ? /* @__PURE__ */ jsxs90("div", { className: "rb-mt-6 rb-text-center", children: [
               /* @__PURE__ */ jsx137("p", { className: "status-error rb-caption rb-mb-2", children: "Failed to load more events" }),
               /* @__PURE__ */ jsx137(
@@ -45839,18 +45963,18 @@ var init_DayEventsModal = __esm({
 });
 
 // ../blocks/src/system/runtime/nodes/events/shared/EventModals.tsx
-import React44 from "react";
-import { Fragment as Fragment30, jsx as jsx144, jsxs as jsxs93 } from "react/jsx-runtime";
+import React46 from "react";
+import { Fragment as Fragment29, jsx as jsx144, jsxs as jsxs93 } from "react/jsx-runtime";
 function EventModals({
   showCapacity,
   cardVariant,
   buttonVariant,
   buttonText
 }) {
-  const markerRef = React44.useRef(null);
-  const [portalRoot, setPortalRoot] = React44.useState(null);
+  const markerRef = React46.useRef(null);
+  const [portalRoot, setPortalRoot] = React46.useState(null);
   const { modalState, openEventModal, closeModal } = useEventModal();
-  React44.useEffect(() => {
+  React46.useEffect(() => {
     const sourceEl = markerRef.current;
     if (!sourceEl) return;
     const portal = createBodyThemePortalRoot(sourceEl);
@@ -45869,7 +45993,7 @@ function EventModals({
     return marker;
   }
   if (modalState.type === "event") {
-    return /* @__PURE__ */ jsxs93(Fragment30, { children: [
+    return /* @__PURE__ */ jsxs93(Fragment29, { children: [
       marker,
       /* @__PURE__ */ jsx144(
         EventDetailModal,
@@ -45886,7 +46010,7 @@ function EventModals({
     ] });
   }
   if (modalState.type === "day") {
-    return /* @__PURE__ */ jsxs93(Fragment30, { children: [
+    return /* @__PURE__ */ jsxs93(Fragment29, { children: [
       marker,
       /* @__PURE__ */ jsx144(
         DayEventsModal,
@@ -48725,7 +48849,7 @@ var init_newsletterForm2 = __esm({
 });
 
 // ../blocks/src/system/runtime/components/registry.client.tsx
-import React52 from "react";
+import React54 from "react";
 
 // ../blocks/src/primitives/layout/Section.tsx
 init_clsx();
@@ -50759,14 +50883,27 @@ function BookingFormSSR({
   return /* @__PURE__ */ jsxs8(
     "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__ */ jsx23(IslandPropsScript, { value: islandProps }),
-        /* @__PURE__ */ jsx23("div", { className: "booking-form-ssr__summary", children: display.state === "missing" ? /* @__PURE__ */ jsx23("p", { className: "booking-form-ssr__error", children: display.message }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx23("strong", { children: display.submitLabel }),
-          display.successMessage ? /* @__PURE__ */ jsx23("p", { className: "booking-form-ssr__success", children: display.successMessage }) : null
-        ] }) }),
+        display.state === "missing" ? /* @__PURE__ */ jsx23("div", { className: "alert alert-error", role: "alert", children: /* @__PURE__ */ jsx23("p", { className: "ab-text", children: display.message }) }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx23("span", { className: "rb-sr-only", children: "Loading booking form..." }),
+          /* @__PURE__ */ jsxs8("div", { className: "rb-reg-stack", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx23("div", { className: "rb-reg-summary", children: /* @__PURE__ */ jsxs8("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+              /* @__PURE__ */ jsx23("div", { className: "rb-shell-line rb-shell-line--md" }),
+              /* @__PURE__ */ jsx23("div", { className: "rb-shell-line rb-shell-line--sm" })
+            ] }) }),
+            /* @__PURE__ */ jsxs8("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+              /* @__PURE__ */ jsx23("div", { className: "rb-shell-line rb-shell-line--lg" }),
+              /* @__PURE__ */ jsx23("div", { className: "rb-shell-line rb-shell-line--xs" })
+            ] }),
+            /* @__PURE__ */ jsx23("div", { className: "rb-wizard-actions", children: /* @__PURE__ */ jsx23("div", { className: "ab-shell-button", children: display.submitLabel }) })
+          ] })
+        ] }),
         children
       ]
     }
@@ -55236,20 +55373,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__ */ jsxs36("div", { className: "er-payment-layout er-payment-layout--no-sidebar", children: [
         /* @__PURE__ */ jsxs36("div", { className: "er-payment-layout-main", children: [
-          /* @__PURE__ */ jsx53("div", { className: "er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx53("ol", { className: "er-steps", children: display.stepLabels.map((label, index) => {
+          /* @__PURE__ */ jsx53("div", { className: "rb-steps-nav er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx53("ol", { className: "rb-steps er-steps", children: display.stepLabels.map((label, index) => {
             const isActive = index === 0;
-            return /* @__PURE__ */ jsxs36("li", { className: "er-step", children: [
-              /* @__PURE__ */ jsx53("span", { className: cx("er-step-circle", isActive && "er-step-circle--active"), children: index + 1 }),
-              /* @__PURE__ */ jsx53("span", { className: cx("er-step-label", isActive && "er-step-label--active"), children: label }),
-              index < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx53("span", { className: "er-step-connector" }) : null
+            return /* @__PURE__ */ jsxs36("li", { className: "rb-step er-step", children: [
+              /* @__PURE__ */ jsx53(
+                "span",
+                {
+                  className: cx(
+                    "rb-step-circle er-step-circle",
+                    isActive && "rb-step-circle--active er-step-circle--active"
+                  ),
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ jsx53(
+                "span",
+                {
+                  className: cx(
+                    "rb-step-label er-step-label",
+                    isActive && "rb-step-label--active er-step-label--active"
+                  ),
+                  children: label
+                }
+              ),
+              index < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx53("span", { className: "rb-step-connector er-step-connector" }) : null
             ] }, label);
           }) }) }),
-          /* @__PURE__ */ jsxs36("div", { className: "er-stack", children: [
+          /* @__PURE__ */ jsxs36("div", { className: "rb-reg-stack er-stack", children: [
             /* @__PURE__ */ jsxs36("div", { children: [
               /* @__PURE__ */ jsx53("p", { className: "er-registration-shell__eyebrow", children: "Registration" }),
               /* @__PURE__ */ jsx53("h3", { className: "er-title er-registration-shell__title", children: display.titleText }),
@@ -55257,20 +55412,20 @@ function EventRegistrationShell({
             ] }),
             /* @__PURE__ */ jsxs36("div", { className: "er-event-grid er-registration-shell__cards", "aria-hidden": "true", children: [
               /* @__PURE__ */ jsxs36("div", { className: "er-event-card er-registration-shell__card", children: [
-                /* @__PURE__ */ jsx53("div", { className: "er-registration-shell__line er-registration-shell__line--lg" }),
-                /* @__PURE__ */ jsx53("div", { className: "er-registration-shell__line er-registration-shell__line--sm" })
+                /* @__PURE__ */ jsx53("div", { className: "rb-shell-line rb-shell-line--lg er-registration-shell__line er-registration-shell__line--lg" }),
+                /* @__PURE__ */ jsx53("div", { className: "rb-shell-line rb-shell-line--sm er-registration-shell__line er-registration-shell__line--sm" })
               ] }),
               /* @__PURE__ */ jsxs36("div", { className: "er-event-card er-registration-shell__card", children: [
-                /* @__PURE__ */ jsx53("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
-                /* @__PURE__ */ jsx53("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
+                /* @__PURE__ */ jsx53("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
+                /* @__PURE__ */ jsx53("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
               ] })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsx53("div", { className: "er-payment-layout-footer", children: /* @__PURE__ */ jsxs36("div", { className: "er-summary-bar er-registration-shell__summary", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsxs36("div", { className: "er-summary-bar-info", children: [
-            /* @__PURE__ */ jsx53("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
-            /* @__PURE__ */ jsx53("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
+            /* @__PURE__ */ jsx53("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
+            /* @__PURE__ */ jsx53("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
           ] }),
           /* @__PURE__ */ jsx53("div", { className: "er-registration-shell__button-placeholder", children: display.summaryButtonText })
         ] }) })
@@ -56197,28 +56352,28 @@ var gifting_client_default = GiftingClient;
 init_carousel_client();
 
 // ../../node_modules/.pnpm/@radix-ui+react-accordion@1.2.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types+r_267762ff3d1a7aac1f1135a6d591f0f8/node_modules/@radix-ui/react-accordion/dist/index.mjs
-import * as React35 from "react";
+import * as React37 from "react";
 
 // ../../node_modules/.pnpm/@radix-ui+react-context@1.1.4_@types+react@19.2.17_react@19.2.7/node_modules/@radix-ui/react-context/dist/index.mjs
-import * as React23 from "react";
+import * as React26 from "react";
 import { jsx as jsx123 } from "react/jsx-runtime";
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React23.createContext(defaultContext);
+    const BaseContext = React26.createContext(defaultContext);
     BaseContext.displayName = rootComponentName + "Context";
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props2) => {
       const { scope, children, ...context } = props2;
       const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const value = React23.useMemo(() => context, Object.values(context));
+      const value = React26.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx123(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const context = React23.useContext(Context);
+      const context = React26.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -56227,11 +56382,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React23.createContext(defaultContext);
+      return React26.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React23.useMemo(
+      return React26.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -56254,7 +56409,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React23.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React26.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -56262,10 +56417,10 @@ function composeContextScopes(...scopes) {
 }
 
 // ../../node_modules/.pnpm/@radix-ui+react-collection@1.1.10_@types+react-dom@19.2.3_@types+react@19.2.17__@types+_d2514901a83655b2339c16df2b5b40ad/node_modules/@radix-ui/react-collection/dist/index.mjs
-import * as React26 from "react";
+import * as React29 from "react";
 
 // ../../node_modules/.pnpm/@radix-ui+react-compose-refs@1.1.3_@types+react@19.2.17_react@19.2.7/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import * as React24 from "react";
+import * as React27 from "react";
 function setRef(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -56298,14 +56453,14 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React24.useCallback(composeRefs(...refs), refs);
+  return React27.useCallback(composeRefs(...refs), refs);
 }
 
 // ../../node_modules/.pnpm/@radix-ui+react-slot@1.3.0_@types+react@19.2.17_react@19.2.7/node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React25 from "react";
+import * as React28 from "react";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
-  const Slot2 = React25.forwardRef((props2, forwardedRef) => {
+  const Slot2 = React28.forwardRef((props2, forwardedRef) => {
     let { children, ...slotProps } = props2;
     let slottableElement = null;
     let hasSlottable = false;
@@ -56313,7 +56468,7 @@ function createSlot(ownerName) {
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    React25.Children.forEach(children, (maybeSlottable) => {
+    React28.Children.forEach(children, (maybeSlottable) => {
       if (isSlottable(maybeSlottable)) {
         hasSlottable = true;
         const slottable = maybeSlottable;
@@ -56328,13 +56483,13 @@ function createSlot(ownerName) {
       }
     });
     if (slottableElement) {
-      slottableElement = React25.cloneElement(slottableElement, void 0, newChildren);
+      slottableElement = React28.cloneElement(slottableElement, void 0, newChildren);
     } else if (
       // A `Slottable` was found but it didn't resolve to a single element (e.g.
       // it wrapped multiple elements, text, or a render-prop `child` that
       // wasn't an element). Don't fall back to treating the `Slottable` wrapper
       // itself as the slot target — throw a descriptive error below instead.
-      !hasSlottable && React25.Children.count(children) === 1 && React25.isValidElement(children)
+      !hasSlottable && React28.Children.count(children) === 1 && React28.isValidElement(children)
     ) {
       slottableElement = children;
     }
@@ -56349,10 +56504,10 @@ function createSlot(ownerName) {
       return children;
     }
     const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
-    if (slottableElement.type !== React25.Fragment) {
+    if (slottableElement.type !== React28.Fragment) {
       mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
     }
-    return React25.cloneElement(slottableElement, mergedProps);
+    return React28.cloneElement(slottableElement, mergedProps);
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -56361,10 +56516,10 @@ var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol.for("radix.slottable");
 var getSlottableElementFromSlottable = (slottable, child) => {
   if ("child" in slottable.props) {
     const child2 = slottable.props.child;
-    if (!React25.isValidElement(child2)) return null;
-    return React25.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+    if (!React28.isValidElement(child2)) return null;
+    return React28.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
   }
-  return React25.isValidElement(child) ? child : null;
+  return React28.isValidElement(child) ? child : null;
 };
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -56404,7 +56559,7 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 function isSlottable(child) {
-  return React25.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React28.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
 function isLazyComponent(element) {
@@ -56419,11 +56574,11 @@ var createSlotError = (ownerName) => {
 var createSlottableError = (ownerName) => {
   return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
 };
-var use = React25[" use ".trim().toString()];
+var use = React28[" use ".trim().toString()];
 
 // ../../node_modules/.pnpm/@radix-ui+react-collection@1.1.10_@types+react-dom@19.2.3_@types+react@19.2.17__@types+_d2514901a83655b2339c16df2b5b40ad/node_modules/@radix-ui/react-collection/dist/index.mjs
 import { jsx as jsx124 } from "react/jsx-runtime";
-import * as React27 from "react";
+import * as React210 from "react";
 import { jsx as jsx210 } from "react/jsx-runtime";
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
@@ -56434,14 +56589,14 @@ function createCollection(name) {
   );
   const CollectionProvider = (props2) => {
     const { scope, children } = props2;
-    const ref = React26.useRef(null);
-    const itemMap = React26.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = React29.useRef(null);
+    const itemMap = React29.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ jsx124(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React26.forwardRef(
+  const CollectionSlot = React29.forwardRef(
     (props2, forwardedRef) => {
       const { scope, children } = props2;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -56453,13 +56608,13 @@ function createCollection(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React26.forwardRef(
+  const CollectionItemSlot = React29.forwardRef(
     (props2, forwardedRef) => {
       const { scope, children, ...itemData } = props2;
-      const ref = React26.useRef(null);
+      const ref = React29.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React26.useEffect(() => {
+      React29.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -56469,7 +56624,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React26.useCallback(() => {
+    const getItems = React29.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -56500,16 +56655,16 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 }
 
 // ../../node_modules/.pnpm/@radix-ui+react-use-controllable-state@1.2.3_@types+react@19.2.17_react@19.2.7/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React29 from "react";
+import * as React31 from "react";
 
 // ../../node_modules/.pnpm/@radix-ui+react-use-layout-effect@1.1.2_@types+react@19.2.17_react@19.2.7/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-import * as React28 from "react";
-var useLayoutEffect22 = globalThis?.document ? React28.useLayoutEffect : () => {
+import * as React30 from "react";
+var useLayoutEffect22 = globalThis?.document ? React30.useLayoutEffect : () => {
 };
 
 // ../../node_modules/.pnpm/@radix-ui+react-use-controllable-state@1.2.3_@types+react@19.2.17_react@19.2.7/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React210 from "react";
-var useInsertionEffect = React29[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
+import * as React211 from "react";
+var useInsertionEffect = React31[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
 function useControllableState({
   prop,
   defaultProp,
@@ -56524,8 +56679,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   if (true) {
-    const isControlledRef = React29.useRef(prop !== void 0);
-    React29.useEffect(() => {
+    const isControlledRef = React31.useRef(prop !== void 0);
+    React31.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -56537,7 +56692,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React29.useCallback(
+  const setValue = React31.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -56556,13 +56711,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value, setValue] = React29.useState(defaultProp);
-  const prevValueRef = React29.useRef(value);
-  const onChangeRef = React29.useRef(onChange);
+  const [value, setValue] = React31.useState(defaultProp);
+  const prevValueRef = React31.useRef(value);
+  const onChangeRef = React31.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (prevValueRef.current !== value) {
       onChangeRef.current?.(value);
       prevValueRef.current = value;
@@ -56575,7 +56730,7 @@ function isFunction(value) {
 }
 
 // ../../node_modules/.pnpm/@radix-ui+react-primitive@2.1.6_@types+react-dom@19.2.3_@types+react@19.2.17__@types+re_2b211ae514f45e2eda250184528d6c49/node_modules/@radix-ui/react-primitive/dist/index.mjs
-import * as React30 from "react";
+import * as React32 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx125 } from "react/jsx-runtime";
 var NODES = [
@@ -56599,7 +56754,7 @@ var NODES = [
 ];
 var Primitive = NODES.reduce((primitive, node) => {
   const Slot = createSlot(`Primitive.${node}`);
-  const Node2 = React30.forwardRef((props2, forwardedRef) => {
+  const Node2 = React32.forwardRef((props2, forwardedRef) => {
     const { asChild, ...primitiveProps } = props2;
     const Comp = asChild ? Slot : node;
     if (typeof window !== "undefined") {
@@ -56612,13 +56767,13 @@ var Primitive = NODES.reduce((primitive, node) => {
 }, {});
 
 // ../../node_modules/.pnpm/@radix-ui+react-collapsible@1.1.14_@types+react-dom@19.2.3_@types+react@19.2.17__@types_e92b6f0788ff52b38e85f3f44ff92ede/node_modules/@radix-ui/react-collapsible/dist/index.mjs
-import * as React33 from "react";
+import * as React35 from "react";
 
 // ../../node_modules/.pnpm/@radix-ui+react-presence@1.1.6_@types+react-dom@19.2.3_@types+react@19.2.17__@types+rea_dcd2172d161be68b0f7e3bfe31aff518/node_modules/@radix-ui/react-presence/dist/index.mjs
-import * as React211 from "react";
-import * as React31 from "react";
+import * as React212 from "react";
+import * as React33 from "react";
 function useStateMachine(initialState, machine) {
-  return React31.useReducer((state, event) => {
+  return React33.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
@@ -56626,17 +56781,17 @@ function useStateMachine(initialState, machine) {
 var Presence = (props2) => {
   const { present, children } = props2;
   const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React211.Children.only(children);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React212.Children.only(children);
   const ref = useStableComposedRefs(presence.ref, getElementRef2(child));
   const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React211.cloneElement(child, { ref }) : null;
+  return forceMount || presence.isPresent ? React212.cloneElement(child, { ref }) : null;
 };
 Presence.displayName = "Presence";
 function usePresence(present) {
-  const [node, setNode] = React211.useState();
-  const stylesRef = React211.useRef(null);
-  const prevPresentRef = React211.useRef(present);
-  const prevAnimationNameRef = React211.useRef("none");
+  const [node, setNode] = React212.useState();
+  const stylesRef = React212.useRef(null);
+  const prevPresentRef = React212.useRef(present);
+  const prevAnimationNameRef = React212.useRef("none");
   const initialState = present ? "mounted" : "unmounted";
   const [state, send] = useStateMachine(initialState, {
     mounted: {
@@ -56651,7 +56806,7 @@ function usePresence(present) {
       MOUNT: "mounted"
     }
   });
-  React211.useEffect(() => {
+  React212.useEffect(() => {
     const currentAnimationName = getAnimationName(stylesRef.current);
     prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
   }, [state]);
@@ -56717,7 +56872,7 @@ function usePresence(present) {
   }, [node, send]);
   return {
     isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React211.useCallback((node2) => {
+    ref: React212.useCallback((node2) => {
       stylesRef.current = node2 ? getComputedStyle(node2) : null;
       setNode(node2);
     }, [])
@@ -56731,9 +56886,9 @@ function setRef2(ref, value) {
   }
 }
 function useStableComposedRefs(...refs) {
-  const refsRef = React211.useRef(refs);
+  const refsRef = React212.useRef(refs);
   refsRef.current = refs;
-  return React211.useCallback((node) => {
+  return React212.useCallback((node) => {
     const currentRefs = refsRef.current;
     let hasCleanup = false;
     const cleanups = currentRefs.map((ref) => {
@@ -56775,11 +56930,11 @@ function getElementRef2(element) {
 }
 
 // ../../node_modules/.pnpm/@radix-ui+react-id@1.1.2_@types+react@19.2.17_react@19.2.7/node_modules/@radix-ui/react-id/dist/index.mjs
-import * as React32 from "react";
-var useReactId = React32[" useId ".trim().toString()] || (() => void 0);
+import * as React34 from "react";
+var useReactId = React34[" useId ".trim().toString()] || (() => void 0);
 var count = 0;
 function useId3(deterministicId) {
-  const [id, setId] = React32.useState(useReactId());
+  const [id, setId] = React34.useState(useReactId());
   useLayoutEffect22(() => {
     if (!deterministicId) setId((reactId) => reactId ?? String(count++));
   }, [deterministicId]);
@@ -56791,7 +56946,7 @@ import { jsx as jsx126 } from "react/jsx-runtime";
 var COLLAPSIBLE_NAME = "Collapsible";
 var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
 var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
-var Collapsible = React33.forwardRef(
+var Collapsible = React35.forwardRef(
   (props2, forwardedRef) => {
     const {
       __scopeCollapsible,
@@ -56814,7 +56969,7 @@ var Collapsible = React33.forwardRef(
         disabled,
         contentId: useId3(),
         open,
-        onOpenToggle: React33.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+        onOpenToggle: React35.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
         children: /* @__PURE__ */ jsx126(
           Primitive.div,
           {
@@ -56830,7 +56985,7 @@ var Collapsible = React33.forwardRef(
 );
 Collapsible.displayName = COLLAPSIBLE_NAME;
 var TRIGGER_NAME = "CollapsibleTrigger";
-var CollapsibleTrigger = React33.forwardRef(
+var CollapsibleTrigger = React35.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeCollapsible, ...triggerProps } = props2;
     const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
@@ -56852,7 +57007,7 @@ var CollapsibleTrigger = React33.forwardRef(
 );
 CollapsibleTrigger.displayName = TRIGGER_NAME;
 var CONTENT_NAME = "CollapsibleContent";
-var CollapsibleContent = React33.forwardRef(
+var CollapsibleContent = React35.forwardRef(
   (props2, forwardedRef) => {
     const { forceMount, ...contentProps } = props2;
     const context = useCollapsibleContext(CONTENT_NAME, props2.__scopeCollapsible);
@@ -56860,20 +57015,20 @@ var CollapsibleContent = React33.forwardRef(
   }
 );
 CollapsibleContent.displayName = CONTENT_NAME;
-var CollapsibleContentImpl = React33.forwardRef((props2, forwardedRef) => {
+var CollapsibleContentImpl = React35.forwardRef((props2, forwardedRef) => {
   const { __scopeCollapsible, present, children, ...contentProps } = props2;
   const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
-  const [isPresent, setIsPresent] = React33.useState(present);
-  const ref = React33.useRef(null);
+  const [isPresent, setIsPresent] = React35.useState(present);
+  const ref = React35.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  const heightRef = React33.useRef(0);
+  const heightRef = React35.useRef(0);
   const height = heightRef.current;
-  const widthRef = React33.useRef(0);
+  const widthRef = React35.useRef(0);
   const width = widthRef.current;
   const isOpen = context.open || isPresent;
-  const isMountAnimationPreventedRef = React33.useRef(isOpen);
-  const originalStylesRef = React33.useRef(void 0);
-  React33.useEffect(() => {
+  const isMountAnimationPreventedRef = React35.useRef(isOpen);
+  const originalStylesRef = React35.useRef(void 0);
+  React35.useEffect(() => {
     const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
     return () => cancelAnimationFrame(rAF);
   }, []);
@@ -56922,11 +57077,11 @@ var Trigger = CollapsibleTrigger;
 var Content = CollapsibleContent;
 
 // ../../node_modules/.pnpm/@radix-ui+react-direction@1.1.2_@types+react@19.2.17_react@19.2.7/node_modules/@radix-ui/react-direction/dist/index.mjs
-import * as React34 from "react";
+import * as React36 from "react";
 import { jsx as jsx127 } from "react/jsx-runtime";
-var DirectionContext = React34.createContext(void 0);
+var DirectionContext = React36.createContext(void 0);
 function useDirection(localDir) {
-  const globalDir = React34.useContext(DirectionContext);
+  const globalDir = React36.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 
@@ -56940,7 +57095,7 @@ var [createAccordionContext, createAccordionScope] = createContextScope(ACCORDIO
   createCollapsibleScope
 ]);
 var useCollapsibleScope = createCollapsibleScope();
-var Accordion = React35.forwardRef(
+var Accordion = React37.forwardRef(
   (props2, forwardedRef) => {
     const { type, ...accordionProps } = props2;
     const singleProps = accordionProps;
@@ -56954,7 +57109,7 @@ var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccor
   ACCORDION_NAME,
   { collapsible: false }
 );
-var AccordionImplSingle = React35.forwardRef(
+var AccordionImplSingle = React37.forwardRef(
   (props2, forwardedRef) => {
     const {
       value: valueProp,
@@ -56974,15 +57129,15 @@ var AccordionImplSingle = React35.forwardRef(
       AccordionValueProvider,
       {
         scope: props2.__scopeAccordion,
-        value: React35.useMemo(() => value ? [value] : [], [value]),
+        value: React37.useMemo(() => value ? [value] : [], [value]),
         onItemOpen: setValue,
-        onItemClose: React35.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
+        onItemClose: React37.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
         children: /* @__PURE__ */ jsx128(AccordionCollapsibleProvider, { scope: props2.__scopeAccordion, collapsible, children: /* @__PURE__ */ jsx128(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
       }
     );
   }
 );
-var AccordionImplMultiple = React35.forwardRef((props2, forwardedRef) => {
+var AccordionImplMultiple = React37.forwardRef((props2, forwardedRef) => {
   const {
     value: valueProp,
     defaultValue,
@@ -56996,11 +57151,11 @@ var AccordionImplMultiple = React35.forwardRef((props2, forwardedRef) => {
     onChange: onValueChange,
     caller: ACCORDION_NAME
   });
-  const handleItemOpen = React35.useCallback(
+  const handleItemOpen = React37.useCallback(
     (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
     [setValue]
   );
-  const handleItemClose = React35.useCallback(
+  const handleItemClose = React37.useCallback(
     (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
     [setValue]
   );
@@ -57016,10 +57171,10 @@ var AccordionImplMultiple = React35.forwardRef((props2, forwardedRef) => {
   );
 });
 var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
-var AccordionImpl = React35.forwardRef(
+var AccordionImpl = React37.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props2;
-    const accordionRef = React35.useRef(null);
+    const accordionRef = React37.useRef(null);
     const composedRefs = useComposedRefs(accordionRef, forwardedRef);
     const getItems = useCollection(__scopeAccordion);
     const direction = useDirection(dir);
@@ -57108,7 +57263,7 @@ var AccordionImpl = React35.forwardRef(
 );
 var ITEM_NAME = "AccordionItem";
 var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
-var AccordionItem = React35.forwardRef(
+var AccordionItem = React37.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeAccordion, value, ...accordionItemProps } = props2;
     const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
@@ -57149,7 +57304,7 @@ var AccordionItem = React35.forwardRef(
 );
 AccordionItem.displayName = ITEM_NAME;
 var HEADER_NAME = "AccordionHeader";
-var AccordionHeader = React35.forwardRef(
+var AccordionHeader = React37.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeAccordion, ...headerProps } = props2;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
@@ -57168,7 +57323,7 @@ var AccordionHeader = React35.forwardRef(
 );
 AccordionHeader.displayName = HEADER_NAME;
 var TRIGGER_NAME2 = "AccordionTrigger";
-var AccordionTrigger = React35.forwardRef(
+var AccordionTrigger = React37.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeAccordion, ...triggerProps } = props2;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
@@ -57190,7 +57345,7 @@ var AccordionTrigger = React35.forwardRef(
 );
 AccordionTrigger.displayName = TRIGGER_NAME2;
 var CONTENT_NAME2 = "AccordionContent";
-var AccordionContent = React35.forwardRef(
+var AccordionContent = React37.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeAccordion, ...contentProps } = props2;
     const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
@@ -57225,14 +57380,14 @@ var Trigger2 = AccordionTrigger;
 var Content2 = AccordionContent;
 
 // ../blocks/src/system/runtime/shared/accordionPrimitives.tsx
-import * as React36 from "react";
+import * as React38 from "react";
 import { jsx as jsx129 } from "react/jsx-runtime";
 var Accordion2 = Root2;
-var AccordionItem2 = React36.forwardRef(({ className, ...props2 }, ref) => /* @__PURE__ */ jsx129(Item, { ref, className, ...props2 }));
+var AccordionItem2 = React38.forwardRef(({ className, ...props2 }, ref) => /* @__PURE__ */ jsx129(Item, { ref, className, ...props2 }));
 AccordionItem2.displayName = "AccordionItem";
-var AccordionTrigger2 = React36.forwardRef(({ className, children, ...props2 }, ref) => /* @__PURE__ */ jsx129(Header, { className: "accordion-header", children: /* @__PURE__ */ jsx129(Trigger2, { ref, className, ...props2, children }) }));
+var AccordionTrigger2 = React38.forwardRef(({ className, children, ...props2 }, ref) => /* @__PURE__ */ jsx129(Header, { className: "accordion-header", children: /* @__PURE__ */ jsx129(Trigger2, { ref, className, ...props2, children }) }));
 AccordionTrigger2.displayName = "AccordionTrigger";
-var AccordionContent2 = React36.forwardRef(({ className, children, ...props2 }, ref) => /* @__PURE__ */ jsx129(
+var AccordionContent2 = React38.forwardRef(({ className, children, ...props2 }, ref) => /* @__PURE__ */ jsx129(
   Content2,
   {
     ref,
@@ -57248,7 +57403,7 @@ AccordionContent2.displayName = "AccordionContent";
 init_clsx();
 init_lucide_react();
 init_RichText();
-import React37 from "react";
+import React39 from "react";
 init_richText_coerce();
 init_types6();
 import { jsx as jsx130, jsxs as jsxs85 } from "react/jsx-runtime";
@@ -57318,7 +57473,7 @@ var AccordionItemNode = ({
   pathBase: _pathBase,
   ...rest
 }) => {
-  const generatedId = React37.useId();
+  const generatedId = React39.useId();
   const resolvedValue = value !== void 0 && value !== null ? String(value) : generatedId;
   const triggerSource = trigger ?? question;
   const contentSource = content ?? answer;
@@ -57547,7 +57702,7 @@ init_api();
 
 // ../blocks/src/system/runtime/nodes/weekly-slot-availability.client.controller.ts
 init_date_formatting();
-import * as React51 from "react";
+import * as React53 from "react";
 
 // ../blocks/src/system/runtime/nodes/weekly-slot-availability.client.state.ts
 function normalizeWeeklySlotAvailabilityHorizonWeeks(value) {
@@ -57573,14 +57728,14 @@ function useWeeklySlotAvailabilityLoadState(api, input) {
   const canUseInitialAvailability = Boolean(
     initialAvailability && hasExplicitTimezone
   );
-  const [availability, setAvailability] = React51.useState(
+  const [availability, setAvailability] = React53.useState(
     initialAvailability ?? null
   );
-  const [loading, setLoading] = React51.useState(
+  const [loading, setLoading] = React53.useState(
     () => Boolean(serviceId) && !initialAvailability
   );
-  const [error, setError] = React51.useState(null);
-  React51.useEffect(() => {
+  const [error, setError] = React53.useState(null);
+  React53.useEffect(() => {
     if (!serviceId) {
       setAvailability(null);
       setLoading(false);
@@ -57753,7 +57908,7 @@ function defineRuntimeBackedBlockClientEntry(kind, client) {
   const NormalizedClient = (props2) => {
     const ClientComponent = client;
     const normalizedProps = normalizeLegacyInteractiveRenderProps(serverEntry.definition.runtime, mode, props2);
-    return React52.createElement(ClientComponent, normalizedProps);
+    return React54.createElement(ClientComponent, normalizedProps);
   };
   NormalizedClient.displayName = `RuntimeBackedBlockClient(${kind})`;
   return {
@@ -57838,6 +57993,7 @@ init_resolver();
 init_types14();
 init_expandPalette();
 init_colorConversion();
+init_generateBaseCSS();
 init_generateEffectsCSS();
 
 // ../theme-core/src/navigation/presets.ts
@@ -58013,6 +58169,12 @@ function svgDataUrl(svg) {
   return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 }
 
+// ../theme-core/src/status/generateStatusCss.ts
+init_contextualColors();
+
+// ../theme-core/src/status/index.ts
+init_contextualColors();
+
 // ../theme-core/src/runtime/buildThemeRuntime.ts
 init_tokens2();
 
@@ -58088,6 +58250,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);
 }
 `;
 }
@@ -58220,25 +58410,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);
 }
 `;
 }
@@ -58530,6 +58735,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);
 }
 `;
 }