dune-react 0.0.8 → 0.0.10

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, padding, backgroundColor, sectionStyle, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { FullscreenHero } from "./fullscreen-hero.js";
+import { backgroundImage, createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     badge: contentFields.badge,
@@ -12,14 +13,22 @@ const conf = {
       contentEditable: true
     },
     buttons: contentFields.buttons,
-    sectionStyle,
-    backgroundColor,
-    padding
+    backgroundImage,
+    styles: createStylesField({
+      overlay: {
+        type: "select",
+        label: "Overlay",
+        options: [
+          { label: "None", value: "none" },
+          { label: "Dark", value: "dark" },
+          { label: "Gradient", value: "gradient" }
+        ]
+      }
+    })
   },
   defaultProps: {
     heading: "Your bold headline here.",
     description: "A compelling description that supports your headline and encourages visitors to take action.",
-    sectionStyle: "dark",
     buttons: [
       {
         label: "Get Started",
@@ -29,7 +38,10 @@ const conf = {
         icon: "none"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults({
+      sectionStyle: "dark",
+      overlay: "dark"
+    })
   },
   render: FullscreenHero
 };

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

@@ -1,8 +1,12 @@
 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;
-    gradientTo?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        gradientFrom?: string;
+        gradientTo?: string;
+    };
 }
-export declare const GradientHero: ({ padding, badge, heading, description, buttons, gradientFrom, gradientTo, }: GradientHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GradientHero: ({ badge, heading, description, buttons, styles, }: GradientHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,37 +1,50 @@
 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,
   badge,
   heading = "",
   description,
   buttons,
-  gradientFrom = "oklch(0.7 0.25 260)",
-  gradientTo = "oklch(0.7 0.25 330)"
-}) => /* @__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(
-    GradientText,
+  styles
+}) => {
+  const gradientFrom = (styles == null ? void 0 : styles.gradientFrom) ?? "var(--primary)";
+  const gradientTo = (styles == null ? void 0 : styles.gradientTo) ?? "var(--chart-2)";
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      text: heading,
-      as: "h1",
-      gradientFrom,
-      gradientTo,
-      className: "mb-6"
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: (styles == null ? void 0 : styles.sectionStyle) ?? "dark",
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      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(
+          GradientText,
+          {
+            text: heading,
+            as: "h1",
+            gradientFrom,
+            gradientTo,
+            className: "mb-6"
+          }
+        ),
+        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(
+          CompoundButton,
+          {
+            label: btn.label,
+            url: btn.url,
+            variant: btn.variant,
+            size: btn.size,
+            icon: btn.icon
+          },
+          i
+        )) })
+      ] })
     }
-  ),
-  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",
-    {
-      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
-    },
-    i
-  )) })
-] }) });
+  );
+};
 export {
   GradientHero
 };

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

@@ -1,19 +1,21 @@
-import { paddingDefaults, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { GradientHero } from "./gradient-hero.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
-    gradientFrom: {
-      type: "text",
-      label: "Gradient Start",
-      ai: { instructions: "Use oklch format, e.g. 'oklch(0.7 0.25 260)'" }
-    },
-    gradientTo: {
-      type: "text",
-      label: "Gradient End",
-      ai: { instructions: "Use oklch format, e.g. 'oklch(0.7 0.25 330)'" }
-    },
-    padding
+    styles: createStylesField({
+      gradientFrom: {
+        type: "text",
+        label: "Gradient Start",
+        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 a CSS variable from the template theme, e.g. 'var(--chart-2)', 'var(--accent)'. Also accepts oklch format." }
+      }
+    })
   },
   defaultProps: {
     heading: "Build something amazing",
@@ -22,9 +24,10 @@ 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)",
-    padding: paddingDefaults
+    styles: createStylesDefaults({
+      gradientFrom: "var(--primary)",
+      gradientTo: "var(--chart-2)"
+    })
   },
   render: GradientHero
 };

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

@@ -8,9 +8,6 @@ export interface SidebarItem {
     url?: string;
 }
 export interface GridHeroProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     badge?: CompoundBadgeProps;
     heading: string;
     description?: string;
@@ -19,7 +16,11 @@ export interface GridHeroProps {
     leftSidebar?: SidebarItem[];
     rightSidebar?: SidebarItem[];
     rightSidebarTitle?: string;
-    rightSidebarItems?: SidebarItem[];
-    showGridLines?: boolean;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        showGridLines?: boolean;
+    };
 }
-export declare const GridHero: ({ padding, sectionStyle, backgroundColor, badge, heading, description, buttons, leftSidebarTitle, leftSidebar, rightSidebar, rightSidebarTitle, rightSidebarItems, showGridLines, }: GridHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GridHero: ({ badge, heading, description, buttons, leftSidebarTitle, leftSidebar, rightSidebar, rightSidebarTitle, styles, }: GridHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,9 +4,6 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundBadge } from "../../../puck-base/badge.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 const GridHero = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   badge,
   heading,
   description,
@@ -15,17 +12,17 @@ const GridHero = ({
   leftSidebar = [],
   rightSidebar = [],
   rightSidebarTitle,
-  rightSidebarItems = [],
-  showGridLines = true
+  styles
 }) => {
+  const showGridLines = (styles == null ? void 0 : styles.showGridLines) ?? true;
   const hasLeftSidebar = leftSidebar.length > 0 || !!leftSidebarTitle;
-  const hasRightSidebar = rightSidebar.length > 0 || rightSidebarItems.length > 0;
+  const hasRightSidebar = rightSidebar.length > 0;
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         showGridLines && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0", "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-full max-w-7xl justify-between px-4", children: [...Array(7)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-full w-px bg-gray-200/60" }, i)) }) }),
         /* @__PURE__ */ jsxs(
@@ -103,7 +100,7 @@ const GridHero = ({
                 ] }) }, i)) }),
                 rightSidebarTitle && /* @__PURE__ */ jsxs("div", { className: "mt-6 border-t border-dotted border-gray-400 pt-4", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] font-medium tracking-wider", children: rightSidebarTitle }),
-                  rightSidebarItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-col gap-1", children: rightSidebarItems.map((item, i) => /* @__PURE__ */ jsxs(
+                  rightSidebar.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-col gap-1", children: rightSidebar.map((item, i) => /* @__PURE__ */ jsxs(
                     "div",
                     {
                       className: "flex items-baseline justify-between gap-2",

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

@@ -1,17 +1,50 @@
-import { paddingDefaults, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { GridHero } from "./grid-hero.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
-    showGridLines: {
-      type: "radio",
-      label: "Show Grid Lines",
-      options: [
-        { label: "Yes", value: true },
-        { label: "No", value: false }
-      ]
+    leftSidebarTitle: { type: "text", label: "Left Sidebar Title" },
+    leftSidebar: {
+      type: "array",
+      max: 5,
+      getItemSummary: (item, i = 0) => item.label || `Item ${i + 1}`,
+      arrayFields: {
+        label: { type: "text" },
+        value: { type: "text" },
+        description: { type: "text" },
+        url: { type: "text" }
+      },
+      defaultItemProps: {
+        label: "Label",
+        value: "Value"
+      }
     },
-    padding
+    rightSidebarTitle: { type: "text", label: "Right Sidebar Title" },
+    rightSidebar: {
+      type: "array",
+      max: 5,
+      getItemSummary: (item, i = 0) => item.label || `Item ${i + 1}`,
+      arrayFields: {
+        label: { type: "text" },
+        value: { type: "text" },
+        url: { type: "text" }
+      },
+      defaultItemProps: {
+        label: "Link",
+        url: "#"
+      }
+    },
+    styles: createStylesField({
+      showGridLines: {
+        type: "radio",
+        label: "Show Grid Lines",
+        options: [
+          { label: "Yes", value: true },
+          { label: "No", value: false }
+        ]
+      }
+    })
   },
   defaultProps: {
     heading: "Scale without lock-in. Build without limits.",
@@ -29,8 +62,7 @@ const conf = {
       { label: "Open Source", value: "22.6k", url: "#" },
       { label: "Docs", url: "#" }
     ],
-    showGridLines: true,
-    padding: paddingDefaults
+    styles: createStylesDefaults({ showGridLines: true })
   },
   render: GridHero
 };

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

@@ -3,9 +3,6 @@ import { CompoundBadgeProps } from "@/components/puck-base/badge";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 import { CompoundImageProps } from "@/components/puck-base/image";
 export interface HeroProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     badge?: CompoundBadgeProps;
     heading: string;
     adjectives?: {
@@ -17,5 +14,10 @@ export interface HeroProps {
     imageLayout: "1x1" | "1x1-9x16-1x1" | "16x9";
     align?: "left" | "center";
     displaySize?: "default" | "display";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Hero: ({ padding, sectionStyle, backgroundColor, badge, heading, adjectives, description, buttons, images, imageLayout, align, displaySize, }: HeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Hero: ({ badge, heading, adjectives, description, buttons, images, imageLayout, align, displaySize, styles, }: HeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,9 +9,6 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { motion } from "framer-motion";
 const Hero = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   badge,
   heading,
   adjectives,
@@ -20,7 +17,8 @@ const Hero = ({
   images,
   imageLayout,
   align = "center",
-  displaySize = "default"
+  displaySize = "default",
+  styles
 }) => {
   const hasImages = Array.isArray(images) && images.length > 0;
   const isTwoColumnLayout = imageLayout === "1x1" || imageLayout === "1x1-9x16-1x1";
@@ -28,9 +26,9 @@ const Hero = ({
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs(
         "div",
         {

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

@@ -1,6 +1,7 @@
-import { paddingDefaults, image1x1Placeholder, image9x16Placeholder, padding, images, buttons, badge } from "../../../puck-base/core/fields.js";
+import { image1x1Placeholder, image9x16Placeholder, images, buttons, badge } from "../../../puck-base/core/fields.js";
 import { Hero } from "./hero.js";
 import { getRandomAdjective } from "../../../puck-base/core/utils.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     displaySize: {
@@ -27,7 +28,6 @@ const conf = {
     badge,
     buttons,
     imageLayout: {
-      // TODO: puck should format labels automatically so I don't have to define this
       label: "image layout",
       type: "select",
       options: [
@@ -40,7 +40,7 @@ const conf = {
       }
     },
     images: { ...images, max: 3 },
-    padding
+    styles: createStylesField()
   },
   defaultProps: {
     displaySize: "default",
@@ -66,7 +66,7 @@ const conf = {
     ],
     imageLayout: "1x1-9x16-1x1",
     images: [image1x1Placeholder, image9x16Placeholder, image1x1Placeholder],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Hero
 };

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

@@ -2,16 +2,22 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundBadgeProps } from "@/components/puck-base/badge";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface ImageHeroProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     badge?: CompoundBadgeProps;
     buttons?: CompoundButtonProps[];
-    backgroundImage?: string;
-    overlay?: "none" | "dark" | "gradient";
-    align?: "left" | "center";
-    minHeight?: "medium" | "large" | "full";
+    backgroundImage?: {
+        src: string;
+        alt?: string;
+    } | string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        backgroundImage?: string;
+        overlay?: "none" | "dark" | "gradient";
+        align?: "left" | "center";
+        minHeight?: "medium" | "large" | "full";
+    };
 }
-export declare const ImageHero: ({ padding, sectionStyle, backgroundColor, heading, description, badge, buttons, backgroundImage, overlay, align, minHeight, }: ImageHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageHero: ({ heading, description, badge, buttons, backgroundImage, styles, }: ImageHeroProps) => import("react/jsx-runtime").JSX.Element;

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]",
@@ -13,80 +14,83 @@ const minHeightStyles = {
   full: "min-h-screen"
 };
 const ImageHero = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading = "Your Story Starts Here",
   description,
   badge,
   buttons,
   backgroundImage,
-  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"
-        }
-      ),
-      overlay !== "none" && /* @__PURE__ */ jsx(
+  styles
+}) => {
+  const overlay = (styles == null ? void 0 : styles.overlay) ?? "dark";
+  const align = (styles == null ? void 0 : styles.align) ?? "center";
+  const minHeight = (styles == null ? void 0 : styles.minHeight) ?? "large";
+  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: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: /* @__PURE__ */ jsxs(
         "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"
+            "relative flex items-center overflow-hidden rounded-2xl",
+            minHeightStyles[minHeight] ?? minHeightStyles.large
           ),
           children: [
-            badge && /* @__PURE__ */ jsx(
-              CompoundBadge,
+            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",
               {
-                label: badge.label,
-                variant: badge.variant,
-                url: badge.url
+                className: cn(
+                  "absolute inset-0",
+                  overlayStyles[overlay] ?? overlayStyles.dark
+                )
               }
             ),
-            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,
-                {
-                  label: button.label,
-                  url: button.url,
-                  variant: button.variant,
-                  size: button.size,
-                  icon: button.icon
-                },
-                index
-              ) : null
-            ) })
+            /* @__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"
+                ),
+                children: [
+                  badge && /* @__PURE__ */ jsx(
+                    CompoundBadge,
+                    {
+                      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
 };