dune-react 0.0.9 → 0.0.11

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

@@ -1,15 +1,16 @@
 import { Pricing } from "./pricing.js";
-import { paddingDefaults, backgroundColor, sectionStyle, padding, features, button, contentFields } from "../../../puck-base/core/fields.js";
+import { features, button, contentFields } from "../../../puck-base/core/fields.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
-    tiers: {
+    plans: {
       type: "array",
       getItemSummary: (item, index = 0) => item.name || `Tier ${index + 1}`,
       arrayFields: {
         name: { type: "text", contentEditable: true },
         description: { type: "textarea", contentEditable: true },
-        cost: { type: "text", contentEditable: true },
+        price: { type: "text", contentEditable: true },
         cycle: { type: "text", contentEditable: true },
         features,
         button
@@ -17,12 +18,11 @@ const conf = {
       defaultItemProps: {
         name: "Plan / product / pricing tier name",
         description: "Product description",
-        cost: "$50",
+        price: "$50",
         cycle: "month",
         features: [features.defaultItemProps],
         button: {
           label: "Choose",
-          url: "#",
           variant: "default",
           size: "default",
           icon: "arrow-right"
@@ -31,12 +31,9 @@ const conf = {
       min: 1,
       max: 3
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
-    padding: paddingDefaults,
     badge: {
       label: "Platform",
       url: "",
@@ -45,10 +42,10 @@ const conf = {
     heading: "Something new!",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
     buttons: [],
-    tiers: Array.from({ length: 3 }).map((_, index) => ({
+    plans: Array.from({ length: 3 }).map((_, index) => ({
       name: `Plan ${index + 1}`,
       description: "Our goal is to streamline SMB trade, making it easier and faster than ever for everyone and everywhere.",
-      cost: "$40",
+      price: "$40",
       cycle: "month",
       features: Array.from({ length: 3 }).map((_2, index2) => ({
         icon: "check",
@@ -57,12 +54,12 @@ const conf = {
       })),
       button: {
         label: "Sign up today",
-        url: "#",
         icon: "arrow-right",
         variant: "outline",
         size: "default"
       }
-    }))
+    })),
+    styles: createStylesDefaults()
   },
   render: Pricing
 };

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

@@ -3,17 +3,19 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 import { Feature } from "@/components/puck-base/core/types";
 export interface PricingProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    tiers: {
+    plans: {
         name: string;
         description: string;
-        cost: string;
+        price: string;
         cycle: string;
         features: Feature[];
         button: CompoundButtonProps;
     }[];
-    className?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        className?: string;
+    };
 }
 export declare const Pricing: (props: PricingProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,43 +4,55 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 import DynamicIcon from "../../../../node_modules/.pnpm/lucide-react@0.540.0_react@19.2.4/node_modules/lucide-react/dist/esm/DynamicIcon.js";
-const Pricing = (props) => /* @__PURE__ */ jsx(CompoundContainer, { padding: props.padding, sectionStyle: props.sectionStyle, backgroundColor: props.backgroundColor, className: props.className, children: /* @__PURE__ */ jsxs("div", { children: [
-  /* @__PURE__ */ jsx(
-    CompoundContent,
+const Pricing = (props) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      badge: props.badge,
-      heading: props.heading,
-      description: props.description,
-      buttons: props.buttons,
-      alignContent: "center",
-      spacing: "tight"
+      padding: (_a = props.styles) == null ? void 0 : _a.padding,
+      sectionStyle: (_b = props.styles) == null ? void 0 : _b.sectionStyle,
+      backgroundColor: (_c = props.styles) == null ? void 0 : _c.backgroundColor,
+      className: (_d = props.styles) == null ? void 0 : _d.className,
+      children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          CompoundContent,
+          {
+            badge: props.badge,
+            heading: props.heading,
+            description: props.description,
+            buttons: props.buttons,
+            alignContent: "center",
+            spacing: "tight"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-8 pt-20 text-left lg:grid-cols-3", children: (props.plans ?? []).map((tier, index) => /* @__PURE__ */ jsxs(Card, { className: "w-full rounded-md shadow", children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("span", { className: "flex flex-row items-center gap-4 font-normal", children: tier.name }) }),
+            /* @__PURE__ */ jsx(CardDescription, { children: tier.description })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-start gap-8", children: [
+            /* @__PURE__ */ jsxs("p", { className: "flex flex-row items-center gap-2 text-xl", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-4xl", children: tier.price }),
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
+                " ",
+                "/ ",
+                tier.cycle
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-start gap-4", children: (tier.features ?? []).map((feature, index2) => /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+              feature.icon && feature.icon !== "none" ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.icon }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx("p", { children: feature.name }),
+                feature.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: feature.description }) : null
+              ] })
+            ] }, index2)) }),
+            /* @__PURE__ */ jsx(CompoundButton, { ...tier.button })
+          ] }) })
+        ] }, index)) })
+      ] })
     }
-  ),
-  /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-8 pt-20 text-left lg:grid-cols-3", children: (props.tiers ?? []).map((tier, index) => /* @__PURE__ */ jsxs(Card, { className: "w-full rounded-md shadow", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("span", { className: "flex flex-row items-center gap-4 font-normal", children: tier.name }) }),
-      /* @__PURE__ */ jsx(CardDescription, { children: tier.description })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-start gap-8", children: [
-      /* @__PURE__ */ jsxs("p", { className: "flex flex-row items-center gap-2 text-xl", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-4xl", children: tier.cost }),
-        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
-          " ",
-          "/ ",
-          tier.cycle
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-start gap-4", children: (tier.features ?? []).map((feature, index2) => /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
-        feature.icon && feature.icon !== "none" ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.icon }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx("p", { children: feature.name }),
-          feature.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: feature.description }) : null
-        ] })
-      ] }, index2)) }),
-      /* @__PURE__ */ jsx(CompoundButton, { ...tier.button })
-    ] }) })
-  ] }, index)) })
-] }) });
+  );
+};
 export {
   Pricing
 };

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

@@ -1,10 +1,11 @@
 import { Pricing2 } from "./pricing-2.js";
-import { paddingDefaults, backgroundColor, sectionStyle, padding, button } from "../../../puck-base/core/fields.js";
+import { button } from "../../../puck-base/core/fields.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    tiers: {
+    plans: {
       type: "array",
       getItemSummary: (item, index = 0) => item.title || `Tier ${index + 1}`,
       arrayFields: {
@@ -49,7 +50,6 @@ const conf = {
         period: "per month",
         button: {
           label: "Get started",
-          url: "#",
           variant: "outline",
           size: "default",
           icon: "none"
@@ -65,15 +65,12 @@ const conf = {
       min: 1,
       max: 4
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
-    padding: paddingDefaults,
     heading: "Training plans tailored to you",
     description: "Choose the package that fits your goals. Start with one session or commit to a program.",
-    tiers: [
+    plans: [
       {
         badgeLabel: "",
         title: "Single Session",
@@ -82,7 +79,6 @@ const conf = {
         period: "per session",
         button: {
           label: "Schedule a session",
-          url: "#",
           variant: "outline",
           size: "default",
           icon: "none"
@@ -104,7 +100,6 @@ const conf = {
         period: "per month",
         button: {
           label: "Start your program",
-          url: "#",
           variant: "default",
           size: "default",
           icon: "none"
@@ -127,7 +122,6 @@ const conf = {
         period: "per month",
         button: {
           label: "Join the intensive",
-          url: "#",
           variant: "outline",
           size: "default",
           icon: "none"
@@ -143,7 +137,8 @@ const conf = {
         ],
         isFeatured: false
       }
-    ]
+    ],
+    styles: createStylesDefaults()
   },
   render: Pricing2
 };

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

@@ -16,9 +16,11 @@ export interface PricingTierItem {
 export interface Pricing2Props {
     heading: string;
     description: string;
-    tiers: PricingTierItem[];
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    plans: PricingTierItem[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
 export declare const Pricing2: (props: Pricing2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/pricing-sections/pricing-2/pricing-2.js

@@ -3,66 +3,69 @@ import { Check } from "lucide-react";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
-const Pricing2 = (props) => /* @__PURE__ */ jsx(
-  CompoundContainer,
-  {
-    padding: props.padding,
-    sectionStyle: props.sectionStyle,
-    backgroundColor: props.backgroundColor,
-    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-14", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex max-w-2xl flex-col items-center gap-4 text-center", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-foreground text-balance text-4xl font-bold tracking-tight", children: props.heading }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed", children: props.description })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-7xl grid-cols-1 gap-6 lg:grid-cols-3", children: (props.tiers ?? []).map((tier, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-col", tier.isFeatured && "lg:-mt-8"),
-          children: /* @__PURE__ */ jsxs("div", { className: "bg-foreground/5 flex h-full flex-col gap-6 overflow-hidden rounded-3xl px-1 pt-1 pb-8", children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "bg-foreground/5 flex w-full flex-col gap-2 rounded-3xl px-8 py-7",
-                  tier.isFeatured ? "min-h-44" : "min-h-36"
-                ),
-                children: [
-                  tier.badgeLabel && /* @__PURE__ */ jsx("div", { className: "w-fit rounded-full bg-foreground px-2.5 py-1", children: /* @__PURE__ */ jsx("span", { className: "text-background text-xs font-medium", children: tier.badgeLabel }) }),
-                  /* @__PURE__ */ jsx("h3", { className: "text-foreground text-xl font-semibold", children: tier.title }),
-                  /* @__PURE__ */ jsx("p", { className: "text-foreground/70 text-sm", children: tier.description })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 px-8", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-foreground text-4xl font-bold", children: tier.price }),
-                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: tier.period })
+const Pricing2 = (props) => {
+  var _a, _b, _c;
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding: (_a = props.styles) == null ? void 0 : _a.padding,
+      sectionStyle: (_b = props.styles) == null ? void 0 : _b.sectionStyle,
+      backgroundColor: (_c = props.styles) == null ? void 0 : _c.backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-14", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex max-w-2xl flex-col items-center gap-4 text-center", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-foreground text-balance text-4xl font-bold tracking-tight", children: props.heading }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed", children: props.description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-7xl grid-cols-1 gap-6 lg:grid-cols-3", children: (props.plans ?? []).map((tier, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex flex-col", tier.isFeatured && "lg:-mt-8"),
+            children: /* @__PURE__ */ jsxs("div", { className: "bg-foreground/5 flex h-full flex-col gap-6 overflow-hidden rounded-3xl px-1 pt-1 pb-8", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "bg-foreground/5 flex w-full flex-col gap-2 rounded-3xl px-8 py-7",
+                    tier.isFeatured ? "min-h-44" : "min-h-36"
+                  ),
+                  children: [
+                    tier.badgeLabel && /* @__PURE__ */ jsx("div", { className: "w-fit rounded-full bg-foreground px-2.5 py-1", children: /* @__PURE__ */ jsx("span", { className: "text-background text-xs font-medium", children: tier.badgeLabel }) }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-foreground text-xl font-semibold", children: tier.title }),
+                    /* @__PURE__ */ jsx("p", { className: "text-foreground/70 text-sm", children: tier.description })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 px-8", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-foreground text-4xl font-bold", children: tier.price }),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: tier.period })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    CompoundButton,
+                    {
+                      ...tier.button,
+                      className: cn("w-full", tier.button.className)
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ jsx(
-                  CompoundButton,
-                  {
-                    ...tier.button,
-                    className: cn("w-full", tier.button.className)
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "bg-border h-px w-full" }),
-                tier.featuresLabel && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium uppercase tracking-wider", children: tier.featuresLabel }),
-                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: (tier.features ?? []).map((feature, fi) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(Check, { className: "text-foreground h-4 w-4 shrink-0" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm", children: feature.title })
-                ] }, fi)) })
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "bg-border h-px w-full" }),
+                  tier.featuresLabel && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium uppercase tracking-wider", children: tier.featuresLabel }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: (tier.features ?? []).map((feature, fi) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(Check, { className: "text-foreground h-4 w-4 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm", children: feature.title })
+                  ] }, fi)) })
+                ] })
               ] })
             ] })
-          ] })
-        },
-        index
-      )) })
-    ] })
-  }
-);
+          },
+          index
+        )) })
+      ] })
+    }
+  );
+};
 export {
   Pricing2
 };

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

@@ -0,0 +1,46 @@
+type PricingVariant = "comparison-1" | "pricing-1" | "pricing-2";
+type PricingPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type PricingSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type PricingBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+};
+type PricingButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type PricingFeature = string | {
+    name: string;
+    description?: string;
+    icon?: string;
+};
+type PricingPlan = {
+    name: string;
+    description?: string;
+    price?: string;
+    cycle?: string;
+    features?: PricingFeature[];
+    button?: PricingButton;
+    highlighted?: boolean;
+};
+type PricingSectionProps = {
+    variant?: PricingVariant;
+    badge?: PricingBadge;
+    heading?: string;
+    description?: string;
+    buttons?: PricingButton[];
+    plans?: PricingPlan[];
+    styles?: {
+        padding?: PricingPadding;
+        sectionStyle?: PricingSectionStyle;
+        backgroundColor?: string;
+        className?: string;
+    };
+};

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

@@ -4,10 +4,7 @@ export interface BeforeAfterItem {
     text: string;
 }
 export interface BeforeAfterProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    kicker?: string;
+    eyebrow?: string;
     heading?: string;
     description?: string;
     beforeLabel?: string;
@@ -16,5 +13,10 @@ export interface BeforeAfterProps {
     afterItems?: BeforeAfterItem[];
     button?: CompoundButtonProps;
     layout?: "side-by-side" | "stacked";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const BeforeAfter: ({ padding, sectionStyle, backgroundColor, kicker, heading, description, beforeLabel, beforeItems, afterLabel, afterItems, button, layout, }: BeforeAfterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BeforeAfter: ({ eyebrow, heading, description, beforeLabel, beforeItems, afterLabel, afterItems, button, layout, styles, }: BeforeAfterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,10 +5,7 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { X, Check } from "lucide-react";
 const BeforeAfter = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
-  kicker,
+  eyebrow,
   heading,
   description,
   beforeLabel = "Before",
@@ -16,16 +13,17 @@ const BeforeAfter = ({
   afterLabel = "After",
   afterItems = [],
   button,
-  layout = "side-by-side"
+  layout = "side-by-side",
+  styles
 }) => /* @__PURE__ */ jsxs(
   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: [
-      (kicker || heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
-        kicker && /* @__PURE__ */ jsx("p", { className: "text-primary text-sm font-semibold uppercase tracking-widest mb-3", children: kicker }),
+      (eyebrow || heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: "text-primary text-sm font-semibold uppercase tracking-widest mb-3", children: eyebrow }),
         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/showcase-sections/before-after-1/index.js

@@ -1,8 +1,9 @@
-import { paddingDefaults, actionDefaults, backgroundColor, sectionStyle, padding, button } from "../../../puck-base/core/fields.js";
+import { actionDefaults, button } from "../../../puck-base/core/fields.js";
 import { BeforeAfter } from "./before-after.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
-    kicker: { type: "text", contentEditable: true },
+    eyebrow: { type: "text", contentEditable: true },
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
     layout: {
@@ -34,12 +35,10 @@ const conf = {
       defaultItemProps: { text: "Benefit or new way of doing things" }
     },
     button,
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
-    kicker: "Why choose us",
+    eyebrow: "Why choose us",
     heading: "The old way vs. the better way",
     description: "See exactly what changes when you switch to a smarter solution.",
     layout: "side-by-side",
@@ -59,13 +58,12 @@ const conf = {
     ],
     button: {
       label: "Get started free",
-      url: "#",
       action: actionDefaults,
       variant: "default",
       size: "lg",
       icon: "arrow-right"
     },
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: BeforeAfter
 };

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

@@ -1,6 +1,5 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface CaseStudyProps {
-    padding?: CompoundContainerProps["padding"];
     heading?: string;
     description?: string;
     stats?: Array<{
@@ -13,5 +12,10 @@ export interface CaseStudyProps {
         src: string;
         alt: string;
     };
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const CaseStudy: ({ padding, heading, description, stats, quote, author, logo, }: CaseStudyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CaseStudy: ({ heading, description, stats, quote, author, logo, styles, }: CaseStudyProps) => import("react/jsx-runtime").JSX.Element;