dune-react 0.0.31 → 0.0.32

package/dist/components/puck-block/hero-sections/sticky-video-hero/component.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
 import { CompoundButton } from "../../../puck-base/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { useScroll, useTransform, motion } from "motion/react";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
@@ -16,14 +16,14 @@ const StickyVideoHero = (props) => {
     description = "",
     buttons = [],
     video = "",
-    images = [{ src: "", alt: "" }],
+    medias = [{ src: "", alt: "" }],
     videoImage = { src: "", alt: "" },
     styles
   } = {
     ...StickyVideoHeroDefaults,
     ...props
   };
-  const image = images == null ? void 0 : images[0];
+  const media = medias == null ? void 0 : medias[0];
   const { className: sectionClassName, style: sectionStyle, css, variant = "centered" } = styles ?? {};
   if (variant === "parallax-bg") {
     return /* @__PURE__ */ jsx(
@@ -33,7 +33,7 @@ const StickyVideoHero = (props) => {
         description,
         buttons,
         video,
-        image,
+        media,
         videoImage,
         sectionClassName,
         sectionStyle,
@@ -48,7 +48,7 @@ const StickyVideoHero = (props) => {
       description,
       buttons,
       video,
-      image,
+      media,
       sectionClassName,
       sectionStyle,
       css
@@ -60,7 +60,7 @@ const CenteredVariant = ({
   description,
   buttons,
   video,
-  image,
+  media,
   sectionClassName,
   sectionStyle,
   css
@@ -92,10 +92,10 @@ const CenteredVariant = ({
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 flex h-screen flex-col justify-center lg:top-[10vh] lg:justify-start", children: /* @__PURE__ */ jsxs(Dialog, { children: [
       /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
         /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
-            src: image.src,
-            alt: image.alt,
+            src: media.src,
+            alt: media.alt,
             className: "h-[80vh] max-h-[25rem] w-full object-cover sm:max-h-[30rem] md:max-h-[40rem] lg:max-h-none"
           }
         ),
@@ -127,7 +127,7 @@ const ParallaxBgVariant = ({
   description,
   buttons,
   video,
-  image,
+  media,
   videoImage,
   sectionClassName,
   sectionStyle,
@@ -163,7 +163,7 @@ const ParallaxBgVariant = ({
             /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
           ] }) }),
           /* @__PURE__ */ jsxs(motion.div, { className: "absolute inset-0 z-0", style: imageTranslate, children: [
-            /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }),
+            /* @__PURE__ */ jsx(CompoundMedia, { src: media.src, alt: media.alt, className: "size-full object-cover" }),
             /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
           ] }),
           /* @__PURE__ */ jsxs(Dialog, { children: [
@@ -173,7 +173,7 @@ const ParallaxBgVariant = ({
                 className: "absolute bottom-[5%] right-[5%] flex w-full items-center justify-center md:max-w-[14rem] lg:max-w-xxs",
                 style: videoDialogTranslate,
                 children: [
-                  /* @__PURE__ */ jsx(CompoundImage, { src: videoImage.src, alt: videoImage.alt, className: "size-full object-cover" }),
+                  /* @__PURE__ */ jsx(CompoundMedia, { src: videoImage.src, alt: videoImage.alt, className: "size-full object-cover" }),
                   /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" })
                 ]
               }
@@ -206,7 +206,7 @@ const StickyVideoHeroDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
-  images: [{
+  medias: [{
     src: "https://picsum.photos/seed/hero-video/1200/800",
     alt: "Placeholder image"
   }],

package/dist/components/puck-block/hero-sections/sticky-video-hero/index.d.ts

@@ -94,7 +94,7 @@ declare const conf: {
         video: {
             type: string;
         };
-        images: {
+        medias: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {

package/dist/components/puck-block/hero-sections/sticky-video-hero/index.js

@@ -1,7 +1,7 @@
 import { StickyVideoHero, StickyVideoHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
-import { imageField, imagesField } from "../../../puck-core/core/props/media.js";
+import { mediaField, mediasField } from "../../../puck-core/core/props/media.js";
 import { heroStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -10,8 +10,8 @@ const conf = {
     description: descriptionField,
     buttons: buttonsField,
     video: { type: "text" },
-    images: imagesField,
-    videoImage: imageField,
+    medias: mediasField,
+    videoImage: mediaField,
     styles: {
       type: "object",
       label: "Styles",

package/dist/components/puck-block/hero-sections/tab-hero/component.d.ts

@@ -1,10 +1,10 @@
-import type { BaseImage, BaseButton, HeroComponentProps } from "../props";
+import type { BaseMedia, BaseButton, HeroComponentProps } from "../props";
 type TabContent = {
     value: string;
     heading: string;
     description: string;
     buttons: BaseButton[];
-    image: BaseImage;
+    media: BaseMedia;
 };
 type TabTrigger = {
     value: string;

package/dist/components/puck-block/hero-sections/tab-hero/component.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../shadcn/tabs.js";
 import { CompoundButton } from "../../../puck-base/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { AnimatePresence, motion } from "motion/react";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { cn } from "../../../../utils/css-utils.js";
@@ -75,7 +75,7 @@ const TabContentBlock = ({ ...content }) => {
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 bg-black/50" }),
-      /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", src: content.image.src, alt: content.image.alt })
+      /* @__PURE__ */ jsx(CompoundMedia, { className: "size-full object-cover", src: content.media.src, alt: content.media.alt })
     ] })
   ] });
 };
@@ -106,7 +106,7 @@ const TabHeroDefaults = {
         heading: "Medium length hero heading goes here",
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
-        image: {
+        media: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
           alt: "Placeholder image 1"
         }
@@ -116,7 +116,7 @@ const TabHeroDefaults = {
         heading: "Medium length hero heading goes here",
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
-        image: {
+        media: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
           alt: "Placeholder image 2"
         }
@@ -126,7 +126,7 @@ const TabHeroDefaults = {
         heading: "Medium length hero heading goes here",
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
-        image: {
+        media: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
           alt: "Placeholder image 3"
         }
@@ -136,7 +136,7 @@ const TabHeroDefaults = {
         heading: "Medium length hero heading goes here",
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
-        image: {
+        media: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
           alt: "Placeholder image 4"
         }

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

@@ -36,7 +36,7 @@ declare const conf: {
                         description: {
                             type: string;
                         };
-                        image: {
+                        media: {
                             type: string;
                             objectFields: {
                                 src: {

package/dist/components/puck-block/hero-sections/tab-hero/index.js

@@ -22,10 +22,10 @@ const conf = {
             value: { type: "text" },
             heading: { type: "text" },
             description: { type: "textarea" },
-            image: {
+            media: {
               type: "object",
               objectFields: {
-                src: { type: "image", label: "Image" },
+                src: { type: "image", label: "Media" },
                 alt: { type: "text" }
               }
             }

package/dist/components/puck-block/hero-sections/three-image-parallax-hero/component.d.ts

@@ -1,8 +1,8 @@
-import type { BaseImage, HeroComponentProps } from "../props";
+import type { BaseMedia, HeroComponentProps } from "../props";
 type ThreeImageParallaxHeroExtra = {
-    imageLeft: BaseImage;
-    imageCenter: BaseImage;
-    imageRight: BaseImage;
+    imageLeft: BaseMedia;
+    imageCenter: BaseMedia;
+    imageRight: BaseMedia;
 };
 export type ThreeImageParallaxHeroProps = HeroComponentProps<ThreeImageParallaxHeroExtra>;
 export declare const ThreeImageParallaxHero: (props: ThreeImageParallaxHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/three-image-parallax-hero/component.js

@@ -5,7 +5,7 @@ import { useScroll, useTransform, motion } from "motion/react";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.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 ThreeImageParallaxHero = (props) => {
@@ -109,7 +109,7 @@ const ThreeImageParallaxHero = (props) => {
               className: "absolute bottom-0 left-0 z-10 w-2/5 overflow-hidden rounded-lg shadow-xl",
               style: leftImageTranslate,
               children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
                   src: imageLeft.src,
                   alt: imageLeft.alt,
@@ -124,7 +124,7 @@ const ThreeImageParallaxHero = (props) => {
               className: "mx-[10%] mb-[10%] w-1/2 overflow-hidden rounded-lg shadow-xl",
               style: centerImageTranslate,
               children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
                   src: imageCenter.src,
                   alt: imageCenter.alt,
@@ -139,7 +139,7 @@ const ThreeImageParallaxHero = (props) => {
               className: "absolute right-0 top-[10%] w-2/5 overflow-hidden rounded-lg shadow-xl",
               style: rightImageTranslate,
               children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
                   src: imageRight.src,
                   alt: imageRight.alt,

package/dist/components/puck-block/hero-sections/three-image-parallax-hero/index.js

@@ -1,7 +1,7 @@
 import { ThreeImageParallaxHero, ThreeImageParallaxHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } 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 { heroStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -9,9 +9,9 @@ const conf = {
     heading: headingField,
     description: descriptionField,
     buttons: buttonsField,
-    imageLeft: imageField,
-    imageCenter: imageField,
-    imageRight: imageField,
+    imageLeft: mediaField,
+    imageCenter: mediaField,
+    imageRight: mediaField,
     styles: {
       type: "object",
       objectFields: {

package/dist/components/puck-block/hero-sections/vertical-gallery-hero/component.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 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 VerticalGalleryHero = (props) => {
@@ -9,7 +9,7 @@ const VerticalGalleryHero = (props) => {
     heading,
     description,
     buttons = [],
-    images = [],
+    medias = [],
     styles
   } = {
     ...VerticalGalleryHeroDefaults,
@@ -46,20 +46,20 @@ const VerticalGalleryHero = (props) => {
           )) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "h-[30rem] overflow-hidden pl-[5vw] pr-[5vw] md:h-[40rem] lg:h-screen lg:pl-0", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-x-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "-mt-[120%] grid size-full animate-loop-vertically columns-2 grid-cols-1 gap-4 self-center", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "grid size-full grid-cols-1 gap-4", children: /* @__PURE__ */ jsx("div", { className: "relative w-full pt-[120%]", children: /* @__PURE__ */ jsx(
-            CompoundImage,
+          /* @__PURE__ */ jsx("div", { className: "-mt-[120%] grid size-full animate-loop-vertically columns-2 grid-cols-1 gap-4 self-center", children: medias.map((item, index) => /* @__PURE__ */ jsx("div", { className: "grid size-full grid-cols-1 gap-4", children: /* @__PURE__ */ jsx("div", { className: "relative w-full pt-[120%]", children: /* @__PURE__ */ jsx(
+            CompoundMedia,
             {
               className: "absolute inset-0 size-full object-cover",
-              src: image.src,
-              alt: image.alt
+              src: item.src,
+              alt: item.alt
             }
           ) }) }, index)) }),
-          /* @__PURE__ */ jsx("div", { className: "grid size-full animate-loop-vertically grid-cols-1 gap-4", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "grid size-full grid-cols-1 gap-4", children: /* @__PURE__ */ jsx("div", { className: "relative w-full pt-[120%]", children: /* @__PURE__ */ jsx(
-            CompoundImage,
+          /* @__PURE__ */ jsx("div", { className: "grid size-full animate-loop-vertically grid-cols-1 gap-4", children: medias.map((item, index) => /* @__PURE__ */ jsx("div", { className: "grid size-full grid-cols-1 gap-4", children: /* @__PURE__ */ jsx("div", { className: "relative w-full pt-[120%]", children: /* @__PURE__ */ jsx(
+            CompoundMedia,
             {
               className: "absolute inset-0 size-full object-cover",
-              src: image.src,
-              alt: image.alt
+              src: item.src,
+              alt: item.alt
             }
           ) }) }, index)) })
         ] }) })
@@ -71,7 +71,7 @@ const VerticalGalleryHeroDefaults = {
   heading: "Medium length hero heading goes here",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
-  images: [
+  medias: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
       alt: "Placeholder image 1"

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

@@ -91,7 +91,7 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        images: {
+        medias: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {

package/dist/components/puck-block/hero-sections/vertical-gallery-hero/index.js

@@ -1,13 +1,13 @@
 import { VerticalGalleryHero, VerticalGalleryHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.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,
     buttons: buttonsField,
-    images: imagesField
+    medias: mediasField
   },
   defaultProps: VerticalGalleryHeroDefaults,
   render: VerticalGalleryHero

package/dist/components/puck-block/hero-sections/zoom-grid-hero/component.js

@@ -3,13 +3,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { cn } from "../../../../utils/css-utils.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 { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { useScroll, useTransform, motion } from "motion/react";
 const ZoomGridHero = (props) => {
-  const { heading, description, buttons = [], images = [], styles } = {
+  const { heading, description, buttons = [], medias = [], styles } = {
     ...ZoomGridHeroDefaults,
     ...props
   };
@@ -49,7 +49,7 @@ const ZoomGridHero = (props) => {
         {
           style: { scale: isEditor ? 1 : scale },
           className: "grid size-full auto-cols-fr grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-3",
-          children: images.map((image, index) => /* @__PURE__ */ jsx(
+          children: medias.map((item, index) => /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
@@ -57,10 +57,10 @@ const ZoomGridHero = (props) => {
                 [0, 2, 3, 5, 6, 8].indexOf(index) !== -1 && "hidden md:block"
               ),
               children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
-                  src: image.src,
-                  alt: image.alt,
+                  src: item.src,
+                  alt: item.alt,
                   className: "absolute inset-0 size-full object-cover"
                 }
               )
@@ -76,7 +76,7 @@ const ZoomGridHeroDefaults = {
   heading: "Medium length hero heading goes here",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
-  images: [
+  medias: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
       alt: "Placeholder image 1"

package/dist/components/puck-block/hero-sections/zoom-grid-hero/index.d.ts

@@ -91,7 +91,7 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        images: {
+        medias: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {

package/dist/components/puck-block/hero-sections/zoom-grid-hero/index.js

@@ -1,13 +1,13 @@
 import { ZoomGridHero, ZoomGridHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.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,
     buttons: buttonsField,
-    images: imagesField
+    medias: mediasField
   },
   defaultProps: ZoomGridHeroDefaults,
   render: ZoomGridHero

package/dist/components/puck-block/metrics-sections/center-media-stats/center-media-stats.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 import { cn } from "../../../../utils/css-utils.js";
@@ -13,7 +13,7 @@ const CenterMediaStats = (props) => {
     heading,
     description,
     stats,
-    image,
+    media,
     styles
   } = {
     ...CenterMediaStatsDefaults,
@@ -52,7 +52,7 @@ const CenterMediaStats = (props) => {
     if (isPlayButton) {
       return /* @__PURE__ */ jsxs(Dialog, { children: [
         /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
-          /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "aspect-[3/2] size-full object-cover" }),
+          /* @__PURE__ */ jsx(CompoundMedia, { src: media.src, alt: media.alt, className: "aspect-[3/2] size-full object-cover" }),
           /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" }),
           /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" })
         ] }) }),
@@ -74,7 +74,7 @@ const CenterMediaStats = (props) => {
         ] })
       ] });
     }
-    return /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/2] size-full object-cover", src: image.src, alt: image.alt });
+    return /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-[3/2] size-full object-cover", src: media.src, alt: media.alt });
   };
   const mediaBlock = /* @__PURE__ */ jsx("div", { children: renderMedia() });
   const statsBlock = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 md:grid-cols-3 md:gap-x-8 md:gap-y-12 md:p-8 lg:grid-cols-1 lg:gap-x-0 lg:p-12", children: stats.map((stat, index) => renderStat(stat, index)) });
@@ -103,7 +103,7 @@ const CenterMediaStatsDefaults = {
     { percentage: "30%", heading: "Short heading goes here" },
     { percentage: "30%", heading: "Short heading goes here" }
   ],
-  image: {
+  media: {
     src: "https://picsum.photos/seed/stats-media/1200/800",
     alt: "Placeholder image"
   },

package/dist/components/puck-block/metrics-sections/center-media-stats/index.d.ts

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

package/dist/components/puck-block/metrics-sections/center-media-stats/index.js

@@ -1,6 +1,6 @@
 import { CenterMediaStats, CenterMediaStatsDefaults } from "./center-media-stats.js";
 import { headingField, descriptionField } from "../../../puck-core/core/props/content.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
 import { metricsStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -17,7 +17,7 @@ const conf = {
         heading: headingField
       }
     },
-    image: imageField,
+    media: mediaField,
     styles: {
       type: "object",
       label: "Styles",

package/dist/components/puck-block/metrics-sections/header-stats-row/header-stats-row.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { CompoundButton } from "../../../puck-base/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 const HeaderStatsRow = (props) => {
   const {
     tagline,
@@ -10,7 +10,7 @@ const HeaderStatsRow = (props) => {
     description,
     buttons,
     stats,
-    image,
+    media,
     styles
   } = {
     ...HeaderStatsRowDefaults,
@@ -50,7 +50,7 @@ const HeaderStatsRow = (props) => {
   return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", { relative: hasBg }, sectionClassName), style: sectionStyle, css, children: [
     hasBg && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
       isBgImage && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CompoundImage, { src: image.src, className: "size-full object-cover", alt: image.alt }),
+        /* @__PURE__ */ jsx(CompoundMedia, { src: media.src, className: "size-full object-cover", alt: media.alt }),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
       ] }),
       isBgVideo && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -92,7 +92,7 @@ const HeaderStatsRowDefaults = {
     { percentage: "30%", heading: "Short heading goes here" },
     { percentage: "30%", heading: "Short heading goes here" }
   ],
-  image: {
+  media: {
     src: "https://picsum.photos/seed/stats-bg/1920/1080",
     alt: "Placeholder image"
   },

package/dist/components/puck-block/metrics-sections/header-stats-row/index.d.ts

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

package/dist/components/puck-block/metrics-sections/header-stats-row/index.js

@@ -1,7 +1,7 @@
 import { HeaderStatsRow, HeaderStatsRowDefaults } from "./header-stats-row.js";
 import { headingField, descriptionField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } 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 { metricsStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -19,7 +19,7 @@ const conf = {
         heading: headingField
       }
     },
-    image: imageField,
+    media: mediaField,
     styles: {
       type: "object",
       label: "Styles",

package/dist/components/puck-block/metrics-sections/mixed-grid-stats/index.d.ts

@@ -99,7 +99,7 @@ declare const conf: {
             max: number;
             getItemSummary: (item: {
                 heading?: string;
-                image?: any;
+                media?: any;
             }, index?: number) => string;
             arrayFields: {
                 percentage: {
@@ -113,7 +113,7 @@ declare const conf: {
                     readonly type: "textarea";
                     readonly contentEditable: true;
                 };
-                image: {
+                media: {
                     type: "object";
                     objectFields: {
                         src: import("@puckeditor/core").Field<string>;

package/dist/components/puck-block/metrics-sections/mixed-grid-stats/index.js

@@ -1,7 +1,7 @@
 import { MixedGridStats, MixedGridStatsDefaults } from "./mixed-grid-stats.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } 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 { metricsStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -13,12 +13,12 @@ const conf = {
     cards: {
       type: "array",
       max: 8,
-      getItemSummary: (item, index = 0) => item.heading || (item.image ? "Image Card" : `Card ${index + 1}`),
+      getItemSummary: (item, index = 0) => item.heading || (item.media ? "Media Card" : `Card ${index + 1}`),
       arrayFields: {
         percentage: { type: "text" },
         heading: headingField,
         description: descriptionField,
-        image: imageField
+        media: mediaField
       }
     },
     styles: {