dune-react 0.0.22 → 0.0.23

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

@@ -56,8 +56,18 @@ declare const conf: {
                     };
                 };
                 slideBasis: {
-                    readonly type: "text";
+                    readonly type: "select";
                     readonly label: "Slide Basis";
+                    readonly options: readonly [{
+                        readonly label: "4/5";
+                        readonly value: "4/5";
+                    }, {
+                        readonly label: "45%";
+                        readonly value: "45%";
+                    }, {
+                        readonly label: "30%";
+                        readonly value: "30%";
+                    }];
                 };
             };
         };

package/dist/components/puck-block/header-sections/centered-navbar/centered-navbar.js

@@ -12,7 +12,7 @@ const CenteredNavbar = (props) => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("z-[999] flex w-full items-center border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto size-full lg:grid lg:grid-cols-[0.375fr_1fr_0.375fr] lg:items-center lg:justify-between lg:gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center justify-between px-[5%] md:min-h-18 lg:min-h-full lg:px-0", children: [
-      /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+      /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 lg:hidden", children: [
         /* @__PURE__ */ jsx("div", { children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(Button, { className: "w-full px-4 py-1", variant: b.variant, size: b.size, children: b.label }, i)) }),
         /* @__PURE__ */ jsx("button", { className: "-mr-2 flex size-12 flex-col items-center justify-center", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("span", { className: "my-[3px] h-0.5 w-6 bg-black" }, i)) })
@@ -23,7 +23,8 @@ const CenteredNavbar = (props) => {
   ] }) });
 };
 const CenteredNavbarDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Logo image" },
+  __metadata: { type: "header" },
+  logo: { url: "#", src: "https://file.springbrand.ai/web_assets/template-logo.svg", alt: "Logo image" },
   navLinks: [{ title: "Link One", url: "#" }, { title: "Link Two", url: "#" }, { title: "Link Three", url: "#" }, { title: "Link Four", url: "#" }],
   button: { label: "Button", size: "sm" },
   buttons: [{ label: "Button", size: "sm" }],

package/dist/components/puck-block/header-sections/drawer-navbar/drawer-navbar.js

@@ -65,7 +65,7 @@ const DrawerNavbar = (props) => {
                   {
                     href: logo == null ? void 0 : logo.url,
                     className: "mb-8 mt-10 flex flex-shrink-0 lg:hidden",
-                    children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt })
+                    children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" })
                   }
                 ),
                 navLinks == null ? void 0 : navLinks.map((navLink, index) => /* @__PURE__ */ jsx(
@@ -102,7 +102,7 @@ const DrawerNavbar = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, className: "flex min-h-16 flex-shrink-0 items-center", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, className: "flex min-h-16 flex-shrink-0 items-center", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
         /* @__PURE__ */ jsx("div", { className: "flex min-h-16 items-center justify-end gap-x-4", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(
           Button,
           {
@@ -118,9 +118,10 @@ const DrawerNavbar = (props) => {
   );
 };
 const DrawerNavbarDefaults = {
+  __metadata: { type: "header" },
   logo: {
     url: "#",
-    src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
+    src: "https://file.springbrand.ai/web_assets/template-logo.svg",
     alt: "Logo image"
   },
   navLinks: [

package/dist/components/puck-block/header-sections/floating-bordered-navbar/floating-bordered-navbar.js

@@ -25,13 +25,13 @@ const FloatingBorderedNavbar = (props) => {
     SectionWrapper,
     {
       className: cn(
-        `${position === "fixed" ? "fixed" : "relative"} z-[999] mx-auto mt-5 flex w-full items-start justify-center bg-background-primary px-[5%] md:mt-6 lg:mx-[5%] lg:w-auto lg:px-0`,
+        `${position === "fixed" ? "fixed" : "relative"} z-[999] mx-auto flex w-full items-start justify-center bg-background-primary px-[5%] md:mt-6 lg:mx-[5%] lg:w-auto lg:px-0`,
         sectionClassName
       ),
       style: sectionStyle,
       css,
       children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 w-full items-center justify-between gap-4 border-border-primary px-5 md:min-h-18 md:px-8 lg:w-auto", children: [
-        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
         /* @__PURE__ */ jsx(
           motion.div,
           {
@@ -158,10 +158,11 @@ const SubMenu = ({
   );
 };
 const FloatingBorderedNavbarDefaults = {
+  __metadata: { type: "header" },
   logo: {
     url: "#",
-    src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
-    alt: "Relume placeholder logo"
+    src: "https://file.springbrand.ai/web_assets/template-logo.svg",
+    alt: "Placeholder logo"
   },
   navLinks: [
     { url: "#", title: "Link One" },

package/dist/components/puck-block/header-sections/fullscreen-overlay-navbar/fullscreen-overlay-navbar.js

@@ -28,7 +28,7 @@ const FullscreenOverlayNavbar = (props) => {
       css,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mx-auto flex size-full items-center justify-between", children: [
-          /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+          /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 lg:gap-4", children: [
             button && /* @__PURE__ */ jsx(
               Button,
@@ -141,10 +141,11 @@ const FullscreenOverlayNavbar = (props) => {
   );
 };
 const FullscreenOverlayNavbarDefaults = {
+  __metadata: { type: "header" },
   logo: {
     url: "#",
-    src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
-    alt: "Relume placeholder logo"
+    src: "https://file.springbrand.ai/web_assets/template-logo.svg",
+    alt: "Placeholder logo"
   },
   navLinks: [
     { url: "#", title: "Link One" },

package/dist/components/puck-block/header-sections/mega-menu-navbar/mega-menu-navbar.js

@@ -14,7 +14,7 @@ const MegaMenuNavbar = (props) => {
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("relative z-[999] flex w-full items-center justify-between border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "size-full lg:flex lg:items-center lg:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "lg:flex", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center justify-between px-[5%] md:min-h-18 lg:min-h-full lg:px-0", children: [
-        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
         /* @__PURE__ */ jsx("button", { className: "-mr-2 flex size-12 flex-col items-center justify-center lg:hidden", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("span", { className: "my-[3px] h-0.5 w-6 bg-black" }, i)) })
       ] }),
       /* @__PURE__ */ jsxs(motion.div, { variants: { open: { height: "var(--height-open, 100dvh)" }, close: { height: "var(--height-closed, 0)" } }, initial: "close", exit: "close", animate: isMobileMenuOpen ? "open" : "close", transition: { duration: 0.4 }, className: "overflow-auto px-[5%] lg:ml-6 lg:flex lg:items-center lg:px-0 lg:[--height-closed:auto] lg:[--height-open:auto]", children: [
@@ -26,7 +26,8 @@ const MegaMenuNavbar = (props) => {
   ] }) });
 };
 const MegaMenuNavbarDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Logo image" },
+  __metadata: { type: "header" },
+  logo: { url: "#", src: "https://file.springbrand.ai/web_assets/template-logo.svg", alt: "Logo image" },
   navLinks: [{ title: "Link One", url: "#" }, { title: "Link Two", url: "#" }, { title: "Link Three", url: "#" }, { title: "Link Four", url: "#" }],
   button: { label: "Button", size: "sm" },
   buttons: [{ label: "Button", variant: "secondary", size: "sm" }, { label: "Button", size: "sm" }],

package/dist/components/puck-block/header-sections/props.d.ts

@@ -29,6 +29,9 @@ export interface HeaderSectionBaseProps {
     button: BaseButton;
     buttons: BaseButton[];
     styles: HeaderSectionStyles;
+    __metadata?: {
+        type: "header";
+    };
 }
 export declare const headerStyleFields: {
     readonly dropdownType: {

package/dist/components/puck-block/header-sections/standard-navbar/standard-navbar.js

@@ -15,7 +15,7 @@ const StandardNavbar = (props) => {
   const isMobile = useMediaQuery("(max-width: 991px)");
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("z-[999] flex w-full items-center border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "size-full lg:flex lg:items-center lg:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center justify-between px-[5%] md:min-h-18 lg:min-h-full lg:px-0", children: [
-      /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+      /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
       /* @__PURE__ */ jsxs("button", { className: "-mr-2 flex size-12 flex-col items-center justify-center lg:hidden", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: [
         /* @__PURE__ */ jsx(motion.span, { className: "my-[3px] h-0.5 w-6 bg-black", animate: isMobileMenuOpen ? ["open", "rotatePhase"] : "closed", variants: topLineVariants }),
         /* @__PURE__ */ jsx(motion.span, { className: "my-[3px] h-0.5 w-6 bg-black", animate: isMobileMenuOpen ? "open" : "closed", variants: middleLineVariants }),
@@ -45,7 +45,8 @@ const topLineVariants = { open: { translateY: 8, transition: { delay: 0.1 } }, r
 const middleLineVariants = { open: { width: 0, transition: { duration: 0.1 } }, closed: { width: "1.5rem", transition: { delay: 0.3, duration: 0.2 } } };
 const bottomLineVariants = { open: { translateY: -8, transition: { delay: 0.1 } }, rotatePhase: { rotate: 45, transition: { delay: 0.2 } }, closed: { translateY: 0, rotate: 0, transition: { duration: 0.2 } } };
 const StandardNavbarDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Logo image" },
+  __metadata: { type: "header" },
+  logo: { url: "#", src: "https://file.springbrand.ai/web_assets/template-logo.svg", alt: "Logo image" },
   navLinks: [
     { title: "Link One", url: "#" },
     { title: "Link Two", url: "#" },

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

@@ -110,15 +110,15 @@ const CarouselHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     }
   ],
   carouselHeading: "Short heading goes here",

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

@@ -61,37 +61,37 @@ const ColumnScrollHeroDefaults = {
   imagesPartOne: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     }
   ],
   imagesPartTwo: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 6"
+      alt: "Placeholder image 6"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 7"
+      alt: "Placeholder image 7"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 8"
+      alt: "Placeholder image 8"
     }
   ]
 };

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

@@ -57,27 +57,27 @@ const DualMarqueeHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 6"
+      alt: "Placeholder image 6"
     }
   ]
 };

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

@@ -80,7 +80,7 @@ const FullscreenVideoHeroDefaults = {
   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"
   }]
 };
 export {

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

@@ -8,6 +8,7 @@ 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 { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 const GridExpandHero = (props) => {
   const {
     heading,
@@ -20,6 +21,7 @@ const GridExpandHero = (props) => {
     ...props
   };
   const { className: sectionClassName, style: sectionStyle, css, textAlign = "left", gridRatio } = { ...GridExpandHeroDefaults.styles, ...styles };
+  const { isEditor } = useEditorContext();
   const isMobile = useMediaQuery("(max-width: 767px)");
   const sectionRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(sectionRef);
@@ -56,14 +58,21 @@ const GridExpandHero = (props) => {
   const centerRightImageGroup = {
     x: createTransform(["0vw", "25vw"], ["0vw", "32vw"])
   };
+  const editorLeftContainerHeight = { height: "100vh" };
+  const editorLeftLeftImageGroup = { x: isMobile ? "-25vw" : "-50vw" };
+  const editorLeftCenterImageContainer = { x: isMobile ? "-25vw" : "-50vw", width: "100vw", height: "100vh" };
+  const editorLeftRightImage = { x: isMobile ? "25vw" : "20vw" };
+  const editorCenterLeftImageGroup = { x: isMobile ? "-25vw" : "-32vw" };
+  const editorCenterCenterImageContainer = { x: isMobile ? "-25vw" : "-32vw", width: "100vw", height: "100vh" };
+  const editorCenterRightImageGroup = { x: isMobile ? "25vw" : "32vw" };
   if (isCenter) {
-    return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative h-[250vh]", sectionClassName), style: sectionStyle, css, children: [
+    return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative", isEditor ? "h-auto" : "h-[250vh]", sectionClassName), style: sectionStyle, css, children: [
       /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-lg text-center", 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 items-center justify-center gap-x-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: "sticky top-0 flex h-screen w-full items-center overflow-hidden", children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { className: cn("flex h-screen w-full items-center overflow-hidden", !isEditor && "sticky top-0"), children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: "z-10 grid w-full grid-flow-col content-center items-center justify-center",
@@ -76,7 +85,7 @@ const GridExpandHero = (props) => {
               motion.div,
               {
                 className: "grid grid-flow-col grid-cols-1 items-center justify-items-end gap-4 justify-self-end px-4",
-                style: centerLeftImageGroup,
+                style: isEditor ? editorCenterLeftImageGroup : centerLeftImageGroup,
                 children: [
                   /* @__PURE__ */ jsx("div", { className: "relative hidden md:block md:w-[25vw] lg:w-[20vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[2/3] w-full object-cover", ...images[0] }) }),
                   /* @__PURE__ */ jsxs("div", { className: "relative grid w-[40vw] grid-cols-1 grid-rows-[auto_auto] gap-4 self-center md:w-[18vw]", children: [
@@ -86,12 +95,12 @@ const GridExpandHero = (props) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(motion.div, { className: "relative", style: centerCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", ...images[3] }) }),
+            /* @__PURE__ */ jsx(motion.div, { className: "relative", style: isEditor ? editorCenterCenterImageContainer : centerCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", ...images[3] }) }),
             /* @__PURE__ */ jsxs(
               motion.div,
               {
                 className: "grid grid-flow-col items-center justify-items-start gap-4 justify-self-start px-4",
-                style: centerRightImageGroup,
+                style: isEditor ? editorCenterRightImageGroup : centerRightImageGroup,
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "relative grid w-[40vw] grid-cols-1 grid-rows-[auto_auto] gap-4 self-center md:w-[18vw]", children: [
                     /* @__PURE__ */ jsx("div", { className: "relative w-[40vw] sm:w-auto", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[4] }) }),
@@ -107,26 +116,26 @@ const GridExpandHero = (props) => {
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
     ] });
   }
-  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative h-[250vh]", sectionClassName), style: sectionStyle, css, children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative", isEditor ? "h-auto" : "h-[250vh]", sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "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: "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: "sticky top-0 flex h-screen w-full items-center overflow-hidden", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: cn("flex h-screen w-full items-center overflow-hidden", !isEditor && "sticky top-0"), children: /* @__PURE__ */ jsxs(
       motion.div,
       {
         className: "z-10 grid w-full grid-flow-col justify-center",
         style: {
           gridTemplateColumns: gridColsStyle,
-          ...leftContainerHeight
+          ...isEditor ? editorLeftContainerHeight : leftContainerHeight
         },
         children: [
           /* @__PURE__ */ jsxs(
             motion.div,
             {
               className: "grid grid-flow-col grid-cols-1 justify-items-end gap-4 justify-self-end px-4",
-              style: leftLeftImageGroup,
+              style: isEditor ? editorLeftLeftImageGroup : leftLeftImageGroup,
               children: [
                 /* @__PURE__ */ jsx("div", { className: "relative top-[5%] hidden w-[40vw] sm:w-[25vw] md:block lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[2/3] w-full object-cover", ...images[0] }) }),
                 /* @__PURE__ */ jsxs("div", { className: "relative top-[-5%] flex flex-col gap-4 self-center", children: [
@@ -137,12 +146,12 @@ const GridExpandHero = (props) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx(motion.div, { className: "relative", style: leftCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", ...images[4] }) }),
+          /* @__PURE__ */ jsx(motion.div, { className: "relative", style: isEditor ? editorLeftCenterImageContainer : leftCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", ...images[4] }) }),
           /* @__PURE__ */ jsx(
             motion.div,
             {
               className: "grid grid-flow-col grid-cols-1 gap-4 justify-self-start px-4",
-              style: leftRightImage,
+              style: isEditor ? editorLeftRightImage : leftRightImage,
               children: /* @__PURE__ */ jsx("div", { className: "relative top-[5%] w-[40vw] md:w-[25vw] lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[5] }) })
             }
           )
@@ -171,27 +180,27 @@ const GridExpandHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 6"
+      alt: "Placeholder image 6"
     }
   ]
 };

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

@@ -65,15 +65,15 @@ const HorizontalMarqueeHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     }
   ]
 };

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

@@ -7,6 +7,7 @@ import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
 import { useCallback } from "react";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 const imagePositions = {
   group1: [
     "bottom-[5%] left-[-8%] z-10 max-w-[18%] sm:bottom-[10%] lg:bottom-auto",
@@ -46,14 +47,27 @@ const getTransformStyles = (smoothMouseX, smoothMouseY, xRange, yRange) => {
   };
 };
 const MouseTrackHero = (props) => {
-  const { heading, description, buttons = [], group1Images = [], group2Images = [], styles } = {
+  const {
+    heading,
+    description,
+    buttons = [],
+    group1Images = [],
+    group2Images = [],
+    styles
+  } = {
     ...MouseTrackHeroDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const { smoothMouseX, smoothMouseY, handleMouseMove } = useMouseMove();
   const isMobile = useMediaQuery("(max-width: 991px)");
-  const Animate = isMobile ? "div" : motion.div;
+  const disableMotion = isMobile || isEditor;
+  const Animate = disableMotion ? "div" : motion.div;
   const canvasTransform = getTransformStyles(
     smoothMouseX,
     smoothMouseY,
@@ -77,26 +91,53 @@ const MouseTrackHero = (props) => {
     {
       className: "absolute inset-0 flex origin-bottom items-center justify-center",
       style: transformStyles,
-      children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: `absolute w-full ${positions[index]}`, children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full" }) }, index))
+      children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: `absolute w-full ${positions[index]}`, children: /* @__PURE__ */ jsx(
+        CompoundImage,
+        {
+          src: image.src,
+          alt: image.alt,
+          className: "size-full"
+        }
+      ) }, index))
     }
   );
   return /* @__PURE__ */ jsxs(
     SectionWrapper,
     {
-      className: cn("relative flex h-svh items-center justify-center overflow-hidden lg:h-screen", sectionClassName),
+      className: cn(
+        "relative flex h-svh items-center justify-center overflow-hidden lg:h-screen",
+        sectionClassName
+      ),
       style: sectionStyle,
       css,
-      onMouseMove: handleMouseMove,
+      onMouseMove: isEditor ? void 0 : handleMouseMove,
       children: [
         /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 text-center", 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 items-center justify-center 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 items-center justify-center 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(Animate, { className: "absolute size-full", style: canvasTransform, children: [
-          renderImages(group1Images, imagePositions.group1, group1Transform),
-          renderImages(group2Images, imagePositions.group2, group2Transform)
-        ] })
+        /* @__PURE__ */ jsxs(
+          Animate,
+          {
+            className: "absolute size-full",
+            style: canvasTransform,
+            children: [
+              renderImages(group1Images, imagePositions.group1, group1Transform),
+              renderImages(group2Images, imagePositions.group2, group2Transform)
+            ]
+          }
+        )
       ]
     }
   );
@@ -108,37 +149,37 @@ const MouseTrackHeroDefaults = {
   group1Images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     }
   ],
   group2Images: [
     {
       src: "https://picsum.photos/seed/hero-landscape/1200/800",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 6"
+      alt: "Placeholder image 6"
     },
     {
       src: "https://picsum.photos/seed/hero-landscape/1200/800",
-      alt: "Relume placeholder image 7"
+      alt: "Placeholder image 7"
     },
     {
       src: "https://picsum.photos/seed/hero-landscape/1200/800",
-      alt: "Relume placeholder image 8"
+      alt: "Placeholder image 8"
     }
   ]
 };

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

@@ -68,11 +68,11 @@ const MultiImageGridHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-landscape/1200/800",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     }
   ],
   styles: {