@planetaexo/design-system 0.52.1 → 0.52.3

package/dist/index.cjs

@@ -9968,6 +9968,30 @@ function TrustpilotFallback({ config }) {
     }
   );
 }
+
+// src/lib/image-webp.ts
+var WEBP_ELIGIBLE_EXTENSION = /\.(jpe?g|png)(\?[^"'\s>]*)?$/i;
+function webpVariantUrl(src) {
+  var _a;
+  if (!src) return null;
+  const m = src.match(WEBP_ELIGIBLE_EXTENSION);
+  if (!m) return null;
+  const query = (_a = m[2]) != null ? _a : "";
+  const withoutQuery = query ? src.slice(0, -query.length) : src;
+  return `${withoutQuery}.webp${query}`;
+}
+function Picture(_a) {
+  var _b = _a, { src, extraSources } = _b, imgProps = __objRest(_b, ["src", "extraSources"]);
+  const webp = webpVariantUrl(src);
+  if (!webp) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", __spreadValues({ src }, imgProps));
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("picture", { style: { display: "contents" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("source", { srcSet: webp, type: "image/webp" }),
+    extraSources,
+    /* @__PURE__ */ jsxRuntime.jsx("img", __spreadValues({ src }, imgProps))
+  ] });
+}
 function ItineraryDayCard({
   stop,
   onOpen
@@ -10321,7 +10345,7 @@ function Lightbox({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+          Picture,
           {
             src: photo.src,
             alt: (_a = photo.alt) != null ? _a : `Photo ${index + 1}`,
@@ -10389,7 +10413,7 @@ function PhotoTile({
       "aria-label": (_a = photo.alt) != null ? _a : `Photo ${index + 1}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+          Picture,
           {
             src: photo.src,
             alt: (_b = photo.alt) != null ? _b : `Photo ${index + 1}`,
@@ -10509,7 +10533,7 @@ function MasonryGallery({
           "aria-label": (_a = p.alt) != null ? _a : `Photo ${i + 1}`,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+              Picture,
               {
                 src: p.src,
                 alt: (_b = p.alt) != null ? _b : `Photo ${i + 1}`,
@@ -10548,7 +10572,7 @@ function FilmstripGallery({
         "aria-label": (_a = p.alt) != null ? _a : `Photo ${i + 1}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+            Picture,
             {
               src: p.src,
               alt: (_b = p.alt) != null ? _b : `Photo ${i + 1}`,
@@ -10613,7 +10637,7 @@ function FeaturedGallery({
           "aria-label": (_a = p.alt) != null ? _a : `Photo ${i + 4}`,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+              Picture,
               {
                 src: p.src,
                 alt: (_b = p.alt) != null ? _b : `Photo ${i + 4}`,
@@ -10665,7 +10689,7 @@ function CarouselGallery({
             "aria-label": `Open photo ${index + 1} fullscreen`,
             className: "absolute inset-0 w-full h-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+              Picture,
               {
                 src: photo.src,
                 alt: (_a = photo.alt) != null ? _a : `Photo ${index + 1}`,
@@ -12037,7 +12061,7 @@ function TripCardEditorial(props) {
   const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-[4/3] overflow-hidden bg-muted", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
+        Picture,
         {
           src: image,
           alt: imageAlt,
@@ -12128,7 +12152,7 @@ function TripCard(props) {
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+          Picture,
           {
             src: image,
             alt: imageAlt,
@@ -12275,7 +12299,7 @@ function TripHeader({
               ),
               videoUrl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 hasHeroImage ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
+                  Picture,
                   {
                     src: validImages[0],
                     alt: "",
@@ -12312,7 +12336,7 @@ function TripHeader({
                   }
                 )
               ] }) : hasHeroImage ? /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
+                Picture,
                 {
                   src: currentSrc,
                   alt: title,
@@ -12889,6 +12913,7 @@ function TripPage({
   optionalExtras,
   accommodation,
   accommodationGallery,
+  accommodationGalleryVariant = "gridCompact",
   whenItOperates,
   food,
   foodGallery,
@@ -13210,7 +13235,7 @@ function TripPage({
                               PhotoGallery,
                               {
                                 photos: accommodationGallery,
-                                variant: "gridCompact",
+                                variant: accommodationGalleryVariant,
                                 initialVisible: 6
                               }
                             ) })
@@ -13291,7 +13316,7 @@ function TripPage({
                             (sectionIcons == null ? void 0 : sectionIcons.weather) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary [&>svg]:h-5 [&>svg]:w-5", children: sectionIcons.weather }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SunIcon, { className: "h-5 w-5 text-primary" }),
                             (_k = labels == null ? void 0 : labels.weather) != null ? _k : "Weather"
                           ] }) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "pb-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start gap-3 rounded-xl bg-muted/60 border border-border p-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base text-foreground leading-relaxed space-y-2 [&_strong]:font-semibold", children: weather }) }) })
+                          /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "pb-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base text-foreground leading-relaxed space-y-3 [&_strong]:font-semibold [&_a]:text-primary [&_a]:underline", children: weather }) })
                         ]
                       }
                     ),
@@ -14789,6 +14814,7 @@ exports.PaymentReceiptEmail = PaymentReceiptEmail;
 exports.PaymentReminderEmail = PaymentReminderEmail;
 exports.PhoneCountrySelect = PhoneCountrySelect;
 exports.PhotoGallery = PhotoGallery;
+exports.Picture = Picture;
 exports.PricingTrip = PricingTrip;
 exports.RegistrationForm = RegistrationForm;
 exports.RegistrationProgressBar = RegistrationProgressBar;
@@ -14814,6 +14840,7 @@ exports.getStripeAppearance = getStripeAppearance;
 exports.itineraryDaySpecIcons = itineraryDaySpecIcons;
 exports.stripeAppearance = stripeAppearance;
 exports.validateCpf = validateCpf;
+exports.webpVariantUrl = webpVariantUrl;
 exports.wrapEmailHtml = wrapEmailHtml;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map