dune-react 0.0.31 → 0.0.33

package/dist/components/puck-block/footer-sections/newsletter-links-footer/index.d.ts

@@ -4,6 +4,17 @@ export { NewsletterLinksFooter, NewsletterLinksFooterDefaults };
 export type { NewsletterLinksFooterProps };
 declare const conf: {
     fields: {
+        __metadata: {
+            type: string;
+            ai: {
+                instructions: string;
+            };
+            objectFields: {
+                type: {
+                    type: string;
+                };
+            };
+        };
         logo: {
             type: "object";
             objectFields: {

package/dist/components/puck-block/footer-sections/newsletter-top-links-footer/index.d.ts

@@ -4,6 +4,17 @@ export { NewsletterTopLinksFooter, NewsletterTopLinksFooterDefaults };
 export type { NewsletterTopLinksFooterProps };
 declare const conf: {
     fields: {
+        __metadata: {
+            type: string;
+            ai: {
+                instructions: string;
+            };
+            objectFields: {
+                type: {
+                    type: string;
+                };
+            };
+        };
         logo: {
             type: "object";
             objectFields: {
@@ -122,16 +133,45 @@ declare const conf: {
                 };
             };
         };
-        socialMediaLinks: {
-            type: string;
-            label: string;
-            getItemSummary: (item: {
-                url?: string;
-            }, index?: number) => string;
-            arrayFields: {
-                url: {
-                    type: string;
-                    label: string;
+        socialLinks: {
+            readonly type: "array";
+            readonly label: "Social Links";
+            readonly getItemSummary: (item: {
+                platform?: string;
+            }, i?: number) => string;
+            readonly arrayFields: {
+                readonly platform: {
+                    readonly type: "select";
+                    readonly label: "Platform";
+                    readonly options: readonly [{
+                        readonly label: "Twitter / X";
+                        readonly value: "twitter";
+                    }, {
+                        readonly label: "Facebook";
+                        readonly value: "facebook";
+                    }, {
+                        readonly label: "Instagram";
+                        readonly value: "instagram";
+                    }, {
+                        readonly label: "LinkedIn";
+                        readonly value: "linkedin";
+                    }, {
+                        readonly label: "YouTube";
+                        readonly value: "youtube";
+                    }, {
+                        readonly label: "GitHub";
+                        readonly value: "github";
+                    }, {
+                        readonly label: "TikTok";
+                        readonly value: "tiktok";
+                    }, {
+                        readonly label: "Discord";
+                        readonly value: "discord";
+                    }];
+                };
+                readonly url: {
+                    readonly type: "text";
+                    readonly label: "URL";
                 };
             };
         };
@@ -186,6 +226,17 @@ declare const conf: {
                         readonly value: "cta";
                     }];
                 };
+                showSocialLinks: {
+                    readonly type: "radio";
+                    readonly label: "Display Social Links";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
             };
         };
     };

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

@@ -4,9 +4,9 @@
  * 基础类型引用自 ../props/（全局共享）
  * FooterSectionStyles 为 footer 特有的样式字段
  */
-import type { BaseImage } from "@/components/puck-core/core/props/media";
-import type { BaseButton } from "@/components/puck-core/core/props/interactive";
-export type { BaseImage, BaseButton };
+import type { BaseMedia } from "@/components/puck-core/core/props/media";
+import type { BaseButton, BaseSocialLink } from "@/components/puck-core/core/props/interactive";
+export type { BaseMedia, BaseButton, BaseSocialLink };
 export interface FooterSectionStyles {
     className?: string;
     style?: React.CSSProperties;
@@ -14,6 +14,7 @@ export interface FooterSectionStyles {
     bordered?: boolean;
     hasCompanyImage?: boolean;
     topContentType?: "newsletter" | "cta";
+    showSocialLinks?: string;
 }
 export interface FooterLink {
     title: string;
@@ -24,10 +25,6 @@ export interface ColumnLinks {
     title?: string;
     links: FooterLink[];
 }
-export interface SocialMediaLink {
-    url: string;
-    icon: React.ReactNode;
-}
 export interface FooterAddress {
     label: string;
     value: string;
@@ -38,7 +35,7 @@ export interface FooterContact {
     email: string;
 }
 export interface FooterSectionBaseProps {
-    logo: BaseImage & {
+    logo: BaseMedia & {
         url?: string;
     };
     heading: string;
@@ -52,10 +49,9 @@ export interface FooterSectionBaseProps {
     columnLinks: ColumnLinks[];
     footerText: string;
     footerLinks: FooterLink[];
-    socialMediaLinks: SocialMediaLink[];
+    socialLinks: BaseSocialLink[];
     address: FooterAddress;
     contact: FooterContact;
-    companyImages: BaseImage[];
     styles: FooterSectionStyles;
     __metadata?: {
         type: "footer";
@@ -95,6 +91,17 @@ export declare const footerStyleFields: {
             readonly value: "cta";
         }];
     };
+    readonly showSocialLinks: {
+        readonly type: "radio";
+        readonly label: "Display Social Links";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
 };
 /** 将 FooterSectionBaseProps 与组件特有字段合并，生成最终 Props */
 export type FooterComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<FooterSectionBaseProps> & Partial<T>;

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

@@ -14,6 +14,14 @@ const footerStyleFields = {
       { label: "Yes", value: "true" },
       { label: "No", value: "false" }
     ]
+  },
+  showSocialLinks: {
+    type: "radio",
+    label: "Display Social Links",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
   }
 };
 export {

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

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const AsymmetricGrid = (props) => {
-  const { heading, description, images, styles } = {
+  const { heading, description, medias, styles } = {
     ...AsymmetricGridDefaults,
     ...props
   };
@@ -21,7 +21,7 @@ const AsymmetricGrid = (props) => {
           "md:grid-cols-2": !is4Small,
           "md:grid-cols-2 lg:grid-cols-3": is4Small
         }),
-        children: images.map((image, index) => /* @__PURE__ */ jsx(
+        children: medias.map((media, index) => /* @__PURE__ */ jsx(
           "a",
           {
             href: "#",
@@ -37,10 +37,10 @@ const AsymmetricGrid = (props) => {
                   "pt-[56.25%]": index !== 0
                 }),
                 children: /* @__PURE__ */ jsx(
-                  CompoundImage,
+                  CompoundMedia,
                   {
-                    src: image.src,
-                    alt: image.alt,
+                    src: media.src,
+                    alt: media.alt,
                     className: "absolute inset-0 size-full object-cover"
                   }
                 )
@@ -59,7 +59,7 @@ const AsymmetricGridDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   button: { label: "View all" },
   buttons: [],
-  images: [
+  medias: [
     { src: "https://picsum.photos/seed/asym-1/800/800", alt: "Gallery image 1" },
     { src: "https://picsum.photos/seed/asym-2/800/450", alt: "Gallery image 2" },
     { src: "https://picsum.photos/seed/asym-3/800/450", alt: "Gallery image 3" }

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

@@ -12,7 +12,7 @@ declare const conf: {
             readonly type: "textarea";
             readonly contentEditable: true;
         };
-        images: {
+        medias: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {

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

@@ -1,13 +1,13 @@
 import { AsymmetricGrid, AsymmetricGridDefaults } from "./asymmetric-grid.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
-import { imagesField } from "../../../puck-core/core/props/media.js";
+import { mediasField } 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,
+    medias: mediasField,
     styles: {
       type: "object",
       label: "Styles",

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

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { Button } from "../../../shadcn/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { useScroll, useTransform, motion } from "motion/react";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
@@ -23,10 +23,10 @@ const FullscreenPortfolio = (props) => {
       children: [
         /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
           /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
-              src: project.image.src,
-              alt: project.image.alt,
+              src: project.media.src,
+              alt: project.media.alt,
               className: "size-full object-cover"
             }
           ),
@@ -79,10 +79,10 @@ const ScrollFadeVariant = ({
         children: [
           /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
             /* @__PURE__ */ jsx(
-              CompoundImage,
+              CompoundMedia,
               {
-                src: project.image.src,
-                alt: project.image.alt,
+                src: project.media.src,
+                alt: project.media.alt,
                 className: "size-full object-cover"
               }
             ),
@@ -110,7 +110,7 @@ const ScrollFadeVariant = ({
 const defaultProject = {
   title: "Project name here",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-  image: {
+  media: {
     src: "https://picsum.photos/seed/fullscreen-port/1920/1080",
     alt: "Placeholder image"
   },
@@ -123,11 +123,11 @@ const FullscreenPortfolioDefaults = {
   description: "",
   button: { label: "View all" },
   buttons: [],
-  images: [],
+  medias: [],
   projects: [
-    { ...defaultProject, image: { src: "https://picsum.photos/seed/fs-port-1/1920/1080", alt: "Project 1" } },
-    { ...defaultProject, image: { src: "https://picsum.photos/seed/fs-port-2/1920/1080", alt: "Project 2" } },
-    { ...defaultProject, image: { src: "https://picsum.photos/seed/fs-port-3/1920/1080", alt: "Project 3" } }
+    { ...defaultProject, media: { src: "https://picsum.photos/seed/fs-port-1/1920/1080", alt: "Project 1" } },
+    { ...defaultProject, media: { src: "https://picsum.photos/seed/fs-port-2/1920/1080", alt: "Project 2" } },
+    { ...defaultProject, media: { src: "https://picsum.photos/seed/fs-port-3/1920/1080", alt: "Project 3" } }
   ],
   hoverLinks: [],
   styles: {

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

@@ -17,7 +17,7 @@ declare const conf: {
                 description: {
                     type: string;
                 };
-                image: {
+                media: {
                     type: "object";
                     objectFields: {
                         src: import("@puckeditor/core").Field<string>;

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

@@ -1,6 +1,6 @@
 import { FullscreenPortfolio, FullscreenPortfolioDefaults } from "./fullscreen-portfolio.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
@@ -11,7 +11,7 @@ const conf = {
       arrayFields: {
         title: { type: "text" },
         description: { type: "textarea" },
-        image: imageField,
+        media: mediaField,
         button: buttonField
       }
     },

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

@@ -2,11 +2,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const ImageCarousel = (props) => {
-  const { heading, description, images, styles } = {
+  const { heading, description, medias, styles } = {
     ...ImageCarouselDefaults,
     ...props
   };
@@ -69,7 +69,7 @@ const ImageCarousel = (props) => {
         opts: { loop: true, align: "start" },
         className: cn({ "overflow-hidden": slideOverflow === "hidden" }),
         children: [
-          /* @__PURE__ */ jsx(CarouselContent, { className: "ml-0", children: images.map((image, index) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(CarouselContent, { className: "ml-0", children: medias.map((media, index) => /* @__PURE__ */ jsx(
             CarouselItem,
             {
               className: cn(
@@ -88,10 +88,10 @@ const ImageCarousel = (props) => {
                     "opacity-40": current !== index + 1
                   }),
                   children: /* @__PURE__ */ jsx(
-                    CompoundImage,
+                    CompoundMedia,
                     {
-                      src: image.src,
-                      alt: image.alt,
+                      src: media.src,
+                      alt: media.alt,
                       className: cn("size-full object-cover", {
                         "absolute inset-0": isFullscreen
                       })
@@ -99,10 +99,10 @@ const ImageCarousel = (props) => {
                   )
                 }
               ) : /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
-                  src: image.src,
-                  alt: image.alt,
+                  src: media.src,
+                  alt: media.alt,
                   className: cn("size-full object-cover", {
                     "absolute inset-0": isFullscreen
                   })
@@ -120,7 +120,7 @@ const ImageCarousel = (props) => {
               /* @__PURE__ */ jsx(CarouselPrevious, { className: "static left-0 top-0 size-12 -translate-y-0" }),
               /* @__PURE__ */ jsx(CarouselNext, { className: "static left-0 top-0 size-12 -translate-y-0" })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center", children: images.map((_, index) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "flex items-center", children: medias.map((_, index) => /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: () => api == null ? void 0 : api.scrollTo(index),
@@ -131,7 +131,7 @@ const ImageCarousel = (props) => {
               },
               index
             )) })
-          ] }) : /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 transform", children: images.map((_, index) => /* @__PURE__ */ jsx(
+          ] }) : /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 transform", children: medias.map((_, index) => /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => api == null ? void 0 : api.scrollTo(index),
@@ -155,7 +155,7 @@ const ImageCarouselDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   button: { label: "View all" },
   buttons: [],
-  images: [
+  medias: [
     { src: "https://picsum.photos/seed/carousel-1/1920/1080", alt: "Gallery image 1" },
     { src: "https://picsum.photos/seed/carousel-2/1920/1080", alt: "Gallery image 2" },
     { src: "https://picsum.photos/seed/carousel-3/1920/1080", alt: "Gallery image 3" }

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

@@ -12,7 +12,7 @@ declare const conf: {
             readonly type: "textarea";
             readonly contentEditable: true;
         };
-        images: {
+        medias: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {

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

@@ -1,13 +1,13 @@
 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 { mediasField } 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,
+    medias: mediasField,
     styles: {
       type: "object",
       label: "Styles",

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

@@ -23,7 +23,7 @@ declare const conf: {
                 tag: {
                     type: string;
                 };
-                image: {
+                media: {
                     type: "object";
                     objectFields: {
                         src: import("@puckeditor/core").Field<string>;

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

@@ -1,5 +1,5 @@
 import { InteractivePortfolio, InteractivePortfolioDefaults } from "./interactive-portfolio.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
 import { galleryStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -13,7 +13,7 @@ const conf = {
         url: { type: "text" },
         heading: { type: "text" },
         tag: { type: "text" },
-        image: imageField
+        media: mediaField
       }
     },
     styles: {

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

@@ -4,7 +4,7 @@ import { useRef, useState } from "react";
 import { motion } from "motion/react";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 const getDirection = (ev, obj) => {
   const { width: w, height: h, left, top } = obj.getBoundingClientRect();
   const centerX = left + w / 2;
@@ -64,10 +64,10 @@ const InteractivePortfolio = (props) => {
           /* @__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,
+              CompoundMedia,
               {
-                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,
+                src: hoveredIndex !== null ? hoverLinks[hoveredIndex].media.src : (_a = hoverLinks[0]) == null ? void 0 : _a.media.src,
+                alt: hoveredIndex !== null ? hoverLinks[hoveredIndex].media.alt : (_b = hoverLinks[0]) == null ? void 0 : _b.media.alt,
                 className: "size-full object-cover transition-all duration-500"
               }
             ) }) }),
@@ -160,8 +160,8 @@ const InteractivePortfolio = (props) => {
                             {
                               className: "size-full max-w-md",
                               variants: imageVariants,
-                              src: link.image.src,
-                              alt: link.image.alt
+                              src: link.media.src,
+                              alt: link.media.alt
                             }
                           )
                         }
@@ -182,7 +182,7 @@ const defaultHoverLink = {
   url: "#",
   heading: "Project name",
   tag: "Tag",
-  image: {
+  media: {
     src: "https://picsum.photos/seed/interactive-port/800/800",
     alt: "Placeholder image"
   }
@@ -193,47 +193,47 @@ const InteractivePortfolioDefaults = {
   description: "",
   button: { label: "View all" },
   buttons: [],
-  images: [],
+  medias: [],
   projects: [],
   hoverLinks: [
     {
       ...defaultHoverLink,
-      image: {
+      media: {
         src: "https://picsum.photos/seed/ip-1/800/800",
         alt: "Project 1"
       }
     },
     {
       ...defaultHoverLink,
-      image: {
+      media: {
         src: "https://picsum.photos/seed/ip-2/800/800",
         alt: "Project 2"
       }
     },
     {
       ...defaultHoverLink,
-      image: {
+      media: {
         src: "https://picsum.photos/seed/ip-3/800/800",
         alt: "Project 3"
       }
     },
     {
       ...defaultHoverLink,
-      image: {
+      media: {
         src: "https://picsum.photos/seed/ip-4/800/800",
         alt: "Project 4"
       }
     },
     {
       ...defaultHoverLink,
-      image: {
+      media: {
         src: "https://picsum.photos/seed/ip-5/800/800",
         alt: "Project 5"
       }
     },
     {
       ...defaultHoverLink,
-      image: {
+      media: {
         src: "https://picsum.photos/seed/ip-6/800/800",
         alt: "Project 6"
       }

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

@@ -12,7 +12,7 @@ declare const conf: {
             readonly type: "textarea";
             readonly contentEditable: true;
         };
-        images: {
+        medias: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {

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

@@ -1,13 +1,13 @@
 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 { mediasField } 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,
+    medias: mediasField,
     styles: {
       type: "object",
       label: "Styles",

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

@@ -1,9 +1,9 @@
 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";
+import { CompoundMedia } from "../../../puck-base/media.js";
 const MasonryGrid = (props) => {
-  const { heading, description, images, styles } = {
+  const { heading, description, medias, styles } = {
     ...MasonryGridDefaults,
     ...props
   };
@@ -32,7 +32,7 @@ const MasonryGrid = (props) => {
               "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(
+            children: medias.map((media, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "mb-8 inline-block w-full", children: /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn("relative inline-block w-full", {
@@ -40,10 +40,10 @@ const MasonryGrid = (props) => {
                   "pt-[66.66%]": index % 3 !== 0
                 }),
                 children: /* @__PURE__ */ jsx(
-                  CompoundImage,
+                  CompoundMedia,
                   {
-                    src: image.src,
-                    alt: image.alt,
+                    src: media.src,
+                    alt: media.alt,
                     className: "absolute inset-0 size-full object-cover"
                   }
                 )
@@ -61,7 +61,7 @@ const MasonryGridDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   button: { label: "View all" },
   buttons: [],
-  images: [
+  medias: [
     {
       src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&h=800&fit=crop",
       alt: "Gallery image 1"