dune-react 0.0.30 → 0.0.32

package/dist/components/puck-block/testimonial-sections/masonry-testimonial/component.d.ts

@@ -1,7 +1,7 @@
-import type { TestimonialComponentProps, BaseImage } from "../props";
+import type { TestimonialComponentProps, BaseMedia } from "../props";
 type Testimonial = {
     quote: string;
-    avatar: BaseImage;
+    avatar: BaseMedia;
     name: string;
     position: string;
     companyName: string;

package/dist/components/puck-block/testimonial-sections/masonry-testimonial/component.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.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 MasonryTestimonial = (props) => {
@@ -17,9 +17,9 @@ const MasonryTestimonial = (props) => {
     className: sectionClassName,
     style: sectionStyle,
     css,
-    masonryColumns = 3
+    masonryColumns = "3"
   } = styles ?? {};
-  const columnsClass = masonryColumns === 2 ? "md:columns-2" : "md:columns-2 lg:columns-3";
+  const columnsClass = masonryColumns === "2" ? "md:columns-2" : "md:columns-2 lg:columns-3";
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20", children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
@@ -34,7 +34,7 @@ const MasonryTestimonial = (props) => {
           /* @__PURE__ */ jsx("blockquote", { className: "md:text-md", children: testimonial2.quote }),
           /* @__PURE__ */ jsxs("div", { className: "mt-5 flex w-full flex-col items-start gap-4 md:mt-6 md:w-fit md:flex-row md:items-center", children: [
             /* @__PURE__ */ jsx(
-              CompoundImage,
+              CompoundMedia,
               {
                 src: testimonial2.avatar.src,
                 alt: testimonial2.avatar.alt,
@@ -69,7 +69,7 @@ const MasonryTestimonialDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   testimonials: [testimonial, testimonial, testimonial, testimonial, testimonial, testimonial],
   styles: {
-    masonryColumns: 3
+    masonryColumns: "3"
   }
 };
 export {

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

@@ -4,9 +4,9 @@
  * 基础类型引用自 ../props/（全局共享）
  * TestimonialSectionStyles 为 testimonial 特有的样式字段
  */
-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 TestimonialSectionStyles {
     className?: string;
     style?: React.CSSProperties;
@@ -14,9 +14,9 @@ export interface TestimonialSectionStyles {
     ratingType?: "logo" | "stars";
     attributionLayout?: "stacked" | "inline";
     textAlign?: "left" | "center";
-    gridColumns?: 2 | 3;
-    carouselColumns?: 1 | 2 | 3;
-    masonryColumns?: 2 | 3;
+    gridColumns?: "2" | "3";
+    carouselColumns?: "1" | "2" | "3";
+    masonryColumns?: "2" | "3";
     bordered?: boolean;
     hasHeading?: boolean;
     hasButton?: boolean;
@@ -31,8 +31,7 @@ export interface TestimonialSectionStyles {
 export interface TestimonialSectionBaseProps {
     heading: string;
     description: string;
-    buttons: BaseButton[];
-    images: BaseImage[];
+    medias: BaseMedia[];
     styles: TestimonialSectionStyles;
 }
 /** 各 styles 字段的 Puck field 选项 */

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

@@ -1,13 +1,14 @@
-import type { TestimonialComponentProps, BaseImage } from "../props";
+import type { TestimonialComponentProps, BaseMedia, BaseButton } from "../props";
 type Testimonial = {
     numberOfStars: number;
     quote: string;
-    avatar: BaseImage;
+    avatar: BaseMedia;
     name: string;
     position: string;
     companyName: string;
 };
 type StickyTestimonialExtra = {
+    buttons: BaseButton[];
     testimonials: Testimonial[];
 };
 export type StickyTestimonialProps = TestimonialComponentProps<StickyTestimonialExtra>;

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

@@ -1,7 +1,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 { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { cn } from "../../../../utils/css-utils.js";
@@ -53,7 +53,7 @@ const TestimonialCard = ({ testimonial: testimonial2 }) => /* @__PURE__ */ jsxs(
   ] }),
   /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4 md:flex-row md:items-center", children: [
     /* @__PURE__ */ jsx(
-      CompoundImage,
+      CompoundMedia,
       {
         src: testimonial2.avatar.src,
         alt: testimonial2.avatar.alt,
@@ -81,7 +81,10 @@ const testimonial = {
 const StickyTestimonialDefaults = {
   heading: "Customer testimonials",
   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", variant: "secondary" }, { label: "Button", variant: "link" }],
+  buttons: [
+    { label: "Button", variant: "secondary" },
+    { label: "Button", variant: "link" }
+  ],
   testimonials: [testimonial, testimonial, testimonial, testimonial],
   styles: {
     animation: "stickyStack"

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

@@ -1,17 +1,17 @@
-import type { TestimonialComponentProps, BaseImage } from "../props";
+import type { TestimonialComponentProps, BaseMedia } from "../props";
 type Testimonial = {
     numberOfStars: number;
     quote: string;
-    avatar: BaseImage;
+    avatar: BaseMedia;
     name: string;
     position: string;
     companyName: string;
 };
 type Tab = {
     value: string;
-    trigger: BaseImage;
+    trigger: BaseMedia;
     content: Testimonial;
-    image?: BaseImage;
+    media?: BaseMedia;
 };
 type TabTestimonialExtra = {
     tabs: Tab[];

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../shadcn/tabs.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 TabTestimonial = (props) => {
@@ -27,7 +27,7 @@ const TabTestimonial = (props) => {
           value: tab2.value,
           className: "animate-tabs",
           children: /* @__PURE__ */ jsxs("div", { className: `flex w-full items-center ${hasImage ? "flex-col md:flex-row" : "justify-center"} px-6 pb-10 pt-6 md:p-8 lg:px-12 lg:py-16`, children: [
-            hasImage && tab2.image && /* @__PURE__ */ jsx("div", { className: "mb-6 w-full md:mb-0 md:w-1/2 md:pr-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: tab2.image.src, alt: tab2.image.alt, className: "aspect-square w-full object-cover" }) }),
+            hasImage && tab2.media && /* @__PURE__ */ jsx("div", { className: "mb-6 w-full md:mb-0 md:w-1/2 md:pr-8", children: /* @__PURE__ */ jsx(CompoundMedia, { src: tab2.media.src, alt: tab2.media.alt, className: "aspect-square w-full object-cover" }) }),
             /* @__PURE__ */ jsxs("div", { className: `${hasImage ? "w-full md:w-1/2" : "mx-auto w-full max-w-lg text-center"}`, children: [
               /* @__PURE__ */ jsxs("div", { className: "rb-5 mb-5 md:mb-6", children: [
                 /* @__PURE__ */ jsx("div", { className: `mb-6 flex items-center md:mb-8 ${hasImage ? "" : "justify-center"}`, children: Array(tab2.content.numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
@@ -35,7 +35,7 @@ const TabTestimonial = (props) => {
               ] }),
               /* @__PURE__ */ jsxs("div", { className: `mt-6 flex flex-col flex-nowrap gap-4 md:mt-8 ${hasImage ? "items-start" : "items-center"}`, children: [
                 /* @__PURE__ */ jsx(
-                  CompoundImage,
+                  CompoundMedia,
                   {
                     src: tab2.content.avatar.src,
                     alt: tab2.content.avatar.alt,
@@ -62,7 +62,7 @@ const TabTestimonial = (props) => {
           value: tab2.value,
           className: "flex h-auto w-full items-center justify-center gap-4 rounded-none border-0 border-t px-6 py-4 duration-0 data-active:bg-background-primary md:border-r md:px-8 md:py-6 md:last-of-type:border-r-0 md:data-active:[border-top:1px_solid_#fff]",
           children: /* @__PURE__ */ jsx(
-            CompoundImage,
+            CompoundMedia,
             {
               src: tab2.trigger.src,
               alt: tab2.trigger.alt,
@@ -86,7 +86,7 @@ const tab = {
     position: "Position",
     companyName: "Company name"
   },
-  image: { src: "https://picsum.photos/seed/tab-testimonial-img/800/800", alt: "Testimonial image" }
+  media: { src: "https://picsum.photos/seed/tab-testimonial-img/800/800", alt: "Testimonial image" }
 };
 const TabTestimonialDefaults = {
   heading: "Customer testimonials",

package/dist/components/puck-block/testimonial-sections/testimonial-card-grid/component.d.ts

@@ -1,12 +1,12 @@
-import type { TestimonialComponentProps, BaseImage, BaseButton } from "../props";
+import type { TestimonialComponentProps, BaseMedia, BaseButton } from "../props";
 type Testimonial = {
-    image: BaseImage;
+    media: BaseMedia;
     quote: string;
-    avatar: BaseImage;
+    avatar: BaseMedia;
     name: string;
     position: string;
     numberOfStars: number;
-    logo?: BaseImage;
+    logo?: BaseMedia;
     button?: BaseButton;
 };
 type TestimonialCardGridExtra = {

package/dist/components/puck-block/testimonial-sections/testimonial-card-grid/component.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { Button } from "../../../shadcn/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 TestimonialCardGrid = (props) => {
@@ -19,12 +19,12 @@ const TestimonialCardGrid = (props) => {
     style: sectionStyle,
     css,
     textAlign = "center",
-    gridColumns = 2,
+    gridColumns = "2",
     ratingType = "logo",
     bordered = false,
     hasButton = false
   } = styles ?? {};
-  const gridColsClass = gridColumns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2";
+  const gridColsClass = gridColumns === "3" ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2";
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: `mx-auto mb-12 w-full max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "text-center" : "text-left"}`, children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
@@ -35,12 +35,12 @@ const TestimonialCardGrid = (props) => {
       {
         className: `flex flex-col items-center justify-center text-center ${bordered ? "border border-border-primary p-6 md:p-8" : ""}`,
         children: [
-          ratingType === "logo" && testimonial.image && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: testimonial.image.src, alt: testimonial.image.alt, className: "max-h-14" }) }),
+          ratingType === "logo" && testimonial.media && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundMedia, { src: testimonial.media.src, alt: testimonial.media.alt, className: "max-h-14" }) }),
           ratingType === "stars" && /* @__PURE__ */ jsx("div", { className: "mb-5 flex md:mb-6", children: Array(testimonial.numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
           /* @__PURE__ */ jsx("blockquote", { className: "text-md font-bold leading-[1.4] md:text-xl", children: testimonial.quote }),
           /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col items-center justify-center md:mt-8", children: [
             /* @__PURE__ */ jsx("div", { className: "mb-3 md:mb-4", children: /* @__PURE__ */ jsx(
-              CompoundImage,
+              CompoundMedia,
               {
                 src: testimonial.avatar.src,
                 alt: testimonial.avatar.alt,
@@ -51,7 +51,7 @@ const TestimonialCardGrid = (props) => {
             /* @__PURE__ */ jsx("p", { children: testimonial.position })
           ] }),
           hasButton && testimonial.logo && /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-center gap-4 md:mt-6", children: [
-            /* @__PURE__ */ jsx(CompoundImage, { src: testimonial.logo.src, alt: testimonial.logo.alt, className: "max-h-12" }),
+            /* @__PURE__ */ jsx(CompoundMedia, { src: testimonial.logo.src, alt: testimonial.logo.alt, className: "max-h-12" }),
             testimonial.button && /* @__PURE__ */ jsx(Button, { variant: testimonial.button.variant, size: testimonial.button.size, children: testimonial.button.label })
           ] })
         ]
@@ -65,7 +65,7 @@ const TestimonialCardGridDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   testimonials: [
     {
-      image: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/discord.svg", alt: "Webflow logo 1" },
+      media: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/discord.svg", alt: "Webflow logo 1" },
       quote: '"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."',
       avatar: { src: "https://picsum.photos/seed/testimonial-1/100/100", alt: "Testimonial avatar 1" },
       name: "Name Surname",
@@ -73,7 +73,7 @@ const TestimonialCardGridDefaults = {
       numberOfStars: 5
     },
     {
-      image: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/discord.svg", alt: "Webflow logo 2" },
+      media: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/discord.svg", alt: "Webflow logo 2" },
       quote: '"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."',
       avatar: { src: "https://picsum.photos/seed/testimonial-2/100/100", alt: "Testimonial avatar 2" },
       name: "Name Surname",
@@ -83,7 +83,7 @@ const TestimonialCardGridDefaults = {
   ],
   styles: {
     textAlign: "center",
-    gridColumns: 2,
+    gridColumns: "2",
     ratingType: "logo",
     bordered: false,
     hasButton: false

package/dist/components/puck-block/testimonial-sections/testimonial-carousel/component.d.ts

@@ -1,8 +1,8 @@
-import type { TestimonialComponentProps, BaseImage, BaseButton } from "../props";
+import type { TestimonialComponentProps, BaseMedia, BaseButton } from "../props";
 type Testimonial = {
     quote: string;
-    logo?: BaseImage;
-    avatar: BaseImage;
+    logo?: BaseMedia;
+    avatar: BaseMedia;
     name: string;
     position: string;
     numberOfStars: number;

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

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
@@ -24,7 +24,7 @@ const TestimonialCarousel = (props) => {
     ratingType = "logo",
     hasHeading = false,
     textAlign = "center",
-    carouselColumns = 1,
+    carouselColumns = "1",
     bordered = false,
     hasButton = false
   } = styles ?? {};
@@ -37,7 +37,7 @@ const TestimonialCarousel = (props) => {
       setCurrent(api.selectedScrollSnap() + 1);
     });
   }, [api]);
-  const basisClass = carouselColumns === 3 ? "md:basis-1/2 lg:basis-1/3" : carouselColumns === 2 ? "md:basis-1/2" : "md:basis-full";
+  const basisClass = carouselColumns === "3" ? "md:basis-1/2 lg:basis-1/3" : carouselColumns === "2" ? "md:basis-1/2" : "md:basis-full";
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("overflow-hidden px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     hasHeading && /* @__PURE__ */ jsxs("div", { className: `mb-12 w-full max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "mx-auto text-center" : ""}`, children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
@@ -54,14 +54,14 @@ const TestimonialCarousel = (props) => {
             /* @__PURE__ */ jsx(CarouselContent, { className: "ml-0 md:mx-3", children: testimonials.map((testimonial2, index) => /* @__PURE__ */ jsx(
               CarouselItem,
               {
-                className: `pl-0 ${carouselColumns === 1 ? "md:px-16" : "pr-6 md:pr-8"} ${basisClass}`,
+                className: `pl-0 ${carouselColumns === "1" ? "md:px-16" : "pr-6 md:pr-8"} ${basisClass}`,
                 children: /* @__PURE__ */ jsxs("div", { className: `mx-auto flex w-full max-w-lg flex-col items-center text-center ${bordered ? "border border-border-primary p-6 md:p-8" : ""}`, children: [
-                  ratingType === "logo" && testimonial2.logo && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: testimonial2.logo.src, alt: testimonial2.logo.alt, className: "max-h-14" }) }),
+                  ratingType === "logo" && testimonial2.logo && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundMedia, { src: testimonial2.logo.src, alt: testimonial2.logo.alt, className: "max-h-14" }) }),
                   ratingType === "stars" && /* @__PURE__ */ jsx("div", { className: "mb-5 flex md:mb-6", children: Array(testimonial2.numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
-                  /* @__PURE__ */ jsx("blockquote", { className: `font-bold ${carouselColumns === 1 ? "text-xl md:text-2xl" : "text-md leading-[1.4] md:text-xl"}`, children: testimonial2.quote }),
+                  /* @__PURE__ */ jsx("blockquote", { className: `font-bold ${carouselColumns === "1" ? "text-xl md:text-2xl" : "text-md leading-[1.4] md:text-xl"}`, children: testimonial2.quote }),
                   /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col items-center justify-center md:mt-8", children: [
                     /* @__PURE__ */ jsx("div", { className: "mb-3 md:mb-4", children: /* @__PURE__ */ jsx(
-                      CompoundImage,
+                      CompoundMedia,
                       {
                         src: testimonial2.avatar.src,
                         alt: testimonial2.avatar.alt,
@@ -111,7 +111,7 @@ const TestimonialCarouselDefaults = {
     ratingType: "logo",
     hasHeading: false,
     textAlign: "center",
-    carouselColumns: 1,
+    carouselColumns: "1",
     bordered: false,
     hasButton: false
   }

package/dist/components/puck-block/text-sections/blog-article/component.d.ts

@@ -1,8 +1,5 @@
-import type { TextComponentProps, TextSectionBaseProps, BaseImage } from "../props";
-type SocialMediaLink = {
-    platform: string;
-    url: string;
-};
+import type { TextComponentProps, TextSectionBaseProps, BaseMedia } from "../props";
+import type { BaseSocialLink } from "@/components/puck-core/core/props/interactive";
 type Tag = {
     label: string;
     url: string;
@@ -10,7 +7,7 @@ type Tag = {
 type Author = {
     name: string;
     titleAndCompany: string;
-    avatar: BaseImage;
+    avatar: BaseMedia;
 };
 type Breadcrumb = {
     label: string;
@@ -18,7 +15,7 @@ type Breadcrumb = {
 };
 type BlogArticleExtra = {
     prose: string;
-    socialMediaLinks: SocialMediaLink[];
+    socialLinks: BaseSocialLink[];
     tags: Tag[];
     shareTitle: string;
     author: Author;

package/dist/components/puck-block/text-sections/blog-article/component.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { CompoundSocialLinks } from "../../../puck-base/social-links.js";
 import { cn } from "../../../../utils/css-utils.js";
 const BlogArticle = (props) => {
   const {
     prose,
-    socialMediaLinks = [],
+    socialLinks = [],
     tags = [],
     shareTitle,
     author,
@@ -30,22 +31,14 @@ const BlogArticle = (props) => {
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 sm:flex-row sm:items-end sm:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "sm:max-w-1/2", children: [
         /* @__PURE__ */ jsx("p", { className: "font-semibold md:text-md", children: shareTitle }),
-        /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-start gap-2 md:mt-4", children: socialMediaLinks.map((link, index) => /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: link.url,
-            className: "size-8 rounded-[1.25rem] bg-background-secondary p-1 flex items-center justify-center text-sm font-bold",
-            children: link.platform.charAt(0)
-          },
-          index
-        )) })
+        /* @__PURE__ */ jsx(CompoundSocialLinks, { links: socialLinks, iconClassName: "size-4", className: "mt-3 gap-2 md:mt-4" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "sm:max-w-1/2", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2 sm:justify-end", children: tags.map((tag, index) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("a", { href: tag.url, className: "bg-background-secondary px-2 py-1 text-sm font-semibold", children: tag.label }) }, index)) }) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "my-8 h-px bg-border-primary md:my-12" }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        CompoundImage,
+        CompoundMedia,
         {
           src: author.avatar.src,
           alt: author.avatar.alt,
@@ -62,11 +55,10 @@ const BlogArticle = (props) => {
 const BlogArticleDefaults = {
   prose: `<h3>Introduction</h3><p>Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt.</p><p>Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor.</p><h4>Conclusion</h4><p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis.</p>`,
   shareTitle: "Share this post",
-  socialMediaLinks: [
-    { platform: "Link", url: "#" },
-    { platform: "LinkedIn", url: "#" },
-    { platform: "Twitter", url: "#" },
-    { platform: "Facebook", url: "#" }
+  socialLinks: [
+    { platform: "linkedin", url: "#" },
+    { platform: "twitter", url: "#" },
+    { platform: "facebook", url: "#" }
   ],
   tags: [
     { label: "Tag one", url: "#" },

package/dist/components/puck-block/text-sections/blog-article/index.d.ts

@@ -10,17 +10,45 @@ declare const conf: {
         shareTitle: {
             type: string;
         };
-        socialMediaLinks: {
-            type: string;
-            getItemSummary: (item: {
+        socialLinks: {
+            readonly type: "array";
+            readonly label: "Social Links";
+            readonly getItemSummary: (item: {
                 platform?: string;
-            }, index?: number) => string;
-            arrayFields: {
-                platform: {
-                    type: string;
+            }, i?: number) => string;
+            readonly arrayFields: {
+                readonly platform: {
+                    readonly type: "select";
+                    readonly label: "Platform";
+                    readonly options: readonly [{
+                        readonly label: "Twitter / X";
+                        readonly value: "twitter";
+                    }, {
+                        readonly label: "Facebook";
+                        readonly value: "facebook";
+                    }, {
+                        readonly label: "Instagram";
+                        readonly value: "instagram";
+                    }, {
+                        readonly label: "LinkedIn";
+                        readonly value: "linkedin";
+                    }, {
+                        readonly label: "YouTube";
+                        readonly value: "youtube";
+                    }, {
+                        readonly label: "GitHub";
+                        readonly value: "github";
+                    }, {
+                        readonly label: "TikTok";
+                        readonly value: "tiktok";
+                    }, {
+                        readonly label: "Discord";
+                        readonly value: "discord";
+                    }];
                 };
-                url: {
-                    type: string;
+                readonly url: {
+                    readonly type: "text";
+                    readonly label: "URL";
                 };
             };
         };
@@ -115,10 +143,7 @@ declare const conf: {
     };
     defaultProps: Partial<import("../props").TextSectionBaseProps> & {
         prose: string;
-        socialMediaLinks: {
-            platform: string;
-            url: string;
-        }[];
+        socialLinks: import("@/components/puck-core/core/props/interactive").BaseSocialLink[];
         tags: {
             label: string;
             url: string;
@@ -127,7 +152,7 @@ declare const conf: {
         author: {
             name: string;
             titleAndCompany: string;
-            avatar: import("@/components/puck-core/core/props/media").BaseImage;
+            avatar: import("@/components/puck-core/core/props/media").BaseMedia;
         };
         breadcrumbs?: {
             label: string;

package/dist/components/puck-block/text-sections/blog-article/index.js

@@ -1,19 +1,13 @@
 import { BlogArticle, BlogArticleDefaults } from "./component.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { socialLinksField } from "../../../puck-core/core/props/interactive.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
 import { textStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     prose: { type: "textarea" },
     shareTitle: { type: "text" },
-    socialMediaLinks: {
-      type: "array",
-      getItemSummary: (item, index = 0) => item.platform || `Link ${index + 1}`,
-      arrayFields: {
-        platform: { type: "text" },
-        url: { type: "text" }
-      }
-    },
+    socialLinks: socialLinksField,
     tags: {
       type: "array",
       getItemSummary: (item, index = 0) => item.label || `Tag ${index + 1}`,
@@ -28,7 +22,7 @@ const conf = {
       objectFields: {
         name: { type: "text" },
         titleAndCompany: { type: "text" },
-        avatar: imageField
+        avatar: mediaField
       }
     },
     breadcrumbs: {

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

@@ -4,9 +4,9 @@
  * 基础类型引用自 ../props/（全局共享）
  * TextSectionStyles 为 text-section 特有的样式字段
  */
-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 TextSectionStyles {
     className?: string;
     style?: React.CSSProperties;
@@ -28,7 +28,7 @@ export interface TextSectionBaseProps {
     heading: string;
     description: string;
     buttons: BaseButton[];
-    image: BaseImage;
+    media: BaseMedia;
     video: string;
     inputPlaceholder: string;
     formButton: BaseButton;

package/dist/components/puck-block/text-sections/prose-content/component.d.ts

@@ -1,4 +1,4 @@
-import type { TextComponentProps, TextSectionBaseProps, BaseImage } from "../props";
+import type { TextComponentProps, TextSectionBaseProps, BaseMedia } from "../props";
 type Metatag = {
     label: string;
     value: string;
@@ -6,7 +6,7 @@ type Metatag = {
 type ProseContentExtra = {
     prose: string;
     metatags?: Metatag[];
-    mediaImage?: BaseImage;
+    mediaImage?: BaseMedia;
 };
 export type ProseContentProps = TextComponentProps<ProseContentExtra>;
 export declare const ProseContent: (props: ProseContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/prose-content/component.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 import { cn } from "../../../../utils/css-utils.js";
@@ -34,7 +34,7 @@ const ProseContent = (props) => {
     if (mediaType === "video") {
       return /* @__PURE__ */ jsxs(Dialog, { children: [
         /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
-          /* @__PURE__ */ jsx(CompoundImage, { src: (mediaImage == null ? void 0 : mediaImage.src) ?? "", alt: mediaImage == null ? void 0 : mediaImage.alt, className: "size-full object-cover" }),
+          /* @__PURE__ */ jsx(CompoundMedia, { src: (mediaImage == null ? void 0 : mediaImage.src) ?? "", alt: mediaImage == null ? void 0 : mediaImage.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" })
         ] }) }),
@@ -56,7 +56,7 @@ const ProseContent = (props) => {
         ] })
       ] });
     }
-    return mediaImage ? /* @__PURE__ */ jsx(CompoundImage, { src: mediaImage.src, className: "w-full object-cover", alt: mediaImage.alt }) : null;
+    return mediaImage ? /* @__PURE__ */ jsx(CompoundMedia, { src: mediaImage.src, className: "w-full object-cover", alt: mediaImage.alt }) : null;
   };
   const mediaElement = renderMedia();
   const isTwoColumn = textLayout === "twoColumnProse";

package/dist/components/puck-block/text-sections/prose-content/index.d.ts

@@ -134,7 +134,7 @@ declare const conf: {
             label: string;
             value: string;
         }[];
-        mediaImage?: import("@/components/puck-core/core/props/media").BaseImage;
+        mediaImage?: import("@/components/puck-core/core/props/media").BaseMedia;
     };
     render: (props: ProseContentProps) => import("react/jsx-runtime").JSX.Element;
 };