dune-react 0.0.9 → 0.0.11

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

@@ -0,0 +1,43 @@
+type MetricsVariant = "stats-1" | "stats-2" | "stats-3";
+type MetricsPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type MetricsSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type MetricsButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type MetricsBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+};
+type MetricItem = {
+    value?: string;
+    metric?: string;
+    label?: string;
+    title?: string;
+    description?: string;
+    percentage?: number;
+    direction?: "none" | "increase" | "decrease";
+    polarity?: "none" | "positive" | "negative";
+    tone?: "dark" | "light";
+};
+type MetricsSectionProps = {
+    variant?: MetricsVariant;
+    badge?: MetricsBadge;
+    heading?: string;
+    description?: string;
+    buttons?: MetricsButton[];
+    layout?: "section" | "inline" | "centered";
+    items?: MetricItem[];
+    styles?: {
+        padding?: MetricsPadding;
+        sectionStyle?: MetricsSectionStyle;
+        backgroundColor?: string;
+    };
+};

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

@@ -1,9 +1,10 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { Stats } from "./stats.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
-    statistics: {
+    items: {
       type: "array",
       max: 8,
       getItemSummary: (item, index = 0) => item.label || `Statistic ${index + 1}`,
@@ -63,9 +64,7 @@ const conf = {
         { label: "centered", value: "centered" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "The numbers speak for themselves",
@@ -83,7 +82,7 @@ const conf = {
         size: "default"
       }
     ],
-    statistics: [
+    items: [
       {
         label: "Monthly active users",
         value: "500",
@@ -114,7 +113,7 @@ const conf = {
       }
     ],
     layout: "section",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   resolveFields: (data, params) => {
     if (data.props.layout === "inline") {

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

@@ -1,16 +1,18 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 export interface StatsProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     layout?: "section" | "inline" | "centered";
-    statistics: {
+    items: {
         value: string;
         label: string;
         percentage?: number;
         direction?: "none" | "increase" | "decrease";
         polarity?: "none" | "positive" | "negative";
     }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Stats: ({ padding, sectionStyle, backgroundColor, layout, badge, heading, description, buttons, statistics, }: StatsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stats: ({ layout, badge, heading, description, buttons, items, styles, }: StatsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/metrics-sections/stats-1/stats.js

@@ -4,67 +4,73 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 const Stats = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   layout = "section",
   badge,
   heading,
   description,
   buttons,
-  statistics
+  items,
+  styles
 }) => {
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    layout === "inline" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 text-start sm:grid-cols-2 lg:grid-cols-4 lg:gap-8", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsx(
-      Stat,
-      {
-        value: stat.value,
-        label: stat.label,
-        direction: stat.direction,
-        polarity: stat.polarity,
-        percentage: stat.percentage
-      },
-      index
-    )) }) : null,
-    layout === "section" ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-2 text-start sm:grid-cols-2 lg:grid-cols-2", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsx(
-        Stat,
-        {
-          value: stat.value,
-          label: stat.label,
-          direction: stat.direction,
-          polarity: stat.polarity,
-          percentage: stat.percentage
-        },
-        index
-      )) }) })
-    ] }) : null,
-    layout === "centered" ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons,
-          alignContent: "center"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-12 mt-16", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-        /* @__PURE__ */ jsx("h2", { className: "font-serif text-5xl md:text-6xl font-medium text-foreground", children: stat.value }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: stat.label })
-      ] }, index)) })
-    ] }) : null
-  ] });
+  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: [
+        layout === "inline" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 text-start sm:grid-cols-2 lg:grid-cols-4 lg:gap-8", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsx(
+          Stat,
+          {
+            value: stat.value,
+            label: stat.label,
+            direction: stat.direction,
+            polarity: stat.polarity,
+            percentage: stat.percentage
+          },
+          index
+        )) }) : null,
+        layout === "section" ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            CompoundContent,
+            {
+              badge,
+              heading,
+              description,
+              buttons
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-2 text-start sm:grid-cols-2 lg:grid-cols-2", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsx(
+            Stat,
+            {
+              value: stat.value,
+              label: stat.label,
+              direction: stat.direction,
+              polarity: stat.polarity,
+              percentage: stat.percentage
+            },
+            index
+          )) }) })
+        ] }) : null,
+        layout === "centered" ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            CompoundContent,
+            {
+              badge,
+              heading,
+              description,
+              buttons,
+              alignContent: "center"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-12 mt-16", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ jsx("h2", { className: "font-serif text-5xl md:text-6xl font-medium text-foreground", children: stat.value }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: stat.label })
+          ] }, index)) })
+        ] }) : null
+      ]
+    }
+  );
 };
 const Stat = ({
   value,

package/dist/components/puck-block/metrics-sections/stats-2/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 { Stats2 } from "./stats-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: {
@@ -40,9 +41,7 @@ const conf = {
         variant: "light"
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Real results from dedicated training",
@@ -50,14 +49,12 @@ const conf = {
     buttons: [
       {
         label: "Explore our programs",
-        url: "/services",
         variant: "outline",
         size: "default",
         icon: "none"
       },
       {
         label: "Schedule your first session",
-        url: "#",
         variant: "default",
         size: "default",
         icon: "none"
@@ -68,7 +65,7 @@ const conf = {
       { metric: "1:1", title: "Personalized attention", variant: "light" },
       { metric: "LA", title: "Local Los Angeles training", variant: "light" }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Stats2
 };

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

@@ -9,8 +9,10 @@ export interface Stats2Props {
         title: string;
         variant: "dark" | "light";
     }[];
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Stats2: ({ heading, description, buttons, items, padding, sectionStyle, backgroundColor, }: Stats2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Stats2: ({ heading, description, buttons, items, styles, }: Stats2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/metrics-sections/stats-2/stats-2.js

@@ -7,16 +7,14 @@ const Stats2 = ({
   description,
   buttons,
   items = [],
-  padding,
-  sectionStyle,
-  backgroundColor
+  styles
 }) => {
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:justify-between", children: [
           /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/2", children: heading && /* @__PURE__ */ jsx("h2", { className: "max-w-xl text-4xl font-semibold tracking-tight text-foreground", children: heading }) }),
@@ -26,7 +24,6 @@ const Stats2 = ({
               CompoundButton,
               {
                 label: btn.label,
-                url: btn.url,
                 action: btn.action,
                 variant: btn.variant,
                 size: btn.size,

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, actionDefaults, backgroundColor, sectionStyle, padding, button } from "../../../puck-base/core/fields.js";
+import { buttons } from "../../../puck-base/core/fields.js";
 import { Stats3 } from "./stats-3.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: {
@@ -10,14 +11,7 @@ const conf = {
       type: "textarea",
       contentEditable: true
     },
-    primaryButton: {
-      type: "object",
-      objectFields: { ...button.objectFields }
-    },
-    secondaryButton: {
-      type: "object",
-      objectFields: { ...button.objectFields }
-    },
+    buttons,
     items: {
       type: "array",
       max: 6,
@@ -45,29 +39,25 @@ const conf = {
         description: "A brief description of what this statistic means."
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Real progress from personalized training",
     description: "We focus on measurable improvements and sustainable habits that fit your life.",
-    primaryButton: {
-      label: "Get started",
-      url: "#",
-      action: actionDefaults,
-      variant: "default",
-      size: "default",
-      icon: "none"
-    },
-    secondaryButton: {
-      label: "Learn more",
-      url: "#",
-      action: actionDefaults,
-      variant: "outline",
-      size: "default",
-      icon: "none"
-    },
+    buttons: [
+      {
+        label: "Get started",
+        variant: "default",
+        size: "default",
+        icon: "none"
+      },
+      {
+        label: "Learn more",
+        variant: "outline",
+        size: "default",
+        icon: "none"
+      }
+    ],
     items: [
       {
         metric: "100%",
@@ -85,7 +75,7 @@ const conf = {
         description: "Most clients see measurable strength and endurance improvements within the first month."
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Stats3
 };

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

@@ -1,17 +1,18 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface Stats3Props {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
-    primaryButton?: CompoundButtonProps;
-    secondaryButton?: CompoundButtonProps;
+    buttons?: CompoundButtonProps[];
     items: {
         metric: string;
         title: string;
         description: string;
     }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Stats3: ({ padding, sectionStyle, backgroundColor, heading, description, primaryButton, secondaryButton, items, }: Stats3Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Stats3: ({ heading, description, buttons, items, styles, }: Stats3Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/metrics-sections/stats-3/stats-3.js

@@ -8,30 +8,39 @@ const ITEM_STAGGER = {
   2: "lg:pt-8"
 };
 const Stats3 = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  primaryButton,
-  secondaryButton,
-  items = []
+  buttons = [],
+  items = [],
+  styles
 }) => {
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
         /* @__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: [
           /* @__PURE__ */ jsx("div", { className: "w-full lg:basis-1/2", children: heading && /* @__PURE__ */ jsx("h2", { className: "max-w-xl text-4xl font-semibold tracking-tight text-foreground", children: heading }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-8 lg:basis-1/2", children: [
             description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }),
-            ((primaryButton == null ? void 0 : primaryButton.label) || (secondaryButton == null ? void 0 : secondaryButton.label)) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row", children: [
-              (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(CompoundButton, { ...primaryButton }),
-              (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(CompoundButton, { ...secondaryButton })
-            ] })
+            buttons.some((button) => button == null ? void 0 : button.label) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 sm:flex-row", children: buttons.map(
+              (button, index) => (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx(
+                CompoundButton,
+                {
+                  label: button.label,
+                  action: button.action,
+                  variant: button.variant,
+                  size: button.size,
+                  icon: button.icon,
+                  type: button.type,
+                  disabled: button.disabled,
+                  className: button.className
+                },
+                index
+              ) : null
+            ) })
           ] })
         ] }) }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-6 sm:grid-cols-2 lg:grid-cols-3", children: items.map((item, index) => /* @__PURE__ */ jsx(

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

@@ -1,14 +1,16 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface ComparisonProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
-    columns?: Array<{
+    plans?: Array<{
         name: string;
         highlighted?: boolean;
         features: string[];
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Comparison: ({ padding, sectionStyle, backgroundColor, heading, description, columns, }: ComparisonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Comparison: ({ heading, description, plans, styles, }: ComparisonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/pricing-sections/comparison-1/comparison.js

@@ -2,51 +2,57 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const Comparison = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  columns = []
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-  /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-2xl text-center", 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 })
-  ] }),
-  /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "grid gap-6",
-        columns.length === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-3"
-      ),
-      children: columns.map((col, i) => /* @__PURE__ */ jsxs(
+  plans = [],
+  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: "mx-auto mb-12 max-w-2xl text-center", 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 })
+      ] }),
+      /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "rounded-xl border p-6",
-            col.highlighted ? "border-primary bg-primary/5 shadow-lg" : "border-border bg-card"
+            "grid gap-6",
+            plans.length === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-3"
           ),
-          children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-foreground mb-4 text-xl font-bold", children: col.name }),
-            /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: col.features.map((f, fi) => /* @__PURE__ */ jsxs(
-              "li",
-              {
-                className: "text-muted-foreground flex items-start gap-2",
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-primary mt-0.5", children: "✓" }),
-                  /* @__PURE__ */ jsx("span", { children: f })
-                ]
-              },
-              fi
-            )) })
-          ]
-        },
-        i
-      ))
-    }
-  )
-] });
+          children: plans.map((col, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "rounded-xl border p-6",
+                col.highlighted ? "border-primary bg-primary/5 shadow-lg" : "border-border bg-card"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-foreground mb-4 text-xl font-bold", children: col.name }),
+                /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: col.features.map((f, fi) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: "text-muted-foreground flex items-start gap-2",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-primary mt-0.5", children: "✓" }),
+                      /* @__PURE__ */ jsx("span", { children: f })
+                    ]
+                  },
+                  fi
+                )) })
+              ]
+            },
+            i
+          ))
+        }
+      )
+    ]
+  }
+);
 export {
   Comparison
 };

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

@@ -1,10 +1,10 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Comparison } from "./comparison.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    columns: {
+    plans: {
       type: "array",
       max: 4,
       getItemSummary: (item, i = 0) => item.name || `Column ${i + 1}`,
@@ -31,14 +31,12 @@ const conf = {
         features: ["Feature 1"]
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Compare Plans",
     description: "Choose the plan that best fits your needs.",
-    columns: [
+    plans: [
       {
         name: "Starter",
         highlighted: false,
@@ -60,7 +58,7 @@ const conf = {
         features: ["Everything in Pro", "SLA", "Dedicated Manager", "SSO"]
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Comparison
 };