@riverbankcms/sdk 0.62.2 → 0.62.4

package/dist/client/bookings.mjs

@@ -86,7 +86,7 @@ function ze() {
     /* @__PURE__ */ Te(P)
   );
 }
-function z11(e) {
+function z12(e) {
   if (L) {
     if (/* @__PURE__ */ Te(P) !== null)
       throw Tt(), Je;
@@ -2115,12 +2115,12 @@ function ha(e, t) {
   var mt = we(Dr, 2);
   let Pr;
   var We = X(mt);
-  en(We), We.__change = ui, z11(mt);
+  en(We), We.__change = ui, z12(mt);
   var Ut = we(mt, 2), wi = X(Ut);
   {
     var pi = (n) => {
       var u = na(), _ = Gr(u), y = X(_);
-      Ge(y, () => c(re).verified), z11(_);
+      Ge(y, () => c(re).verified), z12(_);
       var T = we(_, 2);
       en(T), Pe(() => {
         se(T, "name", V()), jo(T, c(Le));
@@ -2129,10 +2129,10 @@ function ha(e, t) {
       {
         var _ = (T) => {
           var E = ia(), p = X(E);
-          Ge(p, () => c(re).verifying), z11(E), ne(T, E);
+          Ge(p, () => c(re).verifying), z12(E), ne(T, E);
         }, y = (T) => {
           var E = oa(), p = X(E);
-          Ge(p, () => c(re).label), z11(E), Pe(() => se(E, "for", c(cr))), ne(T, E);
+          Ge(p, () => c(re).label), z12(E), Pe(() => se(E, "for", c(cr))), ne(T, E);
         };
         $e(
           n,
@@ -2147,18 +2147,18 @@ function ha(e, t) {
       c(C) === b.VERIFIED ? n(pi) : n(bi, false);
     });
   }
-  z11(Ut);
+  z12(Ut);
   var yi = we(Ut, 2);
   {
     var Ei = (n) => {
       var u = aa(), _ = X(u);
-      se(_, "href", sr), z11(u), Pe(() => se(_, "aria-label", c(re).ariaLinkLabel)), ne(n, u);
+      se(_, "href", sr), z12(u), Pe(() => se(_, "aria-label", c(re).ariaLinkLabel)), ne(n, u);
     };
     $e(yi, (n) => {
       (N() !== true || c(Dt)) && n(Ei);
     });
   }
-  z11(Mt);
+  z12(Mt);
   var Or = we(Mt, 2);
   {
     var xi = (n) => {
@@ -2166,16 +2166,16 @@ function ha(e, t) {
       {
         var y = (E) => {
           var p = la(), x = X(p);
-          Ge(x, () => c(re).expired), z11(p), Pe(() => se(p, "title", c(He))), ne(E, p);
+          Ge(x, () => c(re).expired), z12(p), Pe(() => se(p, "title", c(He))), ne(E, p);
         }, T = (E) => {
           var p = sa(), x = X(p);
-          Ge(x, () => c(re).error), z11(p), Pe(() => se(p, "title", c(He))), ne(E, p);
+          Ge(x, () => c(re).error), z12(p), Pe(() => se(p, "title", c(He))), ne(E, p);
         };
         $e(_, (E) => {
           c(C) === b.EXPIRED ? E(y) : E(T, false);
         });
       }
-      z11(u), ne(n, u);
+      z12(u), ne(n, u);
     };
     $e(Or, (n) => {
       (c(He) || c(C) === b.EXPIRED) && n(xi);
@@ -2185,7 +2185,7 @@ function ha(e, t) {
   {
     var $i = (n) => {
       var u = ua(), _ = X(u), y = X(_);
-      Ge(y, () => c(re).footer), z11(_), z11(u), ne(n, u);
+      Ge(y, () => c(re).footer), z12(_), z12(u), ne(n, u);
     };
     $e(Fr, (n) => {
       c(re).footer && (k() !== true || c(Dt)) && n($i);
@@ -2201,7 +2201,7 @@ function ha(e, t) {
       v() && n(Ci);
     });
   }
-  return z11(ot), nn(ot, (n) => D(B, n), () => c(B)), Pe(
+  return z12(ot), nn(ot, (n) => D(B, n), () => c(B)), Pe(
     (n) => {
       se(ot, "data-state", c(C)), se(ot, "data-floating", v()), Pr = Fo(mt, 1, "altcha-checkbox", null, Pr, n), se(We, "id", c(cr)), We.required = r2() !== "onsubmit" && (!v() || r2() !== "off");
     },
@@ -2806,8 +2806,139 @@ function clsx() {
 }
 var clsx_default = clsx;
 
+// ../theme-core/src/tokens/colorTokenParts.ts
+function parseOpacityPercent(source) {
+  const trimmed = source.trim();
+  if (!trimmed) return null;
+  if (!/^\d{1,3}(?:\.\d+)?$/.test(trimmed)) return null;
+  const value = Number(trimmed);
+  if (!Number.isFinite(value)) return null;
+  if (value < 0 || value > 100) return null;
+  return value;
+}
+function parseColorTokenParts(source) {
+  const trimmed = source.trim();
+  if (trimmed.startsWith("raw:")) {
+    return { kind: "raw", value: trimmed.slice(4) };
+  }
+  const [token, opacityRaw, extra] = trimmed.split("/");
+  if (!token || extra !== void 0) {
+    return { kind: "invalid", token: trimmed };
+  }
+  if (opacityRaw === void 0) {
+    return { kind: "token", token, opacityPercent: null };
+  }
+  const opacityPercent = parseOpacityPercent(opacityRaw);
+  if (opacityPercent === null) {
+    return { kind: "invalid", token: trimmed };
+  }
+  return { kind: "token", token, opacityPercent };
+}
+
 // ../theme-core/src/buttons/types.ts
+import { z as z2 } from "zod";
+
+// ../theme-core/src/tokens/themeColorTokens.ts
 import { z } from "zod";
+
+// ../theme-core/src/tokens/blockColorTokens.ts
+var blockColorTokenNames = [
+  "text",
+  "heading",
+  "mutedText",
+  "surface",
+  "background",
+  "foreground",
+  "border",
+  "primary",
+  "secondary",
+  "accent",
+  "success",
+  "warning",
+  "info",
+  "error",
+  "destructive",
+  "scrim",
+  "shadow",
+  // Common "on*" tokens used when rendering colored chips/badges.
+  "onPrimary",
+  "onSecondary",
+  "onAccent",
+  "onSuccess",
+  "onWarning",
+  "onInfo",
+  "onError",
+  "onDestructive",
+  "onSurface"
+];
+var blockColorTokenNameSet = new Set(
+  blockColorTokenNames
+);
+
+// ../theme-core/src/tokens/themeColorTokens.ts
+var PALETTE_TOKEN_NAMES = [
+  "primary",
+  "primaryForeground",
+  "secondary",
+  "accent",
+  "success",
+  "warning",
+  "destructive",
+  "background",
+  "surface",
+  "surfaceAlt",
+  "muted",
+  "text",
+  "border"
+];
+var paletteTokenNameSchema = z.enum(PALETTE_TOKEN_NAMES);
+var themeColorBaseTokenNames = [
+  ...PALETTE_TOKEN_NAMES,
+  ...blockColorTokenNames,
+  // Existing generated themes can carry palette-local "white" tokens in
+  // token-only component fields. Keep it explicit until those rows are
+  // migrated to canonical foreground/background roles.
+  "white",
+  "neutral",
+  "primaryText",
+  "secondaryForeground",
+  "accentForeground"
+];
+var themeColorBaseTokenSet = new Set(themeColorBaseTokenNames);
+var SHADE_STEPS = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950"
+];
+var shadeStepSet = new Set(SHADE_STEPS);
+function isKnownBaseToken(value) {
+  return themeColorBaseTokenSet.has(value);
+}
+function isKnownShadeToken(value) {
+  const match = value.match(/^([a-zA-Z][a-zA-Z0-9]*)(?:-([0-9]{2,3}))$/);
+  if (!match) return false;
+  const [, base, shade] = match;
+  return Boolean(base && shade && isKnownBaseToken(base) && shadeStepSet.has(shade));
+}
+function isThemeColorTokenBase(value) {
+  return isKnownBaseToken(value) || isKnownShadeToken(value);
+}
+function isThemeColorToken(value) {
+  if (typeof value !== "string") return false;
+  const parts = parseColorTokenParts(value);
+  return parts.kind === "token" && isThemeColorTokenBase(parts.token);
+}
+var themeColorTokenSchema = z.string().min(1).refine((value) => Boolean(isThemeColorToken(value)), "Expected a known Theme V2 color token");
+
+// ../theme-core/src/buttons/types.ts
 var VARIANT_ROLES = [
   "primary",
   "secondary",
@@ -2818,22 +2949,22 @@ var VARIANT_ROLES = [
   "accent"
 ];
 var DEFAULT_VARIANT_ALIAS_ID = "default";
-var cornerStyleSchema = z.enum(["square", "rounded", "pill"]);
-var shadowSizeSchema = z.enum(["none", "low", "medium", "high"]);
-var textTransformSchema = z.enum(["none", "uppercase", "lowercase", "capitalize"]);
-var fontWeightSchema = z.union([z.literal(500), z.literal(600), z.literal(700)]);
-var buttonTypographySchema = z.enum(["body", "heading"]);
-var letterSpacingSchema = z.enum(["tight", "normal", "loose"]);
-var hoverTransformSchema = z.enum(["none", "lift", "scale", "press"]);
-var hoverColorSchema = z.enum(["none", "brighten", "darken", "saturate", "token"]);
-var buttonPaddingPresetSchema = z.enum(["compact", "default", "spacious"]);
-var gradientStyleSchema = z.enum(["linear", "radial", "conic"]);
-var gradientSharpnessSchema = z.enum(["smooth", "medium", "hard"]);
-var prioritySchema = z.union([z.literal(1), z.literal(2), z.literal(3)]);
-var variantRoleSchema = z.enum(VARIANT_ROLES);
-var buttonSizeNameSchema = z.enum(["sm", "md", "lg", "xl"]);
+var cornerStyleSchema = z2.enum(["square", "rounded", "pill"]);
+var shadowSizeSchema = z2.enum(["none", "low", "medium", "high"]);
+var textTransformSchema = z2.enum(["none", "uppercase", "lowercase", "capitalize"]);
+var fontWeightSchema = z2.union([z2.literal(500), z2.literal(600), z2.literal(700)]);
+var buttonTypographySchema = z2.enum(["body", "heading"]);
+var letterSpacingSchema = z2.enum(["tight", "normal", "loose"]);
+var hoverTransformSchema = z2.enum(["none", "lift", "scale", "press"]);
+var hoverColorSchema = z2.enum(["none", "brighten", "darken", "saturate", "token"]);
+var buttonPaddingPresetSchema = z2.enum(["compact", "default", "spacious"]);
+var gradientStyleSchema = z2.enum(["linear", "radial", "conic"]);
+var gradientSharpnessSchema = z2.enum(["smooth", "medium", "hard"]);
+var prioritySchema = z2.union([z2.literal(1), z2.literal(2), z2.literal(3)]);
+var variantRoleSchema = z2.enum(VARIANT_ROLES);
+var buttonSizeNameSchema = z2.enum(["sm", "md", "lg", "xl"]);
 var PADDING_TOKEN_PATTERN = /^(?:0|\d+(?:\.\d+)?(?:rem|em|px|%))$/;
-var paddingShorthandSchema = z.string().refine(
+var paddingShorthandSchema = z2.string().refine(
   (value) => {
     const parts = value.split(/\s+/).filter(Boolean);
     return parts.length === 2 && parts.every((token) => PADDING_TOKEN_PATTERN.test(token));
@@ -2842,11 +2973,11 @@ var paddingShorthandSchema = z.string().refine(
     message: 'Padding must be two space-separated CSS length tokens (e.g. "0.5rem 1rem"). Use `0` for zero.'
   }
 );
-var buttonSizeConfigSchema = z.object({
+var buttonSizeConfigSchema = z2.object({
   padding: paddingShorthandSchema,
-  fontSize: z.string().optional()
+  fontSize: z2.string().optional()
 });
-var buttonSizesSchema = z.object({
+var buttonSizesSchema = z2.object({
   sm: buttonSizeConfigSchema,
   md: buttonSizeConfigSchema,
   lg: buttonSizeConfigSchema,
@@ -2857,9 +2988,9 @@ var buttonSizesSchema = z.object({
   lg,
   xl: xl ?? lg
 }));
-var buttonGlobalSettingsSchema = z.object({
+var buttonGlobalSettingsSchema = z2.object({
   cornerStyle: cornerStyleSchema,
-  cornerRadius: z.number().min(0).max(24).optional(),
+  cornerRadius: z2.number().min(0).max(24).optional(),
   shadow: shadowSizeSchema,
   textTransform: textTransformSchema,
   fontWeight: fontWeightSchema,
@@ -2869,88 +3000,88 @@ var buttonGlobalSettingsSchema = z.object({
    * by the current generator and will be removed once the legacy
    * `primitives/content/components/Button.tsx` slot exports are deleted.
    */
-  borderWidth: z.union([z.literal(1), z.literal(2), z.literal(3)]),
+  borderWidth: z2.union([z2.literal(1), z2.literal(2), z2.literal(3)]),
   // === Family-level typography ===
   // Typography source (body or heading) — selects which theme typography pool to inherit
   typography: buttonTypographySchema.optional(),
   // Font size for all variants in the family (Tailwind token, e.g. "text-xs", "text-sm")
   // Sized variants get this as default; fixed variants inherit unless they override.
   // Size class CSS may still override at run time for sized variants.
-  fontSize: z.string().optional(),
+  fontSize: z2.string().optional(),
   // Letter spacing applied to all variants
   letterSpacing: letterSpacingSchema.optional(),
   // Italic style
-  italic: z.boolean().optional(),
+  italic: z2.boolean().optional(),
   // Padding preset (applies to sized variants without a sizes config)
   paddingPreset: buttonPaddingPresetSchema.optional(),
   hoverTransform: hoverTransformSchema,
   hoverColor: hoverColorSchema,
   // When hoverColor is 'token', this specifies which token to use
-  hoverColorToken: z.string().optional(),
+  hoverColorToken: themeColorTokenSchema.optional(),
   // Gradient settings (if any variant uses gradients)
   gradientStyle: gradientStyleSchema.optional(),
-  gradientAngle: z.number().min(0).max(360).optional(),
+  gradientAngle: z2.number().min(0).max(360).optional(),
   gradientSharpness: gradientSharpnessSchema.optional()
 });
-var gradientDirectionSchema = z.enum(["to-r", "to-l", "to-t", "to-b", "to-tr", "to-tl", "to-br", "to-bl"]);
-var buttonBackgroundSchema = z.discriminatedUnion("type", [
-  z.object({ type: z.literal("solid"), colorToken: z.string() }),
-  z.object({
-    type: z.literal("gradient"),
-    stops: z.array(z.string()).min(2),
+var gradientDirectionSchema = z2.enum(["to-r", "to-l", "to-t", "to-b", "to-tr", "to-tl", "to-br", "to-bl"]);
+var buttonBackgroundSchema = z2.discriminatedUnion("type", [
+  z2.object({ type: z2.literal("solid"), colorToken: themeColorTokenSchema }),
+  z2.object({
+    type: z2.literal("gradient"),
+    stops: z2.array(themeColorTokenSchema).min(2),
     direction: gradientDirectionSchema
   }),
-  z.object({ type: z.literal("transparent") })
+  z2.object({ type: z2.literal("transparent") })
 ]);
-var effectApplicationSchema = z.object({
-  effectId: z.string(),
-  options: z.record(z.string(), z.any()).optional()
+var effectApplicationSchema = z2.object({
+  effectId: z2.string(),
+  options: z2.record(z2.string(), z2.any()).optional()
 });
-var buttonBorderSchema = z.object({
-  widthClass: z.string(),
-  colorToken: z.string()
+var buttonBorderSchema = z2.object({
+  widthClass: z2.string(),
+  colorToken: themeColorTokenSchema
 });
-var variantShadowSchema = z.object({
-  elevation: z.enum(["none", "low", "medium", "high"]),
-  softness: z.enum(["crisp", "soft", "hard"]).nullable(),
-  position: z.enum(["bottom", "bottom-right"]).default("bottom")
+var variantShadowSchema = z2.object({
+  elevation: z2.enum(["none", "low", "medium", "high"]),
+  softness: z2.enum(["crisp", "soft", "hard"]).nullable(),
+  position: z2.enum(["bottom", "bottom-right"]).default("bottom")
 });
-var variantEffectsSchema = z.object({
-  base: z.array(effectApplicationSchema).optional(),
-  hover: z.array(effectApplicationSchema).optional(),
-  active: z.array(effectApplicationSchema).optional(),
-  focus: z.array(effectApplicationSchema).optional()
+var variantEffectsSchema = z2.object({
+  base: z2.array(effectApplicationSchema).optional(),
+  hover: z2.array(effectApplicationSchema).optional(),
+  active: z2.array(effectApplicationSchema).optional(),
+  focus: z2.array(effectApplicationSchema).optional()
 });
-var variantSizeOverridesSchema = z.object({
+var variantSizeOverridesSchema = z2.object({
   sm: buttonSizeConfigSchema.optional(),
   md: buttonSizeConfigSchema.optional(),
   lg: buttonSizeConfigSchema.optional(),
   xl: buttonSizeConfigSchema.optional()
 });
-var buttonVariantSchema = z.object({
-  id: z.string(),
-  name: z.string().min(1).max(20),
-  enabled: z.boolean(),
+var buttonVariantSchema = z2.object({
+  id: z2.string(),
+  name: z2.string().min(1).max(20),
+  enabled: z2.boolean(),
   priority: prioritySchema,
   // Base appearance (token-based)
   background: buttonBackgroundSchema,
-  textColorToken: z.string(),
+  textColorToken: themeColorTokenSchema,
   /** Tailwind radius token (e.g. `'rounded-md'`). Omit to inherit from `global.cornerStyle`. */
-  borderRadius: z.string().optional(),
+  borderRadius: z2.string().optional(),
   // Optional shadow override (uses theme.shadow if not specified)
   shadow: variantShadowSchema.optional(),
   // Border (optional)
   border: buttonBorderSchema.optional(),
   // Hover background token (per-variant override, takes precedence over global hoverColorToken)
-  hoverBackgroundToken: z.string().optional(),
+  hoverBackgroundToken: z2.string().optional(),
   // Effect composition
   effects: variantEffectsSchema.optional(),
   // Per-variant size overrides — see VariantSizeOverrides
   sizes: variantSizeOverridesSchema.optional()
 });
-var buttonSystemSchema = z.object({
+var buttonSystemSchema = z2.object({
   global: buttonGlobalSettingsSchema,
-  variants: z.array(buttonVariantSchema).min(1).max(6),
+  variants: z2.array(buttonVariantSchema).min(1).max(6),
   sizes: buttonSizesSchema.optional()
 });
 
@@ -2977,21 +3108,21 @@ function themeButtonClassName(spec) {
 var BUTTON_SIZE_NAMES = buttonSizeNameSchema.options;
 
 // ../theme-core/src/buttons/personalities/types.ts
-import { z as z3 } from "zod";
+import { z as z4 } from "zod";
 
 // ../theme-core/src/site-styles/styleTags.ts
-import { z as z2 } from "zod";
+import { z as z3 } from "zod";
 var STYLE_AXIS_VALUES = {
   tone: ["minimal", "classic", "bold"],
   energy: ["calm", "vibrant"],
   motion: ["subtle", "standard", "expressive"],
   era: ["editorial", "modern", "organic", "technical", "retro"]
 };
-var styleTagsSchema = z2.object({
-  tone: z2.enum(STYLE_AXIS_VALUES.tone).optional(),
-  energy: z2.enum(STYLE_AXIS_VALUES.energy).optional(),
-  motion: z2.enum(STYLE_AXIS_VALUES.motion).optional(),
-  era: z2.enum(STYLE_AXIS_VALUES.era).optional()
+var styleTagsSchema = z3.object({
+  tone: z3.enum(STYLE_AXIS_VALUES.tone).optional(),
+  energy: z3.enum(STYLE_AXIS_VALUES.energy).optional(),
+  motion: z3.enum(STYLE_AXIS_VALUES.motion).optional(),
+  era: z3.enum(STYLE_AXIS_VALUES.era).optional()
 });
 
 // ../theme-core/src/buttons/personalities/types.ts
@@ -3001,11 +3132,11 @@ function asButtonPersonalityId(value) {
   }
   return value;
 }
-var buttonPersonalityIdSchema = z3.string().min(1).transform((value) => asButtonPersonalityId(value));
-var buttonPersonalitySchema = z3.object({
+var buttonPersonalityIdSchema = z4.string().min(1).transform((value) => asButtonPersonalityId(value));
+var buttonPersonalitySchema = z4.object({
   id: buttonPersonalityIdSchema,
-  name: z3.string().min(1),
-  description: z3.string().min(1),
+  name: z4.string().min(1),
+  description: z4.string().min(1),
   tags: styleTagsSchema,
   buttonSystem: buttonSystemSchema
 });
@@ -3859,8 +3990,8 @@ function addLocalScheduleDays(date, days) {
 }
 
 // ../theme-core/src/accordions/types.ts
-import { z as z4 } from "zod";
-var accordionIconSchema = z4.enum([
+import { z as z5 } from "zod";
+var accordionIconSchema = z5.enum([
   "plus-minus",
   // + becomes - (swap or rotate 90°)
   "chevron",
@@ -3872,49 +4003,49 @@ var accordionIconSchema = z4.enum([
   "circle-plus-minus"
   // ⊕ becomes ⊖ (swap with fade)
 ]);
-var accordionSystemSchema = z4.object({
+var accordionSystemSchema = z5.object({
   // Visual styling (solid color only - gradients can be added later if needed)
-  background: z4.object({
-    type: z4.literal("solid"),
-    colorToken: z4.string()
+  background: z5.object({
+    type: z5.literal("solid"),
+    colorToken: themeColorTokenSchema
   }),
   // Spacing (padding inside items)
-  spacing: z4.enum(["none", "compact", "cozy", "medium", "comfortable", "spacious"]),
+  spacing: z5.enum(["none", "compact", "cozy", "medium", "comfortable", "spacious"]),
   // Border radius (null = inherit from theme.corners)
-  corners: z4.enum(["square", "soft", "rounded", "pill"]).nullable(),
+  corners: z5.enum(["square", "soft", "rounded", "pill"]).nullable(),
   // Border styling (null = inherit from theme.border)
-  border: z4.object({
-    widthClass: z4.string(),
+  border: z5.object({
+    widthClass: z5.string(),
     // e.g., 'border', 'border-2', 'border-0'
-    colorToken: z4.string()
+    colorToken: themeColorTokenSchema
   }).nullable(),
   // Shadow (null = inherit from theme.shadow)
-  shadow: z4.object({
-    elevation: z4.enum(["none", "low", "medium", "high"]),
-    softness: z4.enum(["soft", "crisp", "hard"]).nullable(),
-    position: z4.enum(["bottom", "bottom-right"])
+  shadow: z5.object({
+    elevation: z5.enum(["none", "low", "medium", "high"]),
+    softness: z5.enum(["soft", "crisp", "hard"]).nullable(),
+    position: z5.enum(["bottom", "bottom-right"])
   }).nullable(),
   // Icon style and animation
-  icon: z4.object({
+  icon: z5.object({
     style: accordionIconSchema,
-    position: z4.enum(["left", "right"]),
-    size: z4.enum(["sm", "md", "lg"])
+    position: z5.enum(["left", "right"]),
+    size: z5.enum(["sm", "md", "lg"])
   }),
   // Trigger (question) styling
-  trigger: z4.object({
-    textColorToken: z4.string(),
-    fontWeight: z4.enum(["regular", "medium", "semibold", "bold"]).nullable()
+  trigger: z5.object({
+    textColorToken: themeColorTokenSchema,
+    fontWeight: z5.enum(["regular", "medium", "semibold", "bold"]).nullable()
     // null = inherit from theme
   }),
   // Hover state styling
-  hover: z4.object({
-    backgroundColorToken: z4.string().optional(),
-    textColorToken: z4.string().optional(),
-    borderColorToken: z4.string().optional()
+  hover: z5.object({
+    backgroundColorToken: themeColorTokenSchema.optional(),
+    textColorToken: themeColorTokenSchema.optional(),
+    borderColorToken: themeColorTokenSchema.optional()
   }),
   // Content (answer) styling
-  content: z4.object({
-    textColorToken: z4.string()
+  content: z5.object({
+    textColorToken: themeColorTokenSchema
   })
 });
 
@@ -4398,116 +4529,116 @@ function getBookingSuccessMessage(successMessage) {
 }
 
 // ../theme-core/src/inputs/types.ts
-import { z as z5 } from "zod";
-var inputSystemSchema = z5.object({
+import { z as z6 } from "zod";
+var inputSystemSchema = z6.object({
   // Base styling (applied to all inputs)
-  base: z5.object({
-    background: z5.union([
-      z5.object({
-        type: z5.literal("solid"),
-        colorToken: z5.string()
+  base: z6.object({
+    background: z6.union([
+      z6.object({
+        type: z6.literal("solid"),
+        colorToken: themeColorTokenSchema
       }),
-      z5.object({
-        type: z5.literal("transparent")
+      z6.object({
+        type: z6.literal("transparent")
       })
     ]),
-    textColorToken: z5.string(),
-    border: z5.object({
-      widthClass: z5.string(),
+    textColorToken: themeColorTokenSchema,
+    border: z6.object({
+      widthClass: z6.string(),
       // e.g., 'border', 'border-2'
-      colorToken: z5.string(),
-      style: z5.enum(["all", "underline"]).optional()
+      colorToken: themeColorTokenSchema,
+      style: z6.enum(["all", "underline"]).optional()
     }),
-    corners: z5.enum(["square", "soft", "rounded", "pill"]).nullable(),
+    corners: z6.enum(["square", "soft", "rounded", "pill"]).nullable(),
     // null = inherit from theme.corners
-    shadow: z5.object({
-      elevation: z5.enum(["none", "low", "medium"]),
-      softness: z5.enum(["soft", "crisp", "hard"]).nullable()
+    shadow: z6.object({
+      elevation: z6.enum(["none", "low", "medium"]),
+      softness: z6.enum(["soft", "crisp", "hard"]).nullable()
     }).nullable(),
-    spacing: z5.enum(["compact", "cozy", "medium", "comfortable"]),
+    spacing: z6.enum(["compact", "cozy", "medium", "comfortable"]),
     // padding inside inputs
-    fontSize: z5.enum(["sm", "base", "lg"])
+    fontSize: z6.enum(["sm", "base", "lg"])
   }),
   // Label styling
-  label: z5.object({
-    textColorToken: z5.string(),
-    fontWeight: z5.enum(["regular", "medium", "semibold", "bold", "black"]),
-    fontSize: z5.enum(["2xs", "xs", "sm", "base"]),
-    textTransform: z5.enum(["none", "uppercase", "lowercase", "capitalize"]).optional(),
-    letterSpacing: z5.enum(["normal", "wide", "wider", "widest"]).optional(),
-    opacity: z5.number().min(0.2).max(1).optional()
+  label: z6.object({
+    textColorToken: themeColorTokenSchema,
+    fontWeight: z6.enum(["regular", "medium", "semibold", "bold", "black"]),
+    fontSize: z6.enum(["2xs", "xs", "sm", "base"]),
+    textTransform: z6.enum(["none", "uppercase", "lowercase", "capitalize"]).optional(),
+    letterSpacing: z6.enum(["normal", "wide", "wider", "widest"]).optional(),
+    opacity: z6.number().min(0.2).max(1).optional()
   }),
   // Focus state
-  focus: z5.object({
-    ringColorToken: z5.string(),
-    ringWidth: z5.enum(["0", "1", "2", "3"]),
-    borderColorToken: z5.string().optional()
+  focus: z6.object({
+    ringColorToken: themeColorTokenSchema,
+    ringWidth: z6.enum(["0", "1", "2", "3"]),
+    borderColorToken: themeColorTokenSchema.optional()
     // Change border color on focus
   }),
   // Error state (for validation feedback)
-  error: z5.object({
-    borderColorToken: z5.string(),
-    textColorToken: z5.string()
+  error: z6.object({
+    borderColorToken: themeColorTokenSchema,
+    textColorToken: themeColorTokenSchema
   }),
   // Disabled state
-  disabled: z5.object({
-    backgroundColorToken: z5.string(),
-    textColorToken: z5.string(),
-    opacity: z5.number().min(0.3).max(0.7)
+  disabled: z6.object({
+    backgroundColorToken: themeColorTokenSchema,
+    textColorToken: themeColorTokenSchema,
+    opacity: z6.number().min(0.3).max(0.7)
   })
 });
 
 // ../theme-core/src/navigation/types.ts
-import { z as z7 } from "zod";
+import { z as z8 } from "zod";
 
 // ../theme-core/src/interactive/baseSchema.ts
-import { z as z6 } from "zod";
-var interactiveTypographySchema = z6.object({
+import { z as z7 } from "zod";
+var interactiveTypographySchema = z7.object({
   /** Font family source */
-  typography: z6.enum(["body", "heading"]).default("body"),
+  typography: z7.enum(["body", "heading"]).default("body"),
   /** Font weight */
-  fontWeight: z6.enum(["regular", "medium", "semibold", "bold"]).default("medium"),
+  fontWeight: z7.enum(["regular", "medium", "semibold", "bold"]).default("medium"),
   /** Text transform */
-  textTransform: z6.enum(["none", "uppercase", "capitalize"]).default("none"),
+  textTransform: z7.enum(["none", "uppercase", "capitalize"]).default("none"),
   /** Italic style */
-  italic: z6.boolean().default(false)
+  italic: z7.boolean().default(false)
 });
-var effectApplicationSchema2 = z6.object({
+var effectApplicationSchema2 = z7.object({
   /** Effect preset ID */
-  effectId: z6.string(),
+  effectId: z7.string(),
   /** User-provided customization options */
-  options: z6.record(z6.string(), z6.any()).optional()
+  options: z7.record(z7.string(), z7.any()).optional()
 });
-var effectCompositionSchema = z6.object({
+var effectCompositionSchema = z7.object({
   /** Effects always applied */
-  base: z6.array(effectApplicationSchema2).optional(),
+  base: z7.array(effectApplicationSchema2).optional(),
   /** Effects applied on hover */
-  hover: z6.array(effectApplicationSchema2).optional(),
+  hover: z7.array(effectApplicationSchema2).optional(),
   /** Effects applied on active/pressed */
-  active: z6.array(effectApplicationSchema2).optional(),
+  active: z7.array(effectApplicationSchema2).optional(),
   /** Effects applied on focus */
-  focus: z6.array(effectApplicationSchema2).optional()
+  focus: z7.array(effectApplicationSchema2).optional()
 });
 
 // ../theme-core/src/navigation/types.ts
-var navLinkPaddingSchema = z7.enum(["none", "compact", "default"]);
-var navLinkPaddingXSchema = z7.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
-var navLinkBorderRadiusSchema = z7.enum(["none", "sm", "md", "full"]);
-var navLinkTextSizeSchema = z7.enum(["xs", "sm", "base", "lg"]);
-var navLinkLetterSpacingSchema = z7.enum(["normal", "wide", "wider", "widest"]);
-var navLinkStyleSchema = z7.object({
+var navLinkPaddingSchema = z8.enum(["none", "compact", "default"]);
+var navLinkPaddingXSchema = z8.enum(["none", "tight", "compact", "default", "relaxed", "spacious"]);
+var navLinkBorderRadiusSchema = z8.enum(["none", "sm", "md", "full"]);
+var navLinkTextSizeSchema = z8.enum(["xs", "sm", "base", "lg"]);
+var navLinkLetterSpacingSchema = z8.enum(["normal", "wide", "wider", "widest"]);
+var navLinkStyleSchema = z8.object({
   /** Display name for the style */
-  name: z7.string().min(1).max(30).optional(),
+  name: z8.string().min(1).max(30).optional(),
   /** Typography settings (inherited from interactive base) */
   ...interactiveTypographySchema.shape,
   /** Text color token */
-  colorToken: z7.string().default("text"),
+  colorToken: themeColorTokenSchema.default("text"),
   /** Optional text size override */
   textSize: navLinkTextSizeSchema.optional(),
   /** Optional letter spacing override */
   letterSpacing: navLinkLetterSpacingSchema.optional(),
   /** Hover/active color token (for color-change effects) */
-  hoverColorToken: z7.string().nullable().optional(),
+  hoverColorToken: themeColorTokenSchema.nullable().optional(),
   /** Padding preset */
   padding: navLinkPaddingSchema.default("compact"),
   /** Horizontal padding override (overrides horizontal component of padding preset) */
@@ -4519,7 +4650,7 @@ var navLinkStyleSchema = z7.object({
 });
 
 // ../theme-core/src/customCss/validation.ts
-import { z as z8 } from "zod";
+import { z as z9 } from "zod";
 var FORBIDDEN_SELECTORS = [":root", "html", "body"];
 var UNIVERSAL_SELECTOR = "*";
 var REMOTE_URL_PATTERN = /url\s*\(\s*['"]?(https?:|\/\/)/i;
@@ -4561,7 +4692,7 @@ function containsForbiddenSelector(selector) {
   }
   return false;
 }
-var selectorSchema = z8.string().min(1, "Selector cannot be empty").max(200, "Selector too long (max 200 characters)").refine(
+var selectorSchema = z9.string().min(1, "Selector cannot be empty").max(200, "Selector too long (max 200 characters)").refine(
   (s) => !containsForbiddenSelector(s),
   { message: "Global selectors (:root, html, body, *) are not allowed" }
 );
@@ -4571,38 +4702,38 @@ function containsRemoteUrl(value) {
 function containsJavascriptUrl(value) {
   return JAVASCRIPT_URL_PATTERN.test(value);
 }
-var declarationValueSchema = z8.string().max(500, "Declaration value too long (max 500 characters)").refine(
+var declarationValueSchema = z9.string().max(500, "Declaration value too long (max 500 characters)").refine(
   (v) => !containsRemoteUrl(v),
   { message: "Remote url() references are not allowed. Use local paths, data URIs, or fragment IDs." }
 ).refine(
   (v) => !containsJavascriptUrl(v),
   { message: "javascript: URLs are not allowed" }
 );
-var declarationsSchema = z8.record(
-  z8.string().min(1).max(100),
+var declarationsSchema = z9.record(
+  z9.string().min(1).max(100),
   // property name
   declarationValueSchema
   // property value
 );
-var customCssRuleSchema = z8.object({
-  id: z8.string().min(1, "Rule ID is required").max(50, "Rule ID too long"),
+var customCssRuleSchema = z9.object({
+  id: z9.string().min(1, "Rule ID is required").max(50, "Rule ID too long"),
   selector: selectorSchema,
   declarations: declarationsSchema
 });
 var blockCustomCssRuleSchema = customCssRuleSchema.extend({
-  blockKind: z8.string().min(1, "Block kind is required").max(50, "Block kind too long")
+  blockKind: z9.string().min(1, "Block kind is required").max(50, "Block kind too long")
 });
-var customCssRulesSchema = z8.array(customCssRuleSchema).optional();
-var blockCustomCssRulesSchema = z8.array(blockCustomCssRuleSchema).optional();
+var customCssRulesSchema = z9.array(customCssRuleSchema).optional();
+var blockCustomCssRulesSchema = z9.array(blockCustomCssRuleSchema).optional();
 
 // ../theme-core/src/customCss/atRuleValidation.ts
-import { z as z9 } from "zod";
+import { z as z10 } from "zod";
 var KEYFRAME_OFFSET_PATTERN = /^(from|to|\d{1,3}%)$/i;
 var ANIMATION_NAME_PATTERN = /^[a-zA-Z_-][a-zA-Z0-9_-]*$/;
 var BLOCKED_AT_RULES = ["@import", "@charset"];
 var BLOCKED_AT_RULE_PATTERN = /@(?:import|charset)\b/i;
-var ruleIdSchema = z9.string().min(1, "Rule ID is required").max(50, "Rule ID too long");
-var nestedRuleSchema = z9.object({
+var ruleIdSchema = z10.string().min(1, "Rule ID is required").max(50, "Rule ID too long");
+var nestedRuleSchema = z10.object({
   selector: selectorSchema,
   declarations: declarationsSchema
 });
@@ -4614,120 +4745,86 @@ function isValidKeyframeOffset(offset) {
   const value = parseInt(match[1], 10);
   return value >= 0 && value <= 100;
 }
-var keyframeOffsetSchema = z9.string().transform((offset) => offset.trim()).refine(
+var keyframeOffsetSchema = z10.string().transform((offset) => offset.trim()).refine(
   (offset) => KEYFRAME_OFFSET_PATTERN.test(offset),
   { message: 'Invalid keyframe offset. Use percentages (0%, 50%, 100%) or "from"/"to"' }
 ).refine(
   isValidKeyframeOffset,
   { message: "Keyframe offset must be between 0% and 100%" }
 );
-var animationNameSchema = z9.string().min(1, "Animation name is required").max(50, "Animation name too long").refine(
+var animationNameSchema = z10.string().min(1, "Animation name is required").max(50, "Animation name too long").refine(
   (name) => ANIMATION_NAME_PATTERN.test(name),
   { message: "Invalid animation name. Use letters, numbers, dashes, underscores (start with letter, dash, or underscore)" }
 );
-var keyframeSchema = z9.object({
+var keyframeSchema = z10.object({
   offset: keyframeOffsetSchema,
   declarations: declarationsSchema
 });
-var keyframesAtRuleSchema = z9.object({
+var keyframesAtRuleSchema = z10.object({
   id: ruleIdSchema,
-  type: z9.literal("keyframes"),
+  type: z10.literal("keyframes"),
   name: animationNameSchema,
-  frames: z9.array(keyframeSchema).min(1, "At least one keyframe is required")
+  frames: z10.array(keyframeSchema).min(1, "At least one keyframe is required")
 });
-var fontFaceDeclarationsSchema = z9.record(z9.string().min(1).max(100), declarationValueSchema).refine(
+var fontFaceDeclarationsSchema = z10.record(z10.string().min(1).max(100), declarationValueSchema).refine(
   (decls) => "fontFamily" in decls || "font-family" in decls,
   { message: "font-family is required in @font-face" }
 );
-var fontFaceAtRuleSchema = z9.object({
+var fontFaceAtRuleSchema = z10.object({
   id: ruleIdSchema,
-  type: z9.literal("font-face"),
+  type: z10.literal("font-face"),
   declarations: fontFaceDeclarationsSchema
 });
-var mediaQuerySchema = z9.string().min(1, "Media query is required").max(200, "Media query too long");
-var mediaAtRuleSchema = z9.object({
+var mediaQuerySchema = z10.string().min(1, "Media query is required").max(200, "Media query too long");
+var mediaAtRuleSchema = z10.object({
   id: ruleIdSchema,
-  type: z9.literal("media"),
+  type: z10.literal("media"),
   query: mediaQuerySchema,
-  rules: z9.array(nestedRuleSchema).min(1, "At least one rule is required")
+  rules: z10.array(nestedRuleSchema).min(1, "At least one rule is required")
 });
-var supportsConditionSchema = z9.string().min(1, "Supports condition is required").max(200, "Supports condition too long");
-var supportsAtRuleSchema = z9.object({
+var supportsConditionSchema = z10.string().min(1, "Supports condition is required").max(200, "Supports condition too long");
+var supportsAtRuleSchema = z10.object({
   id: ruleIdSchema,
-  type: z9.literal("supports"),
+  type: z10.literal("supports"),
   condition: supportsConditionSchema,
-  rules: z9.array(nestedRuleSchema).min(1, "At least one rule is required")
+  rules: z10.array(nestedRuleSchema).min(1, "At least one rule is required")
 });
 function containsBlockedAtRule(css) {
   return BLOCKED_AT_RULE_PATTERN.test(css);
 }
-var rawCssSchema = z9.string().min(1, "CSS is required").max(5e3, "Raw CSS too long (max 5000 characters)").refine(
+var rawCssSchema = z10.string().min(1, "CSS is required").max(5e3, "Raw CSS too long (max 5000 characters)").refine(
   (css) => css.trim().startsWith("@"),
   { message: "Raw at-rule must start with @" }
 ).refine(
   (css) => !containsBlockedAtRule(css),
   { message: `Blocked at-rules: ${BLOCKED_AT_RULES.join(", ")}. Use typed at-rules or local assets instead.` }
 );
-var rawAtRuleSchema = z9.object({
+var rawAtRuleSchema = z10.object({
   id: ruleIdSchema,
-  type: z9.literal("raw"),
+  type: z10.literal("raw"),
   css: rawCssSchema
 });
-var customCssAtRuleSchema = z9.discriminatedUnion("type", [
+var customCssAtRuleSchema = z10.discriminatedUnion("type", [
   keyframesAtRuleSchema,
   fontFaceAtRuleSchema,
   mediaAtRuleSchema,
   supportsAtRuleSchema,
   rawAtRuleSchema
 ]);
-var customCssAtRulesSchema = z9.array(customCssAtRuleSchema).optional();
+var customCssAtRulesSchema = z10.array(customCssAtRuleSchema).optional();
 
 // ../theme-core/src/shared/componentStyles.ts
-import { z as z10 } from "zod";
-var componentBorderSchema = z10.object({
-  width: z10.enum(["none", "hairline", "thin", "medium", "thick"]).default("none"),
-  style: z10.enum(["solid", "dashed"]).default("solid"),
-  colorToken: z10.string().optional()
+import { z as z11 } from "zod";
+var componentBorderSchema = z11.object({
+  width: z11.enum(["none", "hairline", "thin", "medium", "thick"]).default("none"),
+  style: z11.enum(["solid", "dashed"]).default("solid"),
+  colorToken: themeColorTokenSchema.optional()
   // defaults to "border" if not set
 });
-var componentShadowSchema = z10.object({
-  elevation: z10.enum(["none", "sm", "md", "lg", "xl", "2xl"]).default("sm")
+var componentShadowSchema = z11.object({
+  elevation: z11.enum(["none", "sm", "md", "lg", "xl", "2xl"]).default("sm")
 });
 
-// ../theme-core/src/tokens/blockColorTokens.ts
-var blockColorTokenNames = [
-  "text",
-  "heading",
-  "mutedText",
-  "surface",
-  "background",
-  "foreground",
-  "border",
-  "primary",
-  "secondary",
-  "accent",
-  "success",
-  "warning",
-  "info",
-  "error",
-  "destructive",
-  "scrim",
-  "shadow",
-  // Common "on*" tokens used when rendering colored chips/badges.
-  "onPrimary",
-  "onSecondary",
-  "onAccent",
-  "onSuccess",
-  "onWarning",
-  "onInfo",
-  "onError",
-  "onDestructive",
-  "onSurface"
-];
-var blockColorTokenNameSet = new Set(
-  blockColorTokenNames
-);
-
 // ../theme-core/src/responsive/breakpoints.ts
 var BREAKPOINT_SM = 640;
 var BREAKPOINT_MD = 768;
@@ -4756,6 +4853,38 @@ var MQ_TABLET_ONLY = mqBetween(BREAKPOINT_SM, BREAKPOINT_LG_DOWN);
 var MQ_MAX_640 = mqDown(BREAKPOINT_SM);
 var MQ_MAX_768 = mqDown(BREAKPOINT_MD);
 
+// ../blocks/src/system/runtime/shared/components/FeedbackMessage.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function joinClasses(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+function FeedbackMessage({
+  tone,
+  children,
+  className,
+  title,
+  titleClassName,
+  bodyClassName,
+  role = "status",
+  live
+}) {
+  const resolvedLive = live ?? (role === "alert" ? "assertive" : "polite");
+  const shouldWrapBody = Boolean(title || bodyClassName);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className,
+      "data-feedback-tone": tone,
+      role,
+      "aria-live": resolvedLive === "off" ? void 0 : resolvedLive,
+      children: [
+        title ? /* @__PURE__ */ jsx3("p", { className: joinClasses(titleClassName), "data-feedback-title": true, children: title }) : null,
+        shouldWrapBody ? /* @__PURE__ */ jsx3("div", { className: joinClasses(bodyClassName), "data-feedback-body": true, children }) : children
+      ]
+    }
+  );
+}
+
 // ../blocks/src/system/runtime/nodes/booking-form.client.tsx
 import React7, { useCallback as useCallback6, useRef as useRef6, useState as useState7 } from "react";
 
@@ -4772,7 +4901,7 @@ var logger = {
 
 // ../altcha/src/AltchaWidget.tsx
 import { useEffect, useRef, useState } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function AltchaWidget({
   challengeUrl,
   onSolutionChange,
@@ -4818,7 +4947,7 @@ function AltchaWidget({
       }
     };
   }, [challengeUrl, auto, hidelogo, className, onSolutionChange]);
-  return /* @__PURE__ */ jsx3("div", { ref: containerRef });
+  return /* @__PURE__ */ jsx4("div", { ref: containerRef });
 }
 
 // ../altcha/src/client.ts
@@ -5137,7 +5266,7 @@ function useMultiStep({
 }
 
 // ../blocks/src/system/runtime/components/multi-step/MultiStepForm.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function MultiStepForm({
   steps,
   initialData,
@@ -5173,7 +5302,7 @@ function MultiStepForm({
   } = context;
   const currentStep = visibleSteps[currentStepIndex];
   if (!currentStep) {
-    return /* @__PURE__ */ jsx4("div", { className: "rb-text-center rb-py-12", children: /* @__PURE__ */ jsx4("p", { className: "status-muted", children: "No steps available" }) });
+    return /* @__PURE__ */ jsx5("div", { className: "rb-text-center rb-py-12", children: /* @__PURE__ */ jsx5("p", { className: "status-muted", children: "No steps available" }) });
   }
   const stepComponent = isValidElement(currentStep.component) ? cloneElement(
     currentStep.component,
@@ -5187,8 +5316,8 @@ function MultiStepForm({
   const showNextButton = !currentStep.isTerminal;
   const nextButtonLabel = isLastStep ? currentStep.nextLabel || "Complete" : currentStep.nextLabel || "Continue";
   const backButtonLabel = currentStep.backLabel || "Back";
-  return /* @__PURE__ */ jsx4(MultiStepContext.Provider, { value: context, children: /* @__PURE__ */ jsxs2("div", { className: `multi-step-form ${className}`, children: [
-    progressStyle !== "none" && /* @__PURE__ */ jsx4("div", { className: "rb-mb-8", children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(MultiStepContext.Provider, { value: context, children: /* @__PURE__ */ jsxs3("div", { className: `multi-step-form ${className}`, children: [
+    progressStyle !== "none" && /* @__PURE__ */ jsx5("div", { className: "rb-mb-8", children: /* @__PURE__ */ jsx5(
       ProgressIndicator,
       {
         steps: visibleSteps,
@@ -5197,13 +5326,13 @@ function MultiStepForm({
         onStepClick: allowSkip ? goToStep : void 0
       }
     ) }),
-    /* @__PURE__ */ jsx4("div", { className: "step-content", children: stepComponent }),
-    Object.keys(errors).length > 0 && /* @__PURE__ */ jsxs2("div", { className: "rb-mt-6 alert alert-error", children: [
-      errors._form && /* @__PURE__ */ jsx4("p", { className: "rb-caption", children: /* @__PURE__ */ jsx4("strong", { children: errors._form }) }),
-      Object.entries(errors).filter(([key]) => key !== "_form").map(([key, message]) => /* @__PURE__ */ jsx4("p", { className: "rb-caption", children: message }, key))
+    /* @__PURE__ */ jsx5("div", { className: "step-content", children: stepComponent }),
+    Object.keys(errors).length > 0 && /* @__PURE__ */ jsxs3(FeedbackMessage, { tone: "error", className: "rb-mt-6 alert alert-error", role: "alert", children: [
+      errors._form && /* @__PURE__ */ jsx5("p", { className: "rb-caption", children: /* @__PURE__ */ jsx5("strong", { children: errors._form }) }),
+      Object.entries(errors).filter(([key]) => key !== "_form").map(([key, message]) => /* @__PURE__ */ jsx5("p", { className: "rb-caption", children: message }, key))
     ] }),
-    (showBackButton || showNextButton) && /* @__PURE__ */ jsxs2("div", { className: "rb-flex rb-gap-3 rb-mt-8", children: [
-      showBackButton && /* @__PURE__ */ jsx4(
+    (showBackButton || showNextButton) && /* @__PURE__ */ jsxs3("div", { className: "rb-flex rb-gap-3 rb-mt-8", children: [
+      showBackButton && /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -5213,7 +5342,7 @@ function MultiStepForm({
           children: backButtonLabel
         }
       ),
-      showNextButton && /* @__PURE__ */ jsxs2(
+      showNextButton && /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -5225,7 +5354,7 @@ function MultiStepForm({
             extraClassName: "rb-flex-1"
           }),
           children: [
-            (isValidating || isSubmitting) && /* @__PURE__ */ jsx4(
+            (isValidating || isSubmitting) && /* @__PURE__ */ jsx5(
               SpinnerNode,
               {
                 size: "sm",
@@ -5250,11 +5379,11 @@ function ProgressIndicator({
   onStepClick
 }) {
   if (style === "dots") {
-    return /* @__PURE__ */ jsx4("div", { className: "rb-flex rb-items-center rb-justify-center rb-gap-2", children: steps.map((step, index) => {
+    return /* @__PURE__ */ jsx5("div", { className: "rb-flex rb-items-center rb-justify-center rb-gap-2", children: steps.map((step, index) => {
       const isActive = index === currentIndex;
       const isCompleted = index < currentIndex;
       const isClickable = onStepClick && index <= currentIndex;
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -5273,13 +5402,13 @@ function ProgressIndicator({
     }) });
   }
   if (style === "steps") {
-    return /* @__PURE__ */ jsx4("div", { className: "rb-flex rb-items-center rb-justify-between", children: steps.map((step, index) => {
+    return /* @__PURE__ */ jsx5("div", { className: "rb-flex rb-items-center rb-justify-between", children: steps.map((step, index) => {
       const isActive = index === currentIndex;
       const isCompleted = index < currentIndex;
       const isClickable = onStepClick && index <= currentIndex;
       const isLast = index === steps.length - 1;
-      return /* @__PURE__ */ jsxs2("div", { className: "rb-flex rb-items-center rb-flex-1", children: [
-        /* @__PURE__ */ jsxs2(
+      return /* @__PURE__ */ jsxs3("div", { className: "rb-flex rb-items-center rb-flex-1", children: [
+        /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
@@ -5290,7 +5419,7 @@ function ProgressIndicator({
                    ${isClickable ? "rb-cursor-pointer" : "rb-cursor-default"}
                 `,
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "div",
                 {
                   className: `
@@ -5301,7 +5430,7 @@ function ProgressIndicator({
                   children: isCompleted ? "\u2713" : index + 1
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: `
@@ -5314,59 +5443,28 @@ function ProgressIndicator({
             ]
           }
         ),
-        !isLast && /* @__PURE__ */ jsx4("div", { className: "step-connector rb-ml-2 rb-mr-2 rb-hidden rb-sm-block" })
+        !isLast && /* @__PURE__ */ jsx5("div", { className: "step-connector rb-ml-2 rb-mr-2 rb-hidden rb-sm-block" })
       ] }, step.id);
     }) });
   }
   const progress = (currentIndex + 1) / steps.length * 100;
-  return /* @__PURE__ */ jsxs2("div", { className: "rb-space-y-2", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "rb-flex rb-justify-between rb-caption status-muted", children: [
-      /* @__PURE__ */ jsxs2("span", { children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "rb-space-y-2", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rb-flex rb-justify-between rb-caption status-muted", children: [
+      /* @__PURE__ */ jsxs3("span", { children: [
         "Step ",
         currentIndex + 1,
         " of ",
         steps.length
       ] }),
-      /* @__PURE__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsxs3("span", { children: [
         Math.round(progress),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx4("div", { className: "progress-bar", children: /* @__PURE__ */ jsx4("div", { className: "progress-fill", style: { width: `${progress}%` } }) })
+    /* @__PURE__ */ jsx5("div", { className: "progress-bar", children: /* @__PURE__ */ jsx5("div", { className: "progress-fill", style: { width: `${progress}%` } }) })
   ] });
 }
 
-// ../blocks/src/system/runtime/shared/components/FeedbackMessage.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function joinClasses(...parts) {
-  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
-}
-function FeedbackMessage({
-  tone,
-  children,
-  className,
-  title,
-  titleClassName,
-  bodyClassName,
-  role = "status",
-  live
-}) {
-  const resolvedLive = live ?? (role === "alert" ? "assertive" : "polite");
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className,
-      "data-feedback-tone": tone,
-      role,
-      "aria-live": resolvedLive === "off" ? void 0 : resolvedLive,
-      children: [
-        title ? /* @__PURE__ */ jsx5("p", { className: joinClasses(titleClassName), "data-feedback-title": true, children: title }) : null,
-        /* @__PURE__ */ jsx5("div", { className: joinClasses(bodyClassName), "data-feedback-body": true, children })
-      ]
-    }
-  );
-}
-
 // ../blocks/src/system/runtime/components/booking/SuccessMessage.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SuccessMessage = ({
@@ -5644,7 +5742,7 @@ function ServiceResourceSelector({
       /* @__PURE__ */ jsx7(SpinnerNode, { size: "md", srLabel: "Loading practitioners" }),
       /* @__PURE__ */ jsx7("p", { className: "ab-text ab-text--muted", children: "Loading practitioners..." })
     ] }),
-    resourceError && /* @__PURE__ */ jsx7("div", { className: "ab-alert ab-alert--error", children: resourceError }),
+    resourceError && /* @__PURE__ */ jsx7(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: resourceError }),
     /* @__PURE__ */ jsxs5("div", { className: "ab-actions", children: [
       onBack && /* @__PURE__ */ jsx7(
         "button",
@@ -5790,7 +5888,7 @@ var DatePicker = ({
         "Select Date",
         required && /* @__PURE__ */ jsx9("span", { className: "ab-required", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx9("div", { className: "ab-alert ab-alert--warning", children: /* @__PURE__ */ jsxs6("p", { className: "ab-text", children: [
+      /* @__PURE__ */ jsx9(FeedbackMessage, { tone: "warning", className: "ab-alert ab-alert--warning", role: "status", children: /* @__PURE__ */ jsxs6("p", { className: "ab-text", children: [
         "No available dates in this period.",
         hasMore && onLoadMore && /* @__PURE__ */ jsx9(
           "button",
@@ -5849,7 +5947,7 @@ var TimeSlotSelector = ({
       "Select Time",
       required && /* @__PURE__ */ jsx10("span", { className: "ab-required", children: "*" })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx10("div", { className: "ab-alert ab-alert--info ab-center", children: "Loading available times..." }) : slots.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "ab-alert ab-alert--info ab-center", children: "No available times for this date" }) : /* @__PURE__ */ jsxs7(
+    isLoading ? /* @__PURE__ */ jsx10(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "Loading available times..." }) : slots.length === 0 ? /* @__PURE__ */ jsx10(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "No available times for this date" }) : /* @__PURE__ */ jsxs7(
       "select",
       {
         id: "booking-slot",
@@ -6089,7 +6187,7 @@ function DateTimeSelectionStep({
         " minutes"
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx11("div", { className: "ab-alert ab-alert--error", children: error }),
+    error && /* @__PURE__ */ jsx11(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: error }),
     /* @__PURE__ */ jsx11(
       DatePicker,
       {
@@ -6469,7 +6567,7 @@ function PaymentOptionSelectionStep({
     }
   }, [appointmentPackages, data.selectedAppointmentPackageId, updateData]);
   if (resolution.mode === "unsupported" || !service) {
-    return /* @__PURE__ */ jsx12("div", { className: "ab-alert ab-alert--error", children: resolution.errorMessage ?? "Payment options are unavailable for this service right now." });
+    return /* @__PURE__ */ jsx12(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: resolution.errorMessage ?? "Payment options are unavailable for this service right now." });
   }
   const viewModel = buildBookingPaymentSelectionViewModel({
     serviceTitle: service.title,
@@ -6485,8 +6583,8 @@ function PaymentOptionSelectionStep({
       /* @__PURE__ */ jsx12("h3", { className: "ab-subtitle", children: viewModel.sectionTitle }),
       /* @__PURE__ */ jsx12("p", { className: "ab-text ab-text--muted", children: service.title })
     ] }),
-    appointmentPackages.tag === "loading" ? /* @__PURE__ */ jsx12("div", { className: "ab-alert ab-alert--info", role: "status", children: "Checking package credits..." }) : null,
-    appointmentPackages.tag === "error" ? /* @__PURE__ */ jsxs9("div", { className: "ab-alert ab-alert--info", role: "status", children: [
+    appointmentPackages.tag === "loading" ? /* @__PURE__ */ jsx12(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: "Checking package credits..." }) : null,
+    appointmentPackages.tag === "error" ? /* @__PURE__ */ jsxs9(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: [
       appointmentPackages.message,
       " You can continue with the normal payment option."
     ] }) : null,
@@ -6579,7 +6677,43 @@ function PaymentOptionSelectionStep({
 
 // ../blocks/src/system/runtime/components/multi-step/DynamicFormFields.tsx
 import { useState as useState5, useCallback as useCallback4 } from "react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// ../blocks/src/system/runtime/shared/components/FieldValidationMessage.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function getFieldValidationControlProps({
+  message,
+  messageId,
+  describedBy
+}) {
+  const hasMessage = Boolean(message);
+  const ariaDescribedBy = [describedBy, hasMessage ? messageId : void 0].filter((part) => typeof part === "string" && part.length > 0).join(" ");
+  return {
+    "aria-invalid": hasMessage ? "true" : void 0,
+    "aria-describedby": ariaDescribedBy || void 0
+  };
+}
+function FieldValidationMessage({
+  id,
+  children,
+  className,
+  live = "assertive"
+}) {
+  return /* @__PURE__ */ jsx13(
+    "p",
+    {
+      id,
+      className,
+      "data-field-validation-message": true,
+      "data-field-validation-tone": "error",
+      role: "alert",
+      "aria-live": live === "off" ? void 0 : live,
+      children
+    }
+  );
+}
+
+// ../blocks/src/system/runtime/components/multi-step/DynamicFormFields.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function DynamicFormFields({
   fields,
   showLabels = true,
@@ -6656,26 +6790,30 @@ function DynamicFormFields({
     },
     [data, touched]
   );
-  return /* @__PURE__ */ jsx13("div", { className: `rb-space-y-6 ${className}`, children: fields.map((field) => {
+  return /* @__PURE__ */ jsx14("div", { className: `rb-space-y-6 ${className}`, children: fields.map((field) => {
     const error = getFieldError(field);
     const value = data[field.id] ?? "";
+    const helpId = field.helpText ? `${field.id}-help` : void 0;
+    const errorId = `${field.id}-error`;
     return /* @__PURE__ */ jsxs10("div", { className: "rb-space-y-2", children: [
       showLabels && /* @__PURE__ */ jsxs10("label", { htmlFor: field.id, className: "form-label", children: [
         field.label,
-        field.required && /* @__PURE__ */ jsx13("span", { className: "required-marker", children: "*" })
+        field.required && /* @__PURE__ */ jsx14("span", { className: "required-marker", children: "*" })
       ] }),
-      field.helpText && /* @__PURE__ */ jsx13("p", { className: "rb-caption status-muted", children: field.helpText }),
-      /* @__PURE__ */ jsx13(
+      field.helpText && /* @__PURE__ */ jsx14("p", { id: helpId, className: "rb-caption status-muted", children: field.helpText }),
+      /* @__PURE__ */ jsx14(
         FieldInput,
         {
           field,
           value,
           onChange: (val) => handleChange(field.id, val),
           onBlur: () => handleBlur(field.id),
-          error
+          error,
+          errorId,
+          describedBy: helpId
         }
       ),
-      error && /* @__PURE__ */ jsx13("p", { className: "rb-caption status-error", children: error })
+      error && /* @__PURE__ */ jsx14(FieldValidationMessage, { id: errorId, className: "rb-caption status-error", children: error })
     ] }, field.id);
   }) });
 }
@@ -6684,7 +6822,9 @@ function FieldInput({
   value,
   onChange,
   onBlur,
-  error
+  error,
+  errorId,
+  describedBy
 }) {
   const inputClass = "form-input";
   const textareaClass = "form-textarea";
@@ -6692,9 +6832,14 @@ function FieldInput({
   const checkboxClass = "form-checkbox";
   const radioClass = "form-radio";
   const strValue = typeof value === "string" ? value : String(value ?? "");
+  const validationProps = getFieldValidationControlProps({
+    message: error,
+    messageId: errorId,
+    describedBy
+  });
   switch (field.type) {
     case "textarea":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "textarea",
         {
           id: field.id,
@@ -6707,13 +6852,13 @@ function FieldInput({
           minLength: field.minLength,
           maxLength: field.maxLength,
           rows: 4,
-          "aria-invalid": error ? "true" : void 0,
+          ...validationProps,
           className: textareaClass
         }
       );
     case "select":
       if (field.multiple) {
-        return /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx14(
           "select",
           {
             id: field.id,
@@ -6726,9 +6871,9 @@ function FieldInput({
             onBlur,
             required: field.required,
             multiple: true,
-            "aria-invalid": error ? "true" : void 0,
+            ...validationProps,
             className: `${selectClass} rb-h-32`,
-            children: field.options?.map((opt) => /* @__PURE__ */ jsx13("option", { value: opt.value, children: opt.label }, opt.value))
+            children: field.options?.map((opt) => /* @__PURE__ */ jsx14("option", { value: opt.value, children: opt.label }, opt.value))
           }
         );
       }
@@ -6741,17 +6886,17 @@ function FieldInput({
           onChange: (e) => onChange(e.target.value),
           onBlur,
           required: field.required,
-          "aria-invalid": error ? "true" : void 0,
+          ...validationProps,
           className: selectClass,
           children: [
-            /* @__PURE__ */ jsx13("option", { value: "", children: "Select an option..." }),
-            field.options?.map((opt) => /* @__PURE__ */ jsx13("option", { value: opt.value, children: opt.label }, opt.value))
+            /* @__PURE__ */ jsx14("option", { value: "", children: "Select an option..." }),
+            field.options?.map((opt) => /* @__PURE__ */ jsx14("option", { value: opt.value, children: opt.label }, opt.value))
           ]
         }
       );
     case "radio":
-      return /* @__PURE__ */ jsx13("div", { className: "rb-space-y-2", children: field.options?.map((opt) => /* @__PURE__ */ jsxs10("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14("div", { className: "rb-space-y-2", children: field.options?.map((opt) => /* @__PURE__ */ jsxs10("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "radio",
@@ -6761,16 +6906,17 @@ function FieldInput({
             onChange: (e) => onChange(e.target.value),
             onBlur,
             required: field.required,
+            ...validationProps,
             className: radioClass
           }
         ),
-        /* @__PURE__ */ jsx13("span", { className: "rb-caption", children: opt.label })
+        /* @__PURE__ */ jsx14("span", { className: "rb-caption", children: opt.label })
       ] }, opt.value)) });
     case "checkbox":
       if (field.options && field.options.length > 1) {
         const checkedValues = Array.isArray(value) ? value : [];
-        return /* @__PURE__ */ jsx13("div", { className: "rb-space-y-2", children: field.options.map((opt) => /* @__PURE__ */ jsxs10("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-          /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx14("div", { className: "rb-space-y-2", children: field.options.map((opt) => /* @__PURE__ */ jsxs10("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "checkbox",
@@ -6782,14 +6928,15 @@ function FieldInput({
                 onChange(newValues);
               },
               onBlur,
+              ...validationProps,
               className: checkboxClass
             }
           ),
-          /* @__PURE__ */ jsx13("span", { className: "rb-caption", children: opt.label })
+          /* @__PURE__ */ jsx14("span", { className: "rb-caption", children: opt.label })
         ] }, opt.value)) });
       }
       return /* @__PURE__ */ jsxs10("label", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "checkbox",
@@ -6799,14 +6946,15 @@ function FieldInput({
             onChange: (e) => onChange(e.target.checked),
             onBlur,
             required: field.required,
+            ...validationProps,
             className: checkboxClass
           }
         ),
-        /* @__PURE__ */ jsx13("span", { className: "rb-caption", children: field.placeholder || field.label })
+        /* @__PURE__ */ jsx14("span", { className: "rb-caption", children: field.placeholder || field.label })
       ] });
     case "booking_requirement_consent":
       return /* @__PURE__ */ jsxs10("label", { className: "rb-flex rb-items-start rb-gap-2 rb-cursor-pointer", children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "checkbox",
@@ -6816,13 +6964,14 @@ function FieldInput({
             onChange: (e) => onChange(e.target.checked),
             onBlur,
             required: field.required,
+            ...validationProps,
             className: `${checkboxClass} rb-mt-0.5`
           }
         ),
-        /* @__PURE__ */ jsx13("span", { className: "rb-caption", children: field.placeholder || field.label })
+        /* @__PURE__ */ jsx14("span", { className: "rb-caption", children: field.placeholder || field.label })
       ] });
     case "number":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "input",
         {
           type: "number",
@@ -6835,12 +6984,12 @@ function FieldInput({
           required: field.required,
           min: field.min,
           max: field.max,
-          "aria-invalid": error ? "true" : void 0,
+          ...validationProps,
           className: inputClass
         }
       );
     case "date":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "input",
         {
           type: "date",
@@ -6852,12 +7001,12 @@ function FieldInput({
           required: field.required,
           min: field.min ? String(field.min) : void 0,
           max: field.max ? String(field.max) : void 0,
-          "aria-invalid": error ? "true" : void 0,
+          ...validationProps,
           className: inputClass
         }
       );
     case "time":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "input",
         {
           type: "time",
@@ -6867,13 +7016,13 @@ function FieldInput({
           onChange: (e) => onChange(e.target.value),
           onBlur,
           required: field.required,
-          "aria-invalid": error ? "true" : void 0,
+          ...validationProps,
           className: inputClass
         }
       );
     // text, email, tel, url
     default:
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "input",
         {
           type: field.type,
@@ -6887,7 +7036,7 @@ function FieldInput({
           minLength: field.minLength,
           maxLength: field.maxLength,
           pattern: field.pattern,
-          "aria-invalid": error ? "true" : void 0,
+          ...validationProps,
           className: inputClass
         }
       );
@@ -7345,7 +7494,7 @@ function useBookingSubmission(_siteId) {
 }
 
 // ../blocks/src/system/runtime/nodes/course-registration/DiscountCodeSection.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function DiscountCodeSection({
   isOpen,
   code,
@@ -7353,10 +7502,10 @@ function DiscountCodeSection({
   onChange,
   onRemove
 }) {
-  return /* @__PURE__ */ jsx14("div", { className: "cr-discount", children: !isOpen ? /* @__PURE__ */ jsx14("button", { type: "button", className: "cr-discount__toggle", onClick: onOpen, children: "Have a discount code?" }) : /* @__PURE__ */ jsxs11("div", { className: "cr-discount__form", children: [
-    /* @__PURE__ */ jsx14("label", { htmlFor: "cr-discount-code", className: "cr-discount__label", children: "Discount code" }),
+  return /* @__PURE__ */ jsx15("div", { className: "cr-discount", children: !isOpen ? /* @__PURE__ */ jsx15("button", { type: "button", className: "cr-discount__toggle", onClick: onOpen, children: "Have a discount code?" }) : /* @__PURE__ */ jsxs11("div", { className: "cr-discount__form", children: [
+    /* @__PURE__ */ jsx15("label", { htmlFor: "cr-discount-code", className: "cr-discount__label", children: "Discount code" }),
     /* @__PURE__ */ jsxs11("div", { className: "cr-discount__row", children: [
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "input",
         {
           id: "cr-discount-code",
@@ -7367,9 +7516,9 @@ function DiscountCodeSection({
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ jsx14("button", { type: "button", className: "cr-discount__remove", onClick: onRemove, children: "Remove" })
+      /* @__PURE__ */ jsx15("button", { type: "button", className: "cr-discount__remove", onClick: onRemove, children: "Remove" })
     ] }),
-    /* @__PURE__ */ jsx14("p", { className: "cr-discount__hint", children: "Applied at checkout." })
+    /* @__PURE__ */ jsx15("p", { className: "cr-discount__hint", children: "Applied at checkout." })
   ] }) });
 }
 
@@ -7457,7 +7606,7 @@ function scrollToBlock(anchorId) {
 }
 
 // ../blocks/src/system/runtime/nodes/booking-form.client.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var PORTAL_REBOOK_QUERY_PARAM = "rebook";
 var PORTAL_REBOOK_QUERY_VALUE = "1";
 var REBOOK_COMPLETION_MODE_VERIFIED_CHECKOUT = "verified_checkout";
@@ -7593,11 +7742,13 @@ var BookingFormClient = ({
     viewState.kind
   ]);
   if (render.display.state === "missing" || !form || !render.hydration.formId) {
-    return /* @__PURE__ */ jsx15(
-      "div",
+    return /* @__PURE__ */ jsx16(
+      FeedbackMessage,
       {
+        tone: "error",
         className: `ab-alert ab-alert--error ${render.display.className ?? ""}`.trim(),
-        children: /* @__PURE__ */ jsx15("p", { className: "ab-text", children: render.display.message ?? "Booking form not found. Please check your configuration." })
+        role: "alert",
+        children: /* @__PURE__ */ jsx16("p", { className: "ab-text", children: render.display.message ?? "Booking form not found. Please check your configuration." })
       }
     );
   }
@@ -7639,7 +7790,7 @@ var BookingFormClient = ({
     window.location.href = result.data.checkoutUrl;
   };
   if (viewState.kind === "success") {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       SuccessMessage,
       {
         message: getBookingSuccessMessage(render.display.successMessage),
@@ -7649,18 +7800,18 @@ var BookingFormClient = ({
     );
   }
   if (viewState.kind === "verifying") {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         id: bookingAnchorId,
         className: render.display.className ?? void 0,
-        children: /* @__PURE__ */ jsx15("div", { className: "ab-alert ab-alert--info", role: "status", children: /* @__PURE__ */ jsx15("p", { className: "ab-text", children: viewState.message }) })
+        children: /* @__PURE__ */ jsx16(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: /* @__PURE__ */ jsx16("p", { className: "ab-text", children: viewState.message }) })
       }
     );
   }
   return /* @__PURE__ */ jsxs12("div", { id: bookingAnchorId, className: render.display.className ?? void 0, children: [
-    render.hydration.noticeMessage ? /* @__PURE__ */ jsx15("div", { className: "ab-alert ab-alert--info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx15("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
-    /* @__PURE__ */ jsx15(
+    render.hydration.noticeMessage ? /* @__PURE__ */ jsx16(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx16("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
+    /* @__PURE__ */ jsx16(
       MultiStepForm,
       {
         steps,
@@ -7677,7 +7828,7 @@ var BookingFormClient = ({
       }
     ),
     shouldShowDiscountSection ? /* @__PURE__ */ jsxs12("div", { className: "rb-mt-6", children: [
-      discountUi.manualCodeEntryAllowed ? /* @__PURE__ */ jsx15(
+      discountUi.manualCodeEntryAllowed ? /* @__PURE__ */ jsx16(
         DiscountCodeSection,
         {
           isOpen: discountUi.discountUiOpen,
@@ -7690,16 +7841,16 @@ var BookingFormClient = ({
           }
         }
       ) : null,
-      discountUi.autoAppliedDiscount && discountUi.discountCode.trim().length === 0 ? /* @__PURE__ */ jsx15("div", { className: "ab-alert ab-alert--info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs12("p", { className: "ab-text", children: [
+      discountUi.autoAppliedDiscount && discountUi.discountCode.trim().length === 0 ? /* @__PURE__ */ jsx16(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs12("p", { className: "ab-text", children: [
         "Discount available: ",
         discountUi.autoAppliedDiscount.publicLabel,
         " ",
         "will apply automatically at checkout."
       ] }) }) : null
     ] }) : null,
-    feedback.tag === "error" ? /* @__PURE__ */ jsxs12("div", { className: "ab-alert ab-alert--error", role: "alert", children: [
-      /* @__PURE__ */ jsx15("p", { className: "ab-text", children: feedback.message }),
-      /* @__PURE__ */ jsx15(
+    feedback.tag === "error" ? /* @__PURE__ */ jsxs12(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: [
+      /* @__PURE__ */ jsx16("p", { className: "ab-text", children: feedback.message }),
+      /* @__PURE__ */ jsx16(
         "button",
         {
           type: "button",
@@ -7709,7 +7860,7 @@ var BookingFormClient = ({
         }
       )
     ] }) : null,
-    showSpamProtection && /* @__PURE__ */ jsx15("div", { className: "ab-altcha", children: /* @__PURE__ */ jsx15(
+    showSpamProtection && /* @__PURE__ */ jsx16("div", { className: "ab-altcha", children: /* @__PURE__ */ jsx16(
       AltchaWidget,
       {
         challengeUrl: getChallengeUrl(),
@@ -8351,10 +8502,10 @@ function buildResponsiveScopeRulePatternSource() {
 }
 
 // ../theme-core/src/ThemeScopeCore.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 
 // ../theme-core/src/ClientThemeScope.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 
 // ../blocks/src/system/runtime/hooks/useBookingFormConfig.ts
 import { useState as useState8, useEffect as useEffect9 } from "react";