dune-react 0.0.31 → 0.0.33

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

@@ -1,7 +1,7 @@
 import { ScrollZoomHero, ScrollZoomHeroDefaults } 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,
     video: { type: "text" },
     styles: {
       type: "object",

package/dist/components/puck-block/hero-sections/split-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/stacked-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/sticky-expand-hero/component.js

@@ -4,17 +4,17 @@ import { useScroll, useSpring, 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";
 import { useRef } from "react";
 const StickyExpandHero = (props) => {
-  const { heading, description, buttons = [], images, styles } = {
+  const { heading, description, buttons = [], medias, styles } = {
     ...StickyExpandHeroDefaults,
     ...props
   };
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
-  const image = (images == null ? void 0 : images[0]) ?? { src: "", alt: "" };
+  const media = (medias == null ? void 0 : medias[0]) ?? { src: "", alt: "" };
   const headerRef = useRef(null);
   const isMobile = useMediaQuery("(max-width: 991px)");
   const [scrollContainerRef] = useScrollContainer(headerRef);
@@ -31,25 +31,25 @@ const StickyExpandHero = (props) => {
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
       /* @__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(MotionImage, { image, isMobile, width })
+    /* @__PURE__ */ jsx(MotionImage, { media, isMobile, width })
   ] }) });
 };
 const MotionImage = ({
-  image,
+  media,
   isMobile,
   width
 }) => /* @__PURE__ */ jsx("div", { children: isMobile ? /* @__PURE__ */ jsx("div", { className: "static w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full pt-[100%] lg:pt-0", children: /* @__PURE__ */ jsx(
-  CompoundImage,
+  CompoundMedia,
   {
-    src: image.src,
-    alt: image.alt,
+    src: media.src,
+    alt: media.alt,
     className: "absolute inset-0 size-full object-cover"
   }
 ) }) }) : /* @__PURE__ */ jsx(motion.div, { style: { width }, className: "absolute inset-0 left-auto w-auto", children: /* @__PURE__ */ jsx("div", { className: "relative size-full pt-[100%] lg:pt-0", children: /* @__PURE__ */ jsx(
-  CompoundImage,
+  CompoundMedia,
   {
-    src: image.src,
-    alt: image.alt,
+    src: media.src,
+    alt: media.alt,
     className: "absolute inset-0 size-full object-cover"
   }
 ) }) }) });
@@ -57,7 +57,7 @@ const StickyExpandHeroDefaults = {
   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"
   }]

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

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

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

@@ -1,6 +1,6 @@
-import type { BaseImage, HeroComponentProps } from "../props";
+import type { BaseMedia, HeroComponentProps } from "../props";
 type StickyVideoHeroExtra = {
-    videoImage: BaseImage;
+    videoImage: BaseMedia;
 };
 export type StickyVideoHeroProps = HeroComponentProps<StickyVideoHeroExtra>;
 export declare const StickyVideoHero: (props: StickyVideoHeroProps) => import("react/jsx-runtime").JSX.Element;

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,12 +75,13 @@ 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 })
     ] })
   ] });
 };
 const TabHeroDefaults = {
   defaultTabValue: "tab-one",
+  styles: {},
   tabs: {
     trigger: [
       {
@@ -106,7 +107,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 +117,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 +127,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 +137,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,15 +36,12 @@ declare const conf: {
                         description: {
                             type: string;
                         };
-                        image: {
-                            type: string;
+                        media: {
+                            type: "object";
                             objectFields: {
-                                src: {
-                                    type: string;
-                                    label: string;
-                                };
+                                src: import("@puckeditor/core").Field<string>;
                                 alt: {
-                                    type: string;
+                                    type: "text";
                                 };
                             };
                         };

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

@@ -1,5 +1,6 @@
 import { TabHero, TabHeroDefaults } from "./component.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
 const conf = {
   fields: {
     defaultTabValue: { type: "text" },
@@ -22,13 +23,7 @@ const conf = {
             value: { type: "text" },
             heading: { type: "text" },
             description: { type: "textarea" },
-            image: {
-              type: "object",
-              objectFields: {
-                src: { type: "image", label: "Image" },
-                alt: { type: "text" }
-              }
-            }
+            media: mediaField
           }
         }
       }

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