@riverbankcms/sdk 0.145.0 → 0.146.0

package/dist/client/rendering/client.mjs

@@ -1626,7 +1626,8 @@ var init_business_address = __esmMin((() => {
 var init_try_async = __esmMin((() => {
 	init_result$1();
 }));
-var init_narrow_result = __esmMin((() => {})), init_editor_state = __esmMin((() => {}));
+var init_narrow_result = __esmMin((() => {}));
+var init_editor_state = __esmMin((() => {})), init_block_content_identity = __esmMin((() => {}));
 var init_sensitive_collection = __esmMin((() => {}));
 //#endregion
 //#region ../core/src/assertNever.ts
@@ -2149,15 +2150,6 @@ function parseMailingListContentVersionId(value) {
 	const parsed = parseContentVersionId(value);
 	return parsed.ok ? parsed.value : null;
 }
-function buildMailingListSignupBlockSourceRef(blockId, contentVersionId) {
-	const parsedBlockId = parseMailingListBlockId(blockId);
-	const parsedContentVersionId = parseMailingListContentVersionId(contentVersionId);
-	return parsedBlockId !== null && parsedContentVersionId !== null ? {
-		tag: "block_ref",
-		blockId: parsedBlockId,
-		contentVersionId: parsedContentVersionId
-	} : null;
-}
 var init_mailing_list_submission = __esmMin((() => {
 	init_branded();
 }));
@@ -2577,6 +2569,7 @@ var init_src$2 = __esmMin((() => {
 	init_narrow_result();
 	init_non_empty_array();
 	init_editor_state();
+	init_block_content_identity();
 	init_sensitive_collection();
 	init_assertNever$1();
 	init_participants();
@@ -9048,7 +9041,7 @@ var init_bookingConsent = __esmMin((() => {
 		checkboxLabel: z.string().min(1)
 	});
 	z.union([blockBookingConsentSchema, bookingRequirementConsentFieldSchema]);
-})), publicEventLoaderQuerySchemaShape, eventPresetSchema, eventScheduleScopeSchema$2, publicEventRecurrenceSchema, eventDestinationModeSchema, publicEventDestinationSchema, eventVenueSchema, eventCategorySchema, accessRestrictionSchema, publicCurrencySchema, publicCentsSchema, publicPositiveCentsSchema, publicIsoDateTimeSchema, publicEventAttendanceModeSchema, publicEventAttendanceModeAvailabilitySchema, publicEventPricingOptionAvailabilitySchema, publicEventPricingOptionSchema, publicEventPricingSchema, publicTeamMemberSummarySchema, publicEventBookingAvailabilitySchema, publicRunSessionSchema, publicWholeSeriesRunSchema, publicEventBaseSchema, publicEventSchema, publicEventsArraySchema;
+})), publicEventLoaderQuerySchemaShape, eventPresetSchema, eventScheduleScopeSchema$2, publicEventRecurrenceSchema, eventDestinationModeSchema, publicEventDestinationSchema, eventVenueSchema, eventCategorySchema, accessRestrictionSchema, publicCurrencySchema, publicCentsSchema, publicPositiveCentsSchema, publicIsoDateTimeSchema, publicEventAttendanceModeSchema, publicEventAttendanceModeAvailabilitySchema, publicEventPricingOptionAvailabilitySchema, publicEventPricingOptionSchema, publicEventPricingSchema, publicTeamMemberSummarySchema, publicEventBookingAvailabilitySchema, publicEventBookingClosedDetailSchema, publicRunSessionSchema, publicWholeSeriesRunSchema, publicEventBaseSchema, publicEventSchema, publicEventsArraySchema;
 var init_schemas = __esmMin((() => {
 	init_media$1();
 	init_richTextSchema();
@@ -9072,6 +9065,7 @@ var init_schemas = __esmMin((() => {
 		seriesSlug: z.string().optional(),
 		includeOccurrenceId: z.string().optional(),
 		readIntent: z.string().optional(),
+		detailAdmission: z.string().optional(),
 		detailLevel: z.string().optional(),
 		readProfile: z.string().optional()
 	};
@@ -9229,11 +9223,11 @@ var init_schemas = __esmMin((() => {
 			"series_archived",
 			"parent_archived",
 			"parent_inconsistent",
-			"not_public",
 			"already_started",
 			"enrollment_closed"
 		])
 	})]);
+	publicEventBookingClosedDetailSchema = z.discriminatedUnion("kind", [z.object({ kind: z.literal("opensSoon") }), z.object({ kind: z.literal("paused") })]);
 	publicRunSessionSchema = z.object({
 		occurrenceId: z.string(),
 		startsAt: z.string(),
@@ -9275,6 +9269,7 @@ var init_schemas = __esmMin((() => {
 		destination: publicEventDestinationSchema,
 		requiresRegistration: z.boolean(),
 		bookingAvailability: publicEventBookingAvailabilitySchema,
+		bookingClosedDetail: publicEventBookingClosedDetailSchema.optional(),
 		deliveryMode: z.enum([
 			"in_person",
 			"online",
@@ -13733,6 +13728,7 @@ var init_social = __esmMin((() => {
 		"SocialInstagram",
 		"SocialLinkedIn",
 		"SocialTikTok",
+		"SocialWhatsApp",
 		"SocialX",
 		"SocialYouTube"
 	];
@@ -13769,6 +13765,7 @@ var init_social = __esmMin((() => {
 			/* @__PURE__ */ jsx("path", { d: "M10.5 9v10" })
 		] })),
 		SocialTikTok: createIcon("SocialTikTokIcon", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M14 4v11.5a4.5 4.5 0 1 1-4-4.47" }), /* @__PURE__ */ jsx("path", { d: "M14 4c.7 3 2.4 4.5 5 4.5" })] })),
+		SocialWhatsApp: createIcon("SocialWhatsAppIcon", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M3.5 20.5 4.8 16.4A8.5 8.5 0 1 1 8 19.3Z" }), /* @__PURE__ */ jsx("path", { d: "M9.2 8.2c.2-.5.9-.6 1.2-.1l.8 1.4c.2.3.1.7-.2 1l-.5.5c.5 1.1 1.4 2 2.5 2.5l.5-.5c.3-.3.7-.4 1-.2l1.4.8c.5.3.4 1-.1 1.2-2.9 1.1-7.7-3.7-6.6-6.6Z" })] })),
 		SocialX: createIcon("SocialXIcon", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m5 4 14 16" }), /* @__PURE__ */ jsx("path", { d: "M19 4 5 20" })] })),
 		SocialYouTube: createIcon("SocialYouTubeIcon", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M21 12c0 3.5-.5 5.5-1.3 6.3S16.5 19.5 12 19.5s-6.9-.4-7.7-1.2S3 15.5 3 12s.5-5.5 1.3-6.3S7.5 4.5 12 4.5s6.9.4 7.7 1.2S21 8.5 21 12Z" }), /* @__PURE__ */ jsx("path", { d: "m10 9 5 3-5 3Z" })] }))
 	};
@@ -17565,7 +17562,6 @@ function closedEventBookingLabel(reason) {
 		case "series_archived":
 		case "parent_archived":
 		case "parent_inconsistent":
-		case "not_public":
 		case "already_started":
 		case "enrollment_closed": return "Registration closed";
 		default: return assertNever$22(reason);
@@ -37193,6 +37189,11 @@ function withOptionalPhone(fields, includePhone) {
 var init_newsletter_form_types = __esmMin((() => {}));
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/newsletter-form.interactive.ts
+function newsletterBlockSubmissionMessage(target) {
+	if (target.tag === "block-source") return target.sourceRef ? null : NEWSLETTER_SIGNUPS_PAUSED_MESSAGE;
+	if (target.tag !== "unpublished-preview") return null;
+	return target.reason === "unpublished-form" ? "Publish this form to test a signup here." : "This form's signup settings are unpublished. Publish it to test a signup here.";
+}
 function buildNewsletterDisplay(source) {
 	const context = source.mailingList;
 	const form = context?.tag === "configured" ? context.form : {
@@ -37218,16 +37219,21 @@ function buildNewsletterDisplay(source) {
 }
 function projectNewsletterFormHydrationTarget(source) {
 	switch (source.source) {
-		case "block": {
-			const sourceRef = buildMailingListSignupBlockSourceRef(source.blockId, source.contentVersionId);
-			if (sourceRef?.tag === "block_ref") return {
+		case "block": switch (source.newsletterBlockSubmission.tag) {
+			case "unpublished-form":
+			case "unpublished-settings": return {
+				tag: "unpublished-preview",
+				reason: source.newsletterBlockSubmission.tag
+			};
+			case "ready": return {
 				tag: "block-source",
-				sourceRef
+				sourceRef: source.newsletterBlockSubmission.sourceRef
 			};
-			return {
+			case "unavailable": return {
 				tag: "block-source",
 				sourceRef: null
 			};
+			default: return assertNever$22(source.newsletterBlockSubmission);
 		}
 		case "signed-footer": return {
 			tag: "signed-footer-source",
@@ -37296,6 +37302,7 @@ function buildNewsletterFormInteractiveIslandProps(props) {
 	const decoded = newsletterFormBlockRuntime.contracts.source.decode(props);
 	const source = isDecodeSuccess(decoded) ? decoded.value : {
 		...props,
+		...props.source === "block" ? { newsletterBlockSubmission: { tag: "unavailable" } } : {},
 		mailingList: void 0,
 		targeting: { mode: "default" }
 	};
@@ -37319,13 +37326,14 @@ function parseRequiredMailingListSignedSourceToken(value) {
 	if (!parsed) throw new Error("Mailing-list signup signed source ref requires token");
 	return parsed;
 }
-var newsletterButtonVariantSchema, mailingListContextSchema, mailingListTargetingSchema, newsletterFieldSchema, mailingListSignupBlockIdSchema, mailingListContentVersionIdSchema, signedMailingListSourceTokenSchema, newsletterSourceCommonSchema, newsletterSourceSchema, newsletterDisplaySchema, newsletterHydrationSchema, newsletterRenderSchema, newsletterIslandMetaCodec, newsletterIslandMetaKeys, newsletterFormBlockRuntime, newsletterFormInteractiveIslandPropsCodec;
+var NEWSLETTER_SIGNUPS_PAUSED_MESSAGE, newsletterButtonVariantSchema, mailingListContextSchema, mailingListTargetingSchema, newsletterFieldSchema, mailingListSignupBlockIdSchema, mailingListContentVersionIdSchema, mailingListSignupBlockSourceRefSchema, signedMailingListSourceTokenSchema, newsletterSourceCommonSchema, newsletterSourceSchema, newsletterDisplaySchema, newsletterHydrationSchema, newsletterRenderSchema, newsletterIslandMetaCodec, newsletterIslandMetaKeys, newsletterFormBlockRuntime, newsletterFormInteractiveIslandPropsCodec;
 var init_newsletter_form_interactive = __esmMin((() => {
 	init_src$2();
 	init_islands();
 	init_runtime();
 	init_newsletter_form_types();
 	init_buttonRoles();
+	NEWSLETTER_SIGNUPS_PAUSED_MESSAGE = "We can’t accept signups right now. Please try again later.";
 	newsletterButtonVariantSchema = blockButtonRoleSchema;
 	mailingListContextSchema = z.unknown().transform((value, ctx) => {
 		const parsed = parseMailingListRuntimeContext(value);
@@ -37366,6 +37374,11 @@ var init_newsletter_form_interactive = __esmMin((() => {
 		});
 		return z.NEVER;
 	});
+	mailingListSignupBlockSourceRefSchema = z.object({
+		tag: z.literal("block_ref"),
+		blockId: mailingListSignupBlockIdSchema,
+		contentVersionId: mailingListContentVersionIdSchema
+	});
 	signedMailingListSourceTokenSchema = z.string().trim().min(1).transform(parseRequiredMailingListSignedSourceToken);
 	newsletterSourceCommonSchema = z.object({
 		siteId: z.string().optional(),
@@ -37380,7 +37393,15 @@ var init_newsletter_form_interactive = __esmMin((() => {
 		newsletterSourceCommonSchema.extend({
 			source: z.literal("block"),
 			blockId: z.string().nullable().optional(),
-			contentVersionId: z.string().nullable().optional()
+			newsletterBlockSubmission: z.discriminatedUnion("tag", [
+				z.object({
+					tag: z.literal("ready"),
+					sourceRef: mailingListSignupBlockSourceRefSchema
+				}),
+				z.object({ tag: z.literal("unpublished-form") }),
+				z.object({ tag: z.literal("unpublished-settings") }),
+				z.object({ tag: z.literal("unavailable") })
+			])
 		}),
 		newsletterSourceCommonSchema.extend({
 			source: z.literal("signed-footer"),
@@ -37409,11 +37430,7 @@ var init_newsletter_form_interactive = __esmMin((() => {
 		target: z.discriminatedUnion("tag", [
 			z.object({
 				tag: z.literal("block-source"),
-				sourceRef: z.object({
-					tag: z.literal("block_ref"),
-					blockId: mailingListSignupBlockIdSchema,
-					contentVersionId: mailingListContentVersionIdSchema
-				}).nullable()
+				sourceRef: mailingListSignupBlockSourceRefSchema.nullable()
 			}),
 			z.object({
 				tag: z.literal("signed-footer-source"),
@@ -37422,7 +37439,11 @@ var init_newsletter_form_interactive = __esmMin((() => {
 					token: signedMailingListSourceTokenSchema
 				})
 			}),
-			z.object({ tag: z.literal("preview") })
+			z.object({ tag: z.literal("preview") }),
+			z.object({
+				tag: z.literal("unpublished-preview"),
+				reason: z.enum(["unpublished-form", "unpublished-settings"])
+			})
 		]),
 		setupRevision: z.number().int().positive().nullable(),
 		choiceProvider: z.enum([
@@ -39923,10 +39944,167 @@ function FeedbackMessage({ tone, treatment = "panel", children, className, id, t
 }
 var init_FeedbackMessage = __esmMin((() => {}));
 //#endregion
+//#region ../blocks/src/system/runtime/shared/components/CheckboxChoice.tsx
+/**
+* The customer-facing checkbox every block renders. Styling comes from the
+* theme's input CSS (`.form-check`, `.form-checkbox`), so it follows each
+* site's input colours, borders and corners.
+*/
+function CheckboxChoice({ label, presentation = "row", className, ...inputProps }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: clsx("form-check", presentation === "tile" && "form-check--tile", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			...inputProps,
+			type: "checkbox",
+			className: "form-checkbox"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "form-check-label",
+			children: label
+		})]
+	});
+}
+var init_CheckboxChoice = __esmMin((() => {
+	init_clsx();
+}));
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/form.fields.tsx
+function fieldBasics(field) {
+	return {
+		inputId: `f_${field.id}`,
+		label: String(field.label ?? field.id),
+		required: Boolean(field.required)
+	};
+}
+function textInputType(type) {
+	return type === "email" || type === "url" || type === "tel" || type === "number" ? type : "text";
+}
+function textInputConstraints(field, inputType) {
+	if (inputType === "number") return {
+		...typeof field.min === "number" ? { min: field.min } : {},
+		...typeof field.max === "number" ? { max: field.max } : {}
+	};
+	return {
+		...typeof field.minLength === "number" ? { minLength: field.minLength } : {},
+		...typeof field.maxLength === "number" ? { maxLength: field.maxLength } : {},
+		...typeof field.pattern === "string" && field.pattern ? { pattern: field.pattern } : {}
+	};
+}
+function LabelledField({ basics, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fb-field",
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: basics.inputId,
+			className: "form-label",
+			children: basics.label
+		}), children]
+	});
+}
+function TextareaField({ field }) {
+	const basics = fieldBasics(field);
+	return /* @__PURE__ */ jsx(LabelledField, {
+		basics,
+		children: /* @__PURE__ */ jsx("textarea", {
+			id: basics.inputId,
+			name: field.id,
+			required: basics.required,
+			placeholder: field.placeholder,
+			rows: field.rows,
+			className: "form-textarea"
+		})
+	});
+}
+function SelectField({ field }) {
+	const basics = fieldBasics(field);
+	const options = field.options ?? [];
+	const multiple = Boolean(field.multiple);
+	return /* @__PURE__ */ jsx(LabelledField, {
+		basics,
+		children: /* @__PURE__ */ jsxs("select", {
+			id: basics.inputId,
+			name: field.id,
+			multiple,
+			required: basics.required,
+			className: "form-select",
+			children: [!multiple && /* @__PURE__ */ jsx("option", {
+				value: "",
+				children: "Select…"
+			}), options.map((opt) => /* @__PURE__ */ jsx("option", {
+				value: opt.value,
+				children: opt.label
+			}, opt.value))]
+		})
+	});
+}
+function RadioField({ field }) {
+	const basics = fieldBasics(field);
+	const options = field.options ?? [];
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "fb-fieldset",
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "form-label",
+			children: basics.label
+		}), options.map((opt) => /* @__PURE__ */ jsxs("label", {
+			className: "form-check",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				name: field.id,
+				value: opt.value,
+				required: basics.required,
+				className: "form-radio"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "form-check-label",
+				children: opt.label
+			})]
+		}, opt.value))]
+	});
+}
+function TextInputField({ field, type }) {
+	const basics = fieldBasics(field);
+	const inputType = textInputType(type);
+	return /* @__PURE__ */ jsx(LabelledField, {
+		basics,
+		children: /* @__PURE__ */ jsx("input", {
+			id: basics.inputId,
+			name: field.id,
+			type: inputType,
+			required: basics.required,
+			placeholder: field.placeholder,
+			...textInputConstraints(field, inputType),
+			className: "form-input"
+		})
+	});
+}
+function FormFieldControl({ field }) {
+	const type = String(field.type ?? "text");
+	switch (type) {
+		case "textarea": return /* @__PURE__ */ jsx(TextareaField, { field });
+		case "select": return /* @__PURE__ */ jsx(SelectField, { field });
+		case "radio": return /* @__PURE__ */ jsx(RadioField, { field });
+		case "checkbox":
+		case "consent": {
+			const basics = fieldBasics(field);
+			return /* @__PURE__ */ jsx(CheckboxChoice, {
+				name: field.id,
+				required: basics.required,
+				label: basics.label,
+				presentation: type === "consent" ? "tile" : "row"
+			});
+		}
+		default: return /* @__PURE__ */ jsx(TextInputField, {
+			field,
+			type
+		});
+	}
+}
+var init_form_fields = __esmMin((() => {
+	init_CheckboxChoice();
+}));
+//#endregion
 //#region ../blocks/src/system/runtime/nodes/form.server.tsx
 init_clsx();
 init_ThemedButton();
 init_FeedbackMessage();
+init_form_fields();
 init_form_interactive();
 const FormNodeSSR = ({ blockId, value, submitLabel, successMessage, className, onSubmit, action = "/api/forms/submit", siteId, apiBaseUrl, spamProtectionEnabled }) => {
 	const islandProps = buildFormInteractiveIslandProps({
@@ -39950,107 +40128,7 @@ const FormNodeSSR = ({ blockId, value, submitLabel, successMessage, className, o
 		})]
 	});
 	const groups = display.groups;
-	const renderField = (field) => {
-		const inputId = `f_${field.id}`;
-		const label = String(field.label ?? field.id);
-		const required = Boolean(field.required);
-		const type = String(field.type ?? "text");
-		if (type === "textarea") return /* @__PURE__ */ jsxs("div", {
-			className: "fb-field",
-			children: [/* @__PURE__ */ jsx("label", {
-				htmlFor: inputId,
-				className: "form-label",
-				children: label
-			}), /* @__PURE__ */ jsx("textarea", {
-				id: inputId,
-				name: field.id,
-				required,
-				placeholder: field.placeholder,
-				rows: field.rows,
-				className: "form-textarea"
-			})]
-		}, field.id);
-		if (type === "select") {
-			const options = field.options ?? [];
-			const multiple = Boolean(field.multiple);
-			return /* @__PURE__ */ jsxs("div", {
-				className: "fb-field",
-				children: [/* @__PURE__ */ jsx("label", {
-					htmlFor: inputId,
-					className: "form-label",
-					children: label
-				}), /* @__PURE__ */ jsxs("select", {
-					id: inputId,
-					name: field.id,
-					multiple,
-					required,
-					className: "form-select",
-					children: [!multiple && /* @__PURE__ */ jsx("option", {
-						value: "",
-						children: "Select…"
-					}), options.map((opt) => /* @__PURE__ */ jsx("option", {
-						value: opt.value,
-						children: opt.label
-					}, opt.value))]
-				})]
-			}, field.id);
-		}
-		if (type === "radio") {
-			const options = field.options ?? [];
-			return /* @__PURE__ */ jsxs("fieldset", {
-				className: "fb-fieldset",
-				children: [/* @__PURE__ */ jsx("legend", {
-					className: "form-label",
-					children: label
-				}), options.map((opt) => /* @__PURE__ */ jsxs("label", {
-					className: "fb-inline form-label",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "radio",
-						name: field.id,
-						value: opt.value,
-						required,
-						className: "form-radio"
-					}), /* @__PURE__ */ jsx("span", { children: opt.label })]
-				}, opt.value))]
-			}, field.id);
-		}
-		if (type === "checkbox" || type === "consent") return /* @__PURE__ */ jsxs("label", {
-			className: "fb-inline form-label",
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				name: field.id,
-				required,
-				className: "form-checkbox"
-			}), /* @__PURE__ */ jsx("span", { children: label })]
-		}, field.id);
-		const inputType = type === "email" || type === "url" || type === "tel" || type === "number" ? type : "text";
-		const extra = {};
-		if (inputType === "text" || inputType === "email" || inputType === "url" || inputType === "tel") {
-			if (typeof field.minLength === "number") extra.minLength = field.minLength;
-			if (typeof field.maxLength === "number") extra.maxLength = field.maxLength;
-			if (typeof field.pattern === "string" && field.pattern) extra.pattern = field.pattern;
-		}
-		if (inputType === "number") {
-			if (typeof field.min === "number") extra.min = field.min;
-			if (typeof field.max === "number") extra.max = field.max;
-		}
-		return /* @__PURE__ */ jsxs("div", {
-			className: "fb-field",
-			children: [/* @__PURE__ */ jsx("label", {
-				htmlFor: inputId,
-				className: "form-label",
-				children: label
-			}), /* @__PURE__ */ jsx("input", {
-				id: inputId,
-				name: field.id,
-				type: inputType,
-				required,
-				placeholder: field.placeholder,
-				...extra,
-				className: "form-input"
-			})]
-		}, field.id);
-	};
+	const renderField = (field) => /* @__PURE__ */ jsx(FormFieldControl, { field }, field.id);
 	return /* @__PURE__ */ jsxs("div", {
 		...getIslandRootProps("form", blockId),
 		children: [/* @__PURE__ */ jsx(IslandPropsScript, { value: islandProps }), /* @__PURE__ */ jsxs("form", {
@@ -40096,9 +40174,173 @@ const FormNodeSSR = ({ blockId, value, submitLabel, successMessage, className, o
 	});
 };
 //#endregion
+//#region ../blocks/src/system/runtime/shared/components/FieldValidationMessage.tsx
+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__ */ jsx("p", {
+		id,
+		className,
+		"data-field-validation-message": true,
+		"data-field-validation-tone": "error",
+		role: "alert",
+		"aria-live": live === "off" ? void 0 : live,
+		children
+	});
+}
+var init_FieldValidationMessage = __esmMin((() => {}));
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/newsletter-form.parts.tsx
+/** Splits the preset's fields into the email (joined with the button) and the rest. */
+function partitionNewsletterFields(fields) {
+	const email = fields.find((field) => field.type === "email") ?? null;
+	return {
+		email,
+		extra: fields.filter((field) => field !== email)
+	};
+}
+function NewsletterExtraField({ field, disabled, error }) {
+	const inputId = inputIdFor(field);
+	const errorId = `${inputId}-error`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fb-field newsletter-field",
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: inputId,
+				className: "rb-sr-only",
+				children: field.label
+			}),
+			/* @__PURE__ */ jsx("input", {
+				id: inputId,
+				name: field.id,
+				type: field.type,
+				required: field.required,
+				placeholder: field.placeholder ?? field.label,
+				className: "form-input",
+				disabled,
+				...getFieldValidationControlProps({
+					message: error,
+					messageId: errorId
+				})
+			}),
+			error ? /* @__PURE__ */ jsx(FieldValidationMessage, {
+				id: errorId,
+				className: "fb-error",
+				children: error
+			}) : null
+		]
+	});
+}
+/** The email field and submit button sharing one input-styled shell. */
+function NewsletterEmailEntry({ field, buttonVariant, buttonLabel, disabled, error }) {
+	const inputId = inputIdFor(field);
+	const errorId = `${inputId}-error`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "newsletter-entry",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "form-input-group newsletter-entry-group",
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: inputId,
+					className: "rb-sr-only",
+					children: field.label
+				}),
+				/* @__PURE__ */ jsx("input", {
+					id: inputId,
+					name: field.id,
+					type: "email",
+					required: field.required,
+					placeholder: field.placeholder ?? field.label,
+					className: "form-input-group-field",
+					autoComplete: "email",
+					disabled,
+					...getFieldValidationControlProps({
+						message: error,
+						messageId: errorId
+					})
+				}),
+				/* @__PURE__ */ jsx(ThemedButton, {
+					type: "submit",
+					variant: buttonVariant,
+					size: "md",
+					disabled,
+					label: buttonLabel
+				})
+			]
+		}), error ? /* @__PURE__ */ jsx(FieldValidationMessage, {
+			id: errorId,
+			className: "fb-error",
+			children: error
+		}) : null]
+	});
+}
+/**
+* The submit action: joined to the email field when the preset has one
+* (every current preset does), otherwise a plain themed button.
+*/
+function NewsletterSubmitRow({ emailField, buttonVariant, buttonLabel, disabled, error }) {
+	if (emailField) return /* @__PURE__ */ jsx(NewsletterEmailEntry, {
+		field: emailField,
+		buttonVariant,
+		buttonLabel,
+		disabled,
+		error
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "newsletter-submit",
+		children: /* @__PURE__ */ jsx(ThemedButton, {
+			type: "submit",
+			variant: buttonVariant,
+			size: "md",
+			disabled,
+			label: buttonLabel
+		})
+	});
+}
+/** Visitor-chosen topics as toggle chips. Real checkboxes underneath. */
+function NewsletterTopicChips({ choices, disabled, error }) {
+	const errorId = `newsletter_${TOPIC_CHOICE_FIELD_ID}-error`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("fieldset", {
+		className: "newsletter-topics",
+		"aria-describedby": error ? errorId : void 0,
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "newsletter-topics-legend",
+			children: "What would you like to hear about?"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "newsletter-topic-chips",
+			children: choices.map((choice) => /* @__PURE__ */ jsxs("label", {
+				className: "newsletter-topic-chip",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					name: TOPIC_CHOICE_FIELD_ID,
+					value: choice.id,
+					disabled
+				}), /* @__PURE__ */ jsx("span", { children: choice.label })]
+			}, choice.id))
+		})]
+	}), error ? /* @__PURE__ */ jsx(FieldValidationMessage, {
+		id: errorId,
+		className: "fb-error",
+		children: error
+	}) : null] });
+}
+var TOPIC_CHOICE_FIELD_ID, inputIdFor;
+var init_newsletter_form_parts = __esmMin((() => {
+	init_ThemedButton();
+	init_FieldValidationMessage();
+	TOPIC_CHOICE_FIELD_ID = "mailingListChoice";
+	inputIdFor = (field) => `newsletter_${field.id}`;
+}));
+//#endregion
 //#region ../blocks/src/system/runtime/nodes/newsletter-form.server.tsx
 init_clsx();
-init_ThemedButton();
+init_newsletter_form_parts();
 init_newsletter_form_interactive();
 /**
 * Newsletter Form Server Component
@@ -40119,36 +40361,15 @@ function NewsletterFormSSR(props) {
 	});
 	const display = islandProps.render.display;
 	const fields = display.fields;
+	const submissionMessage = newsletterBlockSubmissionMessage(islandProps.render.hydration.target);
 	if (display.availability === "unavailable") return /* @__PURE__ */ jsx("div", {
 		className: clsx("newsletter-form-ssr", className),
 		children: /* @__PURE__ */ jsx("p", {
 			role: "status",
-			children: "We can’t accept signups right now. Please try again later."
+			children: NEWSLETTER_SIGNUPS_PAUSED_MESSAGE
 		})
 	});
-	const renderField = (field) => {
-		const inputId = `newsletter_${field.id}`;
-		return /* @__PURE__ */ jsxs("div", {
-			className: "fb-field newsletter-field",
-			children: [/* @__PURE__ */ jsxs("label", {
-				htmlFor: inputId,
-				className: "form-label",
-				children: [field.label, field.required && /* @__PURE__ */ jsx("span", {
-					className: "newsletter-required",
-					"aria-hidden": "true",
-					children: "*"
-				})]
-			}), /* @__PURE__ */ jsx("input", {
-				id: inputId,
-				name: field.id,
-				type: field.type,
-				required: field.required,
-				placeholder: field.placeholder,
-				className: "form-input",
-				autoComplete: field.type === "email" ? "email" : void 0
-			})]
-		}, field.id);
-	};
+	const { email: emailField, extra: extraFields } = partitionNewsletterFields(fields);
 	return /* @__PURE__ */ jsxs("div", {
 		...getIslandRootProps("newsletter-form", blockId),
 		className: clsx("newsletter-form-ssr", className),
@@ -40167,30 +40388,20 @@ function NewsletterFormSSR(props) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "newsletter-form-fields",
 					children: [
-						fields.map(renderField),
-						islandProps.render.hydration.choicePresentation === "visitor_choice" ? /* @__PURE__ */ jsxs("fieldset", {
-							className: "fb-fieldset newsletter-topics",
-							children: [/* @__PURE__ */ jsx("legend", {
-								className: "form-label",
-								children: "What would you like to hear about?"
-							}), display.choices.map((choice) => /* @__PURE__ */ jsxs("label", {
-								className: "fb-inline form-label newsletter-topic-choice",
-								children: [/* @__PURE__ */ jsx("input", {
-									type: "checkbox",
-									name: "mailingListChoice",
-									value: choice.id,
-									className: "form-checkbox"
-								}), /* @__PURE__ */ jsx("span", { children: choice.label })]
-							}, choice.id))]
+						islandProps.render.hydration.choicePresentation === "visitor_choice" ? /* @__PURE__ */ jsx(NewsletterTopicChips, { choices: display.choices }) : null,
+						extraFields.length > 0 ? /* @__PURE__ */ jsx("div", {
+							className: "newsletter-extra-fields",
+							children: extraFields.map((field) => /* @__PURE__ */ jsx(NewsletterExtraField, { field }, field.id))
 						}) : null,
-						/* @__PURE__ */ jsx("div", {
-							className: "newsletter-submit",
-							children: /* @__PURE__ */ jsx(ThemedButton, {
-								type: "submit",
-								variant: display.buttonVariant,
-								size: "md",
-								label: display.buttonLabel
-							})
+						/* @__PURE__ */ jsx(NewsletterSubmitRow, {
+							emailField,
+							buttonVariant: display.buttonVariant,
+							buttonLabel: display.buttonLabel,
+							disabled: submissionMessage !== null
+						}),
+						submissionMessage && /* @__PURE__ */ jsx("p", {
+							role: "status",
+							children: submissionMessage
 						})
 					]
 				}),
@@ -45977,28 +46188,6 @@ var init_DiscountCodeDisclosure = __esmMin((() => {
 	};
 }));
 //#endregion
-//#region ../blocks/src/system/runtime/shared/components/FieldValidationMessage.tsx
-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__ */ jsx("p", {
-		id,
-		className,
-		"data-field-validation-message": true,
-		"data-field-validation-tone": "error",
-		role: "alert",
-		"aria-live": live === "off" ? void 0 : live,
-		children
-	});
-}
-var init_FieldValidationMessage = __esmMin((() => {}));
-//#endregion
 //#region ../blocks/src/system/runtime/shared/components/BookingConsentAgreement.tsx
 function BookingConsentAgreement({ agreement, showTitle = true, title, titleId }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [showTitle ? /* @__PURE__ */ jsxs("div", {
@@ -46613,7 +46802,7 @@ function DefaultFieldInput({ describedBy, error, errorId, field, onBlur, onChang
 		case "radio": return /* @__PURE__ */ jsx("div", {
 			className: "rb-space-y-2",
 			children: field.field.options?.map((option) => /* @__PURE__ */ jsxs("label", {
-				className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer",
+				className: "form-check",
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "radio",
 					name: field.id,
@@ -46625,7 +46814,7 @@ function DefaultFieldInput({ describedBy, error, errorId, field, onBlur, onChang
 					...validationProps,
 					className: "form-radio"
 				}), /* @__PURE__ */ jsx("span", {
-					className: "rb-caption",
+					className: "form-check-label",
 					children: option.label
 				})]
 			}, option.value))
@@ -46635,47 +46824,20 @@ function DefaultFieldInput({ describedBy, error, errorId, field, onBlur, onChang
 				const checkedValues = toStringArray(value);
 				return /* @__PURE__ */ jsx("div", {
 					className: "rb-space-y-2",
-					children: field.field.options.map((option) => /* @__PURE__ */ jsxs("label", {
-						className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer",
-						children: [/* @__PURE__ */ jsx("input", {
-							type: "checkbox",
-							name: field.id,
-							value: option.value,
-							checked: checkedValues.includes(option.value),
-							onChange: (event) => {
-								onChange(event.target.checked ? [...checkedValues, option.value] : checkedValues.filter((item) => item !== option.value));
-							},
-							onBlur,
-							...validationProps,
-							className: "form-checkbox"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "rb-caption",
-							children: option.label
-						})]
+					children: field.field.options.map((option) => /* @__PURE__ */ jsx(CheckboxChoice, {
+						name: field.id,
+						value: option.value,
+						checked: checkedValues.includes(option.value),
+						onChange: (event) => {
+							onChange(event.target.checked ? [...checkedValues, option.value] : checkedValues.filter((item) => item !== option.value));
+						},
+						onBlur,
+						...validationProps,
+						label: option.label
 					}, option.value))
 				});
 			}
-			return /* @__PURE__ */ jsxs("label", {
-				className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					id: field.inputId,
-					name: field.id,
-					checked: Boolean(value),
-					onChange: (event) => onChange(event.target.checked),
-					onBlur,
-					required: field.required,
-					...validationProps,
-					className: "form-checkbox"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "rb-caption",
-					children: field.field.placeholder || field.label
-				})]
-			});
-		case "booking_requirement_consent": return /* @__PURE__ */ jsxs("label", {
-			className: "rb-flex rb-items-start rb-gap-2 rb-cursor-pointer",
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
+			return /* @__PURE__ */ jsx(CheckboxChoice, {
 				id: field.inputId,
 				name: field.id,
 				checked: Boolean(value),
@@ -46683,11 +46845,18 @@ function DefaultFieldInput({ describedBy, error, errorId, field, onBlur, onChang
 				onBlur,
 				required: field.required,
 				...validationProps,
-				className: "form-checkbox rb-mt-0.5"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "rb-caption",
-				children: field.field.checkboxLabel
-			})]
+				label: field.field.placeholder || field.label
+			});
+		case "booking_requirement_consent": return /* @__PURE__ */ jsx(CheckboxChoice, {
+			id: field.inputId,
+			name: field.id,
+			checked: Boolean(value),
+			onChange: (event) => onChange(event.target.checked),
+			onBlur,
+			required: field.required,
+			...validationProps,
+			label: field.field.checkboxLabel,
+			presentation: "tile"
 		});
 		case "number": return /* @__PURE__ */ jsx("input", {
 			...commonProps,
@@ -46816,6 +46985,7 @@ var init_booking_form_default_ui = __esmMin((() => {
 	init_DiscountCodeDisclosure();
 	init_FieldValidationMessage();
 	init_BookingConsentAgreement();
+	init_CheckboxChoice();
 	init_booking_form_service_choices();
 }));
 //#endregion
@@ -47282,6 +47452,7 @@ var init_SelectableOptionCard = __esmMin((() => {}));
 //#endregion
 //#region ../blocks/src/system/runtime/shared/components/index.ts
 var init_components = __esmMin((() => {
+	init_CheckboxChoice();
 	init_CheckIcon$1();
 	init_ClockIcon();
 	init_CrossIcon();
@@ -52284,26 +52455,24 @@ function EventConsentField({ consent, error, formData, idBase, onChange }) {
 				title: consent.title,
 				titleId: `${idBase}-consent-title`
 			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "er-label rb-flex rb-items-start rb-gap-2 rb-cursor-pointer",
-				children: [
-					/* @__PURE__ */ jsx("input", {
-						"aria-describedby": error ? errorId : void 0,
-						className: "form-checkbox rb-mt-0.5",
-						checked: formData.consentAccepted === true,
-						onChange: (event) => onChange({
-							...formData,
-							consentAccepted: event.target.checked
-						}),
-						type: "checkbox"
-					}),
+			/* @__PURE__ */ jsx(CheckboxChoice, {
+				"aria-describedby": error ? errorId : void 0,
+				"aria-invalid": error ? true : void 0,
+				checked: formData.consentAccepted === true,
+				onChange: (event) => onChange({
+					...formData,
+					consentAccepted: event.target.checked
+				}),
+				label: /* @__PURE__ */ jsxs(Fragment, { children: [
 					consent.checkboxLabel,
 					" ",
 					/* @__PURE__ */ jsx("span", {
 						className: "er-required",
 						children: "*"
 					})
-				]
+				] }),
+				presentation: "tile",
+				className: "er-consent-check"
 			}),
 			error ? /* @__PURE__ */ jsx(FieldValidationMessage, {
 				id: errorId,
@@ -52339,6 +52508,7 @@ var init_AttendeeDetailsStep = __esmMin((() => {
 	init_LoggedInAsUser();
 	init_FieldValidationMessage();
 	init_BookingConsentAgreement();
+	init_CheckboxChoice();
 	AttendeeDetailsStep = ({ formData, onChange, errors, emailLocked = false, onLogout, ticketsCount = 1, requireGuestDetails = false, guests = [], onGuestsChange, guestErrors = {}, guestSectionShake = false, onGuestShakeEnd, consent }) => {
 		const idBase = useId();
 		const nameId = `${idBase}-name`;
@@ -116725,6 +116895,7 @@ var init_form_client = __esmMin((() => {
 	init_useFormSubmission();
 	init_ThemedButton();
 	init_FeedbackMessage();
+	init_form_fields();
 	FormNodeClient = ({ render }) => {
 		const form = render.display.form;
 		const { submit, state } = useFormSubmission();
@@ -116737,107 +116908,7 @@ var init_form_client = __esmMin((() => {
 			children: "Missing or unknown form."
 		});
 		const groups = render.display.groups;
-		const renderField = (field) => {
-			const inputId = `f_${field.id}`;
-			const label = String(field.label ?? field.id);
-			const required = Boolean(field.required);
-			const type = String(field.type ?? "text");
-			if (type === "textarea") return /* @__PURE__ */ jsxs("div", {
-				className: "fb-field",
-				children: [/* @__PURE__ */ jsx("label", {
-					htmlFor: inputId,
-					className: "form-label",
-					children: label
-				}), /* @__PURE__ */ jsx("textarea", {
-					id: inputId,
-					name: field.id,
-					required,
-					placeholder: field.placeholder,
-					rows: field.rows,
-					className: "form-textarea"
-				})]
-			}, field.id);
-			if (type === "select") {
-				const options = field.options ?? [];
-				const multiple = Boolean(field.multiple);
-				return /* @__PURE__ */ jsxs("div", {
-					className: "fb-field",
-					children: [/* @__PURE__ */ jsx("label", {
-						htmlFor: inputId,
-						className: "form-label",
-						children: label
-					}), /* @__PURE__ */ jsxs("select", {
-						id: inputId,
-						name: field.id,
-						multiple,
-						required,
-						className: "form-select",
-						children: [!multiple && /* @__PURE__ */ jsx("option", {
-							value: "",
-							children: "Select…"
-						}), options.map((opt) => /* @__PURE__ */ jsx("option", {
-							value: opt.value,
-							children: opt.label
-						}, opt.value))]
-					})]
-				}, field.id);
-			}
-			if (type === "radio") {
-				const options = field.options ?? [];
-				return /* @__PURE__ */ jsxs("fieldset", {
-					className: "fb-fieldset",
-					children: [/* @__PURE__ */ jsx("legend", {
-						className: "form-label",
-						children: label
-					}), options.map((opt) => /* @__PURE__ */ jsxs("label", {
-						className: "fb-inline form-label",
-						children: [/* @__PURE__ */ jsx("input", {
-							type: "radio",
-							name: field.id,
-							value: opt.value,
-							required,
-							className: "form-radio"
-						}), /* @__PURE__ */ jsx("span", { children: opt.label })]
-					}, opt.value))]
-				}, field.id);
-			}
-			if (type === "checkbox" || type === "consent") return /* @__PURE__ */ jsxs("label", {
-				className: "fb-inline form-label",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					name: field.id,
-					required,
-					className: "form-checkbox"
-				}), /* @__PURE__ */ jsx("span", { children: label })]
-			}, field.id);
-			const inputType = type === "email" || type === "url" || type === "tel" || type === "number" ? type : "text";
-			const extra = {};
-			if (inputType === "text" || inputType === "email" || inputType === "url" || inputType === "tel") {
-				if (typeof field.minLength === "number") extra.minLength = field.minLength;
-				if (typeof field.maxLength === "number") extra.maxLength = field.maxLength;
-				if (typeof field.pattern === "string" && field.pattern) extra.pattern = field.pattern;
-			}
-			if (inputType === "number") {
-				if (typeof field.min === "number") extra.min = field.min;
-				if (typeof field.max === "number") extra.max = field.max;
-			}
-			return /* @__PURE__ */ jsxs("div", {
-				className: "fb-field",
-				children: [/* @__PURE__ */ jsx("label", {
-					htmlFor: inputId,
-					className: "form-label",
-					children: label
-				}), /* @__PURE__ */ jsx("input", {
-					id: inputId,
-					name: field.id,
-					type: inputType,
-					required,
-					placeholder: field.placeholder,
-					...extra,
-					className: "form-input"
-				})]
-			}, field.id);
-		};
+		const renderField = (field) => /* @__PURE__ */ jsx(FormFieldControl, { field }, field.id);
 		const handleSubmit = async (e) => {
 			e.preventDefault();
 			const formData = new FormData(e.currentTarget);
@@ -117128,6 +117199,10 @@ function resolveNewsletterSubmitTarget(input) {
 			tag: "unavailable",
 			reason: "preview_only_source"
 		};
+		case "unpublished-preview": return {
+			tag: "unavailable",
+			reason: "preview_only_source"
+		};
 		default: return assertNever$22(input);
 	}
 }
@@ -117150,6 +117225,7 @@ var init_newsletter_form_submission = __esmMin((() => {
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/newsletter-form.client.tsx
 function NewsletterFormClient({ render }) {
+	const submissionMessage = newsletterBlockSubmissionMessage(render.hydration.target);
 	const api = useBlockApi();
 	const [submissionState, dispatchSubmission] = useReducer(newsletterFormSubmissionReducer, initialNewsletterFormSubmissionState);
 	const [altchaSolution, setAltchaSolution] = useState(null);
@@ -117159,7 +117235,6 @@ function NewsletterFormClient({ render }) {
 		if (succeeded) successRef.current?.focus();
 	}, [succeeded]);
 	const showSpamProtection = render.hydration.spamProtectionEnabled ?? isSpamProtectionEnabled();
-	const fields = render.display.fields;
 	const handleSubmit = async (e) => {
 		e.preventDefault();
 		const formData = new FormData(e.currentTarget);
@@ -117191,7 +117266,7 @@ function NewsletterFormClient({ render }) {
 			reportNewsletterSignupRefusal(submitTarget.reason, { target: render.hydration.target });
 			dispatchSubmission({
 				type: "failed",
-				error: newsletterFormError(SIGNUPS_PAUSED_MESSAGE)
+				error: newsletterFormError(NEWSLETTER_SIGNUPS_PAUSED_MESSAGE)
 			});
 			return;
 		}
@@ -117199,7 +117274,7 @@ function NewsletterFormClient({ render }) {
 			reportNewsletterSignupRefusal("setup_not_configured");
 			dispatchSubmission({
 				type: "failed",
-				error: newsletterFormError(SIGNUPS_PAUSED_MESSAGE)
+				error: newsletterFormError(NEWSLETTER_SIGNUPS_PAUSED_MESSAGE)
 			});
 			return;
 		}
@@ -117207,7 +117282,7 @@ function NewsletterFormClient({ render }) {
 			reportNewsletterSignupRefusal("destination_unavailable", { setupRevision: render.hydration.setupRevision });
 			dispatchSubmission({
 				type: "failed",
-				error: newsletterFormError(SIGNUPS_PAUSED_MESSAGE)
+				error: newsletterFormError(NEWSLETTER_SIGNUPS_PAUSED_MESSAGE)
 			});
 			return;
 		}
@@ -117282,43 +117357,14 @@ function NewsletterFormClient({ render }) {
 					autoComplete: "off",
 					"aria-hidden": "true"
 				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "newsletter-form-fields",
-					children: [
-						fields.map((field) => /* @__PURE__ */ jsx(NewsletterField, {
-							field,
-							submitting,
-							error: getNewsletterSubmissionFieldError(submissionState, field.id)
-						}, field.id)),
-						render.hydration.choicePresentation === "visitor_choice" ? /* @__PURE__ */ jsx(NewsletterTopicChoices, {
-							choices: render.display.choices,
-							submitting,
-							error: getNewsletterSubmissionFieldError(submissionState, TOPIC_CHOICE_FIELD_ID)
-						}) : null,
-						showSpamProtection && /* @__PURE__ */ jsx("div", {
-							className: "newsletter-altcha",
-							children: /* @__PURE__ */ jsx(AltchaWidget, {
-								challengeUrl: getChallengeUrl(),
-								onSolutionChange: setAltchaSolution
-							})
-						}),
-						formError && /* @__PURE__ */ jsx(FeedbackMessage, {
-							tone: "error",
-							className: "fb-error",
-							role: "alert",
-							children: formError
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: "newsletter-submit",
-							children: /* @__PURE__ */ jsx(ThemedButton, {
-								type: "submit",
-								variant: render.display.buttonVariant,
-								size: "md",
-								disabled: submitting,
-								label: submitting ? "Subscribing..." : render.display.buttonLabel
-							})
-						})
-					]
+				/* @__PURE__ */ jsx(NewsletterFormFields, {
+					render,
+					submissionState,
+					submitting,
+					submissionMessage,
+					formError,
+					showSpamProtection,
+					onAltchaSolution: setAltchaSolution
 				}),
 				render.display.privacyNote && /* @__PURE__ */ jsx("p", {
 					className: "newsletter-privacy-note",
@@ -117328,67 +117374,52 @@ function NewsletterFormClient({ render }) {
 		})
 	});
 }
-function NewsletterField({ field, submitting, error }) {
-	const inputId = `newsletter_${field.id}`;
-	const errorId = `${inputId}-error`;
+function NewsletterFormFields({ render, submissionState, submitting, submissionMessage, formError, showSpamProtection, onAltchaSolution }) {
+	const { email: emailField, extra: extraFields } = partitionNewsletterFields(render.display.fields);
+	const fieldError = (id) => getNewsletterSubmissionFieldError(submissionState, id);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "fb-field newsletter-field",
+		className: "newsletter-form-fields",
 		children: [
-			/* @__PURE__ */ jsxs("label", {
-				htmlFor: inputId,
-				className: "form-label",
-				children: [field.label, field.required && /* @__PURE__ */ jsx("span", {
-					className: "newsletter-required",
-					"aria-hidden": "true",
-					children: "*"
-				})]
-			}),
-			/* @__PURE__ */ jsx("input", {
-				id: inputId,
-				name: field.id,
-				type: field.type,
-				required: field.required,
-				placeholder: field.placeholder,
-				className: "form-input",
-				autoComplete: field.type === "email" ? "email" : void 0,
+			render.hydration.choicePresentation === "visitor_choice" ? /* @__PURE__ */ jsx(NewsletterTopicChips, {
+				choices: render.display.choices,
 				disabled: submitting,
-				...getFieldValidationControlProps({
-					message: error,
-					messageId: errorId
+				error: fieldError(TOPIC_CHOICE_FIELD_ID)
+			}) : null,
+			extraFields.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "newsletter-extra-fields",
+				children: extraFields.map((field) => /* @__PURE__ */ jsx(NewsletterExtraField, {
+					field,
+					disabled: submitting,
+					error: fieldError(field.id)
+				}, field.id))
+			}) : null,
+			showSpamProtection && /* @__PURE__ */ jsx("div", {
+				className: "newsletter-altcha",
+				children: /* @__PURE__ */ jsx(AltchaWidget, {
+					challengeUrl: getChallengeUrl(),
+					onSolutionChange: onAltchaSolution
 				})
 			}),
-			error && /* @__PURE__ */ jsx(FieldValidationMessage, {
-				id: errorId,
+			formError && /* @__PURE__ */ jsx(FeedbackMessage, {
+				tone: "error",
 				className: "fb-error",
-				children: error
+				role: "alert",
+				children: formError
+			}),
+			/* @__PURE__ */ jsx(NewsletterSubmitRow, {
+				emailField,
+				buttonVariant: render.display.buttonVariant,
+				buttonLabel: submitting ? "Subscribing..." : render.display.buttonLabel,
+				disabled: submitting || submissionMessage !== null,
+				error: emailField ? fieldError(emailField.id) : null
+			}),
+			submissionMessage && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: submissionMessage
 			})
 		]
 	});
 }
-function NewsletterTopicChoices({ choices, submitting, error }) {
-	const errorId = `newsletter_${TOPIC_CHOICE_FIELD_ID}-error`;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("fieldset", {
-		className: "fb-fieldset newsletter-topics",
-		"aria-describedby": error ? errorId : void 0,
-		children: [/* @__PURE__ */ jsx("legend", {
-			className: "form-label",
-			children: "What would you like to hear about?"
-		}), choices.map((choice) => /* @__PURE__ */ jsxs("label", {
-			className: "fb-inline form-label newsletter-topic-choice",
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				name: TOPIC_CHOICE_FIELD_ID,
-				value: choice.id,
-				className: "form-checkbox",
-				disabled: submitting
-			}), /* @__PURE__ */ jsx("span", { children: choice.label })]
-		}, choice.id))]
-	}), error && /* @__PURE__ */ jsx(FieldValidationMessage, {
-		id: errorId,
-		className: "fb-error",
-		children: error
-	})] });
-}
 function UnavailableNewsletterForm({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("newsletter-form", className ?? void 0),
@@ -117396,7 +117427,7 @@ function UnavailableNewsletterForm({ className }) {
 			tone: "error",
 			className: "fb-error",
 			role: "status",
-			children: SIGNUPS_PAUSED_MESSAGE
+			children: NEWSLETTER_SIGNUPS_PAUSED_MESSAGE
 		})
 	});
 }
@@ -117416,7 +117447,7 @@ function transportFailureMessage(err) {
 function visitorSelectionError(selection) {
 	switch (selection.tag) {
 		case "nothing_chosen": return newsletterFieldError(TOPIC_CHOICE_FIELD_ID, "Choose at least one email topic.");
-		case "unusable": return newsletterFormError(SIGNUPS_PAUSED_MESSAGE);
+		case "unusable": return newsletterFormError(NEWSLETTER_SIGNUPS_PAUSED_MESSAGE);
 		case "not_offered":
 		case "chosen": return null;
 	}
@@ -117448,7 +117479,7 @@ function publicSignupError(outcome) {
 		case "unavailable": switch (outcome.reason) {
 			case "configuration_unavailable":
 			case "authentication_failed":
-			case "target_unavailable": return SIGNUPS_PAUSED_MESSAGE;
+			case "target_unavailable": return NEWSLETTER_SIGNUPS_PAUSED_MESSAGE;
 			case "stale_configuration": return "This signup form has changed. Refresh the page, then try again.";
 			case "rate_limited": return TOO_MANY_ATTEMPTS_MESSAGE;
 			case "temporarily_unavailable": return RETRY_SHORTLY_MESSAGE;
@@ -117456,20 +117487,18 @@ function publicSignupError(outcome) {
 		case "uncertain": return "We could not confirm whether your signup completed. Please wait a moment, then try again.";
 	}
 }
-var TOPIC_CHOICE_FIELD_ID, SIGNUPS_PAUSED_MESSAGE, RETRY_SHORTLY_MESSAGE, TOO_MANY_ATTEMPTS_MESSAGE;
+var RETRY_SHORTLY_MESSAGE, TOO_MANY_ATTEMPTS_MESSAGE;
 var init_newsletter_form_client = __esmMin((() => {
 	init_clsx();
 	init_client();
 	init_src();
 	init_api$1();
 	init_src$2();
-	init_ThemedButton();
 	init_FeedbackMessage();
-	init_FieldValidationMessage();
+	init_newsletter_form_parts();
 	init_newsletter_form_client_state();
 	init_newsletter_form_submission();
-	TOPIC_CHOICE_FIELD_ID = "mailingListChoice";
-	SIGNUPS_PAUSED_MESSAGE = "We can’t accept signups right now. Please try again later.";
+	init_newsletter_form_interactive();
 	RETRY_SHORTLY_MESSAGE = "We couldn’t confirm your signup. Please try again in a little while.";
 	TOO_MANY_ATTEMPTS_MESSAGE = "There have been too many signup attempts. Please wait a moment and try again.";
 }));
@@ -117697,6 +117726,10 @@ init_surfaces();
 //#region ../theme-core/src/accordions/defaults.ts
 init_curatedSiteStyles();
 //#endregion
+//#region ../theme-core/src/inputs/checkable.ts
+init_colorTokenParts();
+init_colorStyles();
+//#endregion
 //#region ../theme-core/src/inputs/generateInputCss.ts
 init_types$11();
 init_constants$2();