npm - @planetaexo/design-system - Versions diffs - 0.4.10 → 0.4.12 - Mend

@planetaexo/design-system 0.4.10 → 0.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -589,6 +589,7 @@ interface RegistrationFormProps {
     labels?: RegistrationFormLabels;
     className?: string;
 }
+declare const TERMS_ACCEPT_KEY = "__registrationTermsAccepted";
 declare function RegistrationForm({ logo, logoAlt, heroImage, heroImageAlt, title, subtitle, adventure, booking, traveller, fields, values, defaultValues, onChange, onSubmit, onValidate, externalErrors, terms, includeTerms, loading, error, defaultPhoneCountry, dateFormatter, labels, className, }: RegistrationFormProps): react_jsx_runtime.JSX.Element;
 interface RegistrationSuccessCardProps {
     title?: string;
@@ -1412,4 +1413,4 @@ declare function LeadCapturePopup({ config: _config, }: {
     config: LeadCapturePopupConfig;
 }): react_jsx_runtime.JSX.Element | null;
-export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, BirthDateField, type BirthDateFieldProps, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, BookingConfirmedCard, type BookingConfirmedCardProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingOtpEmail, type BookingOtpEmailLabels, type BookingOtpEmailProps, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, Button, type ButtonProps, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type EmailTokens, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, type RegistrationAdventure, type RegistrationBooking, type RegistrationEmergencyContactValue, type RegistrationField, type RegistrationFieldOption, type RegistrationFieldType, type RegistrationFieldValue, RegistrationForm, type RegistrationFormLabels, type RegistrationFormProps, type RegistrationFormValues, type RegistrationNameValue, type RegistrationPhoneValue, RegistrationSuccessCard, type RegistrationSuccessCardProps, type RegistrationTerms, type RegistrationTraveller, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TravellerFormInviteEmail, type TravellerFormInviteEmailLabels, type TravellerFormInviteEmailProps, type TravellerFormInviteLink, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
+export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, BirthDateField, type BirthDateFieldProps, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, BookingConfirmedCard, type BookingConfirmedCardProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingOtpEmail, type BookingOtpEmailLabels, type BookingOtpEmailProps, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, Button, type ButtonProps, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type EmailTokens, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, type RegistrationAdventure, type RegistrationBooking, type RegistrationEmergencyContactValue, type RegistrationField, type RegistrationFieldOption, type RegistrationFieldType, type RegistrationFieldValue, RegistrationForm, type RegistrationFormLabels, type RegistrationFormProps, type RegistrationFormValues, type RegistrationNameValue, type RegistrationPhoneValue, RegistrationSuccessCard, type RegistrationSuccessCardProps, type RegistrationTerms, type RegistrationTraveller, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TERMS_ACCEPT_KEY, TermsSection, type TermsSectionProps, ThemeToggle, TravellerFormInviteEmail, type TravellerFormInviteEmailLabels, type TravellerFormInviteEmailProps, type TravellerFormInviteLink, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };

package/dist/index.d.ts CHANGED Viewed

@@ -589,6 +589,7 @@ interface RegistrationFormProps {
     labels?: RegistrationFormLabels;
     className?: string;
 }
+declare const TERMS_ACCEPT_KEY = "__registrationTermsAccepted";
 declare function RegistrationForm({ logo, logoAlt, heroImage, heroImageAlt, title, subtitle, adventure, booking, traveller, fields, values, defaultValues, onChange, onSubmit, onValidate, externalErrors, terms, includeTerms, loading, error, defaultPhoneCountry, dateFormatter, labels, className, }: RegistrationFormProps): react_jsx_runtime.JSX.Element;
 interface RegistrationSuccessCardProps {
     title?: string;
@@ -1412,4 +1413,4 @@ declare function LeadCapturePopup({ config: _config, }: {
     config: LeadCapturePopupConfig;
 }): react_jsx_runtime.JSX.Element | null;
-export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, BirthDateField, type BirthDateFieldProps, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, BookingConfirmedCard, type BookingConfirmedCardProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingOtpEmail, type BookingOtpEmailLabels, type BookingOtpEmailProps, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, Button, type ButtonProps, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type EmailTokens, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, type RegistrationAdventure, type RegistrationBooking, type RegistrationEmergencyContactValue, type RegistrationField, type RegistrationFieldOption, type RegistrationFieldType, type RegistrationFieldValue, RegistrationForm, type RegistrationFormLabels, type RegistrationFormProps, type RegistrationFormValues, type RegistrationNameValue, type RegistrationPhoneValue, RegistrationSuccessCard, type RegistrationSuccessCardProps, type RegistrationTerms, type RegistrationTraveller, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TravellerFormInviteEmail, type TravellerFormInviteEmailLabels, type TravellerFormInviteEmailProps, type TravellerFormInviteLink, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
+export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, BirthDateField, type BirthDateFieldProps, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, BookingConfirmedCard, type BookingConfirmedCardProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingOtpEmail, type BookingOtpEmailLabels, type BookingOtpEmailProps, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, Button, type ButtonProps, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type EmailTokens, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, type RegistrationAdventure, type RegistrationBooking, type RegistrationEmergencyContactValue, type RegistrationField, type RegistrationFieldOption, type RegistrationFieldType, type RegistrationFieldValue, RegistrationForm, type RegistrationFormLabels, type RegistrationFormProps, type RegistrationFormValues, type RegistrationNameValue, type RegistrationPhoneValue, RegistrationSuccessCard, type RegistrationSuccessCardProps, type RegistrationTerms, type RegistrationTraveller, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TERMS_ACCEPT_KEY, TermsSection, type TermsSectionProps, ThemeToggle, TravellerFormInviteEmail, type TravellerFormInviteEmailLabels, type TravellerFormInviteEmailProps, type TravellerFormInviteLink, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };

package/dist/index.js CHANGED Viewed

@@ -1188,7 +1188,7 @@ function CountrySearchField({
           type: "button",
           onClick: () => handleSelect(c.code),
           className: cn(
-            "flex w-full items-center px-3 py-2 text-sm font-ui text-left transition-colors hover:bg-muted",
+            "flex w-full items-center px-3 py-2 text-sm font-ui text-left text-foreground transition-colors hover:bg-muted",
             c.code === value && "bg-primary/10 text-primary font-semibold"
           ),
           children: c.name
@@ -4211,6 +4211,83 @@ function FloatingTextarea({
     )
   ] });
 }
+function SelectField({ field, value, onChange, error }) {
+  var _a, _b, _c;
+  const [open, setOpen] = React21.useState(false);
+  const containerRef = React21.useRef(null);
+  const options = (_a = field.options) != null ? _a : [];
+  const selectedOpt = (_b = options.find((o) => o.value === value)) != null ? _b : null;
+  React21.useEffect(() => {
+    if (!open) return;
+    const handleOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        className: cn(
+          "relative flex w-full items-center rounded-lg border border-border bg-background h-14 px-3 text-left transition-colors",
+          open && "border-primary ring-1 ring-primary",
+          error && !open && "border-destructive"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "pointer-events-none absolute left-3 transition-all duration-150 font-ui",
+                selectedOpt || open ? cn("top-2 text-xs", open ? "text-primary" : "text-muted-foreground") : "top-1/2 -translate-y-1/2 text-base text-muted-foreground"
+              ),
+              children: [
+                field.label,
+                field.required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 pt-3 text-base font-ui truncate", selectedOpt ? "text-foreground" : "invisible"), children: (_c = selectedOpt == null ? void 0 : selectedOpt.label) != null ? _c : "\u2014" }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: cn("h-4 w-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-180"),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(100%+4px)] left-0 right-0 z-50 rounded-xl border border-border bg-background shadow-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-52 overflow-y-auto py-1", children: options.map((opt) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onChange(opt.value);
+          setOpen(false);
+        },
+        className: cn(
+          "flex w-full items-center px-3 py-2 text-sm font-ui text-left text-foreground transition-colors hover:bg-muted",
+          opt.value === value && "bg-primary/10 text-primary font-semibold"
+        ),
+        children: opt.label
+      },
+      opt.value
+    )) }) }),
+    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive font-ui", children: error })
+  ] });
+}
 function FieldRenderer({
   field,
   value,
@@ -4219,7 +4296,7 @@ function FieldRenderer({
   labels,
   error
 }) {
-  var _a, _b, _c;
+  var _a, _b;
   const fieldId = `rf-${field.id}`;
   if (field.type === "name") {
     const v = asName(value);
@@ -4333,24 +4410,18 @@ function FieldRenderer({
     );
   }
   if (field.type === "select") {
-    const options = (_a = field.options) != null ? _a : [];
-    return /* @__PURE__ */ jsxs(
-      FloatingSelect,
+    return /* @__PURE__ */ jsx(
+      SelectField,
       {
-        label: field.label,
-        required: field.required,
+        field,
         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))
-        ]
+        onChange: (v) => onChange(v),
+        error
       }
     );
   }
   if (field.type === "radio") {
-    const options = (_b = field.options) != null ? _b : [];
+    const options = (_a = field.options) != null ? _a : [];
     return /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("p", { className: "mb-3 text-sm font-ui font-medium text-foreground", children: [
         field.label,
@@ -4385,11 +4456,12 @@ function FieldRenderer({
             opt.value
           ))
         }
-      )
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-destructive font-ui", children: error })
     ] });
   }
   if (field.type === "checkbox") {
-    const options = (_c = field.options) != null ? _c : [];
+    const options = (_b = field.options) != null ? _b : [];
     if (options.length === 0) {
       return /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
         /* @__PURE__ */ jsx(
@@ -4588,15 +4660,17 @@ function RegistrationForm({
       }
     }
   }
+  const termsError = submitAttempted && termsEnabled && !termsAccepted;
   const firstErrorFieldId = Object.keys(fieldErrors)[0];
+  const scrollTargetId = firstErrorFieldId ? `rf-${firstErrorFieldId}` : termsError ? "rf-terms" : null;
   React21.useEffect(() => {
-    if (!submitAttempted || !firstErrorFieldId) return;
+    if (!submitAttempted || !scrollTargetId) return;
     const timer = setTimeout(() => {
-      const elem = document.getElementById(`rf-${firstErrorFieldId}`);
+      const elem = document.getElementById(scrollTargetId);
       if (elem) elem.scrollIntoView({ behavior: "smooth", block: "center" });
     }, 50);
     return () => clearTimeout(timer);
-  }, [submitAttempted, firstErrorFieldId, validationErrors]);
+  }, [submitAttempted, scrollTargetId]);
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -4687,58 +4761,86 @@ function RegistrationForm({
               ((_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: [
+          termsEnabled && terms && /* @__PURE__ */ jsx("div", { id: "rf-terms", children: /* @__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",
+            acceptControl === "checkbox" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsxs(
+                "label",
                 {
-                  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: [
+                  className: cn(
+                    "flex cursor-pointer items-start gap-2.5 font-ui text-sm",
+                    termsError ? "text-destructive" : "text-foreground"
+                  ),
+                  children: [
                     /* @__PURE__ */ jsx(
                       "input",
                       {
-                        type: "radio",
-                        name: "registration-terms-accept",
+                        type: "checkbox",
                         checked: termsAccepted,
                         required: true,
-                        onChange: () => setField(TERMS_ACCEPT_KEY, true),
-                        className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
+                        onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
+                        className: "mt-0.5 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",
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      L.termsAccept,
+                      /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
+                    ] })
+                  ]
+                }
+              ),
+              termsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive font-ui", children: L.requiredFieldError })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__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",
                       {
-                        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"
+                        className: cn(
+                          "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm",
+                          termsError ? "text-destructive" : "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__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
+                        ]
                       }
                     ),
-                    L.termsDecline
-                  ] })
-                ]
-              }
-            )
-          ] }),
+                    /* @__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
+                    ] })
+                  ]
+                }
+              ),
+              termsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive font-ui", children: L.requiredFieldError })
+            ] })
+          ] }) }),
           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",
@@ -8241,6 +8343,6 @@ function LeadCapturePopup({
   );
 }
-export { ActivityCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TermsSection, ThemeToggle, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
+export { ActivityCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map