dune-react 0.0.23 → 0.0.25

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

@@ -8,18 +8,39 @@ import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const ScrollParallaxPortfolio = (props) => {
-  const { projects, styles } = {
+  const { projects: projects2, styles } = {
     ...ScrollParallaxPortfolioDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, animation = "threeImageParallax" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    animation = "threeImageParallax"
+  } = styles ?? {};
   if (animation === "scaleOpacity") {
-    return /* @__PURE__ */ jsx(ScaleOpacityVariant, { projects, sectionClassName, sectionStyle, css });
+    return /* @__PURE__ */ jsx(
+      ScaleOpacityVariant,
+      {
+        projects: projects2,
+        sectionClassName,
+        sectionStyle,
+        css
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(ThreeImageParallaxVariant, { projects, sectionClassName, sectionStyle, css });
+  return /* @__PURE__ */ jsx(
+    ThreeImageParallaxVariant,
+    {
+      projects: projects2,
+      sectionClassName,
+      sectionStyle,
+      css
+    }
+  );
 };
 const ThreeImageParallaxVariant = ({
-  projects,
+  projects: projects2,
   sectionClassName,
   sectionStyle,
   css
@@ -37,19 +58,29 @@ const ThreeImageParallaxVariant = ({
     restDelta: 1e-3,
     mass: 0.5
   });
-  const computedStyles = projects.map((_, index) => {
-    const blockOffset = projects.length ? index / projects.length : 0;
+  const computedStyles = projects2.map((_, index) => {
+    const blockOffset = projects2.length ? index / projects2.length : 0;
     return {
       headerStyles: {
         opacity: useTransform(
           smoothProgress,
-          [45e-4 + blockOffset, 0.022 + blockOffset, 0.06 + blockOffset, 0.082 + blockOffset],
+          [
+            45e-4 + blockOffset,
+            0.022 + blockOffset,
+            0.06 + blockOffset,
+            0.082 + blockOffset
+          ],
           [0, 1, 1, 0],
           { ease: easeInOut }
         ),
         scale: useTransform(
           smoothProgress,
-          [0 + blockOffset, 0.022 + blockOffset, 0.06 + blockOffset, 0.082 + blockOffset],
+          [
+            0 + blockOffset,
+            0.022 + blockOffset,
+            0.06 + blockOffset,
+            0.082 + blockOffset
+          ],
           [0.9, 1, 1, 0.9],
           { ease: easeInOut }
         )
@@ -72,78 +103,131 @@ const ThreeImageParallaxVariant = ({
       }
     };
   });
-  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: [
-    /* @__PURE__ */ jsx("div", { ref: transformRef, className: "container", children: /* @__PURE__ */ jsx("div", { className: "py-6 md:py-8 lg:py-10", children: projects.map((project, index) => {
-      var _a, _b, _c, _d, _e, _f;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn("relative flex flex-col", isEditor ? "h-auto mb-12" : "h-[500vh]", {
-            "mt-[-40vh]": !isEditor && index > 0
-          }),
-          children: [
-            /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                className: cn("flex justify-center", isEditor ? "relative h-auto py-8" : "sticky top-0 h-[150vh]"),
-                style: isEditor ? { opacity: 1, scale: 1 } : computedStyles[index].headerStyles,
-                children: /* @__PURE__ */ jsxs("div", { className: cn("-z-10 flex w-full max-w-lg flex-col items-center text-center", isEditor ? "relative" : "absolute top-[50vh]"), children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
-                  project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex items-center justify-center overflow-hidden", isEditor ? "relative h-auto" : "sticky top-0 h-screen"), children: [
-              /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: cn("flex w-full max-w-lg items-center justify-center overflow-hidden", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
+  if (isEditor) {
+    return /* @__PURE__ */ jsx(
+      SectionWrapper,
+      {
+        className: cn("relative px-[5%]", sectionClassName),
+        style: sectionStyle,
+        css,
+        children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-20 py-6 md:py-8 lg:py-10", children: projects2.map((project, index) => {
+          var _a, _b, _c, _d, _e, _f;
+          return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-6 flex w-full max-w-lg flex-col items-center text-center", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
+              project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-start justify-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "hidden w-full max-w-xs shrink-0 lg:block", children: /* @__PURE__ */ jsx(
                 CompoundImage,
                 {
-                  src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
-                  alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
-                  className: "size-full object-contain"
+                  src: ((_a = project.imageLeft) == null ? void 0 : _a.src) ?? project.image.src,
+                  alt: ((_b = project.imageLeft) == null ? void 0 : _b.alt) ?? project.image.alt,
+                  className: "w-full object-contain"
                 }
-              ) }) }),
-              /* @__PURE__ */ jsx("div", { className: cn("absolute inset-y-0 left-0 right-auto z-20 hidden w-full max-w-xxs lg:flex", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
-                motion.div,
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ jsx(
+                CompoundImage,
                 {
-                  className: cn("relative w-full", isEditor ? "pt-0" : "pt-[100vh]"),
-                  style: isEditor ? { y: 0 } : computedStyles[index].imageLeftStyles,
-                  children: /* @__PURE__ */ jsx(
-                    CompoundImage,
-                    {
-                      src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
-                      alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
-                      className: "w-full object-contain"
-                    }
-                  )
+                  src: ((_c = project.imageCenter) == null ? void 0 : _c.src) ?? project.image.src,
+                  alt: ((_d = project.imageCenter) == null ? void 0 : _d.alt) ?? project.image.alt,
+                  className: "w-full object-contain"
                 }
               ) }),
-              /* @__PURE__ */ jsx("div", { className: cn("absolute inset-y-0 left-auto right-0 z-20 hidden w-full max-w-xxs lg:flex", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
-                motion.div,
+              /* @__PURE__ */ jsx("div", { className: "hidden w-full max-w-xs shrink-0 lg:block", children: /* @__PURE__ */ jsx(
+                CompoundImage,
                 {
-                  className: cn("relative w-full", isEditor ? "pt-0" : "pt-[100vh]"),
-                  style: isEditor ? { y: 0 } : computedStyles[index].imageRightStyles,
-                  children: /* @__PURE__ */ jsx(
+                  src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
+                  alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
+                  className: "w-full object-contain"
+                }
+              ) })
+            ] })
+          ] }, index);
+        }) }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      className: cn("relative px-[5%]", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: transformRef, className: "container", children: /* @__PURE__ */ jsx("div", { className: "py-6 md:py-8 lg:py-10", children: projects2.map((project, index) => {
+          var _a, _b, _c, _d, _e, _f;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("relative flex h-[500vh] flex-col", {
+                "mt-[-40vh]": index > 0
+              }),
+              children: [
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: "sticky top-0 flex h-[150vh] justify-center",
+                    style: computedStyles[index].headerStyles,
+                    children: /* @__PURE__ */ jsxs("div", { className: "absolute top-[50vh] -z-10 flex w-full max-w-lg flex-col items-center text-center", children: [
+                      /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
+                      project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex h-screen items-center justify-center overflow-hidden", children: [
+                  /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "flex h-screen w-full max-w-5xl items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
                     CompoundImage,
                     {
-                      src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
-                      alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
-                      className: "w-full object-contain"
+                      src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
+                      alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
+                      className: "size-full object-contain"
                     }
-                  )
-                }
-              ) })
-            ] }),
-            !isEditor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
-          ]
-        },
-        index
-      );
-    }) }) }),
-    !isEditor && /* @__PURE__ */ jsx("div", { className: "h-screen" })
-  ] });
+                  ) }) }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 right-auto z-20 hidden h-screen w-full max-w-xs lg:flex", children: /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "relative w-full pt-[100vh]",
+                      style: computedStyles[index].imageLeftStyles,
+                      children: /* @__PURE__ */ jsx(
+                        CompoundImage,
+                        {
+                          src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
+                          alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
+                          className: "h-auto w-full object-contain"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-auto right-0 z-20 hidden h-screen w-full max-w-xs lg:flex", children: /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "relative w-full pt-[100vh]",
+                      style: computedStyles[index].imageRightStyles,
+                      children: /* @__PURE__ */ jsx(
+                        CompoundImage,
+                        {
+                          src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
+                          alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
+                          className: "h-auto w-full object-contain"
+                        }
+                      )
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+              ]
+            },
+            index
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-screen" })
+      ]
+    }
+  );
 };
 const ScaleOpacityVariant = ({
-  projects,
+  projects: projects2,
   sectionClassName,
   sectionStyle,
   css
@@ -155,77 +239,164 @@ const ScaleOpacityVariant = ({
     target: containerRef,
     ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
-  return /* @__PURE__ */ jsx(SectionWrapper, { ref: containerRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: isEditor ? "h-auto" : "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", isEditor ? "relative flex-col gap-8 py-12" : "sticky top-0 h-screen"), children: projects.map((project, index) => {
-    const segmentSize = 1 / projects.length;
-    const start = index * segmentSize;
-    const end = start + segmentSize;
-    const opacity = useTransform(
-      scrollYProgress,
-      [start, start + segmentSize * 0.15, end - segmentSize * 0.15, end],
-      [0, 1, 1, 0]
-    );
-    const scale = useTransform(
-      scrollYProgress,
-      [start, start + segmentSize * 0.15, end - segmentSize * 0.15, end],
-      [0.8, 1, 1, 0.8]
-    );
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        style: isEditor ? { opacity: 1, scale: 1 } : { opacity, scale },
-        className: cn("flex items-center justify-center", isEditor ? "relative w-full" : "absolute inset-0"),
-        children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl border border-border-primary bg-background-primary p-8 md:p-12", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
-            CompoundImage,
-            {
-              src: project.image.src,
-              alt: project.image.alt,
-              className: "aspect-video w-full object-cover"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl", children: project.title }),
-          /* @__PURE__ */ jsx("p", { children: project.description }),
-          project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
-              children: tag.label
-            },
-            tagIndex
-          )) })
-        ] })
-      },
-      index
-    );
-  }) }) }) });
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      ref: containerRef,
+      className: cn("relative px-[5%]", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsx("div", { className: isEditor ? "h-auto" : "h-[300vh]", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center",
+            isEditor ? "relative flex-col gap-8 py-12" : "sticky top-0 h-screen"
+          ),
+          children: projects2.map((project, index) => {
+            const segmentSize = 1 / projects2.length;
+            const start = index * segmentSize;
+            const end = start + segmentSize;
+            const opacity = useTransform(
+              scrollYProgress,
+              [
+                start,
+                start + segmentSize * 0.15,
+                end - segmentSize * 0.15,
+                end
+              ],
+              [0, 1, 1, 0]
+            );
+            const scale = useTransform(
+              scrollYProgress,
+              [
+                start,
+                start + segmentSize * 0.15,
+                end - segmentSize * 0.15,
+                end
+              ],
+              [0.8, 1, 1, 0.8]
+            );
+            return /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                style: isEditor ? { opacity: 1, scale: 1 } : { opacity, scale },
+                className: cn(
+                  "flex items-center justify-center",
+                  isEditor ? "relative w-full" : "absolute inset-0"
+                ),
+                children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl border border-border-primary bg-background-primary p-8 md:p-12", children: [
+                  /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
+                    CompoundImage,
+                    {
+                      src: project.image.src,
+                      alt: project.image.alt,
+                      className: "aspect-video w-full object-cover"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl", children: project.title }),
+                  /* @__PURE__ */ jsx("p", { children: project.description }),
+                  project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
+                      children: tag.label
+                    },
+                    tagIndex
+                  )) })
+                ] })
+              },
+              index
+            );
+          })
+        }
+      ) })
+    }
+  );
 };
-const defaultProject = {
-  title: "Project name",
-  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-  image: {
-    src: "https://picsum.photos/seed/scroll-port/1200/800",
-    alt: "Placeholder image"
-  },
-  url: "#",
-  button: { label: "View project" },
-  tags: [
-    { label: "Tag one", url: "#" },
-    { label: "Tag two", url: "#" },
-    { label: "Tag three", url: "#" }
-  ],
-  imageCenter: {
-    src: "https://picsum.photos/seed/scroll-port-center/800/1000",
-    alt: "Placeholder center"
+const projects = [
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: {
+      src: "https://images.unsplash.com/photo-1547658719-da2b51169166?w=1200&h=800&fit=crop",
+      alt: "Web design workspace"
+    },
+    url: "#",
+    button: { label: "View project" },
+    tags: [
+      { label: "Tag one", url: "#" },
+      { label: "Tag two", url: "#" },
+      { label: "Tag three", url: "#" }
+    ],
+    imageCenter: {
+      src: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=1000&h=660&fit=crop",
+      alt: "Web design process"
+    },
+    imageLeft: {
+      src: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=600&h=400&fit=crop",
+      alt: "Wireframe sketches"
+    },
+    imageRight: {
+      src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop",
+      alt: "Analytics dashboard"
+    }
   },
-  imageLeft: {
-    src: "https://picsum.photos/seed/scroll-port-left/400/600",
-    alt: "Placeholder left"
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: {
+      src: "https://images.unsplash.com/photo-1626785774573-4b799315345d?w=1200&h=800&fit=crop",
+      alt: "Design studio"
+    },
+    url: "#",
+    button: { label: "View project" },
+    tags: [
+      { label: "Tag one", url: "#" },
+      { label: "Tag two", url: "#" },
+      { label: "Tag three", url: "#" }
+    ],
+    imageCenter: {
+      src: "https://images.unsplash.com/photo-1618004912476-29818d81ae2e?w=1000&h=660&fit=crop",
+      alt: "Colorful abstract shapes"
+    },
+    imageLeft: {
+      src: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=400&fit=crop",
+      alt: "Brand color palette"
+    },
+    imageRight: {
+      src: "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=600&h=400&fit=crop",
+      alt: "Typography design"
+    }
   },
-  imageRight: {
-    src: "https://picsum.photos/seed/scroll-port-right/400/600",
-    alt: "Placeholder right"
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: {
+      src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=1200&h=800&fit=crop",
+      alt: "Mobile device"
+    },
+    url: "#",
+    button: { label: "View project" },
+    tags: [
+      { label: "Tag one", url: "#" },
+      { label: "Tag two", url: "#" },
+      { label: "Tag three", url: "#" }
+    ],
+    imageCenter: {
+      src: "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=1000&h=660&fit=crop",
+      alt: "App mockup"
+    },
+    imageLeft: {
+      src: "https://images.unsplash.com/photo-1522542550221-31fd19575a2d?w=600&h=400&fit=crop",
+      alt: "Wireframe sketches"
+    },
+    imageRight: {
+      src: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=600&h=400&fit=crop",
+      alt: "Mobile app in use"
+    }
   }
-};
+];
 const ScrollParallaxPortfolioDefaults = {
   tagline: "",
   heading: "",
@@ -233,21 +404,7 @@ const ScrollParallaxPortfolioDefaults = {
   button: { label: "View all" },
   buttons: [],
   images: [],
-  projects: [
-    { ...defaultProject },
-    {
-      ...defaultProject,
-      imageCenter: { src: "https://picsum.photos/seed/spp-c2/800/1000", alt: "Center 2" },
-      imageLeft: { src: "https://picsum.photos/seed/spp-l2/400/600", alt: "Left 2" },
-      imageRight: { src: "https://picsum.photos/seed/spp-r2/400/600", alt: "Right 2" }
-    },
-    {
-      ...defaultProject,
-      imageCenter: { src: "https://picsum.photos/seed/spp-c3/800/1000", alt: "Center 3" },
-      imageLeft: { src: "https://picsum.photos/seed/spp-l3/400/600", alt: "Left 3" },
-      imageRight: { src: "https://picsum.photos/seed/spp-r3/400/600", alt: "Right 3" }
-    }
-  ],
+  projects,
   hoverLinks: [],
   styles: {
     animation: "threeImageParallax"

package/dist/components/puck-block/gallery-sections/static-grid/index.d.ts

@@ -56,8 +56,24 @@ declare const conf: {
                     };
                 };
                 columns: {
-                    readonly type: "text";
+                    readonly type: "select";
                     readonly label: "Columns";
+                    readonly options: readonly [{
+                        readonly label: "1";
+                        readonly value: "1";
+                    }, {
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }, {
+                        readonly label: "2 → 3 (responsive)";
+                        readonly value: "2-lg3";
+                    }, {
+                        readonly label: "2 → 4 (responsive)";
+                        readonly value: "2-lg4";
+                    }];
                 };
                 gap: {
                     readonly type: "radio";