dune-react 0.0.7 → 0.0.9

package/dist/components/puck-block/gallery-sections/gallery-2/index.js

@@ -0,0 +1,44 @@
+import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
+import { Gallery2 } from "./gallery-2.js";
+const defaultImage = {
+  src: "https://dummyimage.com/1400x700/f5f4f4/101010.png&text=Gallery+Image",
+  alt: "Gallery image"
+};
+const conf = {
+  fields: {
+    heading: {
+      type: "text",
+      contentEditable: true
+    },
+    description: {
+      type: "textarea",
+      contentEditable: true
+    },
+    images: {
+      type: "array",
+      max: 10,
+      getItemSummary: (item, index = 0) => item.alt || `Image ${index + 1}`,
+      arrayFields: {
+        src: { type: "image", label: "图片" },
+        alt: { type: "text", label: "Alt Text" }
+      },
+      defaultItemProps: defaultImage
+    },
+    padding,
+    sectionStyle,
+    backgroundColor
+  },
+  defaultProps: {
+    heading: "Real transformations from real training",
+    description: "Watch how customized programs and one-on-one coaching help clients reach their fitness goals. Every session is built around your needs.",
+    images: Array.from({ length: 3 }).map((_, i) => ({
+      ...defaultImage,
+      alt: `Gallery image ${i + 1}`
+    })),
+    padding: paddingDefaults
+  },
+  render: Gallery2
+};
+export {
+  conf
+};

package/dist/components/puck-block/gallery-sections/gallery-3/gallery-3.d.ts

@@ -0,0 +1,17 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface Gallery3Image {
+    src: string;
+    alt?: string;
+    caption?: string;
+}
+export interface Gallery3Props {
+    padding?: CompoundContainerProps["padding"];
+    sectionStyle?: CompoundContainerProps["sectionStyle"];
+    backgroundColor?: string;
+    heading?: string;
+    description?: string;
+    images?: Gallery3Image[];
+    showCaptions?: boolean;
+    gap?: "sm" | "md" | "lg";
+}
+export declare const Gallery3: ({ padding, sectionStyle, backgroundColor, heading, description, images, showCaptions, gap, }: Gallery3Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/gallery-sections/gallery-3/gallery-3.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+const gapClasses = {
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-5"
+};
+function ImageCard({
+  image,
+  index,
+  showCaption,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // [&>span] targets the span wrapper that withEditable inserts in editor mode
+        "group relative overflow-hidden rounded-2xl bg-muted [&>span]:h-full [&>span]:w-full",
+        className
+      ),
+      children: [
+        !image.src && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: image.alt ?? `Image ${index + 1}` }) }),
+        /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            src: image.src || "",
+            alt: image.alt ?? `Gallery image ${index + 1}`,
+            className: "h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+          }
+        ),
+        showCaption && image.caption && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-end bg-gradient-to-t from-black/65 via-black/10 to-transparent p-5 opacity-0 transition-all duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsx("p", { className: "translate-y-2 text-sm font-medium text-white transition-transform duration-300 group-hover:translate-y-0", children: image.caption }) })
+      ]
+    }
+  );
+}
+const Gallery3 = ({
+  padding,
+  sectionStyle,
+  backgroundColor,
+  heading,
+  description,
+  images = [],
+  showCaptions = true,
+  gap = "md"
+}) => {
+  const gc = gapClasses[gap] ?? gapClasses.md;
+  const [img1, img2, img3, ...rest] = images;
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding,
+      sectionStyle,
+      backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 lg:gap-12", children: [
+        (heading || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: heading && /* @__PURE__ */ jsx("h2", { className: "text-4xl font-bold tracking-tight text-foreground lg:text-5xl", children: heading }) }),
+          description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-base leading-relaxed text-muted-foreground lg:text-right", children: description })
+        ] }),
+        images.length > 0 && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", gc), children: [
+          img1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: cn("flex flex-col lg:hidden", gc), children: [img1, img2, img3].filter(Boolean).map((img, i) => /* @__PURE__ */ jsx("div", { className: "aspect-[4/3]", children: /* @__PURE__ */ jsx(
+              ImageCard,
+              {
+                image: img,
+                index: i,
+                showCaption: showCaptions,
+                className: "h-full"
+              }
+            ) }, i)) }),
+            /* @__PURE__ */ jsxs("div", { className: cn("hidden h-[520px] lg:flex", gc), children: [
+              /* @__PURE__ */ jsx(
+                ImageCard,
+                {
+                  image: img1,
+                  index: 0,
+                  showCaption: showCaptions,
+                  className: "basis-[58%] shrink-0"
+                }
+              ),
+              (img2 || img3) && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1 flex-col", gc), children: [
+                img2 && /* @__PURE__ */ jsx(
+                  ImageCard,
+                  {
+                    image: img2,
+                    index: 1,
+                    showCaption: showCaptions,
+                    className: "flex-1"
+                  }
+                ),
+                img3 && /* @__PURE__ */ jsx(
+                  ImageCard,
+                  {
+                    image: img3,
+                    index: 2,
+                    showCaption: showCaptions,
+                    className: "flex-1"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          rest.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 lg:grid-cols-3", gc), children: rest.map((img, idx) => /* @__PURE__ */ jsx("div", { className: "aspect-[4/3]", children: /* @__PURE__ */ jsx(
+            ImageCard,
+            {
+              image: img,
+              index: idx + 3,
+              showCaption: showCaptions,
+              className: "h-full"
+            }
+          ) }, idx + 3)) })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Gallery3
+};

package/dist/components/puck-block/gallery-sections/gallery-3/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { Gallery3Props } from "./gallery-3";
+export type { Gallery3Props };
+export declare const conf: ComponentConfig<Gallery3Props>;
+export default conf;

package/dist/components/puck-block/gallery-sections/gallery-3/index.js

@@ -0,0 +1,60 @@
+import { paddingDefaults, backgroundColor, sectionStyle, padding, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { Gallery3 } from "./gallery-3.js";
+const makeDefaultImage = (i) => ({
+  src: getPlaceholderImageUrl("1200x800", `Gallery Image ${i + 1}`),
+  alt: `Gallery image ${i + 1}`,
+  caption: ""
+});
+const conf = {
+  fields: {
+    heading: {
+      type: "text",
+      contentEditable: true
+    },
+    description: {
+      type: "textarea",
+      contentEditable: true
+    },
+    images: {
+      type: "array",
+      max: 9,
+      getItemSummary: (item, index = 0) => item.alt || `Image ${index + 1}`,
+      arrayFields: {
+        src: { type: "image", label: "图片" },
+        alt: { type: "text", label: "Alt Text" },
+        caption: { type: "text", label: "Caption" }
+      },
+      defaultItemProps: makeDefaultImage(0)
+    },
+    showCaptions: {
+      type: "radio",
+      options: [
+        { label: "显示", value: true },
+        { label: "隐藏", value: false }
+      ]
+    },
+    gap: {
+      type: "radio",
+      options: [
+        { label: "紧凑", value: "sm" },
+        { label: "默认", value: "md" },
+        { label: "宽松", value: "lg" }
+      ]
+    },
+    padding,
+    sectionStyle,
+    backgroundColor
+  },
+  defaultProps: {
+    heading: "Crafted with intention",
+    description: "A curated selection of moments that define our work and vision.",
+    images: Array.from({ length: 6 }, (_, i) => makeDefaultImage(i)),
+    showCaptions: true,
+    gap: "md",
+    padding: paddingDefaults
+  },
+  render: Gallery3
+};
+export {
+  conf
+};

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

@@ -12,5 +12,10 @@ export interface FullscreenHeroProps {
         variant: string;
     };
     buttons?: CompoundButtonProps[];
+    backgroundImage?: {
+        src: string;
+        alt?: string;
+    } | string;
+    overlay?: "none" | "dark" | "gradient";
 }
-export declare const FullscreenHero: ({ padding, sectionStyle, backgroundColor, heading, description, badge, buttons, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FullscreenHero: ({ padding, sectionStyle, backgroundColor, heading, description, badge, buttons, backgroundImage, overlay, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/fullscreen-hero-1/fullscreen-hero.js

@@ -1,6 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { CompoundContainer } from "../../../puck-base/container.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { CompoundContainer, SECTION_STYLE_VARS } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+const overlayStyles = {
+  dark: "bg-black/55",
+  gradient: "bg-gradient-to-t from-black/80 to-black/10"
+};
 const FullscreenHero = ({
   padding,
   sectionStyle = "dark",
@@ -8,25 +14,55 @@ const FullscreenHero = ({
   heading = "",
   description,
   badge,
-  buttons
-}) => /* @__PURE__ */ jsxs(
-  CompoundContainer,
-  {
-    padding,
-    sectionStyle,
-    backgroundColor,
-    className: "min-h-[100vh] flex flex-col justify-end",
-    children: [
-      badge && /* @__PURE__ */ jsx("span", { className: "bg-primary/10 text-primary mb-6 inline-block rounded-full px-3 py-1 text-xs font-medium", children: badge.label }),
-      /* @__PURE__ */ jsx("h1", { className: "font-serif text-5xl md:text-7xl lg:text-8xl font-medium leading-[0.95] mb-8 max-w-[800px] text-foreground", children: heading }),
-      /* @__PURE__ */ jsx("hr", { className: "w-full my-4 border-foreground/20" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mt-4", children: [
-        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed max-w-lg", children: description }),
-        buttons && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(CompoundButton, { ...btn }, i)) })
-      ] })
-    ]
+  buttons,
+  backgroundImage,
+  overlay = "dark"
+}) => {
+  const bgSrc = typeof backgroundImage === "string" ? backgroundImage : backgroundImage == null ? void 0 : backgroundImage.src;
+  const bgAlt = typeof backgroundImage === "string" ? "" : (backgroundImage == null ? void 0 : backgroundImage.alt) ?? "";
+  if (!bgSrc) {
+    return /* @__PURE__ */ jsx(
+      CompoundContainer,
+      {
+        padding,
+        sectionStyle,
+        backgroundColor,
+        className: "min-h-[100vh] flex flex-col justify-end",
+        children: /* @__PURE__ */ jsx(Content, { badge, heading, description, buttons })
+      }
+    );
   }
-);
+  const { top = "large", bottom = "large" } = padding ?? {};
+  const styleVars = sectionStyle && sectionStyle !== "default" && sectionStyle !== "custom" ? SECTION_STYLE_VARS[sectionStyle] : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative w-full min-h-[100vh] flex flex-col justify-end overflow-hidden bg-background text-foreground",
+        { "pt-20 lg:pt-40": top === "large", "pb-20 lg:pb-40": bottom === "large" },
+        { "pt-15 lg:pt-30": top === "medium", "pb-15 lg:pb-30": bottom === "medium" },
+        { "pt-10 lg:pt-20": top === "small", "pb-10 lg:pb-20": bottom === "small" }
+      ),
+      style: { ...styleVars, ...backgroundColor ? { backgroundColor } : {} },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(CompoundImage, { src: bgSrc, alt: bgAlt, className: "h-full w-full object-cover" }) }),
+        overlay !== "none" && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0", overlayStyles[overlay] ?? overlayStyles.dark) }),
+        /* @__PURE__ */ jsx("div", { className: "container mx-auto relative z-50", children: /* @__PURE__ */ jsx(Content, { badge, heading, description, buttons }) })
+      ]
+    }
+  );
+};
+function Content({ badge, heading, description, buttons }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    badge && /* @__PURE__ */ jsx("span", { className: "bg-primary/10 text-primary mb-6 inline-block rounded-full px-3 py-1 text-xs font-medium", children: badge.label }),
+    /* @__PURE__ */ jsx("h1", { className: "font-serif text-5xl md:text-7xl lg:text-8xl font-medium leading-[0.95] mb-8 max-w-[800px] text-foreground", children: heading }),
+    /* @__PURE__ */ jsx("hr", { className: "w-full my-4 border-foreground/20" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mt-4", children: [
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed max-w-lg", children: description }),
+      buttons && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(CompoundButton, { ...btn }, i)) })
+    ] })
+  ] });
+}
 export {
   FullscreenHero
 };

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

@@ -1,4 +1,4 @@
-import { paddingDefaults, padding, backgroundColor, sectionStyle, contentFields } from "../../../puck-base/core/fields.js";
+import { paddingDefaults, padding, backgroundColor, sectionStyle, backgroundImage, contentFields } from "../../../puck-base/core/fields.js";
 import { FullscreenHero } from "./fullscreen-hero.js";
 const conf = {
   fields: {
@@ -12,6 +12,16 @@ const conf = {
       contentEditable: true
     },
     buttons: contentFields.buttons,
+    backgroundImage,
+    overlay: {
+      type: "select",
+      label: "Overlay",
+      options: [
+        { label: "None", value: "none" },
+        { label: "Dark", value: "dark" },
+        { label: "Gradient", value: "gradient" }
+      ]
+    },
     sectionStyle,
     backgroundColor,
     padding
@@ -20,6 +30,7 @@ const conf = {
     heading: "Your bold headline here.",
     description: "A compelling description that supports your headline and encourages visitors to take action.",
     sectionStyle: "dark",
+    overlay: "dark",
     buttons: [
       {
         label: "Get Started",

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

@@ -1,5 +1,5 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
-import { type CompoundContentProps } from "@/components/puck-base/content";
+import { CompoundContentProps } from "@/components/puck-base/content";
 export interface GradientHeroProps extends CompoundContentProps {
     padding?: CompoundContainerProps["padding"];
     gradientFrom?: string;

package/dist/components/puck-block/hero-sections/gradient-hero-1/gradient-hero.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
 import { GradientText } from "../../../puck-base/gradient-text.js";
 const GradientHero = ({
   padding,
@@ -7,8 +8,8 @@ const GradientHero = ({
   heading = "",
   description,
   buttons,
-  gradientFrom = "oklch(0.7 0.25 260)",
-  gradientTo = "oklch(0.7 0.25 330)"
+  gradientFrom = "var(--primary)",
+  gradientTo = "var(--chart-2)"
 }) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle: "dark", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl text-center", children: [
   badge && /* @__PURE__ */ jsx("span", { className: "bg-primary/10 text-primary mb-6 inline-block rounded-full px-3 py-1 text-xs font-medium", children: badge.label }),
   /* @__PURE__ */ jsx(
@@ -23,11 +24,13 @@ const GradientHero = ({
   ),
   description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto mb-8 max-w-2xl text-lg md:text-xl", children: description }),
   buttons && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-4", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(
-    "a",
+    CompoundButton,
     {
-      href: btn.url || "#",
-      className: "bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-lg px-6 py-3 font-medium transition-opacity hover:opacity-90",
-      children: btn.label
+      label: btn.label,
+      url: btn.url,
+      variant: btn.variant,
+      size: btn.size,
+      icon: btn.icon
     },
     i
   )) })

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

@@ -6,12 +6,12 @@ const conf = {
     gradientFrom: {
       type: "text",
       label: "Gradient Start",
-      ai: { instructions: "Use oklch format, e.g. 'oklch(0.7 0.25 260)'" }
+      ai: { instructions: "Use a CSS variable from the template theme, e.g. 'var(--primary)', 'var(--chart-1)'. Also accepts oklch format." }
     },
     gradientTo: {
       type: "text",
       label: "Gradient End",
-      ai: { instructions: "Use oklch format, e.g. 'oklch(0.7 0.25 330)'" }
+      ai: { instructions: "Use a CSS variable from the template theme, e.g. 'var(--chart-2)', 'var(--accent)'. Also accepts oklch format." }
     },
     padding
   },
@@ -22,8 +22,8 @@ const conf = {
     buttons: [
       { label: "Get Started Free", icon: "move-right", variant: "default" }
     ],
-    gradientFrom: "oklch(0.7 0.25 260)",
-    gradientTo: "oklch(0.7 0.25 330)",
+    gradientFrom: "var(--primary)",
+    gradientTo: "var(--chart-2)",
     padding: paddingDefaults
   },
   render: GradientHero

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

@@ -9,7 +9,10 @@ export interface ImageHeroProps {
     description?: string;
     badge?: CompoundBadgeProps;
     buttons?: CompoundButtonProps[];
-    backgroundImage?: string;
+    backgroundImage?: {
+        src: string;
+        alt?: string;
+    } | string;
     overlay?: "none" | "dark" | "gradient";
     align?: "left" | "center";
     minHeight?: "medium" | "large" | "full";

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

@@ -2,10 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundBadge } from "../../../puck-base/badge.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 const overlayStyles = {
-  dark: "bg-foreground/60",
-  gradient: "bg-gradient-to-t from-foreground/80 to-foreground/20"
+  dark: "bg-black/55",
+  gradient: "bg-gradient-to-t from-black/80 to-black/20"
 };
 const minHeightStyles = {
   medium: "min-h-[400px] md:min-h-[500px]",
@@ -24,69 +25,66 @@ const ImageHero = ({
   overlay = "dark",
   align = "center",
   minHeight = "large"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: cn(
-      "relative flex items-center overflow-hidden rounded-2xl",
-      minHeightStyles[minHeight] ?? minHeightStyles.large
-    ),
-    children: [
-      backgroundImage && /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: backgroundImage,
-          alt: "",
-          className: "absolute inset-0 h-full w-full object-cover"
-        }
+}) => {
+  const bgSrc = typeof backgroundImage === "string" ? backgroundImage : backgroundImage == null ? void 0 : backgroundImage.src;
+  const bgAlt = typeof backgroundImage === "string" ? "" : (backgroundImage == null ? void 0 : backgroundImage.alt) ?? "";
+  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex items-center overflow-hidden rounded-2xl",
+        minHeightStyles[minHeight] ?? minHeightStyles.large
       ),
-      overlay !== "none" && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "absolute inset-0",
-            overlayStyles[overlay] ?? overlayStyles.dark
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "relative z-10 flex w-full flex-col gap-6 px-8 py-16 md:px-16",
-            align === "center" && "items-center text-center",
-            align === "left" && "items-start text-left"
-          ),
-          children: [
-            badge && /* @__PURE__ */ jsx(
-              CompoundBadge,
-              {
-                label: badge.label,
-                variant: badge.variant,
-                url: badge.url
-              }
+      children: [
+        bgSrc && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(CompoundImage, { src: bgSrc, alt: bgAlt, className: "h-full w-full object-cover" }) }),
+        overlay !== "none" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0",
+              overlayStyles[overlay] ?? overlayStyles.dark
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-50 flex w-full flex-col gap-6 px-8 py-16 md:px-16",
+              align === "center" && "items-center text-center",
+              align === "left" && "items-start text-left"
             ),
-            heading && /* @__PURE__ */ jsx("h1", { className: "text-background max-w-3xl text-4xl font-bold tracking-tight md:text-6xl lg:text-7xl", children: heading }),
-            description && /* @__PURE__ */ jsx("p", { className: "text-background/80 max-w-2xl text-lg md:text-xl", children: description }),
-            Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: buttons.map(
-              (button, index) => button.label ? /* @__PURE__ */ jsx(
-                CompoundButton,
+            children: [
+              badge && /* @__PURE__ */ jsx(
+                CompoundBadge,
                 {
-                  label: button.label,
-                  url: button.url,
-                  variant: button.variant,
-                  size: button.size,
-                  icon: button.icon
-                },
-                index
-              ) : null
-            ) })
-          ]
-        }
-      )
-    ]
-  }
-) });
+                  label: badge.label,
+                  variant: badge.variant,
+                  url: badge.url
+                }
+              ),
+              heading && /* @__PURE__ */ jsx("h1", { className: "text-white max-w-3xl text-4xl font-bold tracking-tight md:text-6xl lg:text-7xl", children: heading }),
+              description && /* @__PURE__ */ jsx("p", { className: "text-white/80 max-w-2xl text-lg md:text-xl", children: description }),
+              Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: buttons.map(
+                (button, index) => button.label ? /* @__PURE__ */ jsx(
+                  CompoundButton,
+                  {
+                    label: button.label,
+                    url: button.url,
+                    variant: button.variant,
+                    size: button.size,
+                    icon: button.icon
+                  },
+                  index
+                ) : null
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
 export {
   ImageHero
 };