dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/hero-sections/scroll-expand-video-hero/component.js

@@ -5,17 +5,25 @@ import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js"
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useScroll, useSpring, useTransform, motion } from "framer-motion";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 const ScrollExpandVideoHero = (props) => {
-  const { heading, description, buttons = [], video = "", image = { src: "", alt: "" } } = {
+  const { heading, description, buttons = [], video = "", images = [{ src: "", alt: "" }], styles } = {
     ...ScrollExpandVideoHeroDefaults,
     ...props
   };
+  const image = images == null ? void 0 : images[0];
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
   const transformRef = useRef(null);
-  const { scrollY, scrollYProgress } = useScroll({ target: transformRef });
+  const [scrollContainerRef] = useScrollContainer(transformRef);
+  const { scrollY, scrollYProgress } = useScroll({
+    target: transformRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
+  });
   const animatedScrollYProgress = useSpring(scrollYProgress, {
     bounce: 0
   });
@@ -26,11 +34,12 @@ const ScrollExpandVideoHero = (props) => {
   const height = useTransform(animatedScrollYProgress, [0.3, 1], ["80vh", "100vh"]);
   const y = useTransform(animatedScrollYProgress, [0, 1], ["0vh", "-10vh"]);
   return /* @__PURE__ */ jsxs(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
       ref: transformRef,
-      className: "relative flex h-[300vh] flex-col items-center",
+      className: cn("relative flex h-[300vh] flex-col items-center", sectionClassName),
+      style: sectionStyle,
+      css,
       children: [
         /* @__PURE__ */ jsx("div", { className: "px-[5%]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-0 mx-auto flex min-h-[80vh] max-w-lg items-center justify-center py-16 text-center md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs(motion.div, { style: { opacity: fadeOut, scale: scaleDown }, children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
@@ -77,10 +86,10 @@ const ScrollExpandVideoHeroDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
-  image: {
+  images: [{
     src: "https://picsum.photos/seed/hero-video/1200/800",
     alt: "Relume placeholder image"
-  }
+  }]
 };
 export {
   ScrollExpandVideoHero,

package/dist/components/puck-block/hero-sections/scroll-expand-video-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -94,14 +94,22 @@ declare const conf: {
         video: {
             type: string;
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
                     type: "text";
                 };
             };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
         };
     };
     defaultProps: ScrollExpandVideoHeroProps;

package/dist/components/puck-block/hero-sections/scroll-expand-video-hero/index.js

@@ -1,14 +1,14 @@
 import { ScrollExpandVideoHero, ScrollExpandVideoHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
 const conf = {
   fields: {
     heading: headingField,
     description: descriptionField,
     buttons: buttonsField,
     video: { type: "text" },
-    image: imageField
+    images: imagesField
   },
   defaultProps: ScrollExpandVideoHeroDefaults,
   render: ScrollExpandVideoHero

package/dist/components/puck-block/hero-sections/scroll-zoom-hero/component.js

@@ -1,66 +1,122 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { useScroll, useTransform, motion } from "framer-motion";
 import { VideoIframe } from "../../../shadcn/video-iframe.js";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 const ScrollZoomHero = (props) => {
-  const { heading, description, buttons, image, video, styles: rawStyles } = {
+  var _a, _b, _c, _d;
+  const {
+    heading,
+    description,
+    buttons,
+    images,
+    video,
+    styles: rawStyles
+  } = {
     ...ScrollZoomHeroDefaults,
     ...props
   };
-  const { mediaType } = rawStyles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    mediaType
+  } = rawStyles ?? {};
   const isMobile = useMediaQuery("(max-width: 767px)");
-  const { scrollYProgress } = useScroll();
-  const scaleValue = useTransform(
-    scrollYProgress,
-    mediaType === "play" ? [0, 0.3] : [0, 0.5],
-    [0.5, 1]
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
+    offset: ["start start", "end start"]
+  });
+  const scaleValue = useTransform(scrollYProgress, [0, 0.25], [0.5, 1]);
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      ref: sectionRef,
+      className: cn("relative md:min-h-screen", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 grid grid-cols-1 items-start gap-y-5 md:mb-18 md:grid-cols-2 md:gap-x-12 md:gap-y-8 lg:mb-20 lg:gap-x-20 lg:gap-y-16", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold md:text-9xl lg:text-10xl", children: heading }),
+          /* @__PURE__ */ jsxs("div", { className: "mx-[7.5%] self-end md:mt-48", children: [
+            /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+            /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+              CompoundButton,
+              {
+                label: button.label,
+                variant: button.variant,
+                size: button.size,
+                action: button.action,
+                icon: button.icon
+              },
+              index
+            )) })
+          ] })
+        ] }),
+        mediaType === "play" ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end justify-center md:h-[60vh] lg:h-[80vh] lg:justify-start", children: /* @__PURE__ */ jsxs(Dialog, { children: [
+          /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              role: "button",
+              tabIndex: 0,
+              className: "relative flex size-full cursor-pointer origin-top-right items-center justify-center",
+              style: { scale: isMobile ? 1 : scaleValue },
+              children: [
+                /* @__PURE__ */ jsx(
+                  CompoundImage,
+                  {
+                    src: ((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src) ?? "",
+                    alt: ((_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.alt) ?? "",
+                    className: "size-full object-cover"
+                  }
+                ),
+                /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(VideoIframe, { video }) })
+        ] }) }) : /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "flex origin-top-right flex-col items-end justify-center md:h-[60vh] lg:h-[80vh] lg:justify-start",
+            style: { scale: isMobile ? 1 : scaleValue },
+            children: /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                src: ((_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.src) ?? "",
+                alt: ((_d = images == null ? void 0 : images[0]) == null ? void 0 : _d.alt) ?? "",
+                className: "size-full object-cover"
+              }
+            )
+          }
+        )
+      ] }) })
+    }
   );
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "relative md:min-h-screen", children: /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-    /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 grid grid-cols-1 items-start gap-y-5 md:mb-18 md:grid-cols-2 md:gap-x-12 md:gap-y-8 lg:mb-20 lg:gap-x-20 lg:gap-y-16", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold md:text-9xl lg:text-10xl", children: heading }),
-      /* @__PURE__ */ jsxs("div", { className: "mx-[7.5%] self-end md:mt-48", children: [
-        /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
-        /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
-      ] })
-    ] }),
-    mediaType === "play" ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end justify-center md:h-[60vh] lg:h-[80vh] lg:justify-start", children: /* @__PURE__ */ jsxs(Dialog, { children: [
-      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        motion.button,
-        {
-          className: "relative flex size-full origin-top-right items-center justify-center",
-          style: { scale: isMobile ? 1 : scaleValue },
-          children: [
-            /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }),
-            /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
-            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(VideoIframe, { video }) })
-    ] }) }) : /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: "flex origin-top-right flex-col items-end justify-center md:h-[60vh] lg:h-[80vh] lg:justify-start",
-        style: { scale: isMobile ? 1 : scaleValue },
-        children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" })
-      }
-    )
-  ] }) }) });
 };
 const ScrollZoomHeroDefaults = {
   heading: "Medium length hero heading goes here",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
-  image: {
-    src: "https://picsum.photos/seed/hero-video/1200/800",
-    alt: "Relume placeholder image"
-  },
+  images: [
+    {
+      src: "https://picsum.photos/seed/hero-video/1200/800",
+      alt: "Relume placeholder image"
+    }
+  ],
   styles: {
     mediaType: "play"
   }

package/dist/components/puck-block/hero-sections/scroll-zoom-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -91,14 +91,22 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
                     type: "text";
                 };
             };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
         };
         video: {
             type: string;
@@ -107,6 +115,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 mediaType: {
                     readonly type: "radio";
                     readonly label: "Media Type";

package/dist/components/puck-block/hero-sections/scroll-zoom-hero/index.js

@@ -1,20 +1,22 @@
 import { ScrollZoomHero, ScrollZoomHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
 import { heroStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
     description: descriptionField,
     buttons: buttonsField,
-    image: imageField,
+    images: imagesField,
     video: { type: "text" },
     styles: {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: heroStyleFields.mediaType
+        mediaType: heroStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/hero-sections/split-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -91,14 +91,22 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
                     type: "text";
                 };
             };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
         };
         video: {
             type: string;
@@ -115,7 +123,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -168,6 +176,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 mediaPosition: {
                     readonly type: "radio";
                     readonly label: "Media Position";

package/dist/components/puck-block/hero-sections/stacked-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -91,14 +91,22 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
                     type: "text";
                 };
             };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
         };
         video: {
             type: string;
@@ -115,7 +123,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -168,6 +176,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 textAlign: {
                     readonly type: "radio";
                     readonly label: "Text Align";

package/dist/components/puck-block/hero-sections/sticky-expand-hero/component.js

@@ -2,20 +2,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useScroll, useSpring, useTransform, motion } from "framer-motion";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 import { useRef } from "react";
 const StickyExpandHero = (props) => {
-  const { heading, description, buttons = [], image = { src: "", alt: "" } } = {
+  const { heading, description, buttons = [], images, styles } = {
     ...StickyExpandHeroDefaults,
     ...props
   };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const image = (images == null ? void 0 : images[0]) ?? { src: "", alt: "" };
   const headerRef = useRef(null);
   const isMobile = useMediaQuery("(max-width: 991px)");
-  const { scrollYProgress } = useScroll({ target: headerRef });
+  const [scrollContainerRef] = useScrollContainer(headerRef);
+  const { scrollYProgress } = useScroll({
+    target: headerRef,
+    // 自动检测滚动容器：在 Puck 编辑器 iframe 中找到真实的滚动父级
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
+  });
   const smoothScrollYProgress = useSpring(scrollYProgress, { stiffness: 300, damping: 30 });
   const width = useTransform(smoothScrollYProgress, [0, 1], ["50%", "100%"]);
-  return /* @__PURE__ */ jsx("section", { id: "relume", ref: headerRef, className: "relative md:h-[300vh]", children: /* @__PURE__ */ jsxs("div", { className: "static top-0 grid auto-cols-fr grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:sticky lg:h-screen lg:grid-cols-2 lg:gap-y-0 lg:pt-0", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: headerRef, className: cn("md:h-[300vh]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "static top-0 grid auto-cols-fr grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:sticky lg:h-screen lg:grid-cols-2 lg:gap-y-0 lg:pt-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative mx-[5%] max-w-md lg:ml-[5vw] lg:mr-20 lg:justify-self-end", children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
@@ -47,10 +57,10 @@ const StickyExpandHeroDefaults = {
   heading: "Medium length hero heading goes here",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
-  image: {
+  images: [{
     src: "https://picsum.photos/seed/hero-landscape/1200/800",
     alt: "Relume placeholder image"
-  }
+  }]
 };
 export {
   StickyExpandHero,

package/dist/components/puck-block/hero-sections/sticky-expand-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";