@planetaexo/design-system 0.76.0 → 0.77.1

package/dist/index.cjs

@@ -11637,7 +11637,7 @@ function Picture(_a) {
   var _a2, _b2;
   const ref = React20__namespace.useRef(null);
   const [visible, setVisible] = React20__namespace.useState(eager);
-  const [loaded, setLoaded] = React20__namespace.useState(false);
+  const [loaded, setLoaded] = React20__namespace.useState(eager);
   React20__namespace.useEffect(() => {
     if (eager || visible) return;
     const el = ref.current;
@@ -11657,7 +11657,10 @@ function Picture(_a) {
     io.observe(el);
     return () => io.disconnect();
   }, [eager, visible, rootMargin]);
+  const prevSrcRef = React20__namespace.useRef(src);
   React20__namespace.useEffect(() => {
+    if (prevSrcRef.current === src) return;
+    prevSrcRef.current = src;
     setLoaded(false);
   }, [src]);
   const webp = webpVariantUrl(src);
@@ -12036,7 +12039,7 @@ function Lightbox({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "fixed inset-0 z-50 bg-black/92 flex flex-col items-center justify-center",
+      className: "fixed inset-0 z-[1000] bg-black/92 flex flex-col items-center justify-center",
       onClick: onClose,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -12224,7 +12227,7 @@ function FeedLightbox({
       if (frame) cancelAnimationFrame(frame);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 bg-zinc-950 text-white", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[1000] bg-zinc-950 text-white", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -14872,6 +14875,8 @@ function useHlsVideo(videoRef, src) {
 }
 function TripHeader({
   images,
+  heroImageSrcSet,
+  heroImageSizes,
   videoUrl,
   title,
   breadcrumb,
@@ -14951,6 +14956,8 @@ function TripHeader({
                   Picture,
                   {
                     src: validImages[0],
+                    srcSet: heroImageSrcSet,
+                    sizes: heroImageSizes,
                     alt: "",
                     "aria-hidden": true,
                     fetchPriority: "high",
@@ -14989,6 +14996,8 @@ function TripHeader({
                 Picture,
                 {
                   src: currentSrc,
+                  srcSet: safeIndex === 0 ? heroImageSrcSet : void 0,
+                  sizes: safeIndex === 0 ? heroImageSizes : void 0,
                   alt: title,
                   fetchPriority: safeIndex === 0 ? "high" : "auto",
                   eager: safeIndex === 0,
@@ -15561,6 +15570,8 @@ function TripPage({
   duration,
   groupSize,
   images,
+  heroImageSrcSet,
+  heroImageSizes,
   videoUrl,
   breadcrumb,
   chips,
@@ -15792,6 +15803,8 @@ function TripPage({
               TripHeader,
               {
                 images,
+                heroImageSrcSet,
+                heroImageSizes,
                 videoUrl,
                 title,
                 breadcrumb,
@@ -16301,6 +16314,7 @@ function CategoryPage2({
   faqInitialCount = 5,
   gallery,
   galleryTitle,
+  galleryLightbox = "classic",
   loadMoreLabel,
   showLessLabel,
   seeMoreLabel,
@@ -16563,7 +16577,15 @@ function CategoryPage2({
     ] }),
     gallery && gallery.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "pt-4", children: [
       galleryTitle && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mx-auto w-full max-w-6xl px-6 sm:px-8 mb-6 text-2xl sm:text-3xl font-bold text-foreground font-heading", children: galleryTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx(PhotoGallery, { photos: gallery, variant: "gridCompact", initialVisible: 8 })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PhotoGallery,
+        {
+          photos: gallery,
+          variant: "gridCompact",
+          initialVisible: 8,
+          lightbox: galleryLightbox
+        }
+      )
     ] }),
     (aboutTitle || aboutContent || blogPostsTitle || blogPosts && blogPosts.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("section", { className: "w-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-6xl px-6 sm:px-8 py-14", children: [
       (aboutTitle || blogPostsTitle) && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl sm:text-3xl font-bold text-foreground font-heading mb-5", children: aboutTitle != null ? aboutTitle : blogPostsTitle }),