dune-react 0.0.30 → 0.0.32

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;

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

@@ -1,6 +1,6 @@
 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 OverlappingImageHero = (props) => {
@@ -19,11 +19,11 @@ const OverlappingImageHero = (props) => {
   const { className: sectionClassName, style: sectionStyle, css, textPosition, imageCount, overlapStyle } = rawStyles ?? {};
   const renderButtons = () => /* @__PURE__ */ jsx("div", { className: "mt-6 flex 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)) });
   const renderOverlappingImages = () => {
-    if (imageCount === 3) {
+    if (imageCount === "3") {
       if (overlapStyle === "side-by-side") {
         return /* @__PURE__ */ jsxs("div", { className: "relative flex", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 w-[30%]", children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               src: firstImage.src,
               className: "aspect-[2/3] size-full object-cover",
@@ -31,7 +31,7 @@ const OverlappingImageHero = (props) => {
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "mx-[10%] mb-[10%] w-full", children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               src: secondImage.src,
               className: "aspect-[3/2] size-full object-cover",
@@ -39,7 +39,7 @@ const OverlappingImageHero = (props) => {
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-[10%] w-[30%]", children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               src: thirdImage.src,
               className: "aspect-square size-full object-cover",
@@ -51,7 +51,7 @@ const OverlappingImageHero = (props) => {
       if (overlapStyle === "square") {
         return /* @__PURE__ */ jsxs("div", { className: "relative flex w-full", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute bottom-[10%] left-0 w-[35%]", children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               src: firstImage.src,
               className: "aspect-square size-full object-cover",
@@ -59,7 +59,7 @@ const OverlappingImageHero = (props) => {
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "mx-[10%] w-full", children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               src: secondImage.src,
               className: "aspect-square size-full object-cover",
@@ -67,7 +67,7 @@ const OverlappingImageHero = (props) => {
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-[10%] w-2/5", children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               src: thirdImage.src,
               className: "aspect-[3/2] size-full object-cover",
@@ -78,7 +78,7 @@ const OverlappingImageHero = (props) => {
       }
       return /* @__PURE__ */ jsxs("div", { className: "relative flex w-full", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute bottom-[10%] left-0 right-auto top-auto w-[45%]", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
             src: firstImage.src,
             className: "aspect-[3/2] size-full object-cover",
@@ -86,7 +86,7 @@ const OverlappingImageHero = (props) => {
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: "mx-[15%] w-full", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
             src: secondImage.src,
             className: "aspect-[2/3] size-full object-cover",
@@ -94,7 +94,7 @@ const OverlappingImageHero = (props) => {
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: "absolute bottom-auto left-auto right-0 top-[10%] w-[40%]", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
             src: thirdImage.src,
             className: "aspect-square size-full object-cover",
@@ -106,7 +106,7 @@ const OverlappingImageHero = (props) => {
     if (overlapStyle === "square") {
       return /* @__PURE__ */ jsxs("div", { className: "relative flex", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 w-3/5", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
             src: firstImage.src,
             className: "aspect-square size-full object-cover",
@@ -114,7 +114,7 @@ const OverlappingImageHero = (props) => {
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: "mb-[15%] ml-[15%] w-full", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
             src: secondImage.src,
             className: "aspect-square size-full object-cover",
@@ -126,7 +126,7 @@ const OverlappingImageHero = (props) => {
     if (overlapStyle === "side-by-side") {
       return /* @__PURE__ */ jsxs("div", { className: "relative flex w-full", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-[10%] w-3/5", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
             src: firstImage.src,
             className: "aspect-[3/2] size-full object-cover",
@@ -134,7 +134,7 @@ const OverlappingImageHero = (props) => {
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: "ml-[15%] w-full", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
             src: secondImage.src,
             className: "aspect-square size-full object-cover",
@@ -145,7 +145,7 @@ const OverlappingImageHero = (props) => {
     }
     return /* @__PURE__ */ jsxs("div", { className: "relative flex w-full", children: [
       /* @__PURE__ */ jsx("div", { className: "mr-[30%]", children: /* @__PURE__ */ jsx(
-        CompoundImage,
+        CompoundMedia,
         {
           src: firstImage.src,
           className: "aspect-[2/3] size-full object-cover",
@@ -153,7 +153,7 @@ const OverlappingImageHero = (props) => {
         }
       ) }),
       /* @__PURE__ */ jsx("div", { className: "absolute bottom-auto left-auto right-0 top-[10%] w-1/2", children: /* @__PURE__ */ jsx(
-        CompoundImage,
+        CompoundMedia,
         {
           src: secondImage.src,
           className: "aspect-square size-full object-cover",
@@ -211,7 +211,7 @@ const OverlappingImageHeroDefaults = {
   },
   styles: {
     textPosition: "left",
-    imageCount: 2,
+    imageCount: "2",
     overlapStyle: "default"
   }
 };

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

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useScroll, useSpring, useTransform, motion } from "motion/react";
 import { CompoundButton } from "../../../puck-base/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { useRef } from "react";
 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 { cn } from "../../../../utils/css-utils.js";
 const ParallaxImagesHero = (props) => {
-  const { heading, description, buttons = [], images = [], styles } = {
+  const { heading, description, buttons = [], medias = [], styles } = {
     ...ParallaxImagesHeroDefaults,
     ...props
   };
@@ -28,7 +28,7 @@ const ParallaxImagesHero = (props) => {
   const ySecond = useTransform(animatedScrollYProgress, [0, 1], ["0vh", "-39.6vh"]);
   if (isEditor) {
     return /* @__PURE__ */ jsx(SectionWrapper, { ref: transformRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4 py-8", children: images.slice(0, 6).map((image, index) => /* @__PURE__ */ jsx("div", { className: "relative aspect-square", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, className: "absolute inset-0 size-full object-cover", alt: image.alt }) }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4 py-8", children: medias.slice(0, 6).map((item, index) => /* @__PURE__ */ jsx("div", { className: "relative aspect-square", children: /* @__PURE__ */ jsx(CompoundMedia, { src: item.src, className: "absolute inset-0 size-full object-cover", alt: item.alt }) }, index)) }),
       /* @__PURE__ */ jsx("div", { className: "container relative flex max-w-lg items-center py-16 text-center", children: /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
         /* @__PURE__ */ jsx("p", { className: "relative z-20 md:text-md", children: description }),
@@ -37,7 +37,7 @@ const ParallaxImagesHero = (props) => {
     ] }) });
   }
   return /* @__PURE__ */ jsx(SectionWrapper, { ref: transformRef, className: cn("relative h-[150vh] px-[5%] md:h-[300vh]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 h-screen overflow-hidden", children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-auto top-0 z-10", children: /* @__PURE__ */ jsx(motion.div, { className: "flex flex-col gap-[26vw] pt-[70vh]", style: { y: yFirst }, children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-auto top-0 z-10", children: /* @__PURE__ */ jsx(motion.div, { className: "flex flex-col gap-[26vw] pt-[70vh]", style: { y: yFirst }, children: medias.slice(0, 4).map((item, index) => /* @__PURE__ */ jsx(
       "div",
       {
         className: cn("relative h-[35vw] pt-[120%] sm:h-auto", {
@@ -47,11 +47,11 @@ const ParallaxImagesHero = (props) => {
           "left-[64vw] mt-[-45vw] w-[26vw] md:w-[24vw] lg:w-[18vw]": index === 3
         }),
         children: /* @__PURE__ */ jsx(
-          CompoundImage,
+          CompoundMedia,
           {
-            src: image.src,
+            src: item.src,
             className: "absolute inset-0 size-full object-cover",
-            alt: image.alt
+            alt: item.alt
           }
         )
       },
@@ -62,7 +62,7 @@ const ParallaxImagesHero = (props) => {
       {
         className: "absolute bottom-0 left-auto right-0 top-0 z-0",
         style: { y: ySecond },
-        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[26vw] pt-[70vh]", children: images.slice(4).map((image, index) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[26vw] pt-[70vh]", children: medias.slice(4).map((item, index) => /* @__PURE__ */ jsx(
           "div",
           {
             className: cn("relative h-[35vw] pt-[120%] opacity-75 sm:h-auto", {
@@ -70,11 +70,11 @@ const ParallaxImagesHero = (props) => {
               "right-[50vw] mt-[-44vw] w-[26vw] md:w-[24vw] lg:right-[54vw] lg:w-[18vw]": index === 1
             }),
             children: /* @__PURE__ */ jsx(
-              CompoundImage,
+              CompoundMedia,
               {
-                src: image.src,
+                src: item.src,
                 className: "absolute inset-0 size-full object-cover",
-                alt: image.alt
+                alt: item.alt
               }
             )
           },
@@ -102,7 +102,7 @@ const ParallaxImagesHeroDefaults = {
       variant: "secondary"
     }
   ],
-  images: [
+  medias: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
       alt: "Placeholder image 1"

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

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

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

@@ -4,9 +4,9 @@
  * 基础类型引用自 ../props/（全局共享）
  * HeroSectionStyles 为 hero 特有的样式字段
  */
-import type { BaseImage } from "@/components/puck-core/core/props/media";
+import type { BaseMedia } from "@/components/puck-core/core/props/media";
 import type { BaseButton } from "@/components/puck-core/core/props/interactive";
-export type { BaseImage, BaseButton };
+export type { BaseMedia, BaseButton };
 export interface HeroSectionStyles {
     className?: string;
     style?: React.CSSProperties;
@@ -18,7 +18,7 @@ export interface HeroSectionStyles {
     mediaType?: "image" | "video" | "play";
     formType?: "none" | "email" | "search";
     bordered?: boolean;
-    imageCount?: 1 | 2 | 3;
+    imageCount?: "1" | "2" | "3";
     imageGridRatio?: string;
     overlapStyle?: "default" | "square" | "side-by-side";
     variant?: "centered" | "parallax-bg";
@@ -29,7 +29,7 @@ export interface HeroSectionBaseProps {
     heading: string;
     description: string;
     buttons: BaseButton[];
-    images: BaseImage[];
+    medias: BaseMedia[];
     video: string;
     inputPlaceholder: string;
     formButton: BaseButton;

package/dist/components/puck-block/hero-sections/scatter-parallax-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 ScatterParallaxHero = (props) => {
-  const { heading, description, buttons = [], images = [], styles } = {
+  const { heading, description, buttons = [], medias = [], styles } = {
     ...ScatterParallaxHeroDefaults,
     ...props
   };
@@ -56,7 +56,7 @@ const ScatterParallaxHero = (props) => {
         {
           style: isEditor ? { y: "0%", scale: 1, opacity: 1 } : containerMotion,
           className: "absolute inset-0 z-10 flex origin-bottom items-end justify-center",
-          children: images.map((image, index) => /* @__PURE__ */ jsx(
+          children: medias.map((item, index) => /* @__PURE__ */ jsx(
             motion.div,
             {
               style: isEditor ? { x: 0, y: 0 } : imageMotions[index],
@@ -67,7 +67,7 @@ const ScatterParallaxHero = (props) => {
                 "bottom-[4%] right-[-5%] sm:bottom-[7%] md:right-[8%] lg:bottom-[15%] lg:right-[10%]": index === 3,
                 "right-[-30%] top-[65%] sm:right-[-15%] sm:top-[45%] lg:right-[-8%] lg:top-[5%]": index === 4
               }),
-              children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full", src: image.src, alt: image.alt })
+              children: /* @__PURE__ */ jsx(CompoundMedia, { className: "size-full", src: item.src, alt: item.alt })
             },
             index
           ))
@@ -81,7 +81,7 @@ const ScatterParallaxHeroDefaults = {
   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/scatter-parallax-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/scatter-parallax-hero/index.js

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

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

@@ -3,7 +3,7 @@ import { jsxs, jsx } 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, useSpring, useTransform, motion } from "motion/react";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
@@ -12,11 +12,11 @@ import { useEditorContext } from "../../../puck-core/core/context/editor-context
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 const ScrollExpandVideoHero = (props) => {
-  const { heading, description, buttons = [], video = "", images = [{ src: "", alt: "" }], styles } = {
+  const { heading, description, buttons = [], video = "", medias = [{ src: "", alt: "" }], styles } = {
     ...ScrollExpandVideoHeroDefaults,
     ...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 { isEditor } = useEditorContext();
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
@@ -55,7 +55,7 @@ const ScrollExpandVideoHero = (props) => {
             className: cn("z-10 flex flex-col justify-start", isEditor ? "relative" : "sticky top-[10vh] mb-[-10vh]"),
             children: /* @__PURE__ */ jsxs(Dialog, { children: [
               /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex size-full 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("span", { className: "absolute inset-0 z-10 bg-black/50" }),
                 /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" })
               ] }) }),
@@ -88,7 +88,7 @@ const ScrollExpandVideoHeroDefaults = {
   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/scroll-expand-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/scroll-expand-video-hero/index.js

@@ -1,14 +1,14 @@
 import { ScrollExpandVideoHero, ScrollExpandVideoHeroDefaults } 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: ScrollExpandVideoHeroDefaults,
   render: ScrollExpandVideoHero

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

@@ -8,7 +8,7 @@ import { useMediaQuery } from "../../../../hooks/use-media-query.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { useEditorContext } from "../../../puck-core/core/context/editor-context.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";
@@ -18,7 +18,7 @@ const ScrollZoomHero = (props) => {
     heading,
     description,
     buttons,
-    images,
+    medias,
     video,
     styles: rawStyles
   } = {
@@ -76,10 +76,10 @@ const ScrollZoomHero = (props) => {
               style: { scale: isMobile || isEditor ? 1 : scaleValue },
               children: [
                 /* @__PURE__ */ jsx(
-                  CompoundImage,
+                  CompoundMedia,
                   {
-                    src: ((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src) ?? "",
-                    alt: ((_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.alt) ?? "",
+                    src: ((_a = medias == null ? void 0 : medias[0]) == null ? void 0 : _a.src) ?? "",
+                    alt: ((_b = medias == null ? void 0 : medias[0]) == null ? void 0 : _b.alt) ?? "",
                     className: "size-full object-cover"
                   }
                 ),
@@ -95,10 +95,10 @@ const ScrollZoomHero = (props) => {
             className: "flex origin-top-right flex-col items-end justify-center md:h-[60vh] lg:h-[80vh] lg:justify-start",
             style: { scale: isMobile || isEditor ? 1 : scaleValue },
             children: /* @__PURE__ */ jsx(
-              CompoundImage,
+              CompoundMedia,
               {
-                src: ((_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.src) ?? "",
-                alt: ((_d = images == null ? void 0 : images[0]) == null ? void 0 : _d.alt) ?? "",
+                src: ((_c = medias == null ? void 0 : medias[0]) == null ? void 0 : _c.src) ?? "",
+                alt: ((_d = medias == null ? void 0 : medias[0]) == null ? void 0 : _d.alt) ?? "",
                 className: "size-full object-cover"
               }
             )
@@ -113,7 +113,7 @@ const ScrollZoomHeroDefaults = {
   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/scroll-zoom-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/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: {