dune-react 0.0.9 → 0.0.10

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, padding, backgroundColor, sectionStyle, backgroundImage, 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,
@@ -13,24 +14,21 @@ const conf = {
     },
     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
+    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",
-    overlay: "dark",
     buttons: [
       {
         label: "Get Started",
@@ -40,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 { 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

@@ -3,38 +3,48 @@ 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 = "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(
-    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(
-    CompoundButton,
-    {
-      label: btn.label,
-      url: btn.url,
-      variant: btn.variant,
-      size: btn.size,
-      icon: btn.icon
-    },
-    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 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." }
-    },
-    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: "var(--primary)",
-    gradientTo: "var(--chart-2)",
-    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,9 +2,6 @@ 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;
@@ -13,8 +10,14 @@ export interface ImageHeroProps {
         src: string;
         alt?: string;
     } | string;
-    overlay?: "none" | "dark" | "gradient";
-    align?: "left" | "center";
-    minHeight?: "medium" | "large" | "full";
+    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

@@ -14,76 +14,82 @@ 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"
+  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, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      className: cn(
-        "relative flex items-center overflow-hidden rounded-2xl",
-        minHeightStyles[minHeight] ?? minHeightStyles.large
-      ),
-      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"
+      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(
+            "relative flex items-center overflow-hidden rounded-2xl",
+            minHeightStyles[minHeight] ?? minHeightStyles.large
+          ),
+          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
+                )
+              }
             ),
-            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
-              ) })
-            ]
-          }
-        )
-      ]
+            /* @__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