dune-react 0.0.23 → 0.0.25

package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js

@@ -12,7 +12,11 @@ const ScrollParallax = (props) => {
     ...ScrollParallaxDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
@@ -22,42 +26,60 @@ const ScrollParallax = (props) => {
   });
   const x = useTransform(scrollYProgress, [0, 1], ["0%", "-100%"]);
   if (isEditor) {
-    return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
-      /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
-        /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
-        /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "px-[5%] py-12", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          className: "aspect-video w-full object-cover",
-          src: image.src,
-          alt: image.alt
-        }
-      ) }, index)) }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
-    /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
-      /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
-      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "h-[400vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 mt-[-10vh] flex h-screen w-screen max-w-full flex-col items-start justify-center overflow-hidden px-[5%] md:mt-0", children: /* @__PURE__ */ jsx(
-      motion.div,
+    return /* @__PURE__ */ jsxs(
+      SectionWrapper,
       {
-        style: { x },
-        className: "flex w-[150vh] items-center gap-x-6 sm:w-[200vh] md:gap-x-8 lg:w-[400vh]",
-        children: images.map((image, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+        ref: transformRef,
+        className: cn(sectionClassName),
+        style: sectionStyle,
+        css,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
+            /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+            /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "px-[5%] py-12", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+            CompoundImage,
+            {
+              className: "aspect-video w-full object-cover",
+              src: image.src,
+              alt: image.alt
+            }
+          ) }, index)) }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      ref: transformRef,
+      className: cn(sectionClassName),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
+          /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-[400vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 mt-[-10vh] flex h-screen w-screen max-w-full flex-col items-start justify-center overflow-hidden px-[5%] md:mt-0", children: /* @__PURE__ */ jsx(
+          motion.div,
           {
-            className: "h-[80vh] max-h-[25rem] object-cover sm:max-h-[30rem] sm:w-[90vw] md:max-h-[40rem] md:w-[80vw] lg:max-h-none",
-            src: image.src,
-            alt: image.alt
+            style: { x },
+            className: "flex w-[150vh] items-center gap-x-6 sm:w-[200vh] md:gap-x-8 lg:w-[400vh]",
+            children: images.map((image, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                className: "h-[80vh] max-h-[25rem] object-cover sm:max-h-[30rem] sm:w-[90vw] md:max-h-[40rem] md:w-[80vw] lg:max-h-none",
+                src: image.src,
+                alt: image.alt
+              }
+            ) }) }, index))
           }
-        ) }) }, index))
-      }
-    ) }) })
-  ] });
+        ) }) })
+      ]
+    }
+  );
 };
 const ScrollParallaxDefaults = {
   tagline: "",
@@ -66,9 +88,18 @@ const ScrollParallaxDefaults = {
   button: { label: "View all" },
   buttons: [],
   images: [
-    { src: "https://picsum.photos/seed/scroll-1/1200/800", alt: "Gallery image 1" },
-    { src: "https://picsum.photos/seed/scroll-2/1200/800", alt: "Gallery image 2" },
-    { src: "https://picsum.photos/seed/scroll-3/1200/800", alt: "Gallery image 3" }
+    {
+      src: "https://picsum.photos/seed/scroll-1/1200/800",
+      alt: "Gallery image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/scroll-2/1200/800",
+      alt: "Gallery image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/scroll-3/1200/800",
+      alt: "Gallery image 3"
+    }
   ],
   projects: [],
   hoverLinks: [],