dune-react 0.0.30 → 0.0.32

package/dist/components/puck-core/fields/{image-upload-field.js → media-upload-field.js}

@@ -1,12 +1,29 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { X, Loader2, UploadCloud, ImageIcon } from "lucide-react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { Youtube, Film, ImageIcon, X, Loader2, UploadCloud } from "lucide-react";
 import { cn } from "../../../utils/css-utils.js";
 import { Button } from "../../shadcn/button.js";
 import { Input } from "../../shadcn/input.js";
 import useUpload from "../use-upload.js";
-function ImageUploadField({
+function detectMediaType(src) {
+  if (/youtube\.com|youtu\.be|vimeo\.com/i.test(src)) return "embed";
+  if (/\.(mp4|webm|mov|ogg)(\?.*)?$/i.test(src)) return "video";
+  return "image";
+}
+function getEmbedThumbnail(src) {
+  const ytMatch = src.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/
+  );
+  if (ytMatch) return `https://img.youtube.com/vi/${ytMatch[1]}/mqdefault.jpg`;
+  return null;
+}
+const TYPE_META = {
+  image: { icon: ImageIcon, label: "Image", color: "text-blue-500" },
+  video: { icon: Film, label: "Video", color: "text-purple-500" },
+  embed: { icon: Youtube, label: "YouTube / Vimeo", color: "text-red-500" }
+};
+function MediaUploadField({
   name,
   value,
   onChange
@@ -22,30 +39,56 @@ function ImageUploadField({
     onChange("");
   }, [onChange]);
   const hasValue = !!value;
+  const mediaType = useMemo(() => hasValue ? detectMediaType(value) : "image", [hasValue, value]);
+  const meta = TYPE_META[mediaType];
+  const TypeIcon = meta.icon;
   const inputProps = getInputProps();
   const dropzoneProps = getDropzoneProps();
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx("input", { ...inputProps, name }),
-    hasValue && !isUploading ? /* @__PURE__ */ jsxs("div", { className: "group relative overflow-hidden rounded-md border", children: [
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: value,
-          alt: "preview",
-          className: "block h-32 w-full object-contain"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "destructive",
-          size: "icon-sm",
-          className: "absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100",
-          onClick: handleClear,
-          children: /* @__PURE__ */ jsx(X, { className: "size-3" })
-        }
-      )
+    hasValue && !isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(TypeIcon, { className: cn("size-3.5", meta.color) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: meta.label })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "group relative overflow-hidden rounded-md border", children: [
+        mediaType === "image" && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: value,
+            alt: "preview",
+            className: "block h-32 w-full object-contain"
+          }
+        ),
+        mediaType === "video" && /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: value,
+            muted: true,
+            playsInline: true,
+            className: "block h-32 w-full object-contain"
+          }
+        ),
+        mediaType === "embed" && /* @__PURE__ */ jsx(Fragment, { children: getEmbedThumbnail(value) ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: getEmbedThumbnail(value),
+            alt: "video thumbnail",
+            className: "block h-32 w-full object-contain"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex h-32 w-full items-center justify-center bg-muted", children: /* @__PURE__ */ jsx(Youtube, { className: "size-8 text-muted-foreground" }) }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "destructive",
+            size: "icon-sm",
+            className: "absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100",
+            onClick: handleClear,
+            children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+          }
+        )
+      ] })
     ] }) : isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex h-28 w-full flex-col items-center justify-center gap-3 rounded-md border-2 border-dashed border-primary/50 bg-accent/30", children: [
       /* @__PURE__ */ jsx(Loader2, { className: "text-primary size-6 animate-spin" }),
       /* @__PURE__ */ jsxs("div", { className: "w-3/4", children: [
@@ -73,7 +116,7 @@ function ImageUploadField({
         ...dropzoneProps,
         children: [
           /* @__PURE__ */ jsx(UploadCloud, { className: "size-6" }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs", children: "拖拽图片到这里，或点击上传" })
+          /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Drag image here, or click to upload" })
         ]
       }
     ),
@@ -83,7 +126,7 @@ function ImageUploadField({
         Input,
         {
           type: "text",
-          placeholder: "https://example.com/image.jpg",
+          placeholder: "https://example.com/image.jpg or YouTube URL",
           defaultValue: value,
           onBlur: (e) => {
             const v = e.currentTarget.value.trim();
@@ -118,12 +161,12 @@ function ImageUploadField({
         onClick: () => setUrlMode(true),
         children: [
           /* @__PURE__ */ jsx(ImageIcon, { className: "size-3" }),
-          /* @__PURE__ */ jsx("span", { children: "使用 URL" })
+          /* @__PURE__ */ jsx("span", { children: "Use URL" })
         ]
       }
     )
   ] });
 }
 export {
-  ImageUploadField
+  MediaUploadField
 };

package/dist/components/puck-core/index.d.ts

@@ -1,4 +1,4 @@
-export { ImageUploadField } from "./fields/image-upload-field";
+export { MediaUploadField } from "./fields/media-upload-field";
 export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, AutoField, type FieldDef, type AutoFieldProps, type FieldsPanelProps, } from "./fields";
 export { type IconName, type Feature, type ActionType, type Action, resolveActionUrl, } from "./core/types";
 export { withEditable } from "./core/with-editable";
@@ -10,4 +10,4 @@ export { SectionWrapper, type SectionWrapperProps } from "./section-wrapper";
 export { EditorContextProvider, useEditorContext } from "./core/context/editor-context";
 export { SectionIdProvider, useSectionId } from "./core/context/section-id-context";
 export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";
-export { icon, action, actionDefaults, button, buttons, badge, image, images, padding, paddingDefaults, paddingLevel, heading, description, features, contentFields, contentFieldsWithFeatures, card, cards, field, fieldDefaults, form, formDefaults, getPlaceholderImageUrl, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, sectionStyle, sectionOverlay, backgroundColor, backgroundImage, } from "./core/fields";
+export { icon, action, actionDefaults, button, buttons, badge, media, medias, padding, paddingDefaults, paddingLevel, heading, description, features, contentFields, contentFieldsWithFeatures, card, cards, field, fieldDefaults, form, formDefaults, getPlaceholderMediaUrl, media16x9Placeholder, media1x1Placeholder, media9x16Placeholder, sectionStyle, sectionOverlay, backgroundColor, backgroundImage, } from "./core/fields";

package/dist/components/shadcn/tabs.d.ts

@@ -7,4 +7,5 @@ declare const tabsListVariants: (props?: ({
 declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
 declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react/jsx-runtime").JSX.Element;
 declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+declare function TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator, tabsListVariants };

package/dist/components/shadcn/tabs.js

@@ -22,7 +22,7 @@ function Tabs({
   );
 }
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -56,7 +56,7 @@ function TabsTrigger({ className, ...props }) {
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
@@ -71,7 +71,24 @@ function TabsContent({ className, ...props }) {
     Tabs$1.Panel,
     {
       "data-slot": "tabs-content",
-      className: cn("flex-1 outline-none", className),
+      className: cn("flex-1 text-sm outline-none", className),
+      ...props
+    }
+  );
+}
+function TabsIndicator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Indicator,
+    {
+      "data-slot": "tabs-indicator",
+      className: cn(
+        "absolute bottom-0 h-0.5 rounded-full bg-foreground transition-all duration-200 ease-out",
+        "group-data-vertical/tabs:bottom-auto group-data-vertical/tabs:left-0 group-data-vertical/tabs:h-auto group-data-vertical/tabs:w-0.5",
+        className
+      ),
+      style: {
+        transitionProperty: "left, right, top, bottom, width, height"
+      },
       ...props
     }
   );
@@ -79,6 +96,7 @@ function TabsContent({ className, ...props }) {
 export {
   Tabs,
   TabsContent,
+  TabsIndicator,
   TabsList,
   TabsTrigger,
   tabsListVariants

package/dist/components/shadcn/video-iframe.d.ts

@@ -1,6 +1,7 @@
 interface VideoIframeProps {
     video: string;
     className?: string;
+    autoplay?: boolean;
 }
-export declare function VideoIframe({ video, className }: VideoIframeProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoIframe({ video, className, autoplay }: VideoIframeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/shadcn/video-iframe.js

@@ -3,16 +3,17 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../utils/css-utils.js";
 import { CgSpinner } from "../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
-function getEmbedUrl(url) {
+function getEmbedUrl(url, autoplay = true) {
+  const ap = autoplay ? "?autoplay=1" : "";
   const ytMatch = url.match(
-    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/
+    /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/
   );
-  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}?autoplay=1`;
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}${ap}`;
   const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
-  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}${ap}`;
   return url;
 }
-function VideoIframe({ video, className }) {
+function VideoIframe({ video, className, autoplay = true }) {
   const [loaded, setLoaded] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: cn("relative aspect-video w-full", className), children: [
     !loaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(CgSpinner, { className: "size-8 animate-spin text-muted-foreground" }) }),
@@ -20,7 +21,7 @@ function VideoIframe({ video, className }) {
       "iframe",
       {
         className: "size-full",
-        src: getEmbedUrl(video),
+        src: getEmbedUrl(video, autoplay),
         allow: "autoplay; fullscreen",
         allowFullScreen: true,
         onLoad: () => setLoaded(true)

package/dist/index.js

@@ -139,7 +139,8 @@ import { CompoundContainer } from "./components/puck-base/container.js";
 import { CompoundContent } from "./components/puck-base/content.js";
 import { CompoundField, fieldTypes } from "./components/puck-base/field.js";
 import { CompoundForm, formMethods } from "./components/puck-base/form.js";
-import { CompoundImage } from "./components/puck-base/image.js";
+import { CompoundMedia } from "./components/puck-base/media.js";
+import { CompoundSocialLinks } from "./components/puck-base/social-links.js";
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/shadcn/context-menu.js";
 import { Cover } from "./components/ui-block/cover/index.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/shadcn/dialog.js";
@@ -153,7 +154,6 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLab
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./components/shadcn/form.js";
 import { GradientText } from "./components/puck-base/gradient-text.js";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./components/shadcn/hover-card.js";
-import { ImageUploadField } from "./components/puck-core/fields/image-upload-field.js";
 import { InlineEditable } from "./components/puck-core/inline-editable.js";
 import { Input } from "./components/shadcn/input.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/shadcn/input-group.js";
@@ -162,6 +162,7 @@ import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup,
 import { Kbd, KbdGroup } from "./components/shadcn/kbd.js";
 import { Label } from "./components/shadcn/label.js";
 import { LayoutTextFlip } from "./components/shadcn/layout-text-flip.js";
+import { MediaUploadField } from "./components/puck-core/fields/media-upload-field.js";
 import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./components/shadcn/menubar.js";
 import { MobileNav, MobileNavHeader, MobileNavMenu, MobileNavToggle, NavBody, NavItems, Navbar, NavbarButton, NavbarLogo } from "./components/shadcn/resizable-navbar.js";
 import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./components/shadcn/native-select.js";
@@ -186,7 +187,7 @@ import { Spinner } from "./components/shadcn/spinner.js";
 import { Spotlight } from "./components/ui-block/spotlight/index.js";
 import { Switch } from "./components/shadcn/switch.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/shadcn/table.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./components/shadcn/tabs.js";
+import { Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, tabsListVariants } from "./components/shadcn/tabs.js";
 import { Textarea } from "./components/shadcn/textarea.js";
 import { Toaster } from "./components/shadcn/sonner.js";
 import { Toggle, toggleVariants } from "./components/shadcn/toggle.js";
@@ -207,7 +208,7 @@ import { filterEmptyValues } from "./utils/utils-common.js";
 import { findComponentById, getRandomAdjective } from "./components/puck-core/core/utils.js";
 import { formatLargeNumber, getUrlWithParams } from "./utils/utils-api.js";
 import { formatTimeAgo, formatTimeString, getTimeDetails, getTimestamp, sleep, timeAgo } from "./utils/utils-time.js";
-import { getPlaceholderImageUrl, imageField, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, imagesField } from "./components/puck-core/core/props/media.js";
+import { getPlaceholderMediaUrl, mediaField, media16x9Placeholder, media1x1Placeholder, media9x16Placeholder, mediasField } from "./components/puck-core/core/props/media.js";
 import { nanoid } from "./utils/utils-random.js";
 import { usePuckAppState, usePuckConfig, usePuckDispatch, usePuckGetSelectorForId, usePuckHistory } from "./components/puck-core/core/hooks.js";
 import { withEditable } from "./components/puck-core/core/with-editable.js";
@@ -325,7 +326,8 @@ export {
   CompoundContent,
   CompoundField,
   CompoundForm,
-  CompoundImage,
+  CompoundMedia,
+  CompoundSocialLinks,
   default15 as ContactCardsGridConf,
   default16 as ContactLinksFooterConf,
   default17 as ContactModalConf,
@@ -438,7 +440,6 @@ export {
   default40 as ImageCarouselConf,
   default41 as ImageTestimonialCarouselConf,
   default42 as ImageTestimonialConf,
-  ImageUploadField,
   default43 as InfoCardsMediaConf,
   InlineEditable,
   default44 as InlineImageHeroConf,
@@ -475,6 +476,7 @@ export {
   default47 as MarqueeTestimonialConf,
   default48 as MasonryGridConf,
   default49 as MasonryTestimonialConf,
+  MediaUploadField,
   default50 as MegaMenuNavbarConf,
   Menubar,
   MenubarCheckboxItem,
@@ -645,6 +647,7 @@ export {
   TableRow,
   Tabs,
   TabsContent,
+  TabsIndicator,
   TabsList,
   TabsTrigger,
   default95 as TeamCarouselConf,
@@ -715,21 +718,21 @@ export {
   formatTimeString,
   getBase64Client,
   getComponentDefaultProps,
-  getPlaceholderImageUrl,
+  getPlaceholderMediaUrl,
   getRandomAdjective,
   getTimeDetails,
   getTimestamp,
   getUrlWithParams,
   headingField as heading,
   iconField as icon,
-  imageField as image,
-  image16x9Placeholder,
-  image1x1Placeholder,
-  image9x16Placeholder,
-  imagesField as images,
   isValidFileSize,
   isValidFileType,
   liquidGlass,
+  mediaField as media,
+  media16x9Placeholder,
+  media1x1Placeholder,
+  media9x16Placeholder,
+  mediasField as medias,
   nanoid,
   navigationMenuTriggerStyle,
   padding,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "dune-react",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "gen:meta": "node --import ./scripts/register-mocks.mjs --import tsx/esm scripts/generate-component-meta.ts",
-    "build": "pnpm gen:meta && vite build && tsc --project tsconfig.build.json && scripts/fix-dts-extensions.sh",
+    "build": "pnpm gen:meta && vite build && tsc --project tsconfig.build.json",
     "watch": "vite build --watch & tsc --project tsconfig.build.json --watch --preserveWatchOutput &",
     "build:sync": "pnpm build && cd ../magent && pnpm sync:dune && cd ../canvas-editor && pnpm sync:dune",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

package/dist/components/puck-base/image.d.ts

@@ -1,6 +0,0 @@
-export interface CompoundImageProps {
-    src: string;
-    alt?: string;
-    className?: string;
-}
-export declare const CompoundImage: (props: CompoundImageProps) => import("react/jsx-runtime").JSX.Element;