dune-react 0.0.9 → 0.0.10

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

@@ -1,69 +1,71 @@
-import { paddingDefaults, image1x1Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { image1x1Placeholder, image, icon } from "../../../puck-base/core/fields.js";
 import { ContactUs2 } from "./contact-us-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const contactUs2StylesField = createStylesField({
+  imagePosition: {
+    type: "radio",
+    label: "Image Position",
+    options: [
+      { label: "Image Right", value: "end" },
+      { label: "Image Left", value: "start" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    nameLabel: { type: "text", contentEditable: true },
-    emailLabel: { type: "text", contentEditable: true },
-    phoneLabel: { type: "text", contentEditable: true },
-    companyLabel: { type: "text", contentEditable: true },
-    messageLabel: { type: "text", contentEditable: true },
-    button: {
-      type: "object",
-      objectFields: {
-        label: { type: "text" },
-        variant: {
-          type: "select",
-          options: [
-            { label: "Primary", value: "default" },
-            { label: "Secondary", value: "secondary" },
-            { label: "Outline", value: "outline" },
-            { label: "Ghost", value: "ghost" }
-          ]
-        },
-        size: {
-          type: "select",
-          options: [
-            { label: "Default", value: "default" },
-            { label: "Small", value: "sm" },
-            { label: "Large", value: "lg" }
-          ]
-        },
-        icon: {
-          type: "text"
-        }
-      }
+    fields: {
+      type: "array",
+      max: 10,
+      getItemSummary: (item, i = 0) => item.label || `Field ${i + 1}`,
+      arrayFields: {
+        label: { type: "text", contentEditable: true },
+        name: { type: "text" }
+      },
+      defaultItemProps: { label: "Field", name: "field" }
     },
-    image,
-    imagePosition: {
-      type: "radio",
+    submitLabel: { type: "text" },
+    submitVariant: {
+      type: "select",
+      options: [
+        { label: "Primary", value: "default" },
+        { label: "Secondary", value: "secondary" },
+        { label: "Outline", value: "outline" },
+        { label: "Ghost", value: "ghost" }
+      ]
+    },
+    submitSize: {
+      type: "select",
       options: [
-        { label: "Image Right", value: "end" },
-        { label: "Image Left", value: "start" }
+        { label: "Default", value: "default" },
+        { label: "Small", value: "sm" },
+        { label: "Large", value: "lg" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    submitIcon: icon,
+    image,
+    styles: contactUs2StylesField
   },
   defaultProps: {
     heading: "Ready to transform your fitness?",
     description: "Tell us about your goals and we'll reach out within 24 hours to schedule your first session.",
-    nameLabel: "Your Name",
-    emailLabel: "Email Address",
-    phoneLabel: "Phone",
-    companyLabel: "Company",
-    messageLabel: "Tell us about your fitness goals",
-    button: {
-      label: "Send Message",
-      variant: "default",
-      size: "default",
-      icon: "none"
-    },
+    fields: [
+      { label: "Your Name", name: "name" },
+      { label: "Email Address", name: "email" },
+      { label: "Phone", name: "phone" },
+      { label: "Company", name: "company" },
+      { label: "Tell us about your fitness goals", name: "message" }
+    ],
+    submitLabel: "Send Message",
+    submitVariant: "default",
+    submitSize: "default",
+    submitIcon: "none",
     image: image1x1Placeholder,
-    imagePosition: "end",
-    padding: paddingDefaults
+    styles: {
+      ...createStylesDefaults(),
+      imagePosition: "end"
+    }
   },
   render: ContactUs2
 };

package/dist/components/puck-block/contact-sections/contact-us-3/contact-us-3.d.ts

@@ -13,17 +13,20 @@ export interface ContactInfoItem {
 export interface ContactUs3Props {
     heading?: string;
     description?: string;
-    panelStyle?: "dark" | "primary" | "muted";
     infoItems?: ContactInfoItem[];
-    nameLabel?: string;
-    emailLabel?: string;
-    phoneLabel?: string;
-    companyLabel?: string;
-    subjectLabel?: string;
-    messageLabel?: string;
-    button?: ContactUs3Button;
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    fields?: Array<{
+        label: string;
+        name: string;
+    }>;
+    submitLabel?: string;
+    submitVariant?: string;
+    submitSize?: string;
+    submitIcon?: string;
+    styles?: {
+        panelStyle?: "dark" | "primary" | "muted";
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const ContactUs3: ({ heading, description, panelStyle, infoItems, nameLabel, emailLabel, phoneLabel, companyLabel, subjectLabel, messageLabel, button, padding, sectionStyle, backgroundColor, }: ContactUs3Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactUs3: ({ heading, description, infoItems, fields, submitLabel, submitVariant, submitSize, submitIcon, styles, }: ContactUs3Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/contact-sections/contact-us-3/contact-us-3.js

@@ -60,19 +60,24 @@ const PANEL_VARS = {
 const ContactUs3 = ({
   heading,
   description,
-  panelStyle = "dark",
   infoItems = [],
-  nameLabel = "Full Name",
-  emailLabel = "Email Address",
-  phoneLabel = "Phone",
-  companyLabel = "Company",
-  subjectLabel = "Subject",
-  messageLabel = "Your Message",
-  button,
-  padding,
-  sectionStyle,
-  backgroundColor
+  fields = [],
+  submitLabel,
+  submitVariant,
+  submitSize,
+  submitIcon,
+  styles
 }) => {
+  var _a, _b, _c, _d, _e, _f;
+  const panelStyle = (styles == null ? void 0 : styles.panelStyle) ?? "dark";
+  const labels = {
+    name: ((_a = fields.find((field) => field.name === "name")) == null ? void 0 : _a.label) ?? "Full Name",
+    email: ((_b = fields.find((field) => field.name === "email")) == null ? void 0 : _b.label) ?? "Email Address",
+    phone: ((_c = fields.find((field) => field.name === "phone")) == null ? void 0 : _c.label) ?? "Phone",
+    company: ((_d = fields.find((field) => field.name === "company")) == null ? void 0 : _d.label) ?? "Company",
+    subject: ((_e = fields.find((field) => field.name === "subject")) == null ? void 0 : _e.label) ?? "Subject",
+    message: ((_f = fields.find((field) => field.name === "message")) == null ? void 0 : _f.label) ?? "Your Message"
+  };
   const { isEditor: isEditorMode, siteId, domain } = useEditorContext();
   const [values, setValues] = useState({
     name: "",
@@ -114,9 +119,9 @@ ${values.message}` : values.message;
   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,
       className: "!p-0",
       children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 overflow-hidden rounded-2xl border border-border lg:grid-cols-5", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 p-8 lg:col-span-2 lg:p-10 xl:p-12", vars.wrapper), children: [
@@ -136,7 +141,7 @@ ${values.message}` : values.message;
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-5 sm:grid-cols-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ jsxs(Label, { htmlFor: "cu3-name", className: "text-sm font-medium", children: [
-                nameLabel,
+                labels.name,
                 " ",
                 /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "*" })
               ] }),
@@ -153,7 +158,7 @@ ${values.message}` : values.message;
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ jsxs(Label, { htmlFor: "cu3-email", className: "text-sm font-medium", children: [
-                emailLabel,
+                labels.email,
                 " ",
                 /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "*" })
               ] }),
@@ -171,7 +176,7 @@ ${values.message}` : values.message;
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-5 sm:grid-cols-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: "cu3-phone", className: "text-sm font-medium", children: phoneLabel }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: "cu3-phone", className: "text-sm font-medium", children: labels.phone }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -183,7 +188,7 @@ ${values.message}` : values.message;
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: "cu3-company", className: "text-sm font-medium", children: companyLabel }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: "cu3-company", className: "text-sm font-medium", children: labels.company }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -196,7 +201,7 @@ ${values.message}` : values.message;
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "cu3-subject", className: "text-sm font-medium", children: subjectLabel }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "cu3-subject", className: "text-sm font-medium", children: labels.subject }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -209,7 +214,7 @@ ${values.message}` : values.message;
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
             /* @__PURE__ */ jsxs(Label, { htmlFor: "cu3-message", className: "text-sm font-medium", children: [
-              messageLabel,
+              labels.message,
               " ",
               /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "*" })
             ] }),
@@ -227,10 +232,10 @@ ${values.message}` : values.message;
           /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(
             CompoundButton,
             {
-              label: submitting ? "Sending..." : (button == null ? void 0 : button.label) ?? "Send Message",
-              variant: (button == null ? void 0 : button.variant) ?? "default",
-              size: (button == null ? void 0 : button.size) ?? "default",
-              icon: submitting ? "loader" : (button == null ? void 0 : button.icon) ?? "send",
+              label: submitting ? "Sending..." : submitLabel ?? "Send Message",
+              variant: submitVariant ?? "default",
+              size: submitSize ?? "default",
+              icon: submitting ? "loader" : submitIcon ?? "send",
               type: "submit",
               disabled: submitting
             }

package/dist/components/puck-block/contact-sections/contact-us-3/index.js

@@ -1,24 +1,35 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
+import { icon } from "../../../puck-base/core/fields.js";
 import { ContactUs3 } from "./contact-us-3.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultInfoItems = [
   { icon: "phone", label: "Phone", value: "+1 (555) 000-0000" },
   { icon: "mail", label: "Email", value: "hello@mybusiness.com" },
-  { icon: "map-pin", label: "Address", value: "123 Main Street\nNew York, NY 10001" },
-  { icon: "clock", label: "Hours", value: "Mon–Fri: 9am–6pm\nSat: 10am–4pm" }
+  {
+    icon: "map-pin",
+    label: "Address",
+    value: "123 Main Street\nNew York, NY 10001"
+  },
+  {
+    icon: "clock",
+    label: "Hours",
+    value: "Mon–Fri: 9am–6pm\nSat: 10am–4pm"
+  }
 ];
+const contactUs3StylesField = createStylesField({
+  panelStyle: {
+    type: "radio",
+    label: "Panel Style",
+    options: [
+      { label: "Dark", value: "dark" },
+      { label: "Primary", value: "primary" },
+      { label: "Muted", value: "muted" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading: { type: "textarea", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    panelStyle: {
-      type: "radio",
-      label: "Panel Style",
-      options: [
-        { label: "Dark", value: "dark" },
-        { label: "Primary", value: "primary" },
-        { label: "Muted", value: "muted" }
-      ]
-    },
     infoItems: {
       type: "array",
       min: 0,
@@ -38,61 +49,63 @@ const conf = {
         label: { type: "text", contentEditable: true },
         value: { type: "textarea", contentEditable: true }
       },
-      defaultItemProps: { icon: "phone", label: "Phone", value: "+1 (555) 000-0000" }
-    },
-    nameLabel: { type: "text", contentEditable: true },
-    emailLabel: { type: "text", contentEditable: true },
-    phoneLabel: { type: "text", contentEditable: true },
-    companyLabel: { type: "text", contentEditable: true },
-    subjectLabel: { type: "text", contentEditable: true },
-    messageLabel: { type: "text", contentEditable: true },
-    button: {
-      type: "object",
-      label: "Submit Button",
-      objectFields: {
-        label: { type: "text" },
-        variant: {
-          type: "select",
-          options: [
-            { label: "Primary", value: "default" },
-            { label: "Secondary", value: "secondary" },
-            { label: "Outline", value: "outline" },
-            { label: "Ghost", value: "ghost" }
-          ]
-        },
-        size: {
-          type: "select",
-          options: [
-            { label: "Default", value: "default" },
-            { label: "Small", value: "sm" },
-            { label: "Large", value: "lg" }
-          ]
-        },
-        icon: { type: "text" }
+      defaultItemProps: {
+        icon: "phone",
+        label: "Phone",
+        value: "+1 (555) 000-0000"
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    fields: {
+      type: "array",
+      max: 10,
+      getItemSummary: (item, i = 0) => item.label || `Field ${i + 1}`,
+      arrayFields: {
+        label: { type: "text", contentEditable: true },
+        name: { type: "text" }
+      },
+      defaultItemProps: { label: "Field", name: "field" }
+    },
+    submitLabel: { type: "text" },
+    submitVariant: {
+      type: "select",
+      options: [
+        { label: "Primary", value: "default" },
+        { label: "Secondary", value: "secondary" },
+        { label: "Outline", value: "outline" },
+        { label: "Ghost", value: "ghost" }
+      ]
+    },
+    submitSize: {
+      type: "select",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Small", value: "sm" },
+        { label: "Large", value: "lg" }
+      ]
+    },
+    submitIcon: icon,
+    styles: contactUs3StylesField
   },
   defaultProps: {
     heading: "Let's start a\nconversation",
     description: "Have a question or ready to get started? Fill out the form and we'll get back to you within 24 hours.",
-    panelStyle: "dark",
     infoItems: defaultInfoItems,
-    nameLabel: "Full Name",
-    emailLabel: "Email Address",
-    phoneLabel: "Phone",
-    companyLabel: "Company",
-    subjectLabel: "Subject",
-    messageLabel: "Your Message",
-    button: {
-      label: "Send Message",
-      variant: "default",
-      size: "default",
-      icon: "send"
-    },
-    padding: paddingDefaults
+    fields: [
+      { label: "Full Name", name: "name" },
+      { label: "Email Address", name: "email" },
+      { label: "Phone", name: "phone" },
+      { label: "Company", name: "company" },
+      { label: "Subject", name: "subject" },
+      { label: "Your Message", name: "message" }
+    ],
+    submitLabel: "Send Message",
+    submitVariant: "default",
+    submitSize: "default",
+    submitIcon: "send",
+    styles: {
+      ...createStylesDefaults(),
+      panelStyle: "dark"
+    }
   },
   render: ContactUs3
 };

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

@@ -0,0 +1,65 @@
+type ContactVariant = "contact-us-1" | "contact-us-2" | "contact-us-3";
+type ContactPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type ContactSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type ContactBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+};
+type ContactButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type ContactFeature = {
+    icon?: string;
+    name?: string;
+    description?: string;
+};
+type ContactField = {
+    label: string;
+    name: string;
+    type?: "text" | "email" | "tel" | "number" | "date" | "url" | "file" | "textarea" | "select";
+    options?: string[];
+    required?: boolean;
+    half?: boolean;
+};
+type ContactImage = {
+    src: string;
+    alt?: string;
+};
+type ContactInfoItem = {
+    icon?: "phone" | "mail" | "map-pin" | "clock" | string;
+    label: string;
+    value: string;
+};
+type ContactSectionProps = {
+    variant?: ContactVariant;
+    heading?: string;
+    description?: string;
+    badge?: ContactBadge;
+    features?: ContactFeature[];
+    buttons?: ContactButton[];
+    formTitle?: string;
+    fields?: ContactField[];
+    action?: string;
+    method?: "get" | "post" | "dialog";
+    submitLabel?: string;
+    submitVariant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    submitSize?: "default" | "sm" | "lg" | "icon";
+    submitIcon?: string;
+    image?: ContactImage;
+    infoItems?: ContactInfoItem[];
+    styles?: {
+        padding?: ContactPadding;
+        sectionStyle?: ContactSectionStyle;
+        backgroundColor?: string;
+        imagePosition?: "start" | "end";
+        panelStyle?: "dark" | "primary" | "muted";
+    };
+};

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

@@ -1,14 +1,17 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface BannerCtaProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
-    ctaLabel?: string;
-    ctaUrl?: string;
-    secondaryLabel?: string;
-    secondaryUrl?: string;
-    variant?: "primary" | "dark" | "gradient";
+    buttons?: Array<{
+        label: string;
+        url?: string;
+        variant?: string;
+    }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        visualVariant?: "primary" | "dark" | "gradient";
+    };
 }
-export declare const BannerCta: ({ padding, sectionStyle, backgroundColor, heading, description, ctaLabel, ctaUrl, secondaryLabel, secondaryUrl, variant, }: BannerCtaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BannerCta: ({ heading, description, buttons, styles, }: BannerCtaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/cta-sections/banner-cta-1/banner-cta.js

@@ -7,38 +7,35 @@ const variantStyles = {
   gradient: "bg-gradient-to-r from-primary to-primary/70 text-primary-foreground"
 };
 const BannerCta = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading = "Ready to get started?",
   description,
-  ctaLabel = "Get started",
-  ctaUrl = "#",
-  secondaryLabel,
-  secondaryUrl,
-  variant = "primary"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: `rounded-2xl px-8 py-14 text-center ${variantStyles[variant] ?? variantStyles.primary}`, children: [
-  heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: heading }),
-  description && /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg opacity-90 max-w-2xl mx-auto", children: description }),
-  /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-4", children: [
-    /* @__PURE__ */ jsx(
-      CompoundButton,
-      {
-        label: ctaLabel,
-        url: ctaUrl,
-        variant: "secondary"
-      }
-    ),
-    secondaryLabel && secondaryUrl && /* @__PURE__ */ jsx(
-      CompoundButton,
-      {
-        label: secondaryLabel,
-        url: secondaryUrl,
-        variant: "outline"
-      }
-    )
-  ] })
-] }) });
+  buttons = [],
+  styles
+}) => {
+  var _a, _b, _c, _d, _e;
+  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: `rounded-2xl px-8 py-14 text-center ${variantStyles[(styles == null ? void 0 : styles.visualVariant) ?? "primary"] ?? variantStyles.primary}`, children: [
+    heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: heading }),
+    description && /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg opacity-90 max-w-2xl mx-auto", children: description }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-4", children: [
+      /* @__PURE__ */ jsx(
+        CompoundButton,
+        {
+          label: ((_a = buttons[0]) == null ? void 0 : _a.label) ?? "Get started",
+          url: ((_b = buttons[0]) == null ? void 0 : _b.url) ?? "#",
+          variant: ((_c = buttons[0]) == null ? void 0 : _c.variant) ?? "secondary"
+        }
+      ),
+      ((_d = buttons[1]) == null ? void 0 : _d.label) && ((_e = buttons[1]) == null ? void 0 : _e.url) && /* @__PURE__ */ jsx(
+        CompoundButton,
+        {
+          label: buttons[1].label,
+          url: buttons[1].url,
+          variant: buttons[1].variant ?? "outline"
+        }
+      )
+    ] })
+  ] }) });
+};
 export {
   BannerCta
 };

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

@@ -1,35 +1,33 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { BannerCta } from "./banner-cta.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const bannerCtaStylesField = createStylesField({
+  visualVariant: {
+    type: "select",
+    label: "Background Variant",
+    options: [
+      { label: "Primary Color", value: "primary" },
+      { label: "Dark", value: "dark" },
+      { label: "Gradient", value: "gradient" }
+    ]
+  }
+});
 const conf = {
   fields: {
-    heading: { type: "text", contentEditable: true },
-    description: { type: "textarea", contentEditable: true },
-    ctaLabel: { type: "text", contentEditable: true },
-    ctaUrl: { type: "text" },
-    secondaryLabel: { type: "text", contentEditable: true },
-    secondaryUrl: { type: "text" },
-    variant: {
-      type: "select",
-      label: "Background Variant",
-      options: [
-        { label: "Primary Color", value: "primary" },
-        { label: "Dark", value: "dark" },
-        { label: "Gradient", value: "gradient" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    ...contentFields,
+    styles: bannerCtaStylesField
   },
   defaultProps: {
     heading: "Ready to transform your workflow?",
     description: "Join thousands of teams already using our platform to ship faster and smarter.",
-    ctaLabel: "Get started free",
-    ctaUrl: "#",
-    secondaryLabel: "Talk to sales",
-    secondaryUrl: "#",
-    variant: "primary",
-    padding: paddingDefaults
+    buttons: [
+      { label: "Get started free", url: "#", variant: "secondary" },
+      { label: "Talk to sales", url: "#", variant: "outline" }
+    ],
+    styles: {
+      ...createStylesDefaults(),
+      visualVariant: "primary"
+    }
   },
   render: BannerCta
 };