dune-react 0.0.22 → 0.0.24

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

@@ -7,24 +7,105 @@ import { motion } from "framer-motion";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const CenteredNavbar = (props) => {
-  const { logo, navLinks, buttons, styles } = { ...CenteredNavbarDefaults, ...props };
-  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const { logo, navLinks, buttons, styles } = {
+    ...CenteredNavbarDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   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__ */ 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)) })
+  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,
+              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))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: {
+              open: { height: "var(--height-open, 100dvh)" },
+              close: { height: "var(--height-closed, 0)" }
+            },
+            animate: isMobileMenuOpen ? "open" : "close",
+            initial: "close",
+            transition: { duration: 0.4 },
+            className: "overflow-hidden px-[5%] text-center lg:flex lg:items-center lg:justify-center lg:px-0 lg:[--height-closed:auto] lg:[--height-open:auto]",
+            children: navLinks == null ? void 0 : navLinks.map((navLink, index) => /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: navLink.url,
+                className: "block py-3 text-md first:pt-7 lg:px-4 lg:py-2 lg:text-base first:lg:pt-2",
+                children: navLink.title
+              },
+              index
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden justify-self-end gap-2 lg:flex", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "px-6 py-2",
+            variant: b.variant,
+            size: b.size,
+            children: b.label
+          },
+          i
+        )) })
       ] })
-    ] }),
-    /* @__PURE__ */ jsx(motion.div, { variants: { open: { height: "var(--height-open, 100dvh)" }, close: { height: "var(--height-closed, 0)" } }, animate: isMobileMenuOpen ? "open" : "close", initial: "close", transition: { duration: 0.4 }, className: "overflow-hidden px-[5%] text-center lg:flex lg:items-center lg:justify-center lg:px-0 lg:[--height-closed:auto] lg:[--height-open:auto]", children: navLinks == null ? void 0 : navLinks.map((navLink, index) => /* @__PURE__ */ jsx("a", { href: navLink.url, className: "block py-3 text-md first:pt-7 lg:px-4 lg:py-2 lg:text-base first:lg:pt-2", children: navLink.title }, index)) }),
-    /* @__PURE__ */ jsx("div", { className: "hidden justify-self-end lg:block", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(Button, { className: "px-6 py-2", variant: b.variant, size: b.size, children: b.label }, i)) })
-  ] }) });
+    }
+  );
 };
 const CenteredNavbarDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Logo image" },
-  navLinks: [{ title: "Link One", url: "#" }, { title: "Link Two", url: "#" }, { title: "Link Three", url: "#" }, { title: "Link Four", url: "#" }],
+  __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" }],
   styles: {}

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/grid-expand-hero/index.d.ts

@@ -145,8 +145,24 @@ declare const conf: {
                     }];
                 };
                 gridRatio: {
-                    readonly type: "text";
+                    readonly type: "select";
                     readonly label: "Grid Ratio";
+                    readonly options: readonly [{
+                        readonly label: "25% / 50% / 25%";
+                        readonly value: "25%_50%_25%";
+                    }, {
+                        readonly label: "32% / 36% / 32%";
+                        readonly value: "32%_36%_32%";
+                    }, {
+                        readonly label: "33% / 33% / 33%";
+                        readonly value: "33%_34%_33%";
+                    }, {
+                        readonly label: "20% / 60% / 20%";
+                        readonly value: "20%_60%_20%";
+                    }, {
+                        readonly label: "40% / 30% / 30%";
+                        readonly value: "40%_30%_30%";
+                    }];
                 };
             };
         };

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