dune-react 0.0.30 → 0.0.32

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundButton } from "../../../puck-base/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const PortfolioCards = (props) => {
   const { tagline, heading, description, projects, button, styles } = {
@@ -43,14 +43,14 @@ const PortfolioCards = (props) => {
     const isZigzag = cardLayout === "zigzag";
     const isMasonry = cardLayout === "masonry";
     const imageElement = /* @__PURE__ */ jsx("a", { href: project.url, className: cn({ block: true }), children: /* @__PURE__ */ jsx(
-      CompoundImage,
+      CompoundMedia,
       {
-        src: project.image.src,
+        src: project.media.src,
         className: cn("w-full object-cover", {
           "aspect-video": !isMasonry,
           "aspect-auto": isMasonry && index % 2 === 0
         }),
-        alt: project.image.alt
+        alt: project.media.alt
       }
     ) });
     const textElement = /* @__PURE__ */ jsxs("div", { className: cn({ "p-6": isBordered }), children: [
@@ -151,7 +151,7 @@ const PortfolioCards = (props) => {
 const defaultProject = {
   title: "Project name here",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
-  image: {
+  media: {
     src: "https://picsum.photos/seed/portfolio-card/1200/800",
     alt: "Placeholder image"
   },
@@ -172,7 +172,7 @@ const PortfolioCardsDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   button: { label: "View all", variant: "secondary" },
   buttons: [],
-  images: [],
+  medias: [],
   projects: [defaultProject, defaultProject],
   hoverLinks: [],
   styles: {

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

@@ -83,7 +83,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/portfolio-divider/index.js

@@ -1,7 +1,7 @@
 import { PortfolioDivider, PortfolioDividerDefaults } from "./portfolio-divider.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.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 { galleryStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -17,7 +17,7 @@ const conf = {
       arrayFields: {
         title: { type: "text" },
         description: { type: "textarea" },
-        image: imageField,
+        media: mediaField,
         url: { type: "text" },
         button: buttonField
       }

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundButton } from "../../../puck-base/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { cn } from "../../../../utils/css-utils.js";
 const PortfolioDivider = (props) => {
@@ -25,11 +25,11 @@ const PortfolioDivider = (props) => {
           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,
+              CompoundMedia,
               {
-                src: project.image.src,
+                src: project.media.src,
                 className: "w-full object-cover",
-                alt: project.image.alt
+                alt: project.media.alt
               }
             ) }) }),
             /* @__PURE__ */ jsxs("div", { children: [
@@ -76,11 +76,11 @@ const PortfolioDivider = (props) => {
               )
             ] }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
-              CompoundImage,
+              CompoundMedia,
               {
-                src: project.image.src,
+                src: project.media.src,
                 className: "w-full object-cover",
-                alt: project.image.alt
+                alt: project.media.alt
               }
             ) }) })
           ] })
@@ -94,7 +94,7 @@ const PortfolioDivider = (props) => {
 const defaultProject = {
   title: "Project name here",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
-  image: {
+  media: {
     src: "https://picsum.photos/seed/portfolio-div/1200/800",
     alt: "Placeholder image"
   },
@@ -112,7 +112,7 @@ const PortfolioDividerDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   button: { label: "View all", variant: "secondary" },
   buttons: [],
-  images: [],
+  medias: [],
   projects: [defaultProject, defaultProject, defaultProject],
   hoverLinks: [],
   styles: {

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

@@ -4,9 +4,9 @@
  * 基础类型引用自 ../props/（全局共享）
  * GallerySectionStyles 为 gallery 特有的样式字段
  */
-import type { BaseImage } from "@/components/puck-core/core/props/media";
+import type { BaseMedia } from "@/components/puck-core/core/props/media";
 import type { BaseButton } from "@/components/puck-core/core/props/interactive";
-export type { BaseImage, BaseButton };
+export type { BaseMedia, BaseButton };
 export interface GallerySectionStyles {
     className?: string;
     style?: React.CSSProperties;
@@ -34,26 +34,26 @@ export interface GallerySectionBaseProps {
     description: string;
     button: BaseButton;
     buttons: BaseButton[];
-    images: BaseImage[];
+    medias: BaseMedia[];
     projects: {
         title: string;
         description: string;
-        image: BaseImage;
+        media: BaseMedia;
         url: string;
         button: BaseButton;
         tags?: {
             label: string;
             url: string;
         }[];
-        imageCenter?: BaseImage;
-        imageLeft?: BaseImage;
-        imageRight?: BaseImage;
+        imageCenter?: BaseMedia;
+        imageLeft?: BaseMedia;
+        imageRight?: BaseMedia;
     }[];
     hoverLinks: {
         url: string;
         heading: string;
         tag: string;
-        image: BaseImage;
+        media: BaseMedia;
     }[];
     styles: GallerySectionStyles;
 }

package/dist/components/puck-block/gallery-sections/scroll-parallax/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/scroll-parallax/index.js

@@ -1,11 +1,11 @@
 import { ScrollParallax, ScrollParallaxDefaults } from "./scroll-parallax.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";
 const conf = {
   fields: {
     heading: headingField,
     description: descriptionField,
-    images: imagesField
+    medias: mediasField
   },
   defaultProps: ScrollParallaxDefaults,
   render: ScrollParallax

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

@@ -6,9 +6,9 @@ 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";
+import { CompoundMedia } from "../../../puck-base/media.js";
 const ScrollParallax = (props) => {
-  const { heading, description, images, styles } = {
+  const { heading, description, medias, styles } = {
     ...ScrollParallaxDefaults,
     ...props
   };
@@ -38,12 +38,12 @@ const ScrollParallax = (props) => {
             /* @__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,
+          /* @__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: medias.map((media, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+            CompoundMedia,
             {
               className: "aspect-video w-full object-cover",
-              src: image.src,
-              alt: image.alt
+              src: media.src,
+              alt: media.alt
             }
           ) }, index)) }) })
         ]
@@ -67,12 +67,12 @@ const ScrollParallax = (props) => {
           {
             style: { x },
             className: "flex w-[150vh] items-center gap-x-6 sm:w-[200vh] md:gap-x-8 lg:w-[400vh]",
-            children: images.map((image, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
-              CompoundImage,
+            children: medias.map((media, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              CompoundMedia,
               {
                 className: "h-[80vh] max-h-[25rem] object-cover sm:max-h-[30rem] sm:w-[90vw] md:max-h-[40rem] md:w-[80vw] lg:max-h-none",
-                src: image.src,
-                alt: image.alt
+                src: media.src,
+                alt: media.alt
               }
             ) }) }, index))
           }
@@ -87,7 +87,7 @@ const ScrollParallaxDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   button: { label: "View all" },
   buttons: [],
-  images: [
+  medias: [
     {
       src: "https://picsum.photos/seed/scroll-1/1200/800",
       alt: "Gallery image 1"

package/dist/components/puck-block/gallery-sections/scroll-parallax-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/scroll-parallax-portfolio/index.js

@@ -1,5 +1,5 @@
 import { ScrollParallaxPortfolio, ScrollParallaxPortfolioDefaults } from "./scroll-parallax-portfolio.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: {
@@ -10,10 +10,10 @@ const conf = {
       arrayFields: {
         title: { type: "text" },
         description: { type: "textarea" },
-        image: imageField,
-        imageCenter: imageField,
-        imageLeft: imageField,
-        imageRight: imageField
+        media: mediaField,
+        imageCenter: mediaField,
+        imageLeft: mediaField,
+        imageRight: mediaField
       }
     },
     styles: {

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

@@ -6,7 +6,7 @@ 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";
+import { CompoundMedia } from "../../../puck-base/media.js";
 const ScrollParallaxPortfolio = (props) => {
   const { projects: projects2, styles } = {
     ...ScrollParallaxPortfolioDefaults,
@@ -119,26 +119,26 @@ const ThreeImageParallaxVariant = ({
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-start justify-center", children: [
               /* @__PURE__ */ jsx("div", { className: "hidden w-full max-w-xs shrink-0 lg:block", children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
-                  src: ((_a = project.imageLeft) == null ? void 0 : _a.src) ?? project.image.src,
-                  alt: ((_b = project.imageLeft) == null ? void 0 : _b.alt) ?? project.image.alt,
+                  src: ((_a = project.imageLeft) == null ? void 0 : _a.src) ?? project.media.src,
+                  alt: ((_b = project.imageLeft) == null ? void 0 : _b.alt) ?? project.media.alt,
                   className: "w-full object-contain"
                 }
               ) }),
               /* @__PURE__ */ jsx("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
-                  src: ((_c = project.imageCenter) == null ? void 0 : _c.src) ?? project.image.src,
-                  alt: ((_d = project.imageCenter) == null ? void 0 : _d.alt) ?? project.image.alt,
+                  src: ((_c = project.imageCenter) == null ? void 0 : _c.src) ?? project.media.src,
+                  alt: ((_d = project.imageCenter) == null ? void 0 : _d.alt) ?? project.media.alt,
                   className: "w-full object-contain"
                 }
               ) }),
               /* @__PURE__ */ jsx("div", { className: "hidden w-full max-w-xs shrink-0 lg:block", children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
-                  src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
-                  alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
+                  src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.media.src,
+                  alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.media.alt,
                   className: "w-full object-contain"
                 }
               ) })
@@ -177,10 +177,10 @@ const ThreeImageParallaxVariant = ({
                 ),
                 /* @__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-5xl items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
-                    CompoundImage,
+                    CompoundMedia,
                     {
-                      src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
-                      alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
+                      src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.media.src,
+                      alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.media.alt,
                       className: "size-full object-contain"
                     }
                   ) }) }),
@@ -190,10 +190,10 @@ const ThreeImageParallaxVariant = ({
                       className: "relative w-full pt-[100vh]",
                       style: computedStyles[index].imageLeftStyles,
                       children: /* @__PURE__ */ jsx(
-                        CompoundImage,
+                        CompoundMedia,
                         {
-                          src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
-                          alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
+                          src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.media.src,
+                          alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.media.alt,
                           className: "h-auto w-full object-contain"
                         }
                       )
@@ -205,10 +205,10 @@ const ThreeImageParallaxVariant = ({
                       className: "relative w-full pt-[100vh]",
                       style: computedStyles[index].imageRightStyles,
                       children: /* @__PURE__ */ jsx(
-                        CompoundImage,
+                        CompoundMedia,
                         {
-                          src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
-                          alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
+                          src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.media.src,
+                          alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.media.alt,
                           className: "h-auto w-full object-contain"
                         }
                       )
@@ -287,10 +287,10 @@ const ScaleOpacityVariant = ({
                 ),
                 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,
+                    CompoundMedia,
                     {
-                      src: project.image.src,
-                      alt: project.image.alt,
+                      src: project.media.src,
+                      alt: project.media.alt,
                       className: "aspect-video w-full object-cover"
                     }
                   ) }),
@@ -318,7 +318,7 @@ const projects = [
   {
     title: "Project name",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-    image: {
+    media: {
       src: "https://images.unsplash.com/photo-1547658719-da2b51169166?w=1200&h=800&fit=crop",
       alt: "Web design workspace"
     },
@@ -345,7 +345,7 @@ const projects = [
   {
     title: "Project name",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-    image: {
+    media: {
       src: "https://images.unsplash.com/photo-1626785774573-4b799315345d?w=1200&h=800&fit=crop",
       alt: "Design studio"
     },
@@ -372,7 +372,7 @@ const projects = [
   {
     title: "Project name",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-    image: {
+    media: {
       src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=1200&h=800&fit=crop",
       alt: "Mobile device"
     },
@@ -403,7 +403,7 @@ const ScrollParallaxPortfolioDefaults = {
   description: "",
   button: { label: "View all" },
   buttons: [],
-  images: [],
+  medias: [],
   projects,
   hoverLinks: [],
   styles: {

package/dist/components/puck-block/gallery-sections/split-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/split-carousel/index.js

@@ -1,13 +1,13 @@
 import { SplitCarousel, SplitCarouselDefaults } from "./split-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/split-carousel/split-carousel.js

@@ -2,11 +2,11 @@
 import { jsx, jsxs } 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 SplitCarousel = (props) => {
-  const { heading, description, images, styles } = {
+  const { heading, description, medias, styles } = {
     ...SplitCarouselDefaults,
     ...props
   };
@@ -44,11 +44,11 @@ const SplitCarousel = (props) => {
         opts: { loop: true, align: "start" },
         className: "overflow-hidden px-[5%] lg:px-0",
         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("pl-0 pr-6 md:pr-8", getBasisClass()),
-              children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }) })
+              children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundMedia, { src: media.src, alt: media.alt, className: "size-full object-cover" }) })
             },
             index
           )) }),
@@ -57,7 +57,7 @@ const SplitCarousel = (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: "absolute right-[5%] mt-5 flex items-center justify-end md:right-8 lg:right-16", children: images.map((_, index) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "absolute right-[5%] mt-5 flex items-center justify-end md:right-8 lg:right-16", children: medias.map((_, index) => /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: () => api == null ? void 0 : api.scrollTo(index),
@@ -80,7 +80,7 @@ const SplitCarouselDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   button: { label: "View all" },
   buttons: [],
-  images: [
+  medias: [
     { src: "https://picsum.photos/seed/split-car-1/800/600", alt: "Gallery image 1" },
     { src: "https://picsum.photos/seed/split-car-2/800/600", alt: "Gallery image 2" },
     { src: "https://picsum.photos/seed/split-car-3/800/600", alt: "Gallery image 3" },

package/dist/components/puck-block/gallery-sections/static-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/static-grid/index.js

@@ -1,13 +1,13 @@
 import { StaticGrid, StaticGridDefaults } from "./static-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/static-grid/static-grid.js

@@ -1,7 +1,7 @@
 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 columnsMap = {
   "1": "grid-cols-1",
   "2": "grid-cols-1 md:grid-cols-2",
@@ -10,7 +10,7 @@ const columnsMap = {
   "2-lg4": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
 };
 const StaticGrid = (props) => {
-  const { heading, description, images, styles } = {
+  const { heading, description, medias, styles } = {
     ...StaticGridDefaults,
     ...props
   };
@@ -29,11 +29,11 @@ const StaticGrid = (props) => {
           "gap-8": hasGap,
           "gap-0": !hasGap
         }),
-        children: images.map((image, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "size-full", children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+        children: medias.map((media, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "size-full", children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          CompoundMedia,
           {
-            src: image.src,
-            alt: image.alt,
+            src: media.src,
+            alt: media.alt,
             className: "aspect-video size-full object-cover"
           }
         ) }) }, index))
@@ -47,7 +47,7 @@ const StaticGridDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   button: { label: "View all" },
   buttons: [],
-  images: [
+  medias: [
     { src: "https://picsum.photos/seed/gallery-1/800/450", alt: "Gallery image 1" },
     { src: "https://picsum.photos/seed/gallery-2/800/450", alt: "Gallery image 2" },
     { src: "https://picsum.photos/seed/gallery-3/800/450", alt: "Gallery image 3" },