@planetaexo/design-system 0.9.2 → 0.9.4

package/dist/index.cjs

@@ -3894,8 +3894,11 @@ function BookingConfirmationEmail({
   );
 }
 function BookingOtpEmail({
-  bodyMessage,
+  greeting,
+  intro,
+  code,
   expiryMessage,
+  teamSignature,
   logoUrl,
   className
 }) {
@@ -3915,15 +3918,44 @@ function BookingOtpEmail({
       className,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(EmailLogo, { src: logoUrl }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px", lineHeight: "1.5", margin: "0 0 12px" }, children: greeting }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 24px" }, children: intro }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
+          "table",
           {
-            style: {
-              fontSize: "16px",
-              lineHeight: "1.6",
-              margin: "0 0 16px"
-            },
-            children: bodyMessage
+            role: "presentation",
+            cellPadding: 0,
+            cellSpacing: 0,
+            border: 0,
+            style: { width: "100%", borderCollapse: "collapse", margin: "0 0 24px" },
+            children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                align: "center",
+                style: {
+                  backgroundColor: emailTokens.primaryLight,
+                  border: `1px solid ${emailTokens.border}`,
+                  borderRadius: "12px",
+                  padding: "24px 16px"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontFamily: emailTokens.fontFamily,
+                      fontSize: "36px",
+                      fontWeight: 700,
+                      letterSpacing: "0.3em",
+                      color: emailTokens.foreground,
+                      lineHeight: 1,
+                      // Padding esquerdo compensa letter-spacing final, mantendo visualmente centralizado.
+                      paddingLeft: "0.3em"
+                    },
+                    children: code
+                  }
+                )
+              }
+            ) }) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3933,11 +3965,12 @@ function BookingOtpEmail({
               color: emailTokens.mutedForeground,
               fontSize: "14px",
               lineHeight: "1.5",
-              margin: "0"
+              margin: "0 0 24px"
             },
             children: expiryMessage
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", lineHeight: "1.5", margin: "0" }, children: teamSignature })
       ]
     }
   );
@@ -5572,12 +5605,14 @@ function RegistrationSuccessCard({
   logo,
   logoAlt = "PlanetaEXO",
   terms,
+  termsLayout = "summary",
+  termsLabels,
   adventure,
   booking,
   traveller,
   tripInfoLabels
 }) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const isMinimal = variant === "minimal";
   const sorted = isMinimal ? [] : [...fields].sort((a, b) => {
     var _a2, _b2;
@@ -5609,40 +5644,43 @@ function RegistrationSuccessCard({
       message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
     ] }),
     hasTripInfo && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: TL.sectionTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
-      adventure && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: TL.adventureLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
+      adventure && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.adventureLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
       ] }),
-      dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground text-right min-w-0", children: dateRange })
+      dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: dateRange })
       ] }),
-      (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: TL.partnerLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground text-right min-w-0", children: adventure.partnerName })
+      (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.partnerLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: adventure.partnerName })
       ] }),
-      booking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: TL.bookingLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-mono tabular-nums text-right min-w-0", children: booking.id })
+      booking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.bookingLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-mono tabular-nums text-right min-w-0 break-words", children: booking.id })
       ] }),
-      traveller && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: TL.travellerLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
+      traveller && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.travellerLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
       ] })
     ] }) }),
-    sorted.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: f.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
+    sorted.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: f.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
         f,
         answers[f.id]
       ) })
     ] }, f.id)) }) }),
-    !isMinimal && terms && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: "Terms & Conditions", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm font-ui", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-        "inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs font-bold",
-        terms.accepted ? "bg-primary" : "bg-destructive"
-      ), children: terms.accepted ? "\u2713" : "\u2717" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: terms.accepted ? "text-primary font-medium" : "text-destructive font-medium", children: terms.accepted ? "Accepted" : "Not accepted" })
+    !isMinimal && terms && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: (_f = termsLabels == null ? void 0 : termsLabels.title) != null ? _f : "Terms & Conditions", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 text-sm font-ui", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+          "inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs font-bold",
+          terms.accepted ? "bg-primary" : "bg-destructive"
+        ), children: terms.accepted ? "\u2713" : "\u2717" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: terms.accepted ? "text-primary font-medium" : "text-destructive font-medium", children: terms.accepted ? (_g = termsLabels == null ? void 0 : termsLabels.accepted) != null ? _g : "Accepted" : (_h = termsLabels == null ? void 0 : termsLabels.notAccepted) != null ? _h : "Not accepted" })
+      ] }),
+      termsLayout === "full" && terms.markdown.trim().length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) })
     ] }) })
   ] });
 }
@@ -5678,11 +5716,19 @@ var OTPCodeInput = ({
     const numeric = raw.replace(/\D/g, "");
     if (!numeric) return;
     const newDigits = [...digits];
-    newDigits[index] = numeric[numeric.length - 1];
-    updateValue(newDigits);
-    if (index < length - 1) {
-      focusSlot(index + 1);
+    if (numeric.length === 1) {
+      newDigits[index] = numeric;
+      updateValue(newDigits);
+      if (index < length - 1) focusSlot(index + 1);
+      return;
     }
+    const toPaste = numeric.slice(0, length - index);
+    for (let i = 0; i < toPaste.length; i++) {
+      newDigits[index + i] = toPaste[i];
+    }
+    updateValue(newDigits);
+    const lastFilled = Math.min(index + toPaste.length, length) - 1;
+    focusSlot(lastFilled < length - 1 ? lastFilled + 1 : lastFilled);
   };
   const handleKeyDown = (index, e) => {
     if (e.key === "Backspace") {