dune-react 0.0.9 → 0.0.10

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, description, heading } from "../../../puck-base/core/fields.js";
+import { description, heading } from "../../../puck-base/core/fields.js";
 import { Gallery } from "./gallery.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultImage = {
   src: "https://dummyimage.com/800x600/f5f4f4/101010.png&text=Gallery+Image",
   alt: "Gallery image",
@@ -20,47 +21,44 @@ const conf = {
       },
       defaultItemProps: defaultImage
     },
-    columns: {
-      type: "select",
-      options: [
-        { label: "2 Columns", value: 2 },
-        { label: "3 Columns", value: 3 },
-        { label: "4 Columns", value: 4 }
-      ]
-    },
-    gap: {
-      type: "select",
-      label: "Gap Size",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" }
-      ]
-    },
-    aspectRatio: {
-      type: "select",
-      label: "Aspect Ratio",
-      options: [
-        { label: "Square", value: "square" },
-        { label: "Landscape (16:9)", value: "landscape" },
-        { label: "Auto (original)", value: "auto" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      columns: {
+        type: "select",
+        label: "Columns",
+        options: [
+          { label: "2 Columns", value: 2 },
+          { label: "3 Columns", value: 3 },
+          { label: "4 Columns", value: 4 }
+        ]
+      },
+      gap: {
+        type: "select",
+        label: "Gap Size",
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
+        ]
+      },
+      aspectRatio: {
+        type: "select",
+        label: "Aspect Ratio",
+        options: [
+          { label: "Square", value: "square" },
+          { label: "Landscape (16:9)", value: "landscape" },
+          { label: "Auto (original)", value: "auto" }
+        ]
+      }
+    })
   },
   defaultProps: {
     heading: "Our Gallery",
     description: "A showcase of our finest work and moments.",
-    columns: 3,
-    gap: "md",
-    aspectRatio: "auto",
     images: Array.from({ length: 6 }).map((_, i) => ({
       ...defaultImage,
       alt: `Gallery image ${i + 1}`
     })),
-    padding: paddingDefaults
+    styles: createStylesDefaults({ columns: 3, gap: "md", aspectRatio: "auto" })
   },
   render: Gallery
 };

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

@@ -4,11 +4,13 @@ export interface Gallery2Image {
     alt?: string;
 }
 export interface Gallery2Props {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     images?: Gallery2Image[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Gallery2: ({ padding, sectionStyle, backgroundColor, heading, description, images, }: Gallery2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Gallery2: ({ heading, description, images, styles, }: Gallery2Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,12 +6,10 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const Gallery2 = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  images = []
+  images = [],
+  styles
 }) => {
   const [emblaRef, emblaApi] = useEmblaCarousel({ align: "start", loop: false });
   const [canScrollPrev, setCanScrollPrev] = useState(false);
@@ -34,9 +32,9 @@ const Gallery2 = ({
   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: "flex flex-col gap-4 lg:gap-8", children: [
         (heading || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between lg:gap-8", children: [
           heading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground lg:text-4xl", children: heading }) }),

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

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Gallery2 } from "./gallery-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultImage = {
   src: "https://dummyimage.com/1400x700/f5f4f4/101010.png&text=Gallery+Image",
   alt: "Gallery image"
@@ -24,9 +24,7 @@ const conf = {
       },
       defaultItemProps: defaultImage
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Real transformations from real training",
@@ -35,7 +33,7 @@ const conf = {
       ...defaultImage,
       alt: `Gallery image ${i + 1}`
     })),
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Gallery2
 };

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

@@ -5,13 +5,15 @@ export interface Gallery3Image {
     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";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        gap?: "sm" | "md" | "lg";
+    };
 }
-export declare const Gallery3: ({ padding, sectionStyle, backgroundColor, heading, description, images, showCaptions, gap, }: Gallery3Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Gallery3: ({ heading, description, images, showCaptions, styles, }: Gallery3Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -37,23 +37,21 @@ function ImageCard({
   );
 }
 const Gallery3 = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   images = [],
   showCaptions = true,
-  gap = "md"
+  styles
 }) => {
+  const gap = (styles == null ? void 0 : styles.gap) ?? "md";
   const gc = gapClasses[gap] ?? gapClasses.md;
   const [img1, img2, img3, ...rest] = images;
   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: "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 }) }),

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { Gallery3 } from "./gallery-3.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const makeDefaultImage = (i) => ({
   src: getPlaceholderImageUrl("1200x800", `Gallery Image ${i + 1}`),
   alt: `Gallery image ${i + 1}`,
@@ -33,25 +34,23 @@ const conf = {
         { label: "隐藏", value: false }
       ]
     },
-    gap: {
-      type: "radio",
-      options: [
-        { label: "紧凑", value: "sm" },
-        { label: "默认", value: "md" },
-        { label: "宽松", value: "lg" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      gap: {
+        type: "radio",
+        options: [
+          { label: "紧凑", value: "sm" },
+          { label: "默认", value: "md" },
+          { label: "宽松", value: "lg" }
+        ]
+      }
+    })
   },
   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
+    styles: createStylesDefaults({ gap: "md" })
   },
   render: Gallery3
 };

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

@@ -0,0 +1,26 @@
+type GalleryVariant = "gallery-1" | "gallery-2" | "gallery-3";
+type GalleryPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type GallerySectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type GalleryImage = {
+    src: string;
+    alt?: string;
+    caption?: string;
+};
+type GallerySectionProps = {
+    variant?: GalleryVariant;
+    heading?: string;
+    description?: string;
+    images?: GalleryImage[];
+    showCaptions?: boolean;
+    styles?: {
+        padding?: GalleryPadding;
+        sectionStyle?: GallerySectionStyle;
+        backgroundColor?: string;
+        columns?: 2 | 3 | 4;
+        gap?: "sm" | "md" | "lg";
+        aspectRatio?: "square" | "landscape" | "auto";
+    };
+};

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

@@ -24,10 +24,12 @@ type NavigationItem = NavigationLink & {
 };
 export interface HeaderProps extends ILayoutProps {
     companyName: string;
-    primaryNavigation?: NavigationItem[];
-    secondaryNavigation?: SecondaryNavigationItem[];
-    sectionStyle?: "default" | "dark" | "muted" | "inverted";
-    backgroundColor?: string;
+    navigation?: NavigationItem[];
+    actions?: SecondaryNavigationItem[];
+    styles?: {
+        sectionStyle?: "default" | "dark" | "muted" | "inverted";
+        backgroundColor?: string;
+    };
 }
-export declare const Header: ({ companyName, primaryNavigation, secondaryNavigation, sectionStyle, backgroundColor, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: ({ companyName, navigation, actions, styles, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -29,24 +29,23 @@ const HEADER_SECTION_VARS = {
 };
 const Header = ({
   companyName,
-  primaryNavigation,
-  secondaryNavigation,
-  sectionStyle,
-  backgroundColor
+  navigation,
+  actions,
+  styles
 }) => {
   const [isOpen, setOpen] = useState(false);
-  const sectionVars = sectionStyle && sectionStyle !== "default" ? HEADER_SECTION_VARS[sectionStyle] ?? {} : {};
+  const sectionVars = (styles == null ? void 0 : styles.sectionStyle) && styles.sectionStyle !== "default" ? HEADER_SECTION_VARS[styles.sectionStyle] ?? {} : {};
   return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
     "header",
     {
       className: cn("bg-background text-foreground sticky top-0 left-0 z-40 w-full"),
       style: {
-        ...backgroundColor ? { backgroundColor } : {},
+        ...(styles == null ? void 0 : styles.backgroundColor) ? { backgroundColor: styles.backgroundColor } : {},
         ...sectionVars
       },
       children: /* @__PURE__ */ jsxs("div", { className: "relative container mx-auto flex min-h-20 flex-row items-center gap-4 lg:grid lg:grid-cols-[auto_1fr_auto]", children: [
         /* @__PURE__ */ jsx("div", { className: "flex lg:justify-start", children: /* @__PURE__ */ jsx("p", { className: "font-semibold whitespace-nowrap", children: companyName }) }),
-        /* @__PURE__ */ jsx("div", { className: "hidden flex-row items-center justify-center gap-4 lg:flex", children: Array.isArray(primaryNavigation) && primaryNavigation.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "flex flex-row justify-center gap-4", children: primaryNavigation.map((item, index) => {
+        /* @__PURE__ */ jsx("div", { className: "hidden flex-row items-center justify-center gap-4 lg:flex", children: Array.isArray(navigation) && navigation.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "flex flex-row justify-center gap-4", children: navigation.map((item, index) => {
           var _a, _b;
           return /* @__PURE__ */ jsx(NavigationMenuItem, { children: item.url ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(
             CompoundButton,
@@ -98,7 +97,7 @@ const Header = ({
             ] }) })
           ] }) }, index);
         }) }) }) : null }),
-        /* @__PURE__ */ jsx("div", { className: "flex w-full justify-end gap-4", children: secondaryNavigation == null ? void 0 : secondaryNavigation.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-full justify-end gap-4", children: actions == null ? void 0 : actions.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(
             CompoundButton,
             {
@@ -125,7 +124,7 @@ const Header = ({
               children: isOpen ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
             }
           ),
-          isOpen && /* @__PURE__ */ jsx("div", { className: "bg-background absolute top-20 right-0 container flex w-full flex-col gap-8 border-t py-4 shadow-lg", children: primaryNavigation == null ? void 0 : primaryNavigation.map((item, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          isOpen && /* @__PURE__ */ jsx("div", { className: "bg-background absolute top-20 right-0 container flex w-full flex-col gap-8 border-t py-4 shadow-lg", children: navigation == null ? void 0 : navigation.map((item, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
             item.url ? /* @__PURE__ */ jsxs(
               "a",
               {

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

@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@puckeditor/core";
 import { HeaderProps } from "./header";
 export type { HeaderProps };
-export declare const defaultPrimaryNavigationItems: ({
+export declare const defaultNavigationItems: ({
     label: string;
     url: string;
     description: string;

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

@@ -1,6 +1,8 @@
+"use client";
 import { Header } from "./header.js";
-import { backgroundColor, sectionStyle, actionDefaults, button, action } from "../../../puck-base/core/fields.js";
-const defaultPrimaryNavigationItems = [
+import { actionDefaults, button, action } from "../../../puck-base/core/fields.js";
+import { createStylesField } from "../../../puck-base/core/styles.js";
+const defaultNavigationItems = [
   {
     label: "Home",
     url: "/",
@@ -73,7 +75,7 @@ const defaultPrimaryNavigationItems = [
     ]
   }
 ];
-const defaultSecondaryNavigationItems = [
+const defaultActionItems = [
   {
     label: "Book a demo",
     url: "#",
@@ -105,8 +107,8 @@ const conf = {
       label: "company name",
       type: "text"
     },
-    primaryNavigation: {
-      label: "primary navigation",
+    navigation: {
+      label: "navigation",
       type: "array",
       max: 4,
       getItemSummary: (item, index = 0) => item.label || `Link ${index + 1}`,
@@ -142,8 +144,8 @@ const conf = {
         items: []
       }
     },
-    secondaryNavigation: {
-      label: "secondary navigation",
+    actions: {
+      label: "actions",
       type: "array",
       max: 4,
       getItemSummary: (item, index = 0) => item.label || `Link ${index}`,
@@ -179,13 +181,12 @@ const conf = {
         isHiddenOnMobile: "true"
       }
     },
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     companyName: "TWBlocks",
-    primaryNavigation: defaultPrimaryNavigationItems,
-    secondaryNavigation: defaultSecondaryNavigationItems,
+    navigation: defaultNavigationItems,
+    actions: defaultActionItems,
     __metadata: {
       type: "layout"
     }
@@ -194,5 +195,5 @@ const conf = {
 };
 export {
   conf as default,
-  defaultPrimaryNavigationItems
+  defaultNavigationItems
 };

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

@@ -0,0 +1,41 @@
+type HeaderVariant = "header-1" | "sticky-nav-1";
+type HeaderPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type HeaderSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type HeaderButton = {
+    label: string;
+    url?: string;
+    action?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+    divider?: boolean;
+    isHiddenOnMobile?: boolean;
+};
+type HeaderNavigationItem = {
+    label: string;
+    url?: string;
+    description?: string;
+    cta?: HeaderButton;
+    items?: Array<{
+        label: string;
+        url: string;
+    }>;
+};
+type HeaderSectionProps = {
+    variant?: HeaderVariant;
+    __metadata?: {
+        type: "layout";
+    };
+    companyName?: string;
+    logo?: string;
+    navigation?: HeaderNavigationItem[];
+    actions?: HeaderButton[];
+    styles?: {
+        padding?: HeaderPadding;
+        sectionStyle?: HeaderSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/header-sections/sticky-nav-1/index.js

@@ -1,26 +1,26 @@
-import { backgroundColor, sectionStyle } from "../../../puck-base/core/fields.js";
 import { StickyNav } from "./sticky-nav.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     logo: { type: "text", contentEditable: true },
-    links: {
+    navigation: {
       type: "array",
       max: 8,
       getItemSummary: (item, i = 0) => item.label || `Link ${i + 1}`,
-      arrayFields: { label: { type: "text" }, href: { type: "text" } },
-      defaultItemProps: { label: "Link", href: "#" }
+      arrayFields: { label: { type: "text" }, url: { type: "text" } },
+      defaultItemProps: { label: "Link", url: "#" }
     },
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     logo: "Brand",
-    links: [
-      { label: "Features", href: "#features" },
-      { label: "Pricing", href: "#pricing" },
-      { label: "About", href: "#about" },
-      { label: "Contact", href: "#contact" }
-    ]
+    navigation: [
+      { label: "Features", url: "#features" },
+      { label: "Pricing", url: "#pricing" },
+      { label: "About", url: "#about" },
+      { label: "Contact", url: "#contact" }
+    ],
+    styles: createStylesDefaults()
   },
   render: StickyNav
 };

package/dist/components/puck-block/header-sections/sticky-nav-1/sticky-nav.d.ts

@@ -1,12 +1,14 @@
 import { type CompoundContainerProps } from "@/components/puck-base/container";
 export interface StickyNavProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    links?: Array<{
+    navigation?: Array<{
         label: string;
-        href: string;
+        url: string;
     }>;
     logo?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const StickyNav: ({ links, logo, sectionStyle, backgroundColor }: StickyNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StickyNav: ({ navigation, logo, styles }: StickyNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/header-sections/sticky-nav-1/sticky-nav.js

@@ -19,22 +19,22 @@ const NAV_SECTION_VARS = {
     "--border": "oklch(0.87 0 0)"
   }
 };
-const StickyNav = ({ links = [], logo, sectionStyle, backgroundColor }) => {
-  const sectionVars = sectionStyle && sectionStyle !== "default" ? NAV_SECTION_VARS[sectionStyle] ?? {} : {};
+const StickyNav = ({ navigation = [], logo, styles }) => {
+  const sectionVars = (styles == null ? void 0 : styles.sectionStyle) && styles.sectionStyle !== "default" ? NAV_SECTION_VARS[styles.sectionStyle] ?? {} : {};
   return /* @__PURE__ */ jsx(
     "nav",
     {
       className: "bg-background/80 border-border sticky top-0 z-50 border-b backdrop-blur-md",
       style: {
-        ...backgroundColor ? { backgroundColor } : {},
+        ...(styles == null ? void 0 : styles.backgroundColor) ? { backgroundColor: styles.backgroundColor } : {},
         ...sectionVars
       },
       children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8", children: [
         /* @__PURE__ */ jsx("span", { className: "text-foreground text-lg font-bold", children: logo || "Brand" }),
-        /* @__PURE__ */ jsx("div", { className: "hidden gap-6 md:flex", children: links.map((link, i) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "hidden gap-6 md:flex", children: navigation.map((link, i) => /* @__PURE__ */ jsx(
           "a",
           {
-            href: link.href || "#",
+            href: link.url || "#",
             className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
             children: link.label
           },

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

@@ -1,9 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface FullscreenHeroProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     badge?: {
@@ -16,6 +13,11 @@ export interface FullscreenHeroProps {
         src: string;
         alt?: string;
     } | string;
-    overlay?: "none" | "dark" | "gradient";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        overlay?: "none" | "dark" | "gradient";
+    };
 }
-export declare const FullscreenHero: ({ padding, sectionStyle, backgroundColor, heading, description, badge, buttons, backgroundImage, overlay, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FullscreenHero: ({ heading, description, badge, buttons, backgroundImage, styles, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -8,16 +8,17 @@ const overlayStyles = {
   gradient: "bg-gradient-to-t from-black/80 to-black/10"
 };
 const FullscreenHero = ({
-  padding,
-  sectionStyle = "dark",
-  backgroundColor,
   heading = "",
   description,
   badge,
   buttons,
   backgroundImage,
-  overlay = "dark"
+  styles
 }) => {
+  const sectionStyle = (styles == null ? void 0 : styles.sectionStyle) ?? "dark";
+  const overlay = (styles == null ? void 0 : styles.overlay) ?? "dark";
+  const backgroundColor = styles == null ? void 0 : styles.backgroundColor;
+  const padding = styles == null ? void 0 : styles.padding;
   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) {