dune-react 0.0.9 → 0.0.10

package/dist/components/puck-block/showcase-sections/step-by-step-1/step-by-step.js

@@ -1,53 +1,50 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const StepByStep = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   layout = "horizontal",
-  steps = []
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-  (heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
-    heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
-  ] }),
-  layout === "vertical" ? (
-    // Vertical timeline-style
-    /* @__PURE__ */ jsxs("div", { className: "relative max-w-2xl mx-auto", children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 bottom-0 left-6 w-px" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-10", children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-8 pl-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold z-10", children: step.stepNumber || String(i + 1) }),
-        /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
-          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: step.description })
-        ] })
-      ] }, i)) })
-    ] })
-  ) : layout === "numbered" ? (
-    // Large number style
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-primary text-5xl font-black leading-none opacity-20 flex-shrink-0", children: step.stepNumber || String(i + 1).padStart(2, "0") }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-2", children: step.description })
-      ] })
-    ] }, i)) })
-  ) : (
-    // Horizontal (default) — cards in a row with connecting line
-    /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 md:grid-cols-3 gap-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden md:block bg-border absolute top-6 left-[calc(16.66%+1rem)] right-[calc(16.66%+1rem)] h-px" }),
-      steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-4 relative", children: [
-        /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold z-10 flex-shrink-0", children: step.stepNumber || String(i + 1) }),
+  steps = [],
+  styles
+}) => /* @__PURE__ */ jsxs(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: [
+      (heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
+        heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
+      ] }),
+      layout === "vertical" ? /* @__PURE__ */ jsxs("div", { className: "relative max-w-2xl mx-auto", children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 bottom-0 left-6 w-px" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-10", children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-8 pl-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold z-10", children: step.stepNumber || String(i + 1) }),
+          /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: step.description })
+          ] })
+        ] }, i)) })
+      ] }) : layout === "numbered" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-primary text-5xl font-black leading-none opacity-20 flex-shrink-0", children: step.stepNumber || String(i + 1).padStart(2, "0") }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
-          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: step.description })
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-2", children: step.description })
         ] })
-      ] }, i))
-    ] })
-  )
-] });
+      ] }, i)) }) : /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 md:grid-cols-3 gap-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden md:block bg-border absolute top-6 left-[calc(16.66%+1rem)] right-[calc(16.66%+1rem)] h-px" }),
+        steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-4 relative", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold z-10 flex-shrink-0", children: step.stepNumber || String(i + 1) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: step.description })
+          ] })
+        ] }, i))
+      ] })
+    ]
+  }
+);
 export {
   StepByStep
 };

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

@@ -0,0 +1,39 @@
+type TeamVariant = "team-grid-1" | "team-grid-2" | "team-profiles-1";
+type TeamPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type TeamSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type TeamButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type TeamImage = {
+    src: string;
+    alt?: string;
+};
+type TeamMember = {
+    name: string;
+    role: string;
+    image?: TeamImage;
+    description?: string;
+    instagramUrl?: string;
+    linkedinUrl?: string;
+};
+type TeamSectionProps = {
+    variant?: TeamVariant;
+    heading?: string;
+    description?: string;
+    buttons?: TeamButton[];
+    members?: TeamMember[];
+    columns?: 2 | 3 | 4;
+    layout?: "card" | "simple" | "round";
+    styles?: {
+        padding?: TeamPadding;
+        sectionStyle?: TeamSectionStyle;
+        backgroundColor?: string;
+    };
+};

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, image, description, heading } from "../../../puck-base/core/fields.js";
+import { image, description, heading } from "../../../puck-base/core/fields.js";
 import { TeamGrid } from "./team-grid.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultMember = {
   name: "Jane Smith",
   role: "CEO & Co-founder",
@@ -42,9 +43,7 @@ const conf = {
         { label: "Round Avatar", value: "round" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Meet Our Team",
@@ -57,7 +56,7 @@ const conf = {
       { ...defaultMember, name: "Sarah Williams", role: "Head of Design" },
       { ...defaultMember, name: "Michael Chen", role: "Lead Engineer" }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: TeamGrid
 };

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

@@ -9,13 +9,15 @@ export interface TeamMember {
     bio?: string;
 }
 export interface TeamGridProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     members?: TeamMember[];
     columns?: 2 | 3 | 4;
     layout?: "card" | "simple" | "round";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const TeamGrid: ({ padding, sectionStyle, backgroundColor, heading, description, members, columns, layout, }: TeamGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TeamGrid: ({ heading, description, members, columns, layout, styles, }: TeamGridProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -8,27 +8,33 @@ const columnClasses = {
   4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
 };
 const TeamGrid = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   members = [],
   columns = 3,
-  layout = "card"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-12", children: [
-  (heading || description) && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-    heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl text-lg", children: description })
-  ] }),
-  /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("grid gap-8", columnClasses[columns] ?? columnClasses[3]),
-      children: members.map((member, index) => /* @__PURE__ */ jsx(MemberCard, { member, layout }, index))
-    }
-  )
-] }) });
+  layout = "card",
+  styles
+}) => /* @__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: "flex flex-col gap-12", children: [
+      (heading || description) && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl text-lg", children: description })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("grid gap-8", columnClasses[columns] ?? columnClasses[3]),
+          children: members.map((member, index) => /* @__PURE__ */ jsx(MemberCard, { member, layout }, index))
+        }
+      )
+    ] })
+  }
+);
 const MemberCard = ({
   member,
   layout

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, image1x1Placeholder, backgroundColor, sectionStyle, padding, image, buttons } from "../../../puck-base/core/fields.js";
+import { image1x1Placeholder, image, buttons } from "../../../puck-base/core/fields.js";
 import { TeamGrid2 } from "./team-grid-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultMember = {
   name: "Jane Smith",
   role: "Founder & Head Trainer",
@@ -23,9 +24,7 @@ const conf = {
       },
       defaultItemProps: defaultMember
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Your personal\nfitness partner",
@@ -54,7 +53,7 @@ const conf = {
       { ...defaultMember, name: "Sarah Williams", role: "Strength Coach" },
       { ...defaultMember, name: "Michael Chen", role: "Nutrition Coach" }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: TeamGrid2
 };

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

@@ -10,12 +10,14 @@ export interface TeamMember2 {
     description?: string;
 }
 export interface TeamGrid2Props {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     buttons?: CompoundButtonProps[];
     members?: TeamMember2[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const TeamGrid2: ({ padding, sectionStyle, backgroundColor, heading, description, buttons, members, }: TeamGrid2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TeamGrid2: ({ heading, description, buttons, members, styles, }: TeamGrid2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/team-sections/team-grid-2/team-grid-2.js

@@ -3,19 +3,17 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const TeamGrid2 = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   buttons = [],
-  members = []
+  members = [],
+  styles
 }) => /* @__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 md:gap-16", children: [
       (heading || description || buttons.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8 lg:flex-row lg:justify-between", children: [
         heading && /* @__PURE__ */ jsx("div", { className: "w-full lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground max-w-xl text-4xl font-bold leading-tight tracking-tight md:text-5xl whitespace-pre-line", children: heading }) }),

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, image1x1Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { image1x1Placeholder, image } from "../../../puck-base/core/fields.js";
 import { TeamProfiles } from "./team-profiles.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultMember = {
   name: "Jane Smith",
   role: "CEO & Co-founder",
@@ -26,9 +27,7 @@ const conf = {
       },
       defaultItemProps: defaultMember
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Your Personal\ntraining partner",
@@ -45,7 +44,7 @@ const conf = {
         role: "Strength & Conditioning Coach"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: TeamProfiles
 };

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

@@ -11,11 +11,13 @@ export interface TeamMemberProfile {
     linkedinUrl?: string;
 }
 export interface TeamProfilesProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     members?: TeamMemberProfile[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const TeamProfiles: ({ padding, sectionStyle, backgroundColor, heading, description, members, }: TeamProfilesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TeamProfiles: ({ heading, description, members, styles, }: TeamProfilesProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/team-sections/team-profiles-1/team-profiles.js

@@ -42,18 +42,16 @@ const LinkedInIcon = () => /* @__PURE__ */ jsx(
   }
 );
 const TeamProfiles = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  members = []
+  members = [],
+  styles
 }) => /* @__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 md:gap-16", children: [
       (heading || description) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8 lg:flex-row lg:justify-between", children: [
         heading && /* @__PURE__ */ jsx("div", { className: "w-full lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground max-w-xl text-4xl font-bold leading-tight tracking-tight md:text-5xl", children: heading }) }),

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

@@ -1,15 +1,17 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundImageProps } from "@/components/puck-base/image";
 export interface CustomersProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    layout?: "section" | "inline";
     heading: string;
-    customers: {
-        name: string;
+    items: {
+        name?: string;
         image?: CompoundImageProps;
         url?: string;
     }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        layout?: "section" | "inline";
+    };
 }
-export declare const Customers: ({ padding, sectionStyle, backgroundColor, layout, heading, customers, }: CustomersProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Customers: ({ heading, items, styles, }: CustomersProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/testimonial-sections/customers-1/customers.js

@@ -7,19 +7,16 @@ import { Carousel, CarouselContent, CarouselItem } from "../../../shadcn/carouse
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const Customers = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
-  layout = "section",
   heading,
-  customers
+  items,
+  styles
 }) => {
   const [api, setApi] = useState();
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
   const prefersReducedMotion = usePrefersReducedMotion();
-  const isSectionLayout = layout === "section";
-  const isInlineLayout = layout === "inline";
+  const isSectionLayout = ((styles == null ? void 0 : styles.layout) ?? "section") === "section";
+  const isInlineLayout = (styles == null ? void 0 : styles.layout) === "inline";
   useEffect(() => {
     if (!api || prefersReducedMotion || isPaused) {
       return;
@@ -38,9 +35,9 @@ const Customers = ({
   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",
         {
@@ -80,7 +77,7 @@ const Customers = ({
                       onMouseOut: () => {
                         setIsPaused(false);
                       },
-                      children: /* @__PURE__ */ jsx(CarouselContent, { children: customers.map((customer, index) => {
+                      children: /* @__PURE__ */ jsx(CarouselContent, { children: items.map((customer, index) => {
                         var _a;
                         return /* @__PURE__ */ jsx(CarouselItem, { className: "basis-1/4 lg:basis-1/6", children: /* @__PURE__ */ jsx("div", { className: "bg-muted flex aspect-square items-center justify-center rounded-md p-6", children: ((_a = customer.image) == null ? void 0 : _a.src) ? /* @__PURE__ */ jsx(
                           CompoundImage,

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

@@ -1,9 +1,20 @@
-import { paddingDefaults, padding, image1x1Placeholder, image, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { image1x1Placeholder, image, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { Customers } from "./customers.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const customersStylesField = createStylesField({
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Section", value: "section" },
+      { label: "Inline", value: "inline" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading,
-    customers: {
+    items: {
       type: "array",
       max: 15,
       getItemSummary: (item, index = 0) => item.name || `Customer ${index + 1}`,
@@ -16,29 +27,18 @@ const conf = {
         image: image1x1Placeholder
       }
     },
-    layout: {
-      type: "radio",
-      options: [
-        {
-          label: "section",
-          value: "section"
-        },
-        { label: "inline", value: "inline" }
-      ]
-    },
-    padding
+    styles: customersStylesField
   },
   defaultProps: {
-    padding: paddingDefaults,
-    layout: "section",
     heading: "Trusted by hundreds of businesses worldwide",
-    customers: Array.from({ length: 10 }).map((_, index) => ({
+    items: Array.from({ length: 10 }).map((_, index) => ({
       name: `Customer ${index + 1}`,
       image: {
         src: getPlaceholderImageUrl("1000x1000", `Customer ${index + 1}`),
         alt: ""
       }
-    }))
+    })),
+    styles: createStylesDefaults({ layout: "section" })
   },
   render: Customers
 };

package/dist/components/puck-block/testimonial-sections/logo-marquee-1/index.js

@@ -1,9 +1,21 @@
-import { paddingDefaults, padding, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { LogoMarquee } from "./logo-marquee.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const logoPlaceholder = (name) => ({
   src: getPlaceholderImageUrl("200x60", name),
   alt: name
 });
+const marqueeStylesField = createStylesField({
+  speed: {
+    type: "radio",
+    label: "Speed",
+    options: [
+      { label: "Slow", value: "slow" },
+      { label: "Normal", value: "normal" },
+      { label: "Fast", value: "fast" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -17,15 +29,7 @@ const conf = {
       },
       defaultItemProps: logoPlaceholder("Brand")
     },
-    speed: {
-      type: "radio",
-      options: [
-        { label: "Slow", value: "slow" },
-        { label: "Normal", value: "normal" },
-        { label: "Fast", value: "fast" }
-      ]
-    },
-    padding
+    styles: marqueeStylesField
   },
   defaultProps: {
     heading: "Trusted by industry leaders",
@@ -36,8 +40,7 @@ const conf = {
       logoPlaceholder("DataFlow"),
       logoPlaceholder("CloudNet")
     ],
-    speed: "normal",
-    padding: paddingDefaults
+    styles: createStylesDefaults({ speed: "normal" })
   },
   render: LogoMarquee
 };

package/dist/components/puck-block/testimonial-sections/logo-marquee-1/logo-marquee.d.ts

@@ -1,11 +1,15 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface LogoMarqueeProps {
-    padding?: CompoundContainerProps["padding"];
     heading?: string;
     logos?: Array<{
         src: string;
         alt: string;
     }>;
-    speed?: "slow" | "normal" | "fast";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        speed?: "slow" | "normal" | "fast";
+    };
 }
-export declare const LogoMarquee: ({ padding, heading, logos, speed, }: LogoMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LogoMarquee: ({ heading, logos, styles, }: LogoMarqueeProps) => import("react/jsx-runtime").JSX.Element;