@planetaexo/design-system 0.3.1 → 0.3.3

package/dist/index.cjs

@@ -1475,6 +1475,87 @@ function BirthDateField({
     ) })
   ] });
 }
+function BookingShell({
+  steps,
+  currentStep,
+  title = "Booking details",
+  children,
+  onNext,
+  onBack,
+  onCancel,
+  nextLabel = "Next",
+  backLabel = "Back",
+  cancelLabel = "Cancel",
+  nextDisabled,
+  nextBlockedMessage,
+  error,
+  successMessage
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border px-5 py-4 bg-muted/20", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground font-heading mb-2", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: steps.map((label, i) => /* @__PURE__ */ jsxRuntime.jsxs(React18__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs font-sans",
+              i === currentStep ? "text-primary font-semibold" : i < currentStep ? "text-foreground" : "text-muted-foreground"
+            ),
+            children: label
+          }
+        ),
+        i < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "w-3 h-3 text-muted-foreground shrink-0" })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 flex flex-col gap-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive font-sans", children: error }),
+      successMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-sans rounded-lg px-3 py-2 bg-primary/10 border border-primary/30 text-primary", children: successMessage }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          currentStep > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onBack,
+              className: "flex items-center gap-1.5 rounded-full border border-border px-5 py-2.5 text-sm text-foreground font-sans hover:bg-muted/50 transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "w-3.5 h-3.5" }),
+                backLabel
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onNext,
+              disabled: nextDisabled,
+              className: cn(
+                "rounded-full bg-primary px-8 py-2.5 text-sm font-bold",
+                "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                nextDisabled && "opacity-50 pointer-events-none"
+              ),
+              children: nextLabel
+            }
+          )
+        ] }),
+        nextDisabled && nextBlockedMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-amber-400 bg-amber-500/10 border border-amber-500/30 rounded-lg px-3 py-2", children: nextBlockedMessage }),
+        currentStep === 0 && onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: "text-sm text-muted-foreground font-sans hover:text-foreground transition-colors self-start underline underline-offset-2",
+            children: cancelLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 var WIZARD_STEPS = [
   { id: "responsible", label: "Responsible party details" },
   { id: "travellers", label: "Travellers" },
@@ -1587,265 +1668,223 @@ function BookingWizard({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border px-5 py-4 bg-muted/20", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground font-heading mb-2", children: "Booking details" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: WIZARD_STEPS.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs(React18__namespace.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              "text-xs font-sans",
-              s.id === step ? "text-primary font-semibold" : i < stepIndex ? "text-foreground" : "text-muted-foreground"
-            ),
-            children: s.label
-          }
-        ),
-        i < WIZARD_STEPS.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "w-3 h-3 text-muted-foreground shrink-0" })
-      ] }, s.id)) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 flex flex-col gap-5", children: [
-      step === "responsible" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-sans", children: "Enter the responsible person's details. This person will receive booking confirmations and is accountable for all travellers." }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "First name", required: true, value: responsible.firstName, onChange: (e) => setR("firstName", e.target.value) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Last name", required: true, value: responsible.lastName, onChange: (e) => setR("lastName", e.target.value) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Email", type: "email", required: true, value: responsible.email, onChange: (e) => setR("email", e.target.value) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PhoneCountrySelect, { value: responsible.phoneCountry, onChange: (c) => setR("phoneCountry", c), className: "shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  id: "wiz-phone",
-                  type: "tel",
-                  placeholder: " ",
-                  value: responsible.phone,
-                  onChange: (e) => setR("phone", e.target.value),
-                  className: "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"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "wiz-phone", className: "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-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs", children: "Phone" })
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BookingShell,
+    {
+      steps: WIZARD_STEPS.map((s) => s.label),
+      currentStep: stepIndex,
+      title: "Booking details",
+      onNext: goNext,
+      onBack: goPrev,
+      onCancel,
+      nextLabel: step === "payment" ? "Confirm booking" : "Next",
+      backLabel: "Back",
+      cancelLabel: "Cancel",
+      error,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+        step === "responsible" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-sans", children: "Enter the responsible person's details. This person will receive booking confirmations and is accountable for all travellers." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "First name", required: true, value: responsible.firstName, onChange: (e) => setR("firstName", e.target.value) }),
+            /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Last name", required: true, value: responsible.lastName, onChange: (e) => setR("lastName", e.target.value) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Email", type: "email", required: true, value: responsible.email, onChange: (e) => setR("email", e.target.value) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PhoneCountrySelect, { value: responsible.phoneCountry, onChange: (c) => setR("phoneCountry", c), className: "shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    id: "wiz-phone",
+                    type: "tel",
+                    placeholder: " ",
+                    value: responsible.phone,
+                    onChange: (e) => setR("phone", e.target.value),
+                    className: "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"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "wiz-phone", className: "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-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs", children: "Phone" })
+              ] })
             ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CountrySearchField, { required: true, value: responsible.country, onChange: (code) => setR("country", code) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Passport / CPF", required: true, value: responsible.passport, onChange: (e) => setR("passport", e.target.value) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                id: "wiz-notes",
+                placeholder: " ",
+                rows: 3,
+                value: responsible.notes,
+                onChange: (e) => setR("notes", e.target.value),
+                className: "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"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "wiz-notes", className: "pointer-events-none absolute left-3 top-4 text-base text-muted-foreground font-ui transition-all duration-150 peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:text-xs", children: "Notes (optional)" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(CountrySearchField, { required: true, value: responsible.country, onChange: (code) => setR("country", code) }),
-        /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Passport / CPF", required: true, value: responsible.passport, onChange: (e) => setR("passport", e.target.value) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "textarea",
-            {
-              id: "wiz-notes",
-              placeholder: " ",
-              rows: 3,
-              value: responsible.notes,
-              onChange: (e) => setR("notes", e.target.value),
-              className: "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"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "wiz-notes", className: "pointer-events-none absolute left-3 top-4 text-base text-muted-foreground font-ui transition-all duration-150 peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:text-xs", children: "Notes (optional)" })
-        ] })
-      ] }),
-      step === "travellers" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UsersIcon, { className: "w-5 h-5 text-primary shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "Traveller details" })
-        ] }),
-        travellers.map((t, i) => {
-          const isChild = i >= totalAdults;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-bold text-foreground font-heading", children: [
-                "Traveller ",
-                i + 1
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                "text-xs font-semibold font-heading rounded-full px-2.5 py-0.5",
-                isChild ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-primary/10 text-primary"
-              ), children: isChild ? "Crian\xE7a" : "Adulto" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "First name", required: true, value: t.firstName, onChange: (e) => setT(i, "firstName", e.target.value) }),
-              /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Last name", required: true, value: t.lastName, onChange: (e) => setT(i, "lastName", e.target.value) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                BirthDateField,
-                {
-                  label: "Date of birth",
-                  required: isChild,
-                  value: t.dateOfBirth,
-                  onChange: (d) => setTDob(i, d)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                FloatingInput,
-                {
-                  label: "Email",
-                  type: "email",
-                  value: t.email,
-                  onChange: (e) => setT(i, "email", e.target.value)
-                }
-              )
-            ] })
-          ] }, i);
-        })
-      ] }),
-      step === "payment" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: "What do you want to pay now?" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "$" }),
-            " Payment method"
+        step === "travellers" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UsersIcon, { className: "w-5 h-5 text-primary shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "Traveller details" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: [
+          travellers.map((t, i) => {
+            const isChild = i >= totalAdults;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-bold text-foreground font-heading", children: [
+                  "Traveller ",
+                  i + 1
+                ] }),
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-primary" }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-0.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "text-sm font-semibold font-sans",
-                    payMethod === m.id ? "text-primary" : "text-foreground"
-                  ), children: m.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-sans", children: m.sub })
-                ] })
-              ]
-            },
-            m.id
-          )) })
+                  "text-xs font-semibold font-heading rounded-full px-2.5 py-0.5",
+                  isChild ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-primary/10 text-primary"
+                ), children: isChild ? "Crian\xE7a" : "Adulto" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "First name", required: true, value: t.firstName, onChange: (e) => setT(i, "firstName", e.target.value) }),
+                /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Last name", required: true, value: t.lastName, onChange: (e) => setT(i, "lastName", e.target.value) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  BirthDateField,
+                  {
+                    label: "Date of birth",
+                    required: isChild,
+                    value: t.dateOfBirth,
+                    onChange: (d) => setTDob(i, d)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  FloatingInput,
+                  {
+                    label: "Email",
+                    type: "email",
+                    value: t.email,
+                    onChange: (e) => setT(i, "email", e.target.value)
+                  }
+                )
+              ] })
+            ] }, i);
+          })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Terms and conditions" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+        step === "payment" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: "What do you want to pay now?" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
               {
-                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__ */ jsxRuntime.jsxs("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: [
-              "I have read and accept the",
-              " ",
+                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__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "$" }),
+              " Payment method"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-primary" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-0.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                      "text-sm font-semibold font-sans",
+                      payMethod === m.id ? "text-primary" : "text-foreground"
+                    ), children: m.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-sans", children: m.sub })
+                  ] })
+                ]
+              },
+              m.id
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Terms and conditions" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                "input",
                 {
-                  type: "button",
-                  onClick: () => setTermsModalOpen(true),
-                  className: "underline underline-offset-2 text-primary hover:text-primary/80 transition-colors font-semibold",
-                  children: "terms and conditions"
+                  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"
                 }
               ),
-              " ",
-              "of the reservation."
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: termsModalOpen, onOpenChange: setTermsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "!max-w-[80vw] w-[80vw] max-h-[85vh] overflow-y-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "font-heading text-xl", children: "Terms and Conditions" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-sm font-sans text-foreground/80 leading-relaxed", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: 'These terms and conditions ("Terms") govern the booking of travel experiences offered through Planeta EXO ("Company"). By confirming a booking, you agree to these Terms in full.' }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "1. Bookings and payments" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A booking is confirmed upon receipt of the required deposit or full payment. The deposit amount is specified in your offer. The remaining balance must be paid by the balance due date stated in your offer." }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "2. Cancellation policy" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Cancellations made more than 60 days before departure are eligible for a full refund of the deposit. Cancellations between 30 and 60 days forfeit 50% of the deposit. Cancellations within 30 days of departure are non-refundable." }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "3. Changes and modifications" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The Company reserves the right to modify itineraries due to weather, safety, or operational reasons. Equivalent alternatives will be offered wherever possible." }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "4. Travel insurance" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Comprehensive travel insurance is strongly recommended. The Company is not liable for costs arising from trip interruption, medical emergencies, or personal loss." }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "5. Liability" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Participation in adventure activities carries inherent risk. By booking, you acknowledge and accept these risks. The Company's liability is limited to the total booking amount." }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-              DialogClose,
-              {
-                render: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: [
+                "I have read and accept the",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
-                    className: "rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-primary-foreground font-heading hover:bg-primary/90 transition-colors"
+                    onClick: () => setTermsModalOpen(true),
+                    className: "underline underline-offset-2 text-primary hover:text-primary/80 transition-colors font-semibold",
+                    children: "terms and conditions"
                   }
                 ),
-                children: "Close"
-              }
-            ) })
-          ] })
-        ] }) })
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive font-sans", children: error }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          stepIndex > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: goPrev,
-              className: "flex items-center gap-1.5 rounded-full border border-border px-5 py-2.5 text-sm text-foreground font-sans hover:bg-muted/50 transition-colors",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "w-3.5 h-3.5" }),
-                "Back"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: goNext,
-              className: cn(
-                "rounded-full bg-primary px-8 py-2.5 text-sm font-bold",
-                "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              ),
-              children: step === "payment" ? "Confirm booking" : "Next"
-            }
-          )
-        ] }),
-        stepIndex === 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onCancel,
-            className: "text-sm text-muted-foreground font-sans hover:text-foreground transition-colors self-start underline underline-offset-2",
-            children: "Cancel"
-          }
-        )
+                " ",
+                "of the reservation."
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: termsModalOpen, onOpenChange: setTermsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "!max-w-[80vw] w-[80vw] max-h-[85vh] overflow-y-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "font-heading text-xl", children: "Terms and Conditions" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-sm font-sans text-foreground/80 leading-relaxed", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: 'These terms and conditions ("Terms") govern the booking of travel experiences offered through Planeta EXO ("Company"). By confirming a booking, you agree to these Terms in full.' }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "1. Bookings and payments" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A booking is confirmed upon receipt of the required deposit or full payment. The deposit amount is specified in your offer. The remaining balance must be paid by the balance due date stated in your offer." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "2. Cancellation policy" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Cancellations made more than 60 days before departure are eligible for a full refund of the deposit. Cancellations between 30 and 60 days forfeit 50% of the deposit. Cancellations within 30 days of departure are non-refundable." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "3. Changes and modifications" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The Company reserves the right to modify itineraries due to weather, safety, or operational reasons. Equivalent alternatives will be offered wherever possible." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "4. Travel insurance" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Comprehensive travel insurance is strongly recommended. The Company is not liable for costs arising from trip interruption, medical emergencies, or personal loss." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "5. Liability" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Participation in adventure activities carries inherent risk. By booking, you acknowledge and accept these risks. The Company's liability is limited to the total booking amount." }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                DialogClose,
+                {
+                  render: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-primary-foreground font-heading hover:bg-primary/90 transition-colors"
+                    }
+                  ),
+                  children: "Close"
+                }
+              ) })
+            ] })
+          ] }) })
+        ] })
       ] })
-    ] })
-  ] });
+    }
+  );
 }
 function OfferAdventureCard({ adventure }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AdventureCard, { adventure });
@@ -1863,14 +1902,16 @@ function Offer({
   onContinue,
   continueLabel = "Book now",
   externalBookingFlow,
+  checkoutSlot,
   summaryNotesSlot,
   summaryDiscountLine,
   continueDisabled,
   className
 }) {
   const [showBooking, setShowBooking] = React18__namespace.useState(false);
+  const isShowingCheckout = !!checkoutSlot || showBooking;
   const handleBook = () => {
-    if (!externalBookingFlow) setShowBooking(true);
+    if (!checkoutSlot && !externalBookingFlow) setShowBooking(true);
     onContinue == null ? void 0 : onContinue();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-5xl mx-auto flex flex-col gap-6 pb-20 lg:pb-0", className), children: [
@@ -1886,7 +1927,7 @@ function Offer({
           ] }),
           adventures.map((adventure) => /* @__PURE__ */ jsxRuntime.jsx(AdventureCard, { adventure }, adventure.id))
         ] }),
-        !showBooking && /* @__PURE__ */ jsxRuntime.jsx(
+        !isShowingCheckout && /* @__PURE__ */ jsxRuntime.jsx(
           OfferSummarySection,
           {
             adventures,
@@ -1900,7 +1941,7 @@ function Offer({
             continueDisabled
           }
         ),
-        showBooking && !externalBookingFlow && /* @__PURE__ */ jsxRuntime.jsx(
+        isShowingCheckout && (checkoutSlot != null ? checkoutSlot : /* @__PURE__ */ jsxRuntime.jsx(
           BookingWizard,
           {
             adventures,
@@ -1908,7 +1949,7 @@ function Offer({
             depositInfo,
             onCancel: () => setShowBooking(false)
           }
-        )
+        ))
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:sticky lg:top-8", children: /* @__PURE__ */ jsxRuntime.jsx(
         OfferSidebar,
@@ -1921,7 +1962,7 @@ function Offer({
         }
       ) })
     ] }),
-    !showBooking && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-0 inset-x-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm px-4 py-3 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 max-w-5xl mx-auto", children: [
+    !isShowingCheckout && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-0 inset-x-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm px-4 py-3 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 max-w-5xl mx-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-widest text-muted-foreground font-heading", children: "Total" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-black text-primary font-heading leading-tight", children: total })
@@ -6690,6 +6731,7 @@ exports.BookingConfirmation = BookingConfirmation;
 exports.BookingConfirmationEmail = BookingConfirmationEmail;
 exports.BookingDetails = BookingDetails;
 exports.BookingForm = BookingForm;
+exports.BookingShell = BookingShell;
 exports.COUNTRIES = COUNTRIES;
 exports.CounterField = CounterField;
 exports.CountrySearchField = CountrySearchField;