@planetaexo/design-system 0.77.1 → 0.79.0

package/dist/index.cjs

@@ -1565,12 +1565,28 @@ function AdventureCard({
           item
         ] }, i)) })
       ] }),
-      adventure.cancellationPolicy && adventure.cancellationPolicy.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
+      adventure.cancellationPolicy && adventure.cancellationPolicy.trim() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_r = adventure.cancellationPolicyLabel) != null ? _r : "Cancellation policy" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.cancellationPolicy.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-base text-muted-foreground font-sans", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-2.5" }),
-          item
-        ] }, i)) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "text-foreground",
+              "[&_p]:text-base [&_p]:text-foreground/80 [&_p]:leading-snug [&_p]:mb-2",
+              "[&_strong]:font-bold [&_strong]:text-foreground",
+              "[&_em]:italic",
+              "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2",
+              "[&_ul:not(.list-check):not(.list-cross)]:list-disc [&_ul:not(.list-check):not(.list-cross)]:pl-5 [&_ul:not(.list-check):not(.list-cross)]:space-y-1",
+              "[&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1",
+              "[&_li]:text-base [&_li]:text-muted-foreground [&_li]:leading-snug",
+              "[&_.list-check]:list-none [&_.list-check]:pl-5 [&_.list-check]:space-y-1",
+              "[&_.list-check_li]:relative [&_.list-check_li]:before:absolute [&_.list-check_li]:before:-left-5 [&_.list-check_li]:before:content-['\u2713'] [&_.list-check_li]:before:text-primary [&_.list-check_li]:before:font-bold",
+              "[&_.list-cross]:list-none [&_.list-cross]:pl-5 [&_.list-cross]:space-y-1",
+              "[&_.list-cross_li]:relative [&_.list-cross_li]:before:absolute [&_.list-cross_li]:before:-left-5 [&_.list-cross_li]:before:content-['\u2717'] [&_.list-cross_li]:before:text-destructive [&_.list-cross_li]:before:font-bold"
+            ),
+            dangerouslySetInnerHTML: { __html: adventure.cancellationPolicy }
+          }
+        )
       ] })
     ] })
   ] });
@@ -2866,19 +2882,24 @@ function AdventureSection({
           i
         )) })
       ] }),
-      adventure.cancellationPolicy && adventure.cancellationPolicy.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+      adventure.cancellationPolicy && adventure.cancellationPolicy.trim() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: (_k = (_j = labels == null ? void 0 : labels.adventureSections) == null ? void 0 : _j.cancellationPolicy) != null ? _k : "Cancellation policy" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.cancellationPolicy.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "li",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            className: "flex items-start gap-2 text-sm text-muted-foreground font-sans",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-2.5" }),
-              item
-            ]
-          },
-          i
-        )) })
+            className: cn(
+              "text-foreground",
+              "[&_p]:text-sm [&_p]:text-foreground/80 [&_p]:leading-snug [&_p]:mb-2",
+              "[&_strong]:font-bold [&_strong]:text-foreground",
+              "[&_em]:italic",
+              "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2",
+              "[&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1",
+              "[&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1",
+              "[&_li]:text-sm [&_li]:text-muted-foreground [&_li]:leading-snug"
+            ),
+            dangerouslySetInnerHTML: { __html: adventure.cancellationPolicy }
+          }
+        )
       ] })
     ] }),
     adventure.rooms && adventure.rooms.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border px-5 lg:px-6 py-5 flex flex-col gap-3", children: [
@@ -4139,6 +4160,7 @@ var DEFAULT_LABELS = {
   lineItemEquals: "=",
   includedHeading: "O que est\xE1 incluso",
   notIncludedHeading: "O que n\xE3o est\xE1 incluso",
+  cancellationPolicyHeading: "Cancellation policy",
   childBadge: "child",
   adultsUnit: "adult(s)",
   childrenUnit: "child(ren)",
@@ -4170,6 +4192,7 @@ function BookingAdventureCard({
   partner,
   included,
   notIncluded,
+  cancellationPolicy,
   lineItems,
   subtotal,
   rooms,
@@ -4177,7 +4200,7 @@ function BookingAdventureCard({
   labels,
   className
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
   const l = {
     travellersHeading: (_a = labels == null ? void 0 : labels.travellersHeading) != null ? _a : DEFAULT_LABELS.travellersHeading,
     detailsHeading: (_b = labels == null ? void 0 : labels.detailsHeading) != null ? _b : DEFAULT_LABELS.detailsHeading,
@@ -4188,18 +4211,19 @@ function BookingAdventureCard({
     lineItemEquals: (_g = labels == null ? void 0 : labels.lineItemEquals) != null ? _g : DEFAULT_LABELS.lineItemEquals,
     includedHeading: (_h = labels == null ? void 0 : labels.includedHeading) != null ? _h : DEFAULT_LABELS.includedHeading,
     notIncludedHeading: (_i = labels == null ? void 0 : labels.notIncludedHeading) != null ? _i : DEFAULT_LABELS.notIncludedHeading,
-    childBadge: (_j = labels == null ? void 0 : labels.childBadge) != null ? _j : DEFAULT_LABELS.childBadge,
-    adultsUnit: (_k = labels == null ? void 0 : labels.adultsUnit) != null ? _k : DEFAULT_LABELS.adultsUnit,
-    childrenUnit: (_l = labels == null ? void 0 : labels.childrenUnit) != null ? _l : DEFAULT_LABELS.childrenUnit,
-    accommodationsHeading: (_m = labels == null ? void 0 : labels.accommodationsHeading) != null ? _m : DEFAULT_LABELS.accommodationsHeading,
-    accommodationRoomHeading: (_n = labels == null ? void 0 : labels.accommodationRoomHeading) != null ? _n : DEFAULT_LABELS.accommodationRoomHeading,
+    cancellationPolicyHeading: (_j = labels == null ? void 0 : labels.cancellationPolicyHeading) != null ? _j : DEFAULT_LABELS.cancellationPolicyHeading,
+    childBadge: (_k = labels == null ? void 0 : labels.childBadge) != null ? _k : DEFAULT_LABELS.childBadge,
+    adultsUnit: (_l = labels == null ? void 0 : labels.adultsUnit) != null ? _l : DEFAULT_LABELS.adultsUnit,
+    childrenUnit: (_m = labels == null ? void 0 : labels.childrenUnit) != null ? _m : DEFAULT_LABELS.childrenUnit,
+    accommodationsHeading: (_n = labels == null ? void 0 : labels.accommodationsHeading) != null ? _n : DEFAULT_LABELS.accommodationsHeading,
+    accommodationRoomHeading: (_o = labels == null ? void 0 : labels.accommodationRoomHeading) != null ? _o : DEFAULT_LABELS.accommodationRoomHeading,
     bedArrangementLabels: {
-      DOUBLE: (_p = (_o = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _o.DOUBLE) != null ? _p : DEFAULT_LABELS.bedArrangementLabels.DOUBLE,
-      TWIN: (_r = (_q = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _q.TWIN) != null ? _r : DEFAULT_LABELS.bedArrangementLabels.TWIN,
-      SINGLE: (_t = (_s = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _s.SINGLE) != null ? _t : DEFAULT_LABELS.bedArrangementLabels.SINGLE,
-      TRIPLE: (_v = (_u = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _u.TRIPLE) != null ? _v : DEFAULT_LABELS.bedArrangementLabels.TRIPLE,
-      QUADRUPLE: (_x = (_w = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _w.QUADRUPLE) != null ? _x : DEFAULT_LABELS.bedArrangementLabels.QUADRUPLE,
-      QUINTUPLE: (_z = (_y = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _y.QUINTUPLE) != null ? _z : DEFAULT_LABELS.bedArrangementLabels.QUINTUPLE
+      DOUBLE: (_q = (_p = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _p.DOUBLE) != null ? _q : DEFAULT_LABELS.bedArrangementLabels.DOUBLE,
+      TWIN: (_s = (_r = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _r.TWIN) != null ? _s : DEFAULT_LABELS.bedArrangementLabels.TWIN,
+      SINGLE: (_u = (_t = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _t.SINGLE) != null ? _u : DEFAULT_LABELS.bedArrangementLabels.SINGLE,
+      TRIPLE: (_w = (_v = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _v.TRIPLE) != null ? _w : DEFAULT_LABELS.bedArrangementLabels.TRIPLE,
+      QUADRUPLE: (_y = (_x = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _x.QUADRUPLE) != null ? _y : DEFAULT_LABELS.bedArrangementLabels.QUADRUPLE,
+      QUINTUPLE: (_A = (_z = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _z.QUINTUPLE) != null ? _A : DEFAULT_LABELS.bedArrangementLabels.QUINTUPLE
     }
   };
   const hasTravellers = !!travellers && travellers.length > 0;
@@ -4207,6 +4231,7 @@ function BookingAdventureCard({
   const hasDescription = !!description && description.trim().length > 0;
   const hasIncluded = !!included && included.length > 0;
   const hasNotIncluded = !!notIncluded && notIncluded.length > 0;
+  const hasCancellationPolicy = !!cancellationPolicy && cancellationPolicy.trim().length > 0;
   const hasLineItems = lineItems.length > 0;
   const hasRooms = !!rooms && rooms.length > 0;
   const dateRange = endDate ? `${startDate} \u2192 ${endDate}` : startDate;
@@ -4891,6 +4916,32 @@ function BookingAdventureCard({
               i
             ))
           ] }),
+          hasCancellationPolicy && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "10px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h4",
+              {
+                style: {
+                  fontSize: "14px",
+                  fontWeight: 700,
+                  color: emailTokens.foreground,
+                  margin: "0 0 8px 0"
+                },
+                children: l.cancellationPolicyHeading
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  fontSize: "14px",
+                  color: emailTokens.bodyText,
+                  lineHeight: "1.4",
+                  margin: 0
+                },
+                dangerouslySetInnerHTML: { __html: cancellationPolicy }
+              }
+            )
+          ] }),
           hasLineItems && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "hr",
@@ -5283,6 +5334,7 @@ var DEFAULT_LABELS3 = {
   itineraryLabel: "Details",
   includedLabel: "O que est\xE1 incluso",
   notIncludedLabel: "O que n\xE3o est\xE1 incluso",
+  cancellationPolicyLabel: "Cancellation policy",
   pricingLabel: "Pricing",
   subtotalLabel: "Subtotal",
   totalLabel: "Total",
@@ -5461,6 +5513,7 @@ function BookingPaymentConfirmationEmail({
                   partner: adventure.partnerName,
                   included: adventure.included,
                   notIncluded: adventure.notIncluded,
+                  cancellationPolicy: adventure.cancellationPolicy,
                   lineItems: lineItemsToPass,
                   subtotal: adventure.subtotal,
                   rooms: adventure.rooms,
@@ -5472,6 +5525,7 @@ function BookingPaymentConfirmationEmail({
                     subtotalLabel: l.subtotalLabel,
                     includedHeading: l.includedLabel,
                     notIncludedHeading: l.notIncludedLabel,
+                    cancellationPolicyHeading: l.cancellationPolicyLabel,
                     childBadge: l.childBadge,
                     adultsUnit: l.adultsUnit,
                     childrenUnit: l.childrenUnit,
@@ -10429,9 +10483,15 @@ function CancellationForm({
                 ] })
               ] }),
               selected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 pl-7 space-y-4", children: [
-                adv.cancellationPolicy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md bg-muted/50 border border-border p-3", children: [
+                adv.cancellationPolicy && adv.cancellationPolicy.trim() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md bg-muted/50 border border-border p-3", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-ui font-semibold uppercase tracking-wide text-muted-foreground mb-1", children: labels.policyHeading }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground whitespace-pre-line", children: adv.cancellationPolicy })
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "text-sm text-foreground [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:mb-1 [&_p]:mb-2 [&_p:last-child]:mb-0 [&_a]:underline",
+                      dangerouslySetInnerHTML: { __html: adv.cancellationPolicy }
+                    }
+                  )
                 ] }),
                 adv.participants.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-ui font-semibold uppercase tracking-wide text-muted-foreground mb-2", children: labels.participantsHeading }),
@@ -19195,6 +19255,167 @@ function USP({
     )
   ] }) });
 }
+var C = {
+  imageOverlay: "linear-gradient(90deg, rgba(7,33,27,.93) 0%, rgba(8,42,34,.82) 52%, rgba(8,42,34,.62) 100%)",
+  baseBg: "#0a2c25",
+  eyebrow: "#a7e8c4",
+  head: "#f4f1e9",
+  sub: "rgba(244,241,233,.78)",
+  desc: "rgba(244,241,233,.72)",
+  divider: "rgba(244,241,233,.16)",
+  chipBg: "rgba(167,232,196,.16)",
+  chipIcon: "#bff0d6",
+  ctaBg: "#bff0d6",
+  ctaText: "#08231e"
+};
+var COLS2 = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+var ArrowIcon3 = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "18",
+    height: "18",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    className: "ml-2",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 5 7 7-7 7" })
+    ]
+  }
+);
+function USPBand({
+  eyebrow,
+  heading,
+  subheading,
+  items,
+  imageSrc,
+  cta,
+  columns,
+  className
+}) {
+  const cols = columns != null ? columns : Math.min(Math.max(items.length, 2), 4);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cn("relative w-full overflow-hidden", className),
+      style: { backgroundColor: C.baseBg },
+      children: [
+        imageSrc && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: imageSrc,
+              alt: "",
+              "aria-hidden": true,
+              loading: "lazy",
+              decoding: "async",
+              className: "absolute inset-0 h-full w-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-0",
+              style: { background: C.imageOverlay }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto w-full max-w-6xl px-6 py-20 sm:px-8 sm:py-24", children: [
+          eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "font-heading text-xs font-bold uppercase tracking-[0.2em]",
+              style: { color: C.eyebrow },
+              children: eyebrow
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "mt-4 max-w-[15ch] font-heading text-3xl font-black uppercase leading-[0.98] tracking-tight sm:text-4xl lg:text-5xl",
+              style: { color: C.head },
+              children: heading
+            }
+          ),
+          subheading && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "mt-4 max-w-[52ch] font-sans text-lg leading-relaxed",
+              style: { color: C.sub },
+              children: subheading
+            }
+          ),
+          cta && /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: cta.href,
+              onClick: cta.onClick,
+              className: "mt-7 inline-flex items-center rounded-full px-6 py-3 font-heading text-sm font-bold uppercase tracking-wide no-underline transition-transform duration-200 hover:-translate-y-0.5",
+              style: { backgroundColor: C.ctaBg, color: C.ctaText },
+              children: [
+                cta.label,
+                /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon3, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mt-14 grid grid-cols-1 gap-x-8 gap-y-10 lg:gap-x-0",
+                COLS2[cols]
+              ),
+              children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "lg:px-7 lg:[&:first-child]:pl-0 lg:[&:not(:first-child)]:border-l lg:[&:not(:first-child)]:border-solid",
+                  style: { borderColor: C.divider },
+                  children: [
+                    item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "mb-5 flex h-[54px] w-[54px] items-center justify-center rounded-full [&>svg]:size-6",
+                        style: { backgroundColor: C.chipBg, color: C.chipIcon },
+                        children: item.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        className: "font-heading text-lg font-bold leading-snug",
+                        style: { color: C.head },
+                        children: item.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: "mt-3 font-sans text-[15px] leading-relaxed",
+                        style: { color: C.desc },
+                        children: item.description
+                      }
+                    )
+                  ]
+                },
+                i
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function RotatingSubtitle({
   phrases,
   interval,
@@ -19915,6 +20136,7 @@ exports.TripHeader = TripHeader;
 exports.TripPage = TripPage;
 exports.TrustpilotEmbed = TrustpilotEmbed;
 exports.USP = USP;
+exports.USPBand = USPBand;
 exports.buttonVariants = buttonVariants;
 exports.chipVariants = chipVariants;
 exports.cn = cn;