dune-react 0.0.31 → 0.0.32

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

@@ -91,7 +91,7 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        imagesPartOne: {
+        mediasPartOne: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {
@@ -108,7 +108,7 @@ declare const conf: {
                 src: string;
             };
         };
-        imagesPartTwo: {
+        mediasPartTwo: {
             readonly type: "array";
             readonly max: 10;
             readonly getItemSummary: (item: {

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

@@ -1,14 +1,14 @@
 import { ColumnScrollHero, ColumnScrollHeroDefaults } 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,
-    imagesPartOne: imagesField,
-    imagesPartTwo: imagesField
+    mediasPartOne: mediasField,
+    mediasPartTwo: mediasField
   },
   defaultProps: ColumnScrollHeroDefaults,
   render: ColumnScrollHero

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs } 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 DualMarqueeHero = (props) => {
-  const { heading, description, buttons = [], images = [], styles } = {
+  const { heading, description, buttons = [], medias = [], styles } = {
     ...DualMarqueeHeroDefaults,
     ...props
   };
@@ -17,31 +17,31 @@ const DualMarqueeHero = (props) => {
       /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-x-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__ */ jsx("div", { className: "flex w-screen justify-start overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "grid shrink-0 grid-cols-1 gap-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid w-full animate-marquee-top auto-cols-fr grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "grid w-full animate-marquee-top auto-cols-fr grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: medias.map((item, imageIndex) => /* @__PURE__ */ jsx(
         "div",
         {
           className: "relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]",
           children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               className: "absolute inset-0 size-full object-cover",
-              src: image.src,
-              alt: image.alt
+              src: item.src,
+              alt: item.alt
             }
           )
         },
         imageIndex
       )) }, index)) }),
-      /* @__PURE__ */ jsx("div", { className: "grid w-full animate-marquee-bottom grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "grid w-full animate-marquee-bottom grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: medias.map((item, imageIndex) => /* @__PURE__ */ jsx(
         "div",
         {
           className: "relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]",
           children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               className: "absolute inset-0 size-full object-cover",
-              src: image.src,
-              alt: image.alt
+              src: item.src,
+              alt: item.alt
             }
           )
         },
@@ -54,7 +54,7 @@ const DualMarqueeHeroDefaults = {
   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/dual-marquee-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/dual-marquee-hero/index.js

@@ -1,13 +1,13 @@
 import { DualMarqueeHero, DualMarqueeHeroDefaults } 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: DualMarqueeHeroDefaults,
   render: DualMarqueeHero

package/dist/components/puck-block/hero-sections/fullscreen-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/fullscreen-video-hero/component.js

@@ -7,16 +7,16 @@ import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js"
 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";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 const FullscreenVideoHero = (props) => {
-  const { heading, description, buttons = [], video = "", images = [{ src: "", alt: "" }], styles } = {
+  const { heading, description, buttons = [], video = "", medias = [{ src: "", alt: "" }], styles } = {
     ...FullscreenVideoHeroDefaults,
     ...props
   };
-  const image = images == null ? void 0 : images[0];
+  const media = medias == null ? void 0 : medias[0];
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const isMobile = useMediaQuery("(max-width: 767px)");
   const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 991px)");
@@ -48,7 +48,7 @@ const FullscreenVideoHero = (props) => {
             style: videoDialogMotion,
             className: "absolute flex cursor-pointer items-center justify-center",
             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(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
               /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
             ]
@@ -78,7 +78,7 @@ const FullscreenVideoHeroDefaults = {
     }
   ],
   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/fullscreen-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/fullscreen-video-hero/index.js

@@ -1,14 +1,14 @@
 import { FullscreenVideoHero, FullscreenVideoHeroDefaults } 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,
     video: { type: "text" },
-    images: imagesField
+    medias: mediasField
   },
   defaultProps: FullscreenVideoHeroDefaults,
   render: FullscreenVideoHero

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

@@ -5,7 +5,7 @@ import { useScroll, motion, useTransform } 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";
 import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
@@ -14,7 +14,7 @@ const GridExpandHero = (props) => {
     heading,
     description,
     buttons = [],
-    images = [],
+    medias = [],
     styles
   } = {
     ...GridExpandHeroDefaults,
@@ -87,15 +87,15 @@ const GridExpandHero = (props) => {
                 className: "grid grid-flow-col grid-cols-1 items-center justify-items-end gap-4 justify-self-end px-4",
                 style: isEditor ? editorCenterLeftImageGroup : centerLeftImageGroup,
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "relative hidden md:block md:w-[25vw] lg:w-[20vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[2/3] w-full object-cover", ...images[0] }) }),
+                  /* @__PURE__ */ jsx("div", { className: "relative hidden md:block md:w-[25vw] lg:w-[20vw]", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-[2/3] w-full object-cover", ...medias[0] }) }),
                   /* @__PURE__ */ jsxs("div", { className: "relative grid w-[40vw] grid-cols-1 grid-rows-[auto_auto] gap-4 self-center md:w-[18vw]", children: [
-                    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-square w-full object-cover", ...images[1] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[2] }) })
+                    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-square w-full object-cover", ...medias[1] }) }),
+                    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-[3/4] w-full object-cover", ...medias[2] }) })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(motion.div, { className: "relative", style: isEditor ? editorCenterCenterImageContainer : centerCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", ...images[3] }) }),
+            /* @__PURE__ */ jsx(motion.div, { className: "relative", style: isEditor ? editorCenterCenterImageContainer : centerCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundMedia, { className: "size-full object-cover", ...medias[3] }) }),
             /* @__PURE__ */ jsxs(
               motion.div,
               {
@@ -103,10 +103,10 @@ const GridExpandHero = (props) => {
                 style: isEditor ? editorCenterRightImageGroup : centerRightImageGroup,
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "relative grid w-[40vw] grid-cols-1 grid-rows-[auto_auto] gap-4 self-center md:w-[18vw]", children: [
-                    /* @__PURE__ */ jsx("div", { className: "relative w-[40vw] sm:w-auto", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[4] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "relative w-[40vw] sm:w-auto", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-square w-full object-cover", ...images[5] }) })
+                    /* @__PURE__ */ jsx("div", { className: "relative w-[40vw] sm:w-auto", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-[3/4] w-full object-cover", ...medias[4] }) }),
+                    /* @__PURE__ */ jsx("div", { className: "relative w-[40vw] sm:w-auto", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-square w-full object-cover", ...medias[5] }) })
                   ] }),
-                  images[6] && /* @__PURE__ */ jsx("div", { className: "relative hidden md:block md:w-[25vw] lg:w-[20vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[2/3] w-full object-cover", ...images[6] }) })
+                  medias[6] && /* @__PURE__ */ jsx("div", { className: "relative hidden md:block md:w-[25vw] lg:w-[20vw]", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-[2/3] w-full object-cover", ...medias[6] }) })
                 ]
               }
             )
@@ -137,22 +137,22 @@ const GridExpandHero = (props) => {
               className: "grid grid-flow-col grid-cols-1 justify-items-end gap-4 justify-self-end px-4",
               style: isEditor ? editorLeftLeftImageGroup : leftLeftImageGroup,
               children: [
-                /* @__PURE__ */ jsx("div", { className: "relative top-[5%] hidden w-[40vw] sm:w-[25vw] md:block lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[2/3] w-full object-cover", ...images[0] }) }),
+                /* @__PURE__ */ jsx("div", { className: "relative top-[5%] hidden w-[40vw] sm:w-[25vw] md:block lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-[2/3] w-full object-cover", ...medias[0] }) }),
                 /* @__PURE__ */ jsxs("div", { className: "relative top-[-5%] flex flex-col gap-4 self-center", children: [
-                  /* @__PURE__ */ jsx("div", { className: "relative w-[30vw] flex-none md:w-[15vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-square w-full object-cover", ...images[1] }) }),
-                  /* @__PURE__ */ jsx("div", { className: "relative w-[30vw] flex-none md:w-[15vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[2] }) })
+                  /* @__PURE__ */ jsx("div", { className: "relative w-[30vw] flex-none md:w-[15vw]", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-square w-full object-cover", ...medias[1] }) }),
+                  /* @__PURE__ */ jsx("div", { className: "relative w-[30vw] flex-none md:w-[15vw]", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-[3/4] w-full object-cover", ...medias[2] }) })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "relative top-[15%] hidden w-[40vw] sm:w-[25vw] md:block lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-square w-full object-cover", ...images[3] }) })
+                /* @__PURE__ */ jsx("div", { className: "relative top-[15%] hidden w-[40vw] sm:w-[25vw] md:block lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-square w-full object-cover", ...medias[3] }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx(motion.div, { className: "relative", style: isEditor ? editorLeftCenterImageContainer : leftCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", ...images[4] }) }),
+          /* @__PURE__ */ jsx(motion.div, { className: "relative", style: isEditor ? editorLeftCenterImageContainer : leftCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundMedia, { className: "size-full object-cover", ...medias[4] }) }),
           /* @__PURE__ */ jsx(
             motion.div,
             {
               className: "grid grid-flow-col grid-cols-1 gap-4 justify-self-start px-4",
               style: isEditor ? editorLeftRightImage : leftRightImage,
-              children: /* @__PURE__ */ jsx("div", { className: "relative top-[5%] w-[40vw] md:w-[25vw] lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[5] }) })
+              children: /* @__PURE__ */ jsx("div", { className: "relative top-[5%] w-[40vw] md:w-[25vw] lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundMedia, { className: "aspect-[3/4] w-full object-cover", ...medias[5] }) })
             }
           )
         ]
@@ -177,7 +177,7 @@ const GridExpandHeroDefaults = {
     textAlign: "left",
     gridRatio: "25%_50%_25%"
   },
-  images: [
+  medias: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
       alt: "Placeholder image 1"

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

@@ -1,7 +1,7 @@
 import { GridExpandHero, GridExpandHeroDefaults } 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";
 import { heroStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -9,7 +9,7 @@ const conf = {
     heading: headingField,
     description: descriptionField,
     buttons: buttonsField,
-    images: imagesField,
+    medias: mediasField,
     styles: {
       type: "object",
       objectFields: {

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

@@ -1,11 +1,11 @@
 "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 HorizontalMarqueeHero = (props) => {
-  const { heading, description, buttons = [], images = [], styles } = {
+  const { heading, description, buttons = [], medias = [], styles } = {
     ...HorizontalMarqueeHeroDefaults,
     ...props
   };
@@ -23,31 +23,31 @@ const HorizontalMarqueeHero = (props) => {
           /* @__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__ */ jsx("div", { className: "flex items-center gap-4 overflow-hidden bg-background-secondary py-8 md:py-16 lg:h-screen", children: /* @__PURE__ */ jsxs("div", { className: "grid shrink-0 grid-cols-1 gap-y-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "ml-[-8.5%] grid w-full animate-marquee-horizontally auto-cols-fr grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "ml-[-8.5%] grid w-full animate-marquee-horizontally auto-cols-fr grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: medias.map((item, imageIndex) => /* @__PURE__ */ jsx(
             "div",
             {
               className: "relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]",
               children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
                   className: "absolute inset-0 size-full object-cover",
-                  src: image.src,
-                  alt: image.alt
+                  src: item.src,
+                  alt: item.alt
                 }
               )
             },
             imageIndex
           )) }, index)) }),
-          /* @__PURE__ */ jsx("div", { className: "grid w-full animate-marquee-horizontally grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "grid w-full animate-marquee-horizontally grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: medias.map((item, imageIndex) => /* @__PURE__ */ jsx(
             "div",
             {
               className: "relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]",
               children: /* @__PURE__ */ jsx(
-                CompoundImage,
+                CompoundMedia,
                 {
                   className: "absolute inset-0 size-full object-cover",
-                  src: image.src,
-                  alt: image.alt
+                  src: item.src,
+                  alt: item.alt
                 }
               )
             },
@@ -62,7 +62,7 @@ const HorizontalMarqueeHeroDefaults = {
   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/horizontal-marquee-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/horizontal-marquee-hero/index.js

@@ -1,13 +1,13 @@
 import { HorizontalMarqueeHero, HorizontalMarqueeHeroDefaults } 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: HorizontalMarqueeHeroDefaults,
   render: HorizontalMarqueeHero

package/dist/components/puck-block/hero-sections/media-text-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/mouse-track-hero/component.d.ts

@@ -1,7 +1,7 @@
-import type { BaseImage, HeroComponentProps } from "../props";
+import type { BaseMedia, HeroComponentProps } from "../props";
 type MouseTrackHeroExtra = {
-    group1Images: BaseImage[];
-    group2Images: BaseImage[];
+    group1Images: BaseMedia[];
+    group2Images: BaseMedia[];
 };
 export type MouseTrackHeroProps = HeroComponentProps<MouseTrackHeroExtra>;
 export declare const MouseTrackHero: (props: MouseTrackHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMediaQuery } from "../../../../hooks/use-media-query.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";
 import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
@@ -86,16 +86,16 @@ const MouseTrackHero = (props) => {
     ["2%", "-2%"],
     ["2%", "-2%"]
   );
-  const renderImages = (images, positions, transformStyles) => /* @__PURE__ */ jsx(
+  const renderImages = (medias, positions, transformStyles) => /* @__PURE__ */ jsx(
     Animate,
     {
       className: "absolute inset-0 flex origin-bottom items-center justify-center",
       style: transformStyles,
-      children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: `absolute w-full ${positions[index]}`, children: /* @__PURE__ */ jsx(
-        CompoundImage,
+      children: medias.map((item, index) => /* @__PURE__ */ jsx("div", { className: `absolute w-full ${positions[index]}`, children: /* @__PURE__ */ jsx(
+        CompoundMedia,
         {
-          src: image.src,
-          alt: image.alt,
+          src: item.src,
+          alt: item.alt,
           className: "size-full"
         }
       ) }, index))

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

@@ -1,14 +1,14 @@
 import { MouseTrackHero, MouseTrackHeroDefaults } 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,
-    group1Images: imagesField,
-    group2Images: imagesField
+    group1Images: mediasField,
+    group2Images: mediasField
   },
   defaultProps: MouseTrackHeroDefaults,
   render: MouseTrackHero

package/dist/components/puck-block/hero-sections/multi-image-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/multi-image-grid-hero/index.js

@@ -1,7 +1,7 @@
 import { MultiImageGridHero, MultiImageGridHeroDefaults } from "./multi-image-grid-hero.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";
 import { heroStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -9,7 +9,7 @@ const conf = {
     heading: headingField,
     description: descriptionField,
     buttons: buttonsField,
-    images: imagesField,
+    medias: mediasField,
     styles: {
       type: "object",
       label: "Styles",

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/multi-image-grid-hero.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } 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 MultiImageGridHero = (props) => {
-  const { heading, description, buttons, images, styles: rawStyles } = {
+  const { heading, description, buttons, medias, styles: rawStyles } = {
     ...MultiImageGridHeroDefaults,
     ...props
   };
@@ -14,16 +14,16 @@ const MultiImageGridHero = (props) => {
   const renderButtons = () => /* @__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)) });
   const renderImages = () => {
     const gridStyle = { gridTemplateColumns: (imageGridRatio ?? "").replace(/_/g, " ") };
-    return /* @__PURE__ */ jsx("div", { className: "grid items-start gap-6 sm:gap-8 md:gap-16", style: gridStyle, children: images.map((image, index) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "grid items-start gap-6 sm:gap-8 md:gap-16", style: gridStyle, children: medias.map((item, index) => /* @__PURE__ */ jsx(
       "div",
       {
         className: `w-full ${imageMarginTops[index % imageMarginTops.length] || ""}`,
         children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
             className: `${imageAspectRatios[index % imageAspectRatios.length]} size-full object-cover`,
-            src: image.src,
-            alt: image.alt
+            src: item.src,
+            alt: item.alt
           }
         )
       },
@@ -65,7 +65,7 @@ const MultiImageGridHeroDefaults = {
   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-landscape/1200/800",
       alt: "Placeholder image 1"

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

@@ -1,7 +1,7 @@
 import { OverlappingImageHero, OverlappingImageHeroDefaults } from "./overlapping-image-hero.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,
-    firstImage: imageField,
-    secondImage: imageField,
-    thirdImage: imageField,
+    firstImage: mediaField,
+    secondImage: mediaField,
+    thirdImage: mediaField,
     styles: {
       type: "object",
       label: "Styles",

package/dist/components/puck-block/hero-sections/overlapping-image-hero/overlapping-image-hero.d.ts

@@ -1,8 +1,8 @@
-import type { BaseImage, HeroComponentProps } from "../props";
+import type { BaseMedia, HeroComponentProps } from "../props";
 type OverlappingImageHeroExtra = {
-    firstImage: BaseImage;
-    secondImage: BaseImage;
-    thirdImage: BaseImage;
+    firstImage: BaseMedia;
+    secondImage: BaseMedia;
+    thirdImage: BaseMedia;
 };
 export type OverlappingImageHeroProps = HeroComponentProps<OverlappingImageHeroExtra>;
 export declare const OverlappingImageHero: (props: OverlappingImageHeroProps) => import("react/jsx-runtime").JSX.Element;