dune-react 0.0.31 → 0.0.33

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

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.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 Autoplay from "embla-carousel-autoplay";
@@ -14,7 +14,7 @@ const CarouselHero = (props) => {
     heading,
     description,
     buttons,
-    images,
+    medias,
     carouselHeading,
     carouselDescription,
     styles
@@ -67,13 +67,13 @@ const CarouselHero = (props) => {
             setApi,
             className: "relative left-0 right-0 z-10 block h-full overflow-hidden whitespace-nowrap pl-4",
             children: [
-              /* @__PURE__ */ jsx(CarouselContent, { children: images.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "pl-0", children: /* @__PURE__ */ jsx("div", { className: "relative inline-block size-full whitespace-normal text-left align-top", children: /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col", children: [
+              /* @__PURE__ */ jsx(CarouselContent, { children: medias.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "pl-0", children: /* @__PURE__ */ jsx("div", { className: "relative inline-block size-full whitespace-normal text-left align-top", children: /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col", children: [
                 /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx(
-                  CompoundImage,
+                  CompoundMedia,
                   {
                     className: "absolute size-full object-cover",
-                    src: image.src,
-                    alt: image.alt
+                    src: item.src,
+                    alt: item.alt
                   }
                 ) }),
                 /* @__PURE__ */ jsx("div", { className: "relative bg-background-secondary px-6 pb-32 pt-6 sm:px-8 sm:pt-8", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", children: [
@@ -82,7 +82,7 @@ const CarouselHero = (props) => {
                 ] }) })
               ] }) }) }, index)) }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pl-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "absolute bottom-[52px] left-8 right-auto top-auto flex w-full items-start justify-start", children: images.map((_, index) => /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "absolute bottom-[52px] left-8 right-auto top-auto flex w-full items-start justify-start", children: medias.map((_, index) => /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: () => api == null ? void 0 : api.scrollTo(index),
@@ -107,7 +107,7 @@ const CarouselHeroDefaults = {
   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/carousel-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/carousel-hero/index.js

@@ -1,13 +1,13 @@
 import { CarouselHero, CarouselHeroDefaults } 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,
     carouselHeading: { type: "text" },
     carouselDescription: { type: "textarea" }
   },

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

@@ -1,7 +1,7 @@
-import type { BaseImage, HeroComponentProps } from "../props";
+import type { BaseMedia, HeroComponentProps } from "../props";
 type ColumnScrollHeroExtra = {
-    imagesPartOne: BaseImage[];
-    imagesPartTwo: BaseImage[];
+    mediasPartOne: BaseMedia[];
+    mediasPartTwo: BaseMedia[];
 };
 export type ColumnScrollHeroProps = HeroComponentProps<ColumnScrollHeroExtra>;
 export declare const ColumnScrollHero: (props: ColumnScrollHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 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 imageColumns = [
@@ -13,7 +13,7 @@ const imageColumns = [
   { className: "mt-[-20%] animate-loop-vertically-top" }
 ];
 const ColumnScrollHero = (props) => {
-  const { heading, description, buttons = [], imagesPartOne = [], imagesPartTwo = [], styles } = {
+  const { heading, description, buttons = [], mediasPartOne = [], mediasPartTwo = [], styles } = {
     ...ColumnScrollHeroDefaults,
     ...props
   };
@@ -29,8 +29,8 @@ const ColumnScrollHero = (props) => {
       /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-2 gap-x-4 px-4 md:grid-cols-3 lg:grid-cols-5", children: imageColumns.map((column, index) => /* @__PURE__ */ jsx(
         AnimatedImageColumn,
         {
-          imagesPartOne,
-          imagesPartTwo,
+          mediasPartOne,
+          mediasPartTwo,
           className: column.className
         },
         index
@@ -38,27 +38,27 @@ const ColumnScrollHero = (props) => {
     ] })
   ] }) });
 };
-const ImageGrid = ({ images }) => /* @__PURE__ */ jsx(React__default.Fragment, { 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,
+const ImageGrid = ({ medias }) => /* @__PURE__ */ jsx(React__default.Fragment, { 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)) });
 const AnimatedImageColumn = ({
-  imagesPartOne,
-  imagesPartTwo,
+  mediasPartOne,
+  mediasPartTwo,
   className
 }) => /* @__PURE__ */ jsxs("div", { className: `grid size-full columns-2 grid-cols-1 gap-4 self-center ${className}`, children: [
-  /* @__PURE__ */ jsx(ImageGrid, { images: imagesPartOne }),
-  /* @__PURE__ */ jsx(ImageGrid, { images: imagesPartTwo })
+  /* @__PURE__ */ jsx(ImageGrid, { medias: mediasPartOne }),
+  /* @__PURE__ */ jsx(ImageGrid, { medias: mediasPartTwo })
 ] });
 const ColumnScrollHeroDefaults = {
   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" }],
-  imagesPartOne: [
+  mediasPartOne: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
       alt: "Placeholder image 1"
@@ -76,7 +76,7 @@ const ColumnScrollHeroDefaults = {
       alt: "Placeholder image 4"
     }
   ],
-  imagesPartTwo: [
+  mediasPartTwo: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
       alt: "Placeholder image 5"

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;