dune-react 0.0.9 → 0.0.11

package/dist/components/puck-block/showcase-sections/case-study-1/case-study.js

@@ -2,33 +2,41 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const CaseStudy = ({
-  padding,
   heading,
   description,
   stats = [],
   quote,
   author,
-  logo
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle: "muted", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
-  (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx("span", { className: "mb-8 inline-block opacity-60", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt || "", className: "h-8 w-auto" }) }),
-  heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-4 text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-  description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-lg", children: description }),
-  stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-10 grid grid-cols-2 gap-6 md:grid-cols-4", children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("p", { className: "text-primary text-3xl font-bold", children: s.value }),
-    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: s.label })
-  ] }, i)) }),
-  quote && /* @__PURE__ */ jsxs("blockquote", { className: "border-primary border-l-4 py-2 pl-6", children: [
-    /* @__PURE__ */ jsxs("p", { className: "text-foreground text-lg italic", children: [
-      "“",
-      quote,
-      "”"
-    ] }),
-    author && /* @__PURE__ */ jsxs("cite", { className: "text-muted-foreground mt-2 block text-sm not-italic", children: [
-      "— ",
-      author
+  logo,
+  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: "mx-auto max-w-4xl", children: [
+      (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx("span", { className: "mb-8 inline-block opacity-60", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt || "", className: "h-8 w-auto" }) }),
+      heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-4 text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-lg", children: description }),
+      stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-10 grid grid-cols-2 gap-6 md:grid-cols-4", children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-primary text-3xl font-bold", children: s.value }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: s.label })
+      ] }, i)) }),
+      quote && /* @__PURE__ */ jsxs("blockquote", { className: "border-primary border-l-4 py-2 pl-6", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-foreground text-lg italic", children: [
+          "“",
+          quote,
+          "”"
+        ] }),
+        author && /* @__PURE__ */ jsxs("cite", { className: "text-muted-foreground mt-2 block text-sm not-italic", children: [
+          "— ",
+          author
+        ] })
+      ] })
     ] })
-  ] })
-] }) });
+  }
+);
 export {
   CaseStudy
 };

package/dist/components/puck-block/showcase-sections/case-study-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, padding, image } from "../../../puck-base/core/fields.js";
+import { image } from "../../../puck-base/core/fields.js";
 import { CaseStudy } from "./case-study.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -14,7 +15,7 @@ const conf = {
     },
     quote: { type: "textarea", contentEditable: true },
     author: { type: "text" },
-    padding
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "How Acme Corp grew 3x in 6 months",
@@ -26,7 +27,7 @@ const conf = {
     ],
     quote: "This product changed everything for our team. We can't imagine going back.",
     author: "Jane Doe, CEO at Acme",
-    padding: paddingDefaults
+    styles: createStylesDefaults({ sectionStyle: "muted" })
   },
   render: CaseStudy
 };

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

@@ -0,0 +1,48 @@
+type ShowcaseVariant = "before-after-1" | "case-study-1" | "step-by-step-1";
+type ShowcasePadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type ShowcaseSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type ShowcaseButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type ShowcaseImage = {
+    src: string;
+    alt?: string;
+};
+type ShowcaseItem = {
+    title?: string;
+    description?: string;
+    label?: string;
+    value?: string;
+};
+type ShowcaseSectionProps = {
+    variant?: ShowcaseVariant;
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    beforeLabel?: string;
+    beforeItems?: ShowcaseItem[];
+    afterLabel?: string;
+    afterItems?: ShowcaseItem[];
+    layout?: "side-by-side" | "stacked" | "vertical" | "horizontal" | "numbered";
+    button?: ShowcaseButton;
+    steps?: ShowcaseItem[];
+    stats?: Array<{
+        value: string;
+        label: string;
+    }>;
+    quote?: string;
+    author?: string;
+    logo?: ShowcaseImage;
+    styles?: {
+        padding?: ShowcasePadding;
+        sectionStyle?: ShowcaseSectionStyle;
+        backgroundColor?: string;
+    };
+};

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

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { StepByStep } from "./step-by-step.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -28,9 +28,7 @@ const conf = {
         description: "Describe what happens in this step."
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "How it works",
@@ -53,7 +51,7 @@ const conf = {
         description: "Launch your first project and see results immediately."
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: StepByStep
 };

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

@@ -6,12 +6,14 @@ export interface StepByStepItem {
     iconUrl?: string;
 }
 export interface StepByStepProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     layout?: "vertical" | "horizontal" | "numbered";
     steps?: StepByStepItem[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const StepByStep: ({ padding, sectionStyle, backgroundColor, heading, description, layout, steps, }: StepByStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepByStep: ({ heading, description, layout, steps, styles, }: StepByStepProps) => import("react/jsx-runtime").JSX.Element;

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,10 +1,11 @@
-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",
   image: {
-    src: "https://dummyimage.com/600x600/f5f4f4/101010.png&text=Team+Member",
+    src: "https://picsum.photos/seed/Team%20Member/600/600",
     alt: "Team member"
   },
   bio: "Leading the team with 10+ years of experience in the industry."
@@ -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",
@@ -33,7 +32,6 @@ const conf = {
     buttons: [
       {
         label: "Get started",
-        url: "#",
         action: { type: "external", pageUrl: "", externalUrl: "#", openInNewTab: "false", email: "", subject: "", phone: "", sectionId: "", downloadUrl: "" },
         variant: "default",
         size: "default",
@@ -41,7 +39,6 @@ const conf = {
       },
       {
         label: "Schedule a consultation",
-        url: "#",
         action: { type: "external", pageUrl: "", externalUrl: "#", openInNewTab: "false", email: "", subject: "", phone: "", sectionId: "", downloadUrl: "" },
         variant: "secondary",
         size: "default",
@@ -54,7 +51,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;