dune-react 0.0.21 → 0.0.23

package/dist/components/puck-block/gallery-sections/fullscreen-portfolio/index.d.ts

@@ -35,7 +35,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";
@@ -87,38 +87,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.";
+                    };
+                };
                 animation: {
                     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;
-                    })[];
+                    }[];
                 };
             };
         };

package/dist/components/puck-block/gallery-sections/fullscreen-portfolio/index.js

@@ -23,10 +23,11 @@ const conf = {
           type: "radio",
           label: "Animation",
           options: [
-            { label: "Sticky Stack", value: "sticky-stack", ...sectionWrapperFields },
+            { label: "Sticky Stack", value: "sticky-stack" },
             { label: "Scroll Fade", value: "scroll-fade" }
           ]
-        }
+        },
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/gallery-sections/interactive-portfolio/interactive-portfolio.js

@@ -159,7 +159,7 @@ const defaultHoverLink = {
   tag: "Tag",
   image: {
     src: "https://picsum.photos/seed/interactive-port/800/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   }
 };
 const InteractivePortfolioDefaults = {

package/dist/components/puck-block/gallery-sections/portfolio-cards/index.d.ts

@@ -24,7 +24,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";
@@ -104,7 +104,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/gallery-sections/portfolio-cards/portfolio-cards.js

@@ -129,7 +129,7 @@ const defaultProject = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
   image: {
     src: "https://picsum.photos/seed/portfolio-card/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   url: "#",
   button: { label: "View project", variant: "link", size: "sm" },

package/dist/components/puck-block/gallery-sections/portfolio-divider/index.d.ts

@@ -24,7 +24,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";
@@ -104,7 +104,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/gallery-sections/portfolio-divider/portfolio-divider.js

@@ -10,81 +10,84 @@ const PortfolioDivider = (props) => {
     ...props
   };
   const { className: sectionClassName, style: sectionStyle, css, mediaPosition = "right" } = styles ?? {};
-  const isMediaLeft = mediaPosition === "left";
+  const startsLeft = mediaPosition === "left";
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("header", { className: "mb-12 max-w-lg md:mb-18 lg:mb-20", children: [
       /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { children: projects.map((project, index) => /* @__PURE__ */ jsx(
-      "article",
-      {
-        className: "grid grid-cols-1 items-center gap-x-12 gap-y-6 border-t border-border-primary py-8 md:grid-cols-2 md:gap-y-0 lg:gap-x-[4.9rem] lg:py-12",
-        children: isMediaLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
-            CompoundImage,
-            {
-              src: project.image.src,
-              className: "w-full object-cover",
-              alt: project.image.alt
-            }
-          ) }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: /* @__PURE__ */ jsx("a", { href: project.url, children: project.title }) }),
-            /* @__PURE__ */ jsx("p", { children: project.description }),
-            project.tags && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2 md:mt-4", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
-              "a",
+    /* @__PURE__ */ jsx("div", { children: projects.map((project, index) => {
+      const isMediaLeft = startsLeft ? index % 2 === 0 : index % 2 !== 0;
+      return /* @__PURE__ */ jsx(
+        "article",
+        {
+          className: "grid grid-cols-1 items-center gap-x-12 gap-y-6 border-t border-border-primary py-8 md:grid-cols-2 md:gap-y-0 lg:gap-x-[4.9rem] lg:py-12",
+          children: isMediaLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
+              CompoundImage,
               {
-                href: tag.url,
-                className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
-                children: tag.label
+                src: project.image.src,
+                className: "w-full object-cover",
+                alt: project.image.alt
               }
-            ) }, tagIndex)) }),
-            /* @__PURE__ */ jsx(
-              Button,
+            ) }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: /* @__PURE__ */ jsx("a", { href: project.url, children: project.title }) }),
+              /* @__PURE__ */ jsx("p", { children: project.description }),
+              project.tags && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2 md:mt-4", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: tag.url,
+                  className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
+                  children: tag.label
+                }
+              ) }, tagIndex)) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: project.button.variant,
+                  size: project.button.size,
+                  className: "mt-6 md:mt-8",
+                  children: project.button.label
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: /* @__PURE__ */ jsx("a", { href: project.url, children: project.title }) }),
+              /* @__PURE__ */ jsx("p", { children: project.description }),
+              project.tags && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2 md:mt-4", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: tag.url,
+                  className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
+                  children: tag.label
+                }
+              ) }, tagIndex)) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: project.button.variant,
+                  size: project.button.size,
+                  className: "mt-6 md:mt-8",
+                  children: project.button.label
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
+              CompoundImage,
               {
-                variant: project.button.variant,
-                size: project.button.size,
-                className: "mt-6 md:mt-8",
-                children: project.button.label
+                src: project.image.src,
+                className: "w-full object-cover",
+                alt: project.image.alt
               }
-            )
+            ) }) })
           ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: /* @__PURE__ */ jsx("a", { href: project.url, children: project.title }) }),
-            /* @__PURE__ */ jsx("p", { children: project.description }),
-            project.tags && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2 md:mt-4", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: tag.url,
-                className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
-                children: tag.label
-              }
-            ) }, tagIndex)) }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: project.button.variant,
-                size: project.button.size,
-                className: "mt-6 md:mt-8",
-                children: project.button.label
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
-            CompoundImage,
-            {
-              src: project.image.src,
-              className: "w-full object-cover",
-              alt: project.image.alt
-            }
-          ) }) })
-        ] })
-      },
-      index
-    )) }),
+        },
+        index
+      );
+    }) }),
     /* @__PURE__ */ jsx("footer", { className: "mt-12 flex justify-center md:mt-18 lg:mt-20", children: /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }) })
   ] }) });
 };
@@ -93,7 +96,7 @@ const defaultProject = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
   image: {
     src: "https://picsum.photos/seed/portfolio-div/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   url: "#",
   button: { label: "View project", variant: "link", size: "sm" },

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

@@ -144,8 +144,18 @@ export declare const galleryStyleFields: {
         }];
     };
     readonly 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%";
+        }];
     };
     readonly bordered: {
         readonly type: "radio";

package/dist/components/puck-block/gallery-sections/props.js

@@ -64,8 +64,13 @@ const galleryStyleFields = {
     ]
   },
   slideBasis: {
-    type: "text",
-    label: "Slide Basis"
+    type: "select",
+    label: "Slide Basis",
+    options: [
+      { label: "4/5", value: "4/5" },
+      { label: "45%", value: "45%" },
+      { label: "30%", value: "30%" }
+    ]
   },
   bordered: {
     type: "radio",

package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js

@@ -5,6 +5,7 @@ import { useScroll, useTransform, motion } from "framer-motion";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const ScrollParallax = (props) => {
   const { heading, description, images, styles } = {
@@ -12,6 +13,7 @@ const ScrollParallax = (props) => {
     ...props
   };
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
   const { scrollYProgress } = useScroll({
@@ -19,6 +21,22 @@ const ScrollParallax = (props) => {
     ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
   const x = useTransform(scrollYProgress, [0, 1], ["0%", "-100%"]);
+  if (isEditor) {
+    return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
+      /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
+        /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+        /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-[5%] py-12", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+        CompoundImage,
+        {
+          className: "aspect-video w-full object-cover",
+          src: image.src,
+          alt: image.alt
+        }
+      ) }, index)) }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
       /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/index.d.ts

@@ -59,38 +59,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.";
+                    };
+                };
                 animation: {
                     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;
-                    })[];
+                    }[];
                 };
             };
         };

package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/index.js

@@ -24,10 +24,11 @@ const conf = {
           type: "radio",
           label: "Animation",
           options: [
-            { label: "Three Image Parallax", value: "threeImageParallax", ...sectionWrapperFields },
+            { label: "Three Image Parallax", value: "threeImageParallax" },
             { label: "Scale Opacity", value: "scaleOpacity" }
           ]
-        }
+        },
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/scroll-parallax-portfolio.js

@@ -5,6 +5,7 @@ import { useScroll, useTransform, motion, useSpring, easeOut, easeInOut } from "
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const ScrollParallaxPortfolio = (props) => {
   const { projects, styles } = {
@@ -23,6 +24,7 @@ const ThreeImageParallaxVariant = ({
   sectionStyle,
   css
 }) => {
+  const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
   const { scrollYProgress } = useScroll({
@@ -76,23 +78,23 @@ const ThreeImageParallaxVariant = ({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn("relative flex h-[500vh] flex-col", {
-            "mt-[-40vh]": index > 0
+          className: cn("relative flex flex-col", isEditor ? "h-auto mb-12" : "h-[500vh]", {
+            "mt-[-40vh]": !isEditor && index > 0
           }),
           children: [
             /* @__PURE__ */ jsx(
               motion.div,
               {
-                className: "sticky top-0 flex h-[150vh] justify-center",
-                style: computedStyles[index].headerStyles,
-                children: /* @__PURE__ */ jsxs("div", { className: "absolute top-[50vh] -z-10 flex w-full max-w-lg flex-col items-center text-center", children: [
+                className: cn("flex justify-center", isEditor ? "relative h-auto py-8" : "sticky top-0 h-[150vh]"),
+                style: isEditor ? { opacity: 1, scale: 1 } : computedStyles[index].headerStyles,
+                children: /* @__PURE__ */ jsxs("div", { className: cn("-z-10 flex w-full max-w-lg flex-col items-center text-center", isEditor ? "relative" : "absolute top-[50vh]"), children: [
                   /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
                   project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
                 ] })
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex h-screen items-center justify-center overflow-hidden", children: [
-              /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "flex h-screen w-full max-w-lg items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex items-center justify-center overflow-hidden", isEditor ? "relative h-auto" : "sticky top-0 h-screen"), children: [
+              /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: cn("flex w-full max-w-lg items-center justify-center overflow-hidden", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
                 CompoundImage,
                 {
                   src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
@@ -100,11 +102,11 @@ const ThreeImageParallaxVariant = ({
                   className: "size-full object-contain"
                 }
               ) }) }),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 right-auto z-20 hidden h-screen w-full max-w-xxs lg:flex", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: cn("absolute inset-y-0 left-0 right-auto z-20 hidden w-full max-w-xxs lg:flex", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
                 motion.div,
                 {
-                  className: "relative w-full pt-[100vh]",
-                  style: computedStyles[index].imageLeftStyles,
+                  className: cn("relative w-full", isEditor ? "pt-0" : "pt-[100vh]"),
+                  style: isEditor ? { y: 0 } : computedStyles[index].imageLeftStyles,
                   children: /* @__PURE__ */ jsx(
                     CompoundImage,
                     {
@@ -115,11 +117,11 @@ const ThreeImageParallaxVariant = ({
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-auto right-0 z-20 hidden h-screen w-full max-w-xxs lg:flex", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: cn("absolute inset-y-0 left-auto right-0 z-20 hidden w-full max-w-xxs lg:flex", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
                 motion.div,
                 {
-                  className: "relative w-full pt-[100vh]",
-                  style: computedStyles[index].imageRightStyles,
+                  className: cn("relative w-full", isEditor ? "pt-0" : "pt-[100vh]"),
+                  style: isEditor ? { y: 0 } : computedStyles[index].imageRightStyles,
                   children: /* @__PURE__ */ jsx(
                     CompoundImage,
                     {
@@ -131,13 +133,13 @@ const ThreeImageParallaxVariant = ({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+            !isEditor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
           ]
         },
         index
       );
     }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "h-screen" })
+    !isEditor && /* @__PURE__ */ jsx("div", { className: "h-screen" })
   ] });
 };
 const ScaleOpacityVariant = ({
@@ -146,13 +148,14 @@ const ScaleOpacityVariant = ({
   sectionStyle,
   css
 }) => {
+  const { isEditor } = useEditorContext();
   const containerRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(containerRef);
   const { scrollYProgress } = useScroll({
     target: containerRef,
     ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
-  return /* @__PURE__ */ jsx(SectionWrapper, { ref: containerRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen items-center justify-center", children: projects.map((project, index) => {
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: containerRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: isEditor ? "h-auto" : "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", isEditor ? "relative flex-col gap-8 py-12" : "sticky top-0 h-screen"), children: projects.map((project, index) => {
     const segmentSize = 1 / projects.length;
     const start = index * segmentSize;
     const end = start + segmentSize;
@@ -169,8 +172,8 @@ const ScaleOpacityVariant = ({
     return /* @__PURE__ */ jsx(
       motion.div,
       {
-        style: { opacity, scale },
-        className: "absolute inset-0 flex items-center justify-center",
+        style: isEditor ? { opacity: 1, scale: 1 } : { opacity, scale },
+        className: cn("flex items-center justify-center", isEditor ? "relative w-full" : "absolute inset-0"),
         children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl border border-border-primary bg-background-primary p-8 md:p-12", children: [
           /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
             CompoundImage,
@@ -201,7 +204,7 @@ const defaultProject = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
   image: {
     src: "https://picsum.photos/seed/scroll-port/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   url: "#",
   button: { label: "View project" },
@@ -212,15 +215,15 @@ const defaultProject = {
   ],
   imageCenter: {
     src: "https://picsum.photos/seed/scroll-port-center/800/1000",
-    alt: "Relume placeholder center"
+    alt: "Placeholder center"
   },
   imageLeft: {
     src: "https://picsum.photos/seed/scroll-port-left/400/600",
-    alt: "Relume placeholder left"
+    alt: "Placeholder left"
   },
   imageRight: {
     src: "https://picsum.photos/seed/scroll-port-right/400/600",
-    alt: "Relume placeholder right"
+    alt: "Placeholder right"
   }
 };
 const ScrollParallaxPortfolioDefaults = {

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