dune-react 0.0.9 → 0.0.10

package/dist/components/puck-block/text-sections/articles-1/articles.js

@@ -3,43 +3,50 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { cn } from "../../../../utils/css-utils.js";
 const Articles = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   eyebrow,
   heading,
-  button,
-  columns = 3,
-  cards: Cards
+  buttons,
+  cards: Cards,
+  styles
 }) => {
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-10 flex w-full flex-col gap-6 sm:flex-row sm:items-end sm:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        eyebrow && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: eyebrow }),
-        heading && /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular max-w-xl text-3xl tracking-tighter md:text-4xl", children: heading })
-      ] }),
-      (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
-        CompoundButton,
-        {
-          label: button.label,
-          url: button.url,
-          variant: button.variant,
-          size: button.size,
-          icon: button.icon
-        }
-      ) }) : null
-    ] }),
-    Cards && /* @__PURE__ */ jsx(
-      Cards,
-      {
-        className: cn("grid grid-cols-1 gap-8", {
-          "sm:grid-cols-2": columns === 2,
-          "sm:grid-cols-2 lg:grid-cols-3": columns === 3,
-          "sm:grid-cols-2 lg:grid-cols-4": columns === 4
-        })
-      }
-    )
-  ] });
+  var _a;
+  const columns = (styles == null ? void 0 : styles.columns) ?? 3;
+  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: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-10 flex w-full flex-col gap-6 sm:flex-row sm:items-end sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            eyebrow && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: eyebrow }),
+            heading && /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular max-w-xl text-3xl tracking-tighter md:text-4xl", children: heading })
+          ] }),
+          ((_a = buttons == null ? void 0 : buttons[0]) == null ? void 0 : _a.label) ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+            CompoundButton,
+            {
+              label: buttons[0].label,
+              url: buttons[0].url,
+              variant: buttons[0].variant,
+              size: buttons[0].size,
+              icon: buttons[0].icon
+            }
+          ) }) : null
+        ] }),
+        Cards && /* @__PURE__ */ jsx(
+          Cards,
+          {
+            className: cn("grid grid-cols-1 gap-8", {
+              "sm:grid-cols-2": columns === 2,
+              "sm:grid-cols-2 lg:grid-cols-3": columns === 3,
+              "sm:grid-cols-2 lg:grid-cols-4": columns === 4
+            })
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   Articles

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

@@ -1,12 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, button, heading, image16x9Placeholder, cards } from "../../../puck-base/core/fields.js";
+import { buttons, heading, image16x9Placeholder, cards } from "../../../puck-base/core/fields.js";
 import { Articles } from "./articles.js";
-const defaultButton = {
-  label: "",
-  url: "",
-  variant: "default",
-  size: "default",
-  icon: "none"
-};
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const { icon: defaultIcon, ...defaultCardProps } = cards.defaultItemProps;
 const defaultCard = {
   ...defaultCardProps,
@@ -16,29 +10,34 @@ const conf = {
   fields: {
     eyebrow: { type: "text", contentEditable: true },
     heading,
-    button,
-    columns: {
-      type: "radio",
-      options: [
-        { label: "2", value: 2 },
-        { label: "3", value: 3 },
-        { label: "4", value: 4 }
-      ]
-    },
+    buttons,
     cards: {
       type: "slot",
       allow: ["ArticleCard"]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      columns: {
+        type: "radio",
+        options: [
+          { label: "2", value: 2 },
+          { label: "3", value: 3 },
+          { label: "4", value: 4 }
+        ]
+      }
+    })
   },
   defaultProps: {
-    padding: paddingDefaults,
     eyebrow: "Latest News",
     heading: "Stories worth reading",
-    button: defaultButton,
-    columns: 3,
+    buttons: [
+      {
+        label: "",
+        url: "",
+        variant: "default",
+        size: "default",
+        icon: "none"
+      }
+    ],
     cards: Array.from({ length: 3 }).map((_, index) => ({
       type: "ArticleCard",
       props: {
@@ -47,7 +46,8 @@ const conf = {
         description: "A short summary of this article goes here.",
         button: { label: "", url: "", variant: "link", size: "default", icon: "move-right" }
       }
-    }))
+    })),
+    styles: createStylesDefaults({ columns: 3 })
   },
   render: Articles
 };

package/dist/components/puck-block/text-sections/content-section-1/content-section.d.ts

@@ -1,9 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface ContentSectionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     eyebrow?: string;
     description?: string;
@@ -14,7 +11,12 @@ export interface ContentSectionProps {
     };
     imagePosition?: "left" | "right" | "below" | "none";
     layout?: "centered" | "split" | "prose";
-    dividers?: "none" | "both" | "top" | "bottom";
     buttons?: CompoundButtonProps[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        dividers?: "none" | "both" | "top" | "bottom";
+    };
 }
-export declare const ContentSection: ({ padding, sectionStyle, backgroundColor, heading, eyebrow, description, content, image, imagePosition, layout, dividers, buttons, }: ContentSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentSection: ({ heading, eyebrow, description, content, image, imagePosition, layout, buttons, styles, }: ContentSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/content-section-1/content-section.js

@@ -48,9 +48,6 @@ const ImageBlock = ({ image }) => /* @__PURE__ */ jsx("div", { className: "bg-mu
   }
 ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-[4/3] w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Content Image" }) }) });
 const ContentSection = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   eyebrow,
   description,
@@ -58,11 +55,12 @@ const ContentSection = ({
   image,
   imagePosition = "right",
   layout = "centered",
-  dividers = "none",
-  buttons
+  buttons,
+  styles
 }) => {
+  const dividers = (styles == null ? void 0 : styles.dividers) ?? "none";
   if (layout === "prose") {
-    return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsx(
+    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__ */ jsx("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsx(
       TextBlock,
       {
         eyebrow,
@@ -76,7 +74,7 @@ const ContentSection = ({
   }
   if (layout === "split" || imagePosition === "left" || imagePosition === "right") {
     const showImage2 = imagePosition !== "none" && (image == null ? void 0 : image.src);
-    return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
+    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: cn(
@@ -100,7 +98,7 @@ const ContentSection = ({
     ) });
   }
   const showImage = imagePosition !== "none" && (image == null ? void 0 : image.src);
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+  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: [
     (dividers === "both" || dividers === "top") && /* @__PURE__ */ jsx("hr", { className: "mb-12 border-foreground/15" }),
     /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsx(
       TextBlock,

package/dist/components/puck-block/text-sections/content-section-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, image16x9Placeholder, backgroundColor, sectionStyle, padding, buttons, image } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, buttons, image } from "../../../puck-base/core/fields.js";
 import { ContentSection } from "./content-section.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     eyebrow: { type: "text" },
@@ -24,19 +25,18 @@ const conf = {
         { label: "Prose", value: "prose" }
       ]
     },
-    dividers: {
-      type: "radio",
-      options: [
-        { label: "None", value: "none" },
-        { label: "Top", value: "top" },
-        { label: "Bottom", value: "bottom" },
-        { label: "Both", value: "both" }
-      ]
-    },
     buttons,
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      dividers: {
+        type: "radio",
+        options: [
+          { label: "None", value: "none" },
+          { label: "Top", value: "top" },
+          { label: "Bottom", value: "bottom" },
+          { label: "Both", value: "both" }
+        ]
+      }
+    })
   },
   defaultProps: {
     eyebrow: "Why choose us",
@@ -62,7 +62,7 @@ const conf = {
         icon: "none"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults({ dividers: "none" })
   },
   render: ContentSection
 };

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

@@ -0,0 +1,58 @@
+type TextVariant = "articles-1" | "content-section-1" | "rich-text-1" | "tab-section-1" | "timeline-1" | "two-column-1";
+type TextPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type TextSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type TextButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type TextBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+};
+type TextImage = {
+    src: string;
+    alt?: string;
+    aspectRatio?: "16x9" | "1x1";
+};
+type TextTab = {
+    label: string;
+    content: string;
+    image?: TextImage;
+};
+type TextTimelineItem = {
+    title: string;
+    description: string;
+    date?: string;
+};
+type TextSectionProps = {
+    variant?: TextVariant;
+    badge?: TextBadge;
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    content?: string;
+    buttons?: TextButton[];
+    image?: TextImage;
+    images?: TextImage[];
+    imagePosition?: "left" | "right" | "below" | "none";
+    layout?: "centered" | "split" | "prose" | "text-start" | "text-end";
+    cards?: unknown;
+    tabs?: TextTab[];
+    items?: TextTimelineItem[];
+    styles?: {
+        padding?: TextPadding;
+        sectionStyle?: TextSectionStyle;
+        backgroundColor?: string;
+        columns?: 2 | 3 | 4;
+        dividers?: "none" | "both" | "top" | "bottom";
+        maxWidth?: "sm" | "md" | "lg" | "full";
+        border?: boolean;
+    };
+};

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

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { RichText } from "./rich-text.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     content: {
@@ -9,23 +9,21 @@ const conf = {
         instructions: "Write rich HTML content with headings, paragraphs, lists, and links."
       }
     },
-    maxWidth: {
-      type: "select",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" },
-        { label: "Full Width", value: "full" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      maxWidth: {
+        type: "select",
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" },
+          { label: "Full Width", value: "full" }
+        ]
+      }
+    })
   },
   defaultProps: {
     content: "<h2>About Us</h2><p>We are a team of passionate builders creating tools that empower everyone to build beautiful websites.</p><p>Our mission is to make web design accessible to everyone.</p>",
-    maxWidth: "md",
-    padding: paddingDefaults
+    styles: createStylesDefaults({ maxWidth: "md" })
   },
   render: RichText
 };

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

@@ -1,9 +1,11 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface RichTextProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     content?: string;
-    maxWidth?: "sm" | "md" | "lg" | "full";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        maxWidth?: "sm" | "md" | "lg" | "full";
+    };
 }
-export declare const RichText: ({ padding, sectionStyle, backgroundColor, content, maxWidth, }: RichTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RichText: ({ content, styles, }: RichTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/rich-text-1/rich-text.js

@@ -7,18 +7,18 @@ const MAX_WIDTH_MAP = {
   full: "max-w-none"
 };
 const RichText = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   content = "",
-  maxWidth = "md"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: `${MAX_WIDTH_MAP[maxWidth]} prose prose-neutral dark:prose-invert mx-auto`,
-    dangerouslySetInnerHTML: { __html: content }
-  }
-) });
+  styles
+}) => {
+  const maxWidth = (styles == null ? void 0 : styles.maxWidth) ?? "md";
+  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__ */ jsx(
+    "div",
+    {
+      className: `${MAX_WIDTH_MAP[maxWidth]} prose prose-neutral dark:prose-invert mx-auto`,
+      dangerouslySetInnerHTML: { __html: content }
+    }
+  ) });
+};
 export {
   RichText
 };

package/dist/components/puck-block/text-sections/tab-section-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 { TabSection } from "./tab-section.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -19,9 +20,7 @@ const conf = {
         image: image16x9Placeholder
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "How it works",
@@ -43,7 +42,7 @@ const conf = {
         image: image16x9Placeholder
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: TabSection
 };

package/dist/components/puck-block/text-sections/tab-section-1/tab-section.d.ts

@@ -1,8 +1,5 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface TabSectionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     tabs?: Array<{
@@ -13,5 +10,10 @@ export interface TabSectionProps {
             alt: string;
         };
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const TabSection: ({ padding, sectionStyle, backgroundColor, heading, description, tabs, }: TabSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabSection: ({ heading, description, tabs, styles, }: TabSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/tab-section-1/tab-section.js

@@ -5,16 +5,14 @@ import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const TabSection = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  tabs = []
+  tabs = [],
+  styles
 }) => {
   var _a, _b, _c, _d;
   const [active, setActive] = useState(0);
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+  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: [
     /* @__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 })

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

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Timeline } from "./timeline.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -19,9 +19,7 @@ const conf = {
         date: "2026"
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Our Journey",
@@ -43,7 +41,7 @@ const conf = {
         date: "2023"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Timeline
 };

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

@@ -1,8 +1,5 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface TimelineProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     items?: Array<{
@@ -10,5 +7,10 @@ export interface TimelineProps {
         description: string;
         date?: string;
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Timeline: ({ padding, sectionStyle, backgroundColor, heading, description, items, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timeline: ({ heading, description, items, styles, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/timeline-1/timeline.js

@@ -1,13 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const Timeline = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  items = []
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+  items = [],
+  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: [
   /* @__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 })

package/dist/components/puck-block/text-sections/two-column-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, images, contentFieldsWithFeatures, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { images, contentFieldsWithFeatures, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { TwoColumn } from "./two-column.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFieldsWithFeatures,
@@ -28,7 +29,6 @@ const conf = {
       }
     },
     border: {
-      // TODO: would be good to have boolean values
       type: "radio",
       options: [
         { label: "yes", value: "true" },
@@ -48,9 +48,7 @@ const conf = {
         }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "This is the start of something new",
@@ -81,7 +79,7 @@ const conf = {
       }
     ],
     layout: "text-start",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: TwoColumn
 };

package/dist/components/puck-block/text-sections/two-column-1/two-column.d.ts

@@ -5,12 +5,14 @@ type ImageWithAspectRatio = CompoundImageProps & {
     aspectRatio?: "16x9" | "1x1";
 };
 export interface TwoColumnProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     layout?: "text-start" | "text-end";
     images?: ImageWithAspectRatio[];
     border?: "true" | "false";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const TwoColumn: ({ padding, sectionStyle, backgroundColor, layout, border, badge, heading, description, features, buttons, images, }: TwoColumnProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TwoColumn: ({ layout, border, badge, heading, description, features, buttons, images, styles, }: TwoColumnProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/puck-block/text-sections/two-column-1/two-column.js

@@ -6,9 +6,6 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const TwoColumn = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   layout,
   border = "false",
   badge,
@@ -16,16 +13,17 @@ const TwoColumn = ({
   description,
   features,
   buttons,
-  images
+  images,
+  styles
 }) => {
   const hasSingleImage = Array.isArray(images) && images.length === 1;
   const hasMultipleImages = Array.isArray(images) && images.length > 1;
   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",
         {