dune-react 0.0.21 → 0.0.23

package/dist/components/puck-block/header-sections/standard-navbar/index.d.ts

@@ -41,7 +41,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/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

@@ -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: "Placeholder image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Placeholder image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "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/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/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/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/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" }),
@@ -78,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/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/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/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/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/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";