@planetaexo/design-system 0.4.5 → 0.4.7

package/dist/index.d.cts

@@ -549,6 +549,7 @@ interface RegistrationFormLabels {
     nationalityLabel?: string;
     selectPlaceholder?: string;
     optionalLabel?: string;
+    requiredFieldError?: string;
 }
 interface RegistrationFormProps {
     /** Logo shown above the title. Defaults to "/logo-planetaexo.png" (matching Offer). Pass null to hide. */
@@ -656,9 +657,10 @@ interface BirthDateFieldProps {
     required?: boolean;
     value: Date | undefined;
     onChange: (date: Date | undefined) => void;
+    error?: string;
     className?: string;
 }
-declare function BirthDateField({ label, required, value, onChange, className, }: BirthDateFieldProps): react_jsx_runtime.JSX.Element;
+declare function BirthDateField({ label, required, value, onChange, error, className, }: BirthDateFieldProps): react_jsx_runtime.JSX.Element;
 
 interface FilterItem {
     id: string;

package/dist/index.d.ts

@@ -549,6 +549,7 @@ interface RegistrationFormLabels {
     nationalityLabel?: string;
     selectPlaceholder?: string;
     optionalLabel?: string;
+    requiredFieldError?: string;
 }
 interface RegistrationFormProps {
     /** Logo shown above the title. Defaults to "/logo-planetaexo.png" (matching Offer). Pass null to hide. */
@@ -656,9 +657,10 @@ interface BirthDateFieldProps {
     required?: boolean;
     value: Date | undefined;
     onChange: (date: Date | undefined) => void;
+    error?: string;
     className?: string;
 }
-declare function BirthDateField({ label, required, value, onChange, className, }: BirthDateFieldProps): react_jsx_runtime.JSX.Element;
+declare function BirthDateField({ label, required, value, onChange, error, className, }: BirthDateFieldProps): react_jsx_runtime.JSX.Element;
 
 interface FilterItem {
     id: string;

package/dist/index.js

@@ -320,14 +320,16 @@ var FloatingInput = React21.forwardRef(
 FloatingInput.displayName = "FloatingInput";
 var FloatingSelect = React21.forwardRef(
   (_a, ref) => {
-    var _b = _a, { label, error, id, className, required, children } = _b, props = __objRest(_b, ["label", "error", "id", "className", "required", "children"]);
+    var _b = _a, { label, error, id, className, required, children, value } = _b, props = __objRest(_b, ["label", "error", "id", "className", "required", "children", "value"]);
     const inputId = id != null ? id : React21.useId();
+    const hasValue = typeof value === "string" ? value !== "" : value !== void 0 && value !== null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         "select",
         __spreadProps(__spreadValues({
           id: inputId,
           ref,
+          value,
           className: cn(
             "peer block w-full h-14 appearance-none rounded-lg border border-border bg-background",
             "px-3 pt-6 pb-2 text-base text-foreground font-ui",
@@ -361,7 +363,7 @@ var FloatingSelect = React21.forwardRef(
             "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
             "text-base text-muted-foreground font-ui transition-all duration-150",
             "peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
-            "peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs"
+            hasValue && "top-2 translate-y-0 text-xs"
           ),
           children: [
             label,
@@ -889,6 +891,7 @@ function BirthDateField({
   required,
   value,
   onChange,
+  error,
   className
 }) {
   const [open, setOpen] = React21.useState(false);
@@ -931,7 +934,7 @@ function BirthDateField({
       {
         className: cn(
           "flex items-center rounded-lg border border-border bg-background h-14 transition-colors",
-          open ? "border-primary ring-1 ring-primary" : "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
+          error ? "border-destructive focus-within:border-destructive focus-within:ring-destructive" : open ? "border-primary ring-1 ring-primary" : "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-full", children: [
@@ -3963,7 +3966,7 @@ function BookingForm({
   );
 }
 var DEFAULT_LABELS3 = {
-  formSubtitle: "Free enquiry \u2013 no commitment",
+  formSubtitle: "To confirm your participation, please complete this short form. It's required for all travellers and helps us coordinate logistics with our local partners and tailor the experience to you.",
   detailsSectionTitle: "Your details",
   tripInfoSectionTitle: "Trip info",
   termsSectionTitle: "Terms & conditions",
@@ -3983,7 +3986,8 @@ var DEFAULT_LABELS3 = {
   emergencyContactPhoneLabel: "Contact phone",
   nationalityLabel: "Nationality",
   selectPlaceholder: "Select an option\u2026",
-  optionalLabel: "(optional)"
+  optionalLabel: "(optional)",
+  requiredFieldError: "Required"
 };
 var TERMS_ACCEPT_KEY = "__registrationTermsAccepted";
 function emptyName() {
@@ -4086,7 +4090,34 @@ function FormSection2({
     children
   ] });
 }
-function PhoneInput({ id, label, required, value, onChange }) {
+function isFieldEmpty(field, value) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (value === void 0 || value === null) return true;
+  switch (field.type) {
+    case "phone": {
+      const p = value;
+      return !((_a = p == null ? void 0 : p.nationalNumber) == null ? void 0 : _a.trim());
+    }
+    case "name": {
+      const n = value;
+      return !((_b = n == null ? void 0 : n.firstName) == null ? void 0 : _b.trim()) && !((_c = n == null ? void 0 : n.lastName) == null ? void 0 : _c.trim());
+    }
+    case "emergencyContact": {
+      const ec = value;
+      return !((_e = (_d = ec == null ? void 0 : ec.contactName) == null ? void 0 : _d.firstName) == null ? void 0 : _e.trim()) && !((_g = (_f = ec == null ? void 0 : ec.contactName) == null ? void 0 : _f.lastName) == null ? void 0 : _g.trim()) && !((_i = (_h = ec == null ? void 0 : ec.phone) == null ? void 0 : _h.nationalNumber) == null ? void 0 : _i.trim());
+    }
+    case "checkbox":
+      if (Array.isArray(value)) return value.length === 0;
+      return value === false;
+    case "date":
+    case "birthDate":
+      if (value instanceof Date) return false;
+      return typeof value !== "string" || !value.trim();
+    default:
+      return typeof value === "string" ? !value.trim() : false;
+  }
+}
+function PhoneInput({ id, label, required, value, onChange, error }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0", children: [
     /* @__PURE__ */ jsx(
       PhoneCountrySelect,
@@ -4110,7 +4141,8 @@ function PhoneInput({ id, label, required, value, onChange }) {
             "peer block h-14 w-full rounded-r-lg border border-border bg-background",
             "px-3 pt-5 pb-2 text-base text-foreground font-ui",
             "transition-colors placeholder-transparent",
-            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
+            error && "border-destructive focus:border-destructive focus:ring-destructive"
           )
         }
       ),
@@ -4139,7 +4171,8 @@ function FloatingTextarea({
   required,
   optionalHint,
   value,
-  onChange
+  onChange,
+  error
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
@@ -4155,7 +4188,8 @@ function FloatingTextarea({
           "peer block w-full resize-none rounded-lg border border-border bg-background",
           "px-3 pt-6 pb-3 text-base text-foreground font-ui",
           "transition-colors placeholder-transparent",
-          "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+          "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
+          error && "border-destructive focus:border-destructive focus:ring-destructive"
         )
       }
     ),
@@ -4182,7 +4216,8 @@ function FieldRenderer({
   value,
   onChange,
   defaultPhoneCountry,
-  labels
+  labels,
+  error
 }) {
   var _a, _b, _c;
   const fieldId = `rf-${field.id}`;
@@ -4200,7 +4235,8 @@ function FieldRenderer({
             label: labels.firstNameLabel,
             required: field.required,
             value: v.firstName,
-            onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { firstName: e.target.value }))
+            onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { firstName: e.target.value })),
+            error: error && !v.firstName.trim() ? error : void 0
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4209,7 +4245,8 @@ function FieldRenderer({
             label: labels.lastNameLabel,
             required: field.required,
             value: v.lastName,
-            onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { lastName: e.target.value }))
+            onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { lastName: e.target.value })),
+            error: error && !v.lastName.trim() ? error : void 0
           }
         )
       ] })
@@ -4224,7 +4261,8 @@ function FieldRenderer({
         label: field.label,
         required: field.required,
         value: v,
-        onChange
+        onChange,
+        error
       }
     );
   }
@@ -4247,7 +4285,8 @@ function FieldRenderer({
                 contactName: __spreadProps(__spreadValues({}, v.contactName), {
                   firstName: e.target.value
                 })
-              }))
+              })),
+              error: error && !v.contactName.firstName.trim() ? error : void 0
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4260,7 +4299,8 @@ function FieldRenderer({
                 contactName: __spreadProps(__spreadValues({}, v.contactName), {
                   lastName: e.target.value
                 })
-              }))
+              })),
+              error: error && !v.contactName.lastName.trim() ? error : void 0
             }
           )
         ] }),
@@ -4271,7 +4311,8 @@ function FieldRenderer({
             label: labels.emergencyContactPhoneLabel,
             required: field.required,
             value: v.phone,
-            onChange: (phone) => onChange(__spreadProps(__spreadValues({}, v), { phone }))
+            onChange: (phone) => onChange(__spreadProps(__spreadValues({}, v), { phone })),
+            error: error && !v.phone.nationalNumber.trim() ? error : void 0
           }
         )
       ] })
@@ -4286,7 +4327,8 @@ function FieldRenderer({
         required: field.required,
         optionalHint: !field.required ? labels.optionalLabel : void 0,
         value: typeof value === "string" ? value : "",
-        onChange
+        onChange,
+        error
       }
     );
   }
@@ -4299,6 +4341,7 @@ function FieldRenderer({
         required: field.required,
         value: typeof value === "string" ? value : "",
         onChange: (e) => onChange(e.target.value),
+        error,
         children: [
           /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true }),
           options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
@@ -4404,25 +4447,15 @@ function FieldRenderer({
       }
     );
   }
-  if (field.type === "date") {
-    return /* @__PURE__ */ jsx(
-      DatePickerField,
-      {
-        label: field.label,
-        required: field.required,
-        value: asDate(value),
-        onChange: (d) => onChange(d)
-      }
-    );
-  }
-  if (field.type === "birthDate") {
+  if (field.type === "date" || field.type === "birthDate") {
     return /* @__PURE__ */ jsx(
       BirthDateField,
       {
         label: field.label,
         required: field.required,
         value: asDate(value),
-        onChange: (d) => onChange(d)
+        onChange: (d) => onChange(d),
+        error
       }
     );
   }
@@ -4434,7 +4467,8 @@ function FieldRenderer({
         required: field.required,
         type: "number",
         value: value == null ? "" : String(value),
-        onChange: (e) => onChange(e.target.value)
+        onChange: (e) => onChange(e.target.value),
+        error
       }
     );
   }
@@ -4446,7 +4480,8 @@ function FieldRenderer({
       required: field.required,
       type: htmlType,
       value: typeof value === "string" ? value : "",
-      onChange: (e) => onChange(e.target.value)
+      onChange: (e) => onChange(e.target.value),
+      error
     }
   );
 }
@@ -4495,6 +4530,7 @@ function RegistrationForm({
       includeTerms
     )
   );
+  const [submitAttempted, setSubmitAttempted] = React21.useState(false);
   React21.useEffect(() => {
     if (isControlled) return;
     setInternal((prev) => {
@@ -4516,21 +4552,34 @@ function RegistrationForm({
     if (!isControlled) setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
+  const termsAccepted = current[TERMS_ACCEPT_KEY] === true;
+  const termsEnabled = includeTerms && !!terms;
+  const acceptControl = (_a = terms == null ? void 0 : terms.acceptControl) != null ? _a : "checkbox";
   const handleSubmit = (e) => {
     e.preventDefault();
+    setSubmitAttempted(true);
+    const hasRequiredEmpty = sortedFields.some(
+      (f) => f.required && isFieldEmpty(f, current[f.id])
+    );
+    if (hasRequiredEmpty || termsEnabled && !termsAccepted) return;
     onSubmit == null ? void 0 : onSubmit(current);
   };
-  const termsAccepted = current[TERMS_ACCEPT_KEY] === true;
-  const termsEnabled = includeTerms && !!terms;
-  const acceptControl = (_a = terms == null ? void 0 : terms.acceptControl) != null ? _a : "checkbox";
   const dateRange = formatDateRange(adventure, dateFormatter);
   const hasTripInfo = !!adventure || !!booking || !!traveller;
+  const fieldErrors = {};
+  if (submitAttempted) {
+    for (const field of sortedFields) {
+      if (field.required && isFieldEmpty(field, current[field.id])) {
+        fieldErrors[field.id] = L.requiredFieldError;
+      }
+    }
+  }
   return /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: handleSubmit,
       noValidate: true,
-      className: cn("flex flex-col gap-10", className),
+      className: cn("rounded-xl border border-border bg-card overflow-hidden", className),
       children: [
         heroImage ? (
           /* ── Hero image (full-width) with centered white logo ─────────── */
@@ -4571,147 +4620,150 @@ function RegistrationForm({
             }
           ) })
         ),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground font-ui", children: subtitle != null ? subtitle : L.formSubtitle })
-        ] }),
-        hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: [
-          adventure && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.adventureLabel }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: adventure.name })
-          ] }),
-          dateRange && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: dateRange })
+        /* @__PURE__ */ jsxs("div", { className: "px-6 sm:px-8 pt-8 pb-8 flex flex-col gap-10", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground font-ui", children: subtitle != null ? subtitle : L.formSubtitle })
           ] }),
-          (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.partnerLabel }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: adventure.partnerName })
-          ] }),
-          booking && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.bookingLabel }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono tabular-nums", children: booking.id })
-          ] }),
-          traveller && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.travellerLabel }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: traveller.fullName })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx(FormSection2, { title: L.detailsSectionTitle, children: sortedFields.map((field) => {
-          var _a2;
-          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx(
-              FieldRenderer,
-              {
-                field,
-                value: current[field.id],
-                onChange: (v) => setField(field.id, v),
-                defaultPhoneCountry,
-                labels: L
-              }
-            ),
-            ((_a2 = field.helpText) == null ? void 0 : _a2.trim()) && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-ui leading-relaxed", children: field.helpText.trim() })
-          ] }, field.id);
-        }) }),
-        termsEnabled && terms && /* @__PURE__ */ jsxs(FormSection2, { title: L.termsSectionTitle, children: [
-          /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) }),
-          acceptControl === "checkbox" ? /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-2.5 font-ui text-sm text-foreground", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: termsAccepted,
-                required: true,
-                onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
-                className: "mt-0.5 h-4 w-4 shrink-0 accent-primary cursor-pointer"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { children: L.termsAccept })
-          ] }) : /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "radiogroup",
-              "aria-label": L.termsSectionTitle,
-              className: "flex flex-wrap items-center gap-x-6 gap-y-3",
-              children: [
-                /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "radio",
-                      name: "registration-terms-accept",
-                      checked: termsAccepted,
-                      required: true,
-                      onChange: () => setField(TERMS_ACCEPT_KEY, true),
-                      className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
-                    }
-                  ),
-                  L.termsAccept
-                ] }),
-                /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-muted-foreground", children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "radio",
-                      name: "registration-terms-accept",
-                      checked: current[TERMS_ACCEPT_KEY] === false,
-                      onChange: () => setField(TERMS_ACCEPT_KEY, false),
-                      className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
-                    }
-                  ),
-                  L.termsDecline
-                ] })
-              ]
-            }
-          )
-        ] }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive font-ui", children: error }),
-        /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            disabled: loading,
-            className: cn(
-              "inline-flex items-center justify-center gap-2 rounded-full px-10 py-3.5",
-              "bg-primary text-primary-foreground font-ui font-semibold text-sm",
-              "transition-colors hover:bg-primary/90 focus-visible:outline-none",
-              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              "disabled:pointer-events-none disabled:opacity-60"
-            ),
-            children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                "svg",
+          hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: [
+            adventure && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.adventureLabel }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: adventure.name })
+            ] }),
+            dateRange && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: dateRange })
+            ] }),
+            (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.partnerLabel }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: adventure.partnerName })
+            ] }),
+            booking && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.bookingLabel }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono tabular-nums", children: booking.id })
+            ] }),
+            traveller && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.travellerLabel }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: traveller.fullName })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(FormSection2, { title: L.detailsSectionTitle, children: sortedFields.map((field) => {
+            var _a2;
+            return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                FieldRenderer,
                 {
-                  className: "h-4 w-4 animate-spin",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  children: [
+                  field,
+                  value: current[field.id],
+                  onChange: (v) => setField(field.id, v),
+                  defaultPhoneCountry,
+                  labels: L,
+                  error: fieldErrors[field.id]
+                }
+              ),
+              ((_a2 = field.helpText) == null ? void 0 : _a2.trim()) && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-ui leading-relaxed", children: field.helpText.trim() })
+            ] }, field.id);
+          }) }),
+          termsEnabled && terms && /* @__PURE__ */ jsxs(FormSection2, { title: L.termsSectionTitle, children: [
+            /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) }),
+            acceptControl === "checkbox" ? /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-2.5 font-ui text-sm text-foreground", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: termsAccepted,
+                  required: true,
+                  onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
+                  className: "mt-0.5 h-4 w-4 shrink-0 accent-primary cursor-pointer"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: L.termsAccept })
+            ] }) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "radiogroup",
+                "aria-label": L.termsSectionTitle,
+                className: "flex flex-wrap items-center gap-x-6 gap-y-3",
+                children: [
+                  /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
                     /* @__PURE__ */ jsx(
-                      "circle",
+                      "input",
                       {
-                        className: "opacity-25",
-                        cx: "12",
-                        cy: "12",
-                        r: "10",
-                        stroke: "currentColor",
-                        strokeWidth: "4"
+                        type: "radio",
+                        name: "registration-terms-accept",
+                        checked: termsAccepted,
+                        required: true,
+                        onChange: () => setField(TERMS_ACCEPT_KEY, true),
+                        className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
                       }
                     ),
+                    L.termsAccept
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-muted-foreground", children: [
                     /* @__PURE__ */ jsx(
-                      "path",
+                      "input",
                       {
-                        className: "opacity-75",
-                        fill: "currentColor",
-                        d: "M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
+                        type: "radio",
+                        name: "registration-terms-accept",
+                        checked: current[TERMS_ACCEPT_KEY] === false,
+                        onChange: () => setField(TERMS_ACCEPT_KEY, false),
+                        className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
                       }
-                    )
-                  ]
-                }
+                    ),
+                    L.termsDecline
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive font-ui", children: error }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: loading,
+              className: cn(
+                "inline-flex items-center justify-center gap-2 rounded-full px-10 py-3.5",
+                "bg-primary text-primary-foreground font-ui font-semibold text-sm",
+                "transition-colors hover:bg-primary/90 focus-visible:outline-none",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                "disabled:pointer-events-none disabled:opacity-60"
               ),
-              L.submitting
-            ] }) : L.submitButton
-          }
-        ) })
+              children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "h-4 w-4 animate-spin",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          className: "opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          className: "opacity-75",
+                          fill: "currentColor",
+                          d: "M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                L.submitting
+              ] }) : L.submitButton
+            }
+          ) })
+        ] })
       ]
     }
   );
@@ -4779,7 +4831,7 @@ function RegistrationSuccessCard({
     var _a, _b;
     return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
   }).filter((f) => Object.prototype.hasOwnProperty.call(answers, f.id));
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-border bg-card p-6 sm:p-8 flex flex-col gap-10", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(CircleCheckIcon, { size: 28 }) }),
       /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),