dune-react 0.0.21 → 0.0.22

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

@@ -10,11 +10,23 @@ import Autoplay from "embla-carousel-autoplay";
 const CarouselHero = (props) => {
   const [api, setApi] = useState();
   const [current, setCurrent] = useState(0);
-  const { heading, description, buttons, images, carouselHeading, carouselDescription, styles } = {
+  const {
+    heading,
+    description,
+    buttons,
+    images,
+    carouselHeading,
+    carouselDescription,
+    styles
+  } = {
     ...CarouselHeroDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   useEffect(() => {
     if (!api) return;
     setCurrent(api.selectedScrollSnap() + 1);
@@ -25,16 +37,29 @@ const CarouselHero = (props) => {
   return /* @__PURE__ */ jsxs(
     SectionWrapper,
     {
-      className: cn("grid grid-cols-1 items-center gap-y-16 overflow-hidden pt-16 sm:overflow-auto md:pt-24 lg:grid-cols-[50%_50%] lg:gap-y-0 lg:pt-0", sectionClassName),
+      className: cn(
+        "grid grid-cols-1 items-center gap-y-16 overflow-hidden pt-16 sm:overflow-auto md:pt-24 lg:grid-cols-[50%_50%] lg:gap-y-0 lg:pt-0",
+        sectionClassName
+      ),
       style: sectionStyle,
       css,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mx-[5%] max-w-md justify-self-start 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 }),
-          /* @__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)) })
+          /* @__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
+          )) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative clear-both h-[300px] max-h-[60rem] min-h-screen w-full bg-[#ddd] text-center", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "relative clear-both h-[300px] max-h-[60rem] min-h-screen w-full text-center", children: /* @__PURE__ */ jsxs(
           Carousel,
           {
             opts: { loop: true },
@@ -43,7 +68,14 @@ const CarouselHero = (props) => {
             className: "relative left-0 right-0 z-10 block h-full overflow-hidden whitespace-nowrap pl-4",
             children: [
               /* @__PURE__ */ jsx(CarouselContent, { children: images.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "pl-0", children: /* @__PURE__ */ jsx("div", { className: "relative inline-block size-full whitespace-normal text-left align-top", children: /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col", children: [
-                /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx(CompoundImage, { className: "absolute size-full object-cover", src: image.src, alt: image.alt }) }),
+                /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx(
+                  CompoundImage,
+                  {
+                    className: "absolute size-full object-cover",
+                    src: image.src,
+                    alt: image.alt
+                  }
+                ) }),
                 /* @__PURE__ */ jsx("div", { className: "relative bg-background-secondary px-6 pb-32 pt-6 sm:px-8 sm:pt-8", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", children: [
                   /* @__PURE__ */ jsx("h6", { className: "mb-1 text-md font-bold leading-[1.4] md:text-xl", children: carouselHeading }),
                   /* @__PURE__ */ jsx("p", { children: carouselDescription })
@@ -76,9 +108,18 @@ const CarouselHeroDefaults = {
   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" }],
   images: [
-    { src: "https://picsum.photos/seed/hero-square/1200/1200", alt: "Relume placeholder image 1" },
-    { src: "https://picsum.photos/seed/hero-square/1200/1200", alt: "Relume placeholder image 2" },
-    { src: "https://picsum.photos/seed/hero-square/1200/1200", alt: "Relume placeholder image 3" }
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 3"
+    }
   ],
   carouselHeading: "Short heading goes here",
   carouselDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."

package/dist/components/puck-block/hero-sections/carousel-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/centered-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";
@@ -103,7 +103,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/column-scroll-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/dual-marquee-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/fullscreen-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/fullscreen-video-hero/component.js

@@ -41,10 +41,12 @@ const FullscreenVideoHero = (props) => {
     /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex w-full flex-col items-center justify-center", children: [
       /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-screen w-full items-center justify-center", children: /* @__PURE__ */ jsxs(Dialog, { children: [
         /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-          motion.button,
+          motion.div,
           {
+            role: "button",
+            tabIndex: 0,
             style: videoDialogMotion,
-            className: "absolute flex items-center justify-center",
+            className: "absolute flex cursor-pointer items-center justify-center",
             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" }),

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

package/dist/components/puck-block/hero-sections/horizontal-marquee-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/inline-image-hero/index.d.ts

@@ -39,7 +39,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/media-text-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";
@@ -176,38 +176,35 @@ 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: {
                     type: "radio";
                     label: string;
-                    options: ({
-                        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.";
-                            };
-                        };
-                        label: string;
-                        value: string;
-                    } | {
+                    options: {
                         label: string;
                         value: string;
-                    })[];
+                    }[];
                 };
                 mediaType: {
                     readonly type: "radio";

package/dist/components/puck-block/hero-sections/mouse-track-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/multi-image-grid-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";
@@ -112,38 +112,35 @@ 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.";
+                    };
+                };
                 textLayout: {
                     type: "select";
                     label: string;
-                    options: ({
-                        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.";
-                            };
-                        };
-                        label: string;
-                        value: string;
-                    } | {
+                    options: {
                         label: string;
                         value: string;
-                    })[];
+                    }[];
                 };
                 imageGridRatio: {
                     readonly type: "text";

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/index.js

@@ -18,12 +18,13 @@ const conf = {
           type: "select",
           label: "Text Layout",
           options: [
-            { label: "Two Column Top", value: "two-column-top", ...sectionWrapperFields },
+            { label: "Two Column Top", value: "two-column-top" },
             { label: "Left Block", value: "left-block" },
             { label: "Centered", value: "centered" }
           ]
         },
-        imageGridRatio: heroStyleFields.imageGridRatio
+        imageGridRatio: heroStyleFields.imageGridRatio,
+        ...sectionWrapperFields
       }
     }
   },

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

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";

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

@@ -13,63 +13,110 @@ 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 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 ? 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 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: "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";

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";