@planetaexo/design-system 0.3.3 → 0.3.5

package/dist/index.d.cts

@@ -115,6 +115,37 @@ interface BookingShellProps {
     successMessage?: string | null;
 }
 declare function BookingShell({ steps, currentStep, title, children, onNext, onBack, onCancel, nextLabel, backLabel, cancelLabel, nextDisabled, nextBlockedMessage, error, successMessage, }: BookingShellProps): react_jsx_runtime.JSX.Element;
+interface PaymentAmountSelectorProps {
+    title?: string;
+    depositLabel: string;
+    fullLabel: string;
+    value: "deposit" | "full";
+    onChange: (value: "deposit" | "full") => void;
+}
+declare function PaymentAmountSelector({ title, depositLabel, fullLabel, value, onChange, }: PaymentAmountSelectorProps): react_jsx_runtime.JSX.Element;
+interface PaymentMethodOption {
+    id: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface PaymentMethodSelectorProps {
+    title?: string;
+    methods: PaymentMethodOption[];
+    value: string;
+    onChange: (value: string) => void;
+}
+declare function PaymentMethodSelector({ title, methods, value, onChange, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+interface TermsSectionProps {
+    title?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** Conteúdo do label — pode incluir links/botões do host app */
+    label: React.ReactNode;
+    /** Mensagem de aviso exibida quando não marcado */
+    warningMessage?: string | null;
+}
+declare function TermsSection({ title, checked, onChange, label, warningMessage, }: TermsSectionProps): react_jsx_runtime.JSX.Element;
 /** Cartão de aventura isolado (mesmo layout que dentro de `Offer`). */
 declare function OfferAdventureCard({ adventure }: {
     adventure: OfferAdventureItem;
@@ -749,6 +780,32 @@ interface ActivityCardProps {
 }
 declare function ActivityCard({ image, imageAlt, badge, icon, title, description, price, onClick, size, className, }: ActivityCardProps): react_jsx_runtime.JSX.Element;
 
+type AlertVariant = "error" | "warning" | "success" | "info";
+interface AlertProps {
+    variant?: AlertVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Alert({ variant, children, className }: AlertProps): react_jsx_runtime.JSX.Element;
+
+interface PaymentModalShellProps {
+    open: boolean;
+    title: string;
+    subtitle?: string;
+    /** Referência da reserva exibida abaixo do subtitle (e.g. "#12345") */
+    bookingRef?: string | number;
+    /** Quando true exibe spinner e oculta children */
+    busy?: boolean;
+    busyMessage?: string;
+    onClose?: () => void;
+    closeLabel?: string;
+    /** Quando true desabilita o botão de fechar */
+    closeDisabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function PaymentModalShell({ open, title, subtitle, bookingRef, busy, busyMessage, onClose, closeLabel, closeDisabled, children, className, }: PaymentModalShellProps): react_jsx_runtime.JSX.Element | null;
+
 declare function cn(...inputs: ClassValue[]): string;
 
 interface LeadCapturePopupConfig {
@@ -801,4 +858,4 @@ declare function LeadCapturePopup({ config: _config, }: {
     config: LeadCapturePopupConfig;
 }): react_jsx_runtime.JSX.Element | null;
 
-export { ActivityCard, type ActivityCardProps, type ActivityCardSize, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, 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 FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type SuggestedTraveller, ThemeToggle, 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, cn };
+export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, 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 FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, 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, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, 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, cn };

package/dist/index.d.ts

@@ -115,6 +115,37 @@ interface BookingShellProps {
     successMessage?: string | null;
 }
 declare function BookingShell({ steps, currentStep, title, children, onNext, onBack, onCancel, nextLabel, backLabel, cancelLabel, nextDisabled, nextBlockedMessage, error, successMessage, }: BookingShellProps): react_jsx_runtime.JSX.Element;
+interface PaymentAmountSelectorProps {
+    title?: string;
+    depositLabel: string;
+    fullLabel: string;
+    value: "deposit" | "full";
+    onChange: (value: "deposit" | "full") => void;
+}
+declare function PaymentAmountSelector({ title, depositLabel, fullLabel, value, onChange, }: PaymentAmountSelectorProps): react_jsx_runtime.JSX.Element;
+interface PaymentMethodOption {
+    id: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface PaymentMethodSelectorProps {
+    title?: string;
+    methods: PaymentMethodOption[];
+    value: string;
+    onChange: (value: string) => void;
+}
+declare function PaymentMethodSelector({ title, methods, value, onChange, }: PaymentMethodSelectorProps): react_jsx_runtime.JSX.Element;
+interface TermsSectionProps {
+    title?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** Conteúdo do label — pode incluir links/botões do host app */
+    label: React.ReactNode;
+    /** Mensagem de aviso exibida quando não marcado */
+    warningMessage?: string | null;
+}
+declare function TermsSection({ title, checked, onChange, label, warningMessage, }: TermsSectionProps): react_jsx_runtime.JSX.Element;
 /** Cartão de aventura isolado (mesmo layout que dentro de `Offer`). */
 declare function OfferAdventureCard({ adventure }: {
     adventure: OfferAdventureItem;
@@ -749,6 +780,32 @@ interface ActivityCardProps {
 }
 declare function ActivityCard({ image, imageAlt, badge, icon, title, description, price, onClick, size, className, }: ActivityCardProps): react_jsx_runtime.JSX.Element;
 
+type AlertVariant = "error" | "warning" | "success" | "info";
+interface AlertProps {
+    variant?: AlertVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Alert({ variant, children, className }: AlertProps): react_jsx_runtime.JSX.Element;
+
+interface PaymentModalShellProps {
+    open: boolean;
+    title: string;
+    subtitle?: string;
+    /** Referência da reserva exibida abaixo do subtitle (e.g. "#12345") */
+    bookingRef?: string | number;
+    /** Quando true exibe spinner e oculta children */
+    busy?: boolean;
+    busyMessage?: string;
+    onClose?: () => void;
+    closeLabel?: string;
+    /** Quando true desabilita o botão de fechar */
+    closeDisabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function PaymentModalShell({ open, title, subtitle, bookingRef, busy, busyMessage, onClose, closeLabel, closeDisabled, children, className, }: PaymentModalShellProps): react_jsx_runtime.JSX.Element | null;
+
 declare function cn(...inputs: ClassValue[]): string;
 
 interface LeadCapturePopupConfig {
@@ -801,4 +858,4 @@ declare function LeadCapturePopup({ config: _config, }: {
     config: LeadCapturePopupConfig;
 }): react_jsx_runtime.JSX.Element | null;
 
-export { ActivityCard, type ActivityCardProps, type ActivityCardSize, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, 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 FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type SuggestedTraveller, ThemeToggle, 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, cn };
+export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, 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 FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, 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, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, 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, cn };

package/dist/index.js

@@ -1535,6 +1535,103 @@ function BookingShell({
     ] })
   ] });
 }
+function PaymentAmountSelector({
+  title = "What do you want to pay now?",
+  depositLabel,
+  fullLabel,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(opt),
+        className: cn(
+          "rounded-lg border-2 px-4 py-3 text-sm text-left font-sans transition-colors",
+          value === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : "border-border bg-background text-muted-foreground hover:border-primary/40"
+        ),
+        children: opt === "deposit" ? depositLabel : fullLabel
+      },
+      opt
+    )) })
+  ] });
+}
+function PaymentMethodSelector({
+  title = "Payment method",
+  methods,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: methods.map((m) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: m.disabled,
+        onClick: () => !m.disabled && onChange(m.id),
+        className: cn(
+          "flex items-start gap-3 rounded-lg border-2 px-4 py-3 text-left transition-colors",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          value === m.id ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/40"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                value === m.id ? "border-primary" : "border-border"
+              ),
+              children: value === m.id && /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm font-semibold font-sans",
+                  value === m.id ? "text-primary" : "text-foreground"
+                ),
+                children: m.label
+              }
+            ),
+            m.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-sans", children: m.description })
+          ] })
+        ]
+      },
+      m.id
+    )) })
+  ] });
+}
+function TermsSection({
+  title = "Terms and conditions",
+  checked,
+  onChange,
+  label,
+  warningMessage
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked,
+          onChange: (e) => onChange(e.target.checked),
+          className: "h-4 w-4 shrink-0 mt-0.5 rounded border-border accent-primary cursor-pointer"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: label })
+    ] }),
+    !checked && warningMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-400 flex items-center gap-1", children: warningMessage })
+  ] });
+}
 var WIZARD_STEPS = [
   { id: "responsible", label: "Responsible party details" },
   { id: "travellers", label: "Travellers" },
@@ -1751,70 +1848,33 @@ function BookingWizard({
         ] }),
         step === "payment" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-sans", children: "When you confirm, we will open secure online payment (Stripe). Choose deposit vs full amount below when applicable." }),
-          depositInfo && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: "What do you want to pay now?" }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setPayAmount(opt),
-                className: cn(
-                  "rounded-lg border-2 px-4 py-3 text-sm text-left font-sans transition-colors",
-                  payAmount === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : "border-border bg-background text-muted-foreground hover:border-primary/40"
-                ),
-                children: opt === "deposit" ? depositLabel : fullLabel
-              },
-              opt
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxs("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("span", { children: "$" }),
-              " Payment method"
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: [
-              { id: "stripe", label: "Credit / Debit card", sub: "Secure payment via Stripe" },
-              { id: "pix", label: "PIX", sub: "Instant transfer \u2014 Brazil only" },
-              { id: "bank", label: "Bank transfer", sub: "Wire / TED / DOC" }
-            ].map((m) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => setPayMethod(m.id),
-                className: cn(
-                  "flex items-start gap-3 rounded-lg border-2 px-4 py-3 text-left transition-colors",
-                  payMethod === m.id ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/40"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: cn(
-                    "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                    payMethod === m.id ? "border-primary" : "border-border"
-                  ), children: payMethod === m.id && /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary" }) }),
-                  /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
-                    /* @__PURE__ */ jsx("span", { className: cn(
-                      "text-sm font-semibold font-sans",
-                      payMethod === m.id ? "text-primary" : "text-foreground"
-                    ), children: m.label }),
-                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-sans", children: m.sub })
-                  ] })
-                ]
-              },
-              m.id
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Terms and conditions" }),
-            /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: termsAccepted,
-                  onChange: (e) => setTermsAccepted(e.target.checked),
-                  className: "h-4 w-4 shrink-0 mt-0.5 rounded border-border accent-primary cursor-pointer"
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: [
+          depositInfo && /* @__PURE__ */ jsx(
+            PaymentAmountSelector,
+            {
+              depositLabel,
+              fullLabel,
+              value: payAmount,
+              onChange: setPayAmount
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PaymentMethodSelector,
+            {
+              methods: [
+                { id: "stripe", label: "Credit / Debit card", description: "Secure payment via Stripe" },
+                { id: "pix", label: "PIX", description: "Instant transfer \u2014 Brazil only" },
+                { id: "bank", label: "Bank transfer", description: "Wire / TED / DOC" }
+              ],
+              value: payMethod,
+              onChange: (v) => setPayMethod(v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TermsSection,
+            {
+              checked: termsAccepted,
+              onChange: setTermsAccepted,
+              label: /* @__PURE__ */ jsxs(Fragment, { children: [
                 "I have read and accept the",
                 " ",
                 /* @__PURE__ */ jsx(
@@ -1829,8 +1889,8 @@ function BookingWizard({
                 " ",
                 "of the reservation."
               ] })
-            ] })
-          ] }),
+            }
+          ),
           /* @__PURE__ */ jsx(Dialog, { open: termsModalOpen, onOpenChange: setTermsModalOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "!max-w-[80vw] w-[80vw] max-h-[85vh] overflow-y-auto", children: [
             /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "font-heading text-xl", children: "Terms and Conditions" }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-sm font-sans text-foreground/80 leading-relaxed", children: [
@@ -6342,6 +6402,81 @@ function ActivityCard({
     }
   );
 }
+var VARIANT_STYLES = {
+  error: "text-destructive border-destructive/30 bg-destructive/5",
+  warning: "text-amber-400 border-amber-500/30 bg-amber-500/10",
+  success: "text-primary border-primary/30 bg-primary/10",
+  info: "text-muted-foreground border-primary/25 bg-primary/5"
+};
+function Alert({ variant = "info", children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border px-3 py-2 text-sm font-sans leading-snug",
+        VARIANT_STYLES[variant],
+        className
+      ),
+      children
+    }
+  );
+}
+function PaymentModalShell({
+  open,
+  title,
+  subtitle,
+  bookingRef,
+  busy,
+  busyMessage,
+  onClose,
+  closeLabel = "Cancel",
+  closeDisabled,
+  children,
+  className
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/70 p-4",
+      role: "dialog",
+      "aria-modal": "true",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl",
+            "max-h-[90vh] overflow-y-auto",
+            className
+          ),
+          children: [
+            onClose && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => !closeDisabled && onClose(),
+                disabled: closeDisabled,
+                "aria-label": closeLabel,
+                className: "absolute right-4 top-4 text-xl leading-none text-muted-foreground hover:text-foreground disabled:opacity-40 transition-colors",
+                children: "\xD7"
+              }
+            ),
+            /* @__PURE__ */ jsx("h2", { className: "pr-8 text-lg font-bold text-foreground font-heading", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground font-sans", children: subtitle }),
+            bookingRef != null && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground font-sans", children: [
+              "#",
+              bookingRef
+            ] }),
+            busy ? /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 py-6", children: [
+              /* @__PURE__ */ jsx("span", { className: "h-10 w-10 animate-spin rounded-full border-2 border-primary/30 border-t-primary" }),
+              busyMessage && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground font-sans", children: busyMessage })
+            ] }) : /* @__PURE__ */ jsx("div", { className: "mt-6", children })
+          ]
+        }
+      )
+    }
+  );
+}
 function Input(_a) {
   var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
   return /* @__PURE__ */ jsx(
@@ -6705,6 +6840,6 @@ function LeadCapturePopup({
   );
 }
 
-export { ActivityCard, BookingConfirmation, BookingConfirmationEmail, BookingDetails, BookingForm, BookingShell, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PhoneCountrySelect, PhotoGallery, PricingTrip, SiteHeader, ThemeToggle, TripCard, TripHeader, TripPage, cn };
+export { ActivityCard, Alert, BookingConfirmation, BookingConfirmationEmail, BookingDetails, BookingForm, BookingShell, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, SiteHeader, TermsSection, ThemeToggle, TripCard, TripHeader, TripPage, cn };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map