@planetaexo/design-system 0.78.0 → 0.80.0

package/dist/index.cjs

@@ -19255,6 +19255,320 @@ 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
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var TONES = {
+  light: {
+    bg: "#faf7f1",
+    vars: {
+      "--ps-eyebrow": "#1a5f56",
+      "--ps-head": "#2e2d2c",
+      "--ps-sub": "#74726e",
+      "--ps-chip-bd": "#ccd2d0",
+      "--ps-chip-fg": "#2e2d2c",
+      "--ps-chip-hover-bg": "#1a5f56",
+      "--ps-chip-hover-fg": "#ffffff",
+      "--ps-feat-bg": "#1a5f56",
+      "--ps-feat-fg": "#ffffff",
+      "--ps-feat-hover-bg": "#0d3832"
+    }
+  },
+  dark: {
+    bg: "#14352e",
+    vars: {
+      "--ps-eyebrow": "#a7e8c4",
+      "--ps-head": "#f4f1e9",
+      "--ps-sub": "rgba(244,241,233,.7)",
+      "--ps-chip-bd": "rgba(244,241,233,.22)",
+      "--ps-chip-fg": "#f4f1e9",
+      "--ps-chip-hover-bg": "#f4f1e9",
+      "--ps-chip-hover-fg": "#14352e",
+      "--ps-feat-bg": "#bff0d6",
+      "--ps-feat-fg": "#08231e",
+      "--ps-feat-hover-bg": "#a7e8c4"
+    }
+  }
+};
+var SIZES = {
+  md: {
+    pad: "py-20 sm:py-28",
+    heading: "text-2xl sm:text-3xl lg:text-4xl",
+    chip: "px-5 py-2.5 text-sm",
+    gap: "gap-2.5",
+    chipsMt: "mt-9"
+  },
+  sm: {
+    pad: "py-16 sm:py-24",
+    heading: "text-xl sm:text-2xl lg:text-3xl",
+    chip: "px-3.5 py-1.5 text-[13px]",
+    gap: "gap-2",
+    chipsMt: "mt-7"
+  }
+};
+var SCOPED_CSS = `
+.ps-chip{border:1px solid var(--ps-chip-bd);background:transparent;color:var(--ps-chip-fg);text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
+.ps-chip:hover{background:var(--ps-chip-hover-bg);border-color:var(--ps-chip-hover-bg);color:var(--ps-chip-hover-fg)}
+.ps-chip[data-featured="true"]{background:var(--ps-feat-bg);border-color:var(--ps-feat-bg);color:var(--ps-feat-fg)}
+.ps-chip[data-featured="true"]:hover{background:var(--ps-feat-hover-bg);border-color:var(--ps-feat-hover-bg)}
+`;
+function PopularSearches({
+  eyebrow,
+  title,
+  subtitle,
+  chips,
+  tone = "light",
+  size = "md",
+  align = "center",
+  className
+}) {
+  const t = TONES[tone];
+  const s = SIZES[size];
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cn("ps-root w-full", className),
+      style: __spreadValues({ backgroundColor: t.bg }, t.vars),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: SCOPED_CSS } }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto w-full max-w-6xl px-6 sm:px-8",
+              s.pad,
+              centered && "text-center"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-2xl", centered && "mx-auto"), children: [
+                eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "mb-3 font-ui text-xs font-bold uppercase tracking-[0.24em]",
+                    style: { color: "var(--ps-eyebrow)" },
+                    children: eyebrow
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "font-heading font-black uppercase leading-[1.05]",
+                      s.heading
+                    ),
+                    style: { color: "var(--ps-head)" },
+                    children: title
+                  }
+                ),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn("mt-3 max-w-[46ch] text-base", centered && "mx-auto"),
+                    style: { color: "var(--ps-sub)" },
+                    children: subtitle
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex max-w-4xl flex-wrap items-center",
+                    s.gap,
+                    s.chipsMt,
+                    centered ? "mx-auto justify-center" : "justify-start"
+                  ),
+                  children: chips.map((chip, i) => {
+                    const className2 = "ps-chip inline-flex items-center rounded-full font-ui font-bold " + s.chip;
+                    const inner = chip.label;
+                    return chip.href ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: chip.href,
+                        onClick: chip.onClick,
+                        "data-featured": chip.featured ? "true" : void 0,
+                        className: className2,
+                        children: inner
+                      },
+                      i
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-featured": chip.featured ? "true" : void 0,
+                        className: className2,
+                        children: inner
+                      },
+                      i
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function RotatingSubtitle({
   phrases,
   interval,
@@ -19950,6 +20264,7 @@ exports.PhoneCountrySelect = PhoneCountrySelect;
 exports.PhotoGallery = PhotoGallery;
 exports.PhotoTourProvider = PhotoTourProvider;
 exports.Picture = Picture;
+exports.PopularSearches = PopularSearches;
 exports.PriceProgress = PriceProgress;
 exports.PricingMatrixCard = PricingMatrixCard;
 exports.PricingTrip = PricingTrip;
@@ -19975,6 +20290,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;