dune-react 0.0.19 → 0.0.21

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

@@ -0,0 +1,123 @@
+import { ImageCarousel, ImageCarouselDefaults } from "./image-carousel";
+import type { ImageCarouselProps } from "./image-carousel";
+export { ImageCarousel, ImageCarouselDefaults };
+export type { ImageCarouselProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
+                    type: "text";
+                };
+            };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
+        };
+        styles: {
+            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.";
+                    };
+                };
+                fullscreen: {
+                    readonly type: "radio";
+                    readonly label: "Fullscreen";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                headerAlign: {
+                    readonly type: "radio";
+                    readonly label: "Header Align";
+                    readonly options: readonly [{
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }, {
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }];
+                };
+                navStyle: {
+                    readonly type: "radio";
+                    readonly label: "Nav Style";
+                    readonly options: readonly [{
+                        readonly label: "Center Dots";
+                        readonly value: "centerDots";
+                    }, {
+                        readonly label: "Bottom Bar";
+                        readonly value: "bottomBar";
+                    }];
+                };
+                slidesPerView: {
+                    readonly type: "text";
+                    readonly label: "Slides Per View";
+                };
+                slideOverflow: {
+                    readonly type: "radio";
+                    readonly label: "Slide Overflow";
+                    readonly options: readonly [{
+                        readonly label: "Hidden";
+                        readonly value: "hidden";
+                    }, {
+                        readonly label: "Visible";
+                        readonly value: "visible";
+                    }];
+                };
+                activeOpacity: {
+                    readonly type: "radio";
+                    readonly label: "Active Opacity";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: ImageCarouselProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/gallery-sections/image-carousel/index.js

@@ -0,0 +1,32 @@
+import { ImageCarousel, ImageCarouselDefaults } from "./image-carousel.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    images: imagesField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        fullscreen: galleryStyleFields.fullscreen,
+        headerAlign: galleryStyleFields.headerAlign,
+        navStyle: galleryStyleFields.navStyle,
+        slidesPerView: galleryStyleFields.slidesPerView,
+        slideOverflow: galleryStyleFields.slideOverflow,
+        activeOpacity: galleryStyleFields.activeOpacity,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: ImageCarouselDefaults,
+  render: ImageCarousel
+};
+export {
+  ImageCarousel,
+  ImageCarouselDefaults,
+  conf as default
+};

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

@@ -0,0 +1,11 @@
+export { default as AsymmetricGridConf } from "./asymmetric-grid";
+export { default as FullscreenPortfolioConf } from "./fullscreen-portfolio";
+export { default as ImageCarouselConf } from "./image-carousel";
+export { default as InteractivePortfolioConf } from "./interactive-portfolio";
+export { default as MasonryGridConf } from "./masonry-grid";
+export { default as PortfolioCardsConf } from "./portfolio-cards";
+export { default as PortfolioDividerConf } from "./portfolio-divider";
+export { default as ScrollParallaxConf } from "./scroll-parallax";
+export { default as ScrollParallaxPortfolioConf } from "./scroll-parallax-portfolio";
+export { default as SplitCarouselConf } from "./split-carousel";
+export { default as StaticGridConf } from "./static-grid";

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

@@ -0,0 +1,83 @@
+import { InteractivePortfolio, InteractivePortfolioDefaults } from "./interactive-portfolio";
+import type { InteractivePortfolioProps } from "./interactive-portfolio";
+export { InteractivePortfolio, InteractivePortfolioDefaults };
+export type { InteractivePortfolioProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        hoverLinks: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                heading?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                url: {
+                    type: string;
+                };
+                heading: {
+                    type: string;
+                };
+                tag: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            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.";
+                    };
+                };
+                listLayout: {
+                    readonly type: "select";
+                    readonly label: "List Layout";
+                    readonly options: readonly [{
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }, {
+                        readonly label: "Left Aligned";
+                        readonly value: "left-aligned";
+                    }, {
+                        readonly label: "Left + Sticky Image";
+                        readonly value: "left-with-sticky-image";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: InteractivePortfolioProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,35 @@
+import { InteractivePortfolio, InteractivePortfolioDefaults } from "./interactive-portfolio.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    hoverLinks: {
+      type: "array",
+      max: 10,
+      getItemSummary: (item, index = 0) => item.heading || `Link ${index + 1}`,
+      arrayFields: {
+        url: { type: "text" },
+        heading: { type: "text" },
+        tag: { type: "text" },
+        image: imageField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        listLayout: galleryStyleFields.listLayout,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: InteractivePortfolioDefaults,
+  render: InteractivePortfolio
+};
+export {
+  InteractivePortfolio,
+  InteractivePortfolioDefaults,
+  conf as default
+};

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

@@ -0,0 +1,4 @@
+import type { GalleryComponentProps, GallerySectionBaseProps } from "../props";
+export type InteractivePortfolioProps = GalleryComponentProps;
+export declare const InteractivePortfolio: (props: InteractivePortfolioProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InteractivePortfolioDefaults: GallerySectionBaseProps;

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

@@ -0,0 +1,188 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const getDirection = (ev, obj) => {
+  const { width: w, height: h, left, top } = obj.getBoundingClientRect();
+  const centerX = left + w / 2;
+  const centerY = top + h / 2;
+  const xOffset = ev.clientX - centerX;
+  const yOffset = ev.clientY - centerY;
+  const angleDegrees = Math.atan2(yOffset, xOffset) * (180 / Math.PI);
+  const adjustedAngle = angleDegrees < 0 ? angleDegrees + 360 : angleDegrees;
+  if (adjustedAngle >= 315 || adjustedAngle < 45) return "right";
+  if (adjustedAngle >= 45 && adjustedAngle < 135) return "bottom";
+  if (adjustedAngle >= 135 && adjustedAngle < 225) return "left";
+  return "top";
+};
+const InteractivePortfolio = (props) => {
+  var _a, _b;
+  const { tagline, hoverLinks, styles } = {
+    ...InteractivePortfolioDefaults,
+    ...props
+  };
+  const { className: sectionClassName, style: sectionStyle, css, listLayout = "center" } = styles ?? {};
+  const ref = useRef(null);
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [direction, setDirection] = useState("initial");
+  const handleMouseEnter = (event) => {
+    if (!ref.current) return;
+    setDirection(getDirection(event, ref.current));
+  };
+  const handleMouseMove = (e) => {
+    setCursorPosition({ x: e.clientX, y: e.clientY });
+  };
+  const handleMouseLeave = () => setHoveredIndex(null);
+  const imageVariants = {
+    initial: { x: 0, y: 0 },
+    top: { y: 50, transition: { type: "spring", duration: 1, bounce: 0 } },
+    bottom: { y: -50, transition: { type: "spring", duration: 1, bounce: 0 } },
+    left: { x: 50, transition: { type: "spring", duration: 1, bounce: 0 } },
+    right: { x: -50, transition: { type: "spring", duration: 1, bounce: 0 } }
+  };
+  const translateTopInverse = direction === "top" ? -50 : 0;
+  const translateBottomInverse = direction === "bottom" ? 50 : 0;
+  const translateLeftInverse = direction === "left" ? -50 : 0;
+  const translateRightInverse = direction === "right" ? 50 : 0;
+  if (listLayout === "left-with-sticky-image") {
+    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__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16", children: [
+        /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-20 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            src: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.src : (_a = hoverLinks[0]) == null ? void 0 : _a.image.src,
+            alt: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.alt : (_b = hoverLinks[0]) == null ? void 0 : _b.image.alt,
+            className: "size-full object-cover transition-all duration-500"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: link.url,
+            onMouseEnter: () => setHoveredIndex(index),
+            onMouseLeave: () => setHoveredIndex(null),
+            className: "flex items-center justify-between border-b border-border-primary py-6 md:py-8",
+            children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-2xl font-bold transition-colors duration-300 md:text-4xl lg:text-5xl",
+                    {
+                      "text-black/20": hoveredIndex !== index && hoveredIndex !== null
+                    }
+                  ),
+                  children: link.heading
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "bg-background-secondary px-2 py-1 text-sm font-semibold", children: link.tag })
+            ]
+          },
+          index
+        )) })
+      ] })
+    ] }) });
+  }
+  const isLeftAligned = listLayout === "left-aligned";
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, onMouseMove: handleMouseMove, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isLeftAligned }), children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: "initial",
+        whileHover: direction,
+        ref,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: link.url,
+            onMouseEnter: () => setHoveredIndex(index),
+            className: cn("flex items-center gap-2 p-4 sm:gap-4 md:gap-8", {
+              "flex-col justify-center sm:flex-row": !isLeftAligned,
+              "flex-row justify-between border-b border-border-primary": isLeftAligned
+            }),
+            children: [
+              isLeftAligned && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-neutral-500", children: String(index + 1).padStart(2, "0") }),
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "font-bold transition-colors duration-300",
+                    {
+                      "text-6xl md:text-9xl lg:text-10xl": !isLeftAligned,
+                      "text-2xl md:text-4xl lg:text-5xl": isLeftAligned,
+                      "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
+                      "lg:text-black": hoveredIndex === index || hoveredIndex === null
+                    }
+                  ),
+                  children: link.heading
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "bg-background-secondary border border-neutral-lightest px-2 py-1 text-sm font-semibold", children: link.tag }),
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  className: `pointer-events-none fixed inset-0 -z-10 hidden size-[600px] lg:block ${hoveredIndex === index ? "opacity-100" : "opacity-0"}`,
+                  style: {
+                    translateX: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
+                    translateY: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    motion.img,
+                    {
+                      className: "size-full max-w-md",
+                      variants: imageVariants,
+                      src: link.image.src,
+                      alt: link.image.alt
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] }) });
+};
+const defaultHoverLink = {
+  url: "#",
+  heading: "Project name",
+  tag: "Tag",
+  image: {
+    src: "https://picsum.photos/seed/interactive-port/800/800",
+    alt: "Relume placeholder image"
+  }
+};
+const InteractivePortfolioDefaults = {
+  tagline: "Tagline",
+  heading: "",
+  description: "",
+  button: { label: "View all" },
+  buttons: [],
+  images: [],
+  projects: [],
+  hoverLinks: [
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-1/800/800", alt: "Project 1" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-2/800/800", alt: "Project 2" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-3/800/800", alt: "Project 3" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-4/800/800", alt: "Project 4" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-5/800/800", alt: "Project 5" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-6/800/800", alt: "Project 6" } }
+  ],
+  styles: {
+    listLayout: "center"
+  }
+};
+export {
+  InteractivePortfolio,
+  InteractivePortfolioDefaults
+};

package/dist/components/puck-block/gallery-sections/masonry-grid/index.d.ts

@@ -0,0 +1,68 @@
+import { MasonryGrid, MasonryGridDefaults } from "./masonry-grid";
+import type { MasonryGridProps } from "./masonry-grid";
+export { MasonryGrid, MasonryGridDefaults };
+export type { MasonryGridProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
+                    type: "text";
+                };
+            };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
+        };
+        styles: {
+            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.";
+                    };
+                };
+                columns: {
+                    readonly type: "text";
+                    readonly label: "Columns";
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: MasonryGridProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/gallery-sections/masonry-grid/index.js

@@ -0,0 +1,27 @@
+import { MasonryGrid, MasonryGridDefaults } from "./masonry-grid.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    images: imagesField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        columns: galleryStyleFields.columns,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: MasonryGridDefaults,
+  render: MasonryGrid
+};
+export {
+  MasonryGrid,
+  MasonryGridDefaults,
+  conf as default
+};

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

@@ -0,0 +1,4 @@
+import type { GalleryComponentProps, GallerySectionBaseProps } from "../props";
+export type MasonryGridProps = GalleryComponentProps;
+export declare const MasonryGrid: (props: MasonryGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MasonryGridDefaults: GallerySectionBaseProps;

package/dist/components/puck-block/gallery-sections/masonry-grid/masonry-grid.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const MasonryGrid = (props) => {
+  const { heading, description, images, styles } = {
+    ...MasonryGridDefaults,
+    ...props
+  };
+  const { className: sectionClassName, style: sectionStyle, css, columns = "2" } = styles ?? {};
+  const cols = parseInt(columns, 10) || 2;
+  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("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: [
+      /* @__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",
+      {
+        className: cn("gap-x-8", {
+          "md:columns-2": cols === 2,
+          "md:columns-2 lg:columns-3": cols === 3
+        }),
+        children: images.map((image, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "mb-8 inline-block w-full", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("relative inline-block w-full", {
+              "pt-[100%]": index % 3 === 0,
+              "pt-[66.66%]": index % 3 !== 0
+            }),
+            children: /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: "absolute inset-0 size-full object-cover"
+              }
+            )
+          }
+        ) }, index))
+      }
+    )
+  ] }) });
+};
+const MasonryGridDefaults = {
+  tagline: "",
+  heading: "Image Gallery",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  button: { label: "View all" },
+  buttons: [],
+  images: [
+    { src: "https://picsum.photos/seed/masonry-1/800/800", alt: "Gallery image 1" },
+    { src: "https://picsum.photos/seed/masonry-2/800/533", alt: "Gallery image 2" },
+    { src: "https://picsum.photos/seed/masonry-3/800/533", alt: "Gallery image 3" },
+    { src: "https://picsum.photos/seed/masonry-4/800/800", alt: "Gallery image 4" }
+  ],
+  projects: [],
+  hoverLinks: [],
+  styles: {
+    columns: "2"
+  }
+};
+export {
+  MasonryGrid,
+  MasonryGridDefaults
+};