dune-react 0.0.21 → 0.0.23

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

@@ -6,6 +6,7 @@ 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 { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
@@ -13,63 +14,111 @@ 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) => {
   var _a, _b, _c, _d;
-  const { heading, description, buttons, images, video, styles: rawStyles } = {
+  const {
+    heading,
+    description,
+    buttons,
+    images,
+    video,
+    styles: rawStyles
+  } = {
     ...ScrollZoomHeroDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, mediaType } = rawStyles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    mediaType
+  } = rawStyles ?? {};
+  const { isEditor } = useEditorContext();
   const isMobile = useMediaQuery("(max-width: 767px)");
   const sectionRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(sectionRef);
-  const { scrollYProgress } = useScroll(
-    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  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 || isEditor ? 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 || isEditor ? 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"
+              }
+            )
+          }
+        )
+      ] }) })
+    }
   );
-  const scaleValue = useTransform(
-    scrollYProgress,
-    mediaType === "play" ? [0, 0.3] : [0, 0.5],
-    [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.button,
-        {
-          className: "relative flex size-full 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" })
-      }
-    )
-  ] }) }) });
 };
 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",
-  images: [{
-    src: "https://picsum.photos/seed/hero-video/1200/800",
-    alt: "Relume placeholder image"
-  }],
+  images: [
+    {
+      src: "https://picsum.photos/seed/hero-video/1200/800",
+      alt: "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";

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";
@@ -123,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";

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";
@@ -123,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";

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

@@ -59,7 +59,7 @@ const StickyExpandHeroDefaults = {
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   images: [{
     src: "https://picsum.photos/seed/hero-landscape/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   }]
 };
 export {

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";
@@ -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;
+            };
         };
     };
     defaultProps: StickyExpandHeroProps;

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

@@ -1,13 +1,13 @@
 import { StickyExpandHero, StickyExpandHeroDefaults } 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,
-    image: imageField
+    images: imagesField
   },
   defaultProps: StickyExpandHeroDefaults,
   render: StickyExpandHero

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

@@ -208,11 +208,11 @@ const StickyVideoHeroDefaults = {
   video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
   images: [{
     src: "https://picsum.photos/seed/hero-video/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   }],
   videoImage: {
     src: "https://picsum.photos/seed/hero-video/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   styles: { variant: "centered" }
 };

package/dist/components/puck-block/hero-sections/sticky-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";

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

@@ -108,7 +108,7 @@ const TabHeroDefaults = {
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
         image: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
-          alt: "Relume placeholder image 1"
+          alt: "Placeholder image 1"
         }
       },
       {
@@ -118,7 +118,7 @@ const TabHeroDefaults = {
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
         image: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
-          alt: "Relume placeholder image 2"
+          alt: "Placeholder image 2"
         }
       },
       {
@@ -128,7 +128,7 @@ const TabHeroDefaults = {
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
         image: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
-          alt: "Relume placeholder image 3"
+          alt: "Placeholder image 3"
         }
       },
       {
@@ -138,7 +138,7 @@ const TabHeroDefaults = {
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
         image: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
-          alt: "Relume placeholder image 4"
+          alt: "Placeholder image 4"
         }
       }
     ]

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

@@ -16,28 +16,6 @@ declare const conf: {
                     label: string;
                     arrayFields: {
                         value: {
-                            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.";
-                                };
-                            };
                             type: string;
                         };
                         text: {
@@ -62,28 +40,6 @@ declare const conf: {
                             type: string;
                             objectFields: {
                                 src: {
-                                    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.";
-                                        };
-                                    };
                                     type: string;
                                     label: string;
                                 };
@@ -96,6 +52,34 @@ declare const conf: {
                 };
             };
         };
+        styles: {
+            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.";
+                    };
+                };
+            };
+        };
     };
     defaultProps: TabHeroProps;
     render: (props: TabHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,7 +11,7 @@ const conf = {
           type: "array",
           label: "Triggers",
           arrayFields: {
-            value: { type: "text", ...sectionWrapperFields },
+            value: { type: "text" },
             text: { type: "text" }
           }
         },
@@ -25,13 +25,18 @@ const conf = {
             image: {
               type: "object",
               objectFields: {
-                src: { type: "image", label: "Image", ...sectionWrapperFields },
+                src: { type: "image", label: "Image" },
                 alt: { type: "text" }
               }
             }
           }
         }
       }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: { ...sectionWrapperFields }
     }
   },
   defaultProps: TabHeroDefaults,

package/dist/components/puck-block/hero-sections/three-image-parallax-hero/component.js

@@ -21,7 +21,13 @@ const ThreeImageParallaxHero = (props) => {
     ...ThreeImageParallaxHeroDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, textAlign = "left", responsive = false } = { ...ThreeImageParallaxHeroDefaults.styles, ...styles };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    textAlign = "left",
+    responsive = false
+  } = { ...ThreeImageParallaxHeroDefaults.styles, ...styles };
   const sectionRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(sectionRef);
   const { scrollYProgress } = useScroll(
@@ -32,7 +38,11 @@ const ThreeImageParallaxHero = (props) => {
   const isCenter = textAlign === "center";
   const fixedLeftY = useTransform(scrollYProgress, [0, 1], ["-15.444%", "0%"]);
   const fixedCenterY = useTransform(scrollYProgress, [0, 1], ["15.333%", "0%"]);
-  const fixedRightY = useTransform(scrollYProgress, [0, 0.5], ["11.333%", "-20%"]);
+  const fixedRightY = useTransform(
+    scrollYProgress,
+    [0, 0.5],
+    ["11.333%", "-20%"]
+  );
   const responsiveLeftY = useTransform(
     scrollYProgress,
     [0, 1],
@@ -57,51 +67,91 @@ const ThreeImageParallaxHero = (props) => {
   const rightImageTranslate = {
     y: responsive ? responsiveRightY : fixedRightY
   };
-  return /* @__PURE__ */ jsx(SectionWrapper, { ref: sectionRef, className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-    /* @__PURE__ */ jsx("div", { className: "rb-12 mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: isCenter ? "mx-auto w-full max-w-lg text-center" : "w-full max-w-lg",
-        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 }),
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      ref: sectionRef,
+      className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+        /* @__PURE__ */ jsx("div", { className: "rb-12 mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: isCenter ? "mx-auto w-full max-w-lg text-center" : "w-full max-w-lg",
+            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 }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: isCenter ? "mt-6 flex items-center justify-center gap-4 md:mt-8" : "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
+                  ))
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex justify-center gap-6 sm:gap-8 md:gap-0", children: [
           /* @__PURE__ */ jsx(
-            "div",
+            motion.div,
             {
-              className: isCenter ? "mt-6 flex items-center justify-center gap-4 md:mt-8" : "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))
+              className: "absolute bottom-0 left-0 z-10 w-2/5 overflow-hidden rounded-lg shadow-xl",
+              style: leftImageTranslate,
+              children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: imageLeft.src,
+                  alt: imageLeft.alt,
+                  className: "aspect-square size-full object-cover"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "mx-[10%] mb-[10%] w-1/2 overflow-hidden rounded-lg shadow-xl",
+              style: centerImageTranslate,
+              children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: imageCenter.src,
+                  alt: imageCenter.alt,
+                  className: "aspect-square size-full object-cover"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "absolute right-0 top-[10%] w-2/5 overflow-hidden rounded-lg shadow-xl",
+              style: rightImageTranslate,
+              children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: imageRight.src,
+                  alt: imageRight.alt,
+                  className: "aspect-[4/3] size-full object-cover"
+                }
+              )
             }
           )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "relative flex justify-center gap-6 sm:gap-8 md:gap-0", children: [
-      /* @__PURE__ */ jsx(motion.div, { className: "absolute bottom-0 left-0 z-10 w-2/5", style: leftImageTranslate, children: /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          src: imageLeft.src,
-          alt: imageLeft.alt,
-          className: "aspect-square size-full object-cover"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(motion.div, { className: "mx-[10%] mb-[10%] w-1/2", style: centerImageTranslate, children: /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          src: imageCenter.src,
-          alt: imageCenter.alt,
-          className: "aspect-square size-full object-cover"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(motion.div, { className: "absolute right-0 top-[10%] w-2/5", style: rightImageTranslate, children: /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          src: imageRight.src,
-          alt: imageRight.alt,
-          className: "aspect-[4/3] size-full object-cover"
-        }
-      ) })
-    ] })
-  ] }) });
+        ] })
+      ] })
+    }
+  );
 };
 const ThreeImageParallaxHeroDefaults = {
   heading: "Long heading is what you see here in this header section",
@@ -109,15 +159,15 @@ const ThreeImageParallaxHeroDefaults = {
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   imageLeft: {
     src: "https://picsum.photos/seed/hero-portrait/800/1200",
-    alt: "Relume placeholder image 1"
+    alt: "Placeholder image 1"
   },
   imageCenter: {
     src: "https://picsum.photos/seed/hero-square/1200/1200",
-    alt: "Relume placeholder image 2"
+    alt: "Placeholder image 2"
   },
   imageRight: {
     src: "https://picsum.photos/seed/hero-portrait/800/1200",
-    alt: "Relume placeholder image 3"
+    alt: "Placeholder image 3"
   },
   styles: {
     textAlign: "left",

package/dist/components/puck-block/hero-sections/three-image-parallax-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";