dune-react 0.0.8 → 0.0.10

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

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { Faq2Props } from "./faq-2";
+export type { Faq2Props };
+export declare const conf: ComponentConfig<Faq2Props>;
+export default conf;

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

@@ -0,0 +1,61 @@
+import { image1x1Placeholder, image } from "../../../puck-base/core/fields.js";
+import { Faq2 } from "./faq-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const defaultItems = [
+  {
+    question: "What's included in a session?",
+    answer: "Each session includes a personalized warm-up, structured training tailored to your goals, form coaching, and a cool-down. You'll also receive guidance on next steps to keep progressing."
+  },
+  {
+    question: "How do I know if this is right for me?",
+    answer: "If you have a goal — whether it's losing weight, building strength, improving mobility, or just feeling better — we can help. We offer a free consultation to assess your needs and build a plan."
+  },
+  {
+    question: "How often should I train to see results?",
+    answer: "Most clients see meaningful results training 2–3 times per week. We'll work with your schedule and lifestyle to find the right frequency for your goals."
+  },
+  {
+    question: "Do you offer programs for specific goals?",
+    answer: "Yes — we tailor every program to your specific objectives, whether that's weight loss, muscle gain, athletic performance, or general wellness."
+  }
+];
+const conf = {
+  fields: {
+    heading: { type: "textarea", contentEditable: true },
+    items: {
+      type: "array",
+      min: 1,
+      max: 20,
+      getItemSummary: (item, index = 0) => item.question ? `${item.question.slice(0, 30)}${item.question.length > 30 ? "..." : ""}` : `Question ${index + 1}`,
+      arrayFields: {
+        question: { type: "text", contentEditable: true },
+        answer: { type: "textarea", contentEditable: true }
+      },
+      defaultItemProps: {
+        question: "Your question here",
+        answer: "A helpful answer to the question."
+      }
+    },
+    image,
+    imagePosition: {
+      type: "radio",
+      label: "Image Position",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ]
+    },
+    styles: createStylesField()
+  },
+  defaultProps: {
+    heading: "Questions about getting started",
+    items: defaultItems,
+    image: image1x1Placeholder,
+    imagePosition: "right",
+    styles: createStylesDefaults()
+  },
+  render: Faq2
+};
+export {
+  conf
+};

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

@@ -0,0 +1,30 @@
+type FaqVariant = "accordion-1" | "faq-1" | "faq-2";
+type FaqPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type FaqSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type FaqImage = {
+    src: string;
+    alt?: string;
+};
+type FaqItem = {
+    question: string;
+    answer: string;
+};
+type FaqSectionProps = {
+    variant?: FaqVariant;
+    heading?: string;
+    description?: string;
+    items?: FaqItem[];
+    layout?: "single-col" | "two-col";
+    expandMode?: "single" | "multiple";
+    collapsible?: boolean;
+    image?: FaqImage;
+    styles?: {
+        padding?: FaqPadding;
+        sectionStyle?: FaqSectionStyle;
+        backgroundColor?: string;
+        imagePosition?: "left" | "right";
+    };
+};

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

@@ -2,9 +2,11 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 import { CompoundCardProps } from "@/components/puck-base/card";
 export interface BentoProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
     cards?: CompoundCardProps[];
 }
-export declare const Bento: ({ padding, sectionStyle, backgroundColor, badge, heading, description, buttons, cards, }: BentoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Bento: ({ styles, badge, heading, description, buttons, cards, }: BentoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/feature-sections/bento-1/bento.js

@@ -4,16 +4,14 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 import { CompoundCard } from "../../../puck-base/card.js";
 const Bento = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
+  styles,
   badge,
   heading,
   description,
   buttons,
   cards = []
 }) => {
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
+  return /* @__PURE__ */ jsx(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: styles == null ? void 0 : styles.sectionStyle, backgroundColor: styles == null ? void 0 : styles.backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
     /* @__PURE__ */ jsx(
       CompoundContent,
       {

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, cards, contentFields } from "../../../puck-base/core/fields.js";
+import { cards, contentFields } from "../../../puck-base/core/fields.js";
 import { Bento } from "./bento.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
@@ -8,9 +9,7 @@ const conf = {
       min: 1,
       max: 4
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     badge: {
@@ -25,7 +24,7 @@ const conf = {
       ...cards.defaultItemProps,
       heading: `Card ${index + 1}`
     })),
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Bento
 };

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

@@ -1,12 +1,13 @@
 import { CompoundContentProps } from "@/components/puck-base/content";
 import { CompoundContainerProps } from "@/components/puck-base/container";
-import { PuckComponent, Slot } from "@puckeditor/core";
+import { CompoundArticleCardProps } from "@/components/puck-base/article-card";
 export interface FeatureCardsProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
     columns?: 1 | 2 | 3;
-    cards: Slot;
+    cards?: CompoundArticleCardProps[];
 }
-export declare const FeatureCard: PuckComponent<CompoundContainerProps>;
-export declare const FeatureCards: PuckComponent<FeatureCardsProps>;
+export declare const FeatureCards: ({ styles, badge, heading, description, buttons, columns, cards, alignContent, className, }: FeatureCardsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/feature-sections/feature-cards-1/feature-cards.js

@@ -1,21 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContent } from "../../../puck-base/content.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundArticleCard } from "../../../puck-base/article-card.js";
 import { cn } from "../../../../utils/css-utils.js";
 const FeatureCards = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
+  styles,
   badge,
   heading,
   description,
   buttons,
   columns = 3,
-  cards: Cards,
+  cards = [],
   alignContent = "start",
   className
 }) => {
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, className, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
+  return /* @__PURE__ */ jsx(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: styles == null ? void 0 : styles.sectionStyle, backgroundColor: styles == null ? void 0 : styles.backgroundColor, className, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
     /* @__PURE__ */ jsx(
       CompoundContent,
       {
@@ -27,10 +26,19 @@ const FeatureCards = ({
         spacing: "tight"
       }
     ),
-    Cards && /* @__PURE__ */ jsx(Cards, { className: cn("grid grid-cols-1 gap-8", {
+    cards.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-8", {
       "sm:grid-cols-2": columns >= 2,
       "lg:grid-cols-3": columns >= 3
-    }) })
+    }), children: cards.map((card, index) => /* @__PURE__ */ jsx(
+      CompoundArticleCard,
+      {
+        image: card.image,
+        heading: card.heading,
+        description: card.description,
+        button: card.button
+      },
+      index
+    )) })
   ] }) });
 };
 export {

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

@@ -1,10 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields, image16x9Placeholder, cards } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, button, image, contentFields } from "../../../puck-base/core/fields.js";
 import { FeatureCards } from "./feature-cards.js";
-const { icon: defaultIcon, ...cardsDefaultItemProps } = cards.defaultItemProps;
-const defaultCard = {
-  ...cardsDefaultItemProps,
-  image: image16x9Placeholder
-};
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
@@ -26,12 +22,28 @@ const conf = {
       ]
     },
     cards: {
-      type: "slot",
-      allow: ["ArticleCard"]
+      type: "array",
+      getItemSummary: (item, index = 0) => item.heading || `Card ${index + 1}`,
+      arrayFields: {
+        image,
+        heading: { type: "text", contentEditable: true },
+        description: { type: "textarea", contentEditable: true },
+        button
+      },
+      defaultItemProps: {
+        image: image16x9Placeholder,
+        heading: "Card heading",
+        description: "Card description goes here.",
+        button: {
+          label: "",
+          url: "",
+          variant: "link",
+          size: "default",
+          icon: "move-right"
+        }
+      }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Something new!",
@@ -44,14 +56,21 @@ const conf = {
     buttons: [],
     alignContent: "start",
     columns: 3,
-    cards: Array.from({ length: 1 }).map((_, index) => ({
-      type: "ArticleCard",
-      props: {
-        ...defaultCard,
-        heading: `Card ${index + 1}`
+    cards: [
+      {
+        image: image16x9Placeholder,
+        heading: "Card 1",
+        description: "Card description goes here.",
+        button: {
+          label: "",
+          url: "",
+          variant: "link",
+          size: "default",
+          icon: "move-right"
+        }
       }
-    })),
-    padding: paddingDefaults
+    ],
+    styles: createStylesDefaults()
   },
   render: FeatureCards
 };

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

@@ -1,8 +1,10 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface FeatureShowcaseProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
     heading?: string;
     description?: string;
     image?: {
@@ -16,4 +18,4 @@ export interface FeatureShowcaseProps {
     }>;
     layout?: "image-left" | "image-right";
 }
-export declare const FeatureShowcase: ({ padding, sectionStyle, backgroundColor, heading, description, image, features, layout, }: FeatureShowcaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FeatureShowcase: ({ styles, heading, description, image, features, layout, }: FeatureShowcaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,16 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 const FeatureShowcase = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
+  styles,
   heading,
   description,
   image,
   features = [],
   layout = "image-right"
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+}) => /* @__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: [
   /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", 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 })
@@ -27,14 +26,7 @@ const FeatureShowcase = ({
           /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: f.title }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: f.description })
         ] }, i)) }),
-        /* @__PURE__ */ jsx("div", { className: "border-border/50 bg-muted overflow-hidden rounded-xl border", children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: image.src,
-            alt: (image == null ? void 0 : image.alt) || "",
-            className: "h-full w-full object-cover"
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-[4/3] w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Feature Image" }) }) })
+        /* @__PURE__ */ jsx("div", { className: "border-border/50 bg-muted [&>span]:w-full overflow-hidden rounded-xl border", children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: (image == null ? void 0 : image.alt) || "", className: "w-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex aspect-[4/3] w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Feature Image" }) }) })
       ]
     }
   )

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, image16x9Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, image } from "../../../puck-base/core/fields.js";
 import { FeatureShowcase } from "./feature-showcase.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -25,9 +26,7 @@ const conf = {
         { label: "Image Right", value: "image-right" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Everything you need",
@@ -48,7 +47,7 @@ const conf = {
       }
     ],
     layout: "image-right",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: FeatureShowcase
 };

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

@@ -1,17 +1,19 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface IconGridProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     buttons?: CompoundButtonProps[];
     columns?: 2 | 3 | 4;
-    items?: Array<{
+    features?: Array<{
         icon: string;
         title: string;
         description: string;
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
 export declare const IconGrid: (allProps: IconGridProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,64 +16,70 @@ function getLucideIcon(name) {
 const IconGrid = (allProps) => {
   const componentId = allProps.id;
   const {
-    padding,
-    sectionStyle,
-    backgroundColor,
     heading,
     description,
     buttons,
     columns = 3,
-    items = []
+    features = [],
+    styles
   } = allProps;
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif text-2xl md:text-3xl leading-snug mb-16 max-w-3xl", children: heading }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg mb-8", children: description }),
-    Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4 mb-8", children: buttons.filter((b) => b.label).map((button, idx) => /* @__PURE__ */ jsx(
-      CompoundButton,
-      {
-        label: button.label,
-        url: button.url,
-        variant: button.variant,
-        size: button.size,
-        icon: button.icon
-      },
-      idx
-    )) }),
-    /* @__PURE__ */ jsx("div", { className: cn(
-      "grid grid-cols-1 gap-x-12",
-      gridColsClass[columns] || ""
-    ), children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-6 py-6", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-1 text-muted-foreground", children: (() => {
-          const Icon = getLucideIcon(item.icon);
-          return Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-9 w-9 stroke-[1.5]" }) : /* @__PURE__ */ jsx("span", { className: "text-3xl", children: "📦" });
-        })() }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx(
-            InlineEditable,
-            {
-              tag: "h3",
-              className: "text-foreground font-serif text-xl font-medium mb-3",
-              value: item.title,
-              componentId: componentId || "",
-              propPath: `items[${i}].title`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            InlineEditable,
-            {
-              tag: "p",
-              className: "text-muted-foreground text-sm leading-relaxed max-w-2xl",
-              value: item.description,
-              componentId: componentId || "",
-              propPath: `items[${i}].description`
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("hr", { className: "border-foreground/10" })
-    ] }, i)) })
-  ] });
+  return /* @__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 && /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif text-2xl md:text-3xl leading-snug mb-16 max-w-3xl", children: heading }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg mb-8", children: description }),
+        Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4 mb-8", children: buttons.filter((b) => b.label).map((button, idx) => /* @__PURE__ */ jsx(
+          CompoundButton,
+          {
+            label: button.label,
+            url: button.url,
+            variant: button.variant,
+            size: button.size,
+            icon: button.icon
+          },
+          idx
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: cn(
+          "grid grid-cols-1 gap-x-12",
+          gridColsClass[columns] || ""
+        ), children: features.map((item, i) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-6 py-6", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-1 text-muted-foreground", children: (() => {
+              const Icon = getLucideIcon(item.icon);
+              return Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-9 w-9 stroke-[1.5]" }) : /* @__PURE__ */ jsx("span", { className: "text-3xl", children: "📦" });
+            })() }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx(
+                InlineEditable,
+                {
+                  tag: "h3",
+                  className: "text-foreground font-serif text-xl font-medium mb-3",
+                  value: item.title,
+                  componentId: componentId || "",
+                  propPath: `features[${i}].title`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                InlineEditable,
+                {
+                  tag: "p",
+                  className: "text-muted-foreground text-sm leading-relaxed max-w-2xl",
+                  value: item.description,
+                  componentId: componentId || "",
+                  propPath: `features[${i}].description`
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("hr", { className: "border-foreground/10" })
+        ] }, i)) })
+      ]
+    }
+  );
 };
 export {
   IconGrid

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, buttons } from "../../../puck-base/core/fields.js";
+import { buttons } from "../../../puck-base/core/fields.js";
 import { IconGrid } from "./icon-grid.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -13,10 +14,10 @@ const conf = {
         { label: "4 Columns", value: 4 }
       ]
     },
-    items: {
+    features: {
       type: "array",
       max: 12,
-      getItemSummary: (item, i = 0) => item.title || `Item ${i + 1}`,
+      getItemSummary: (item, i = 0) => item.title || `Feature ${i + 1}`,
       arrayFields: {
         icon: {
           type: "text",
@@ -33,15 +34,13 @@ const conf = {
         description: "Description"
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Why choose us",
     description: "Features that set us apart.",
     columns: 3,
-    items: [
+    features: [
       {
         icon: "zap",
         title: "Fast",
@@ -61,7 +60,7 @@ const conf = {
         description: "Built with latest tech."
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: IconGrid
 };

package/dist/components/puck-block/feature-sections/product-features-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, image, icon, description, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { image, icon, description, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { ProductFeatures } from "./product-features.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultFeature = {
   icon: "box",
   title: "Feature Name",
@@ -38,9 +39,7 @@ const conf = {
       ]
     },
     image,
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Built for the Trail",
@@ -83,7 +82,7 @@ const conf = {
       src: getPlaceholderImageUrl("1200x800", "Product Image"),
       alt: "Summit 32L hiking backpack"
     },
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: ProductFeatures
 };

package/dist/components/puck-block/feature-sections/product-features-1/product-features.d.ts

@@ -9,9 +9,11 @@ export interface ProductFeature {
     };
 }
 export interface ProductFeaturesProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
     heading?: string;
     description?: string;
     features?: ProductFeature[];
@@ -22,4 +24,4 @@ export interface ProductFeaturesProps {
         alt?: string;
     };
 }
-export declare const ProductFeatures: ({ padding, sectionStyle, backgroundColor, heading, description, features, layout, columns, image, }: ProductFeaturesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductFeatures: ({ styles, heading, description, features, layout, columns, image, }: ProductFeaturesProps) => import("react/jsx-runtime").JSX.Element;