dune-react 0.0.8 → 0.0.10

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

@@ -0,0 +1,74 @@
+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 },
+    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,
+    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.",
+    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,
+    styles: {
+      ...createStylesDefaults(),
+      imagePosition: "end"
+    }
+  },
+  render: ContactUs2
+};
+export {
+  conf
+};

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

@@ -0,0 +1,32 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface ContactUs3Button {
+    label: string;
+    variant?: string;
+    size?: string;
+    icon?: string;
+}
+export interface ContactInfoItem {
+    icon: "phone" | "mail" | "map-pin" | "clock";
+    label: string;
+    value: string;
+}
+export interface ContactUs3Props {
+    heading?: string;
+    description?: string;
+    infoItems?: ContactInfoItem[];
+    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, 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

@@ -0,0 +1,250 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { toast } from "sonner";
+import { cn } from "../../../../utils/css-utils.js";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { Input } from "../../../shadcn/input.js";
+import { Label } from "../../../shadcn/label.js";
+import { Textarea } from "../../../shadcn/textarea.js";
+import { useEditorContext } from "../../../puck-base/editor-context.js";
+import { submitFormLead } from "../api/form-leads.js";
+const ICON_PATHS = {
+  phone: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 14a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.62 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 10.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17.92Z",
+  mail: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6",
+  "map-pin": "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z M12 6v6l4 2"
+};
+const InfoIcon = ({ type }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "shrink-0",
+    children: /* @__PURE__ */ jsx("path", { d: ICON_PATHS[type] })
+  }
+);
+const PANEL_VARS = {
+  dark: {
+    wrapper: "bg-foreground text-background",
+    heading: "text-background",
+    desc: "text-background/70",
+    iconBox: "bg-background/10",
+    label: "text-background/50",
+    value: "text-background"
+  },
+  primary: {
+    wrapper: "bg-primary text-primary-foreground",
+    heading: "text-primary-foreground",
+    desc: "text-primary-foreground/75",
+    iconBox: "bg-primary-foreground/15",
+    label: "text-primary-foreground/55",
+    value: "text-primary-foreground"
+  },
+  muted: {
+    wrapper: "bg-muted text-foreground",
+    heading: "text-foreground",
+    desc: "text-muted-foreground",
+    iconBox: "bg-background",
+    label: "text-muted-foreground",
+    value: "text-foreground"
+  }
+};
+const ContactUs3 = ({
+  heading,
+  description,
+  infoItems = [],
+  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: "",
+    email: "",
+    phone: "",
+    company: "",
+    subject: "",
+    message: ""
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const vars = PANEL_VARS[panelStyle];
+  const setValue = (field) => (e) => setValues((prev) => ({ ...prev, [field]: e.target.value }));
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (isEditorMode) return;
+    const subjectTrim = values.subject.trim();
+    const messageForApi = subjectTrim ? `${subjectTrim}
+
+${values.message}` : values.message;
+    setSubmitting(true);
+    try {
+      await submitFormLead(domain, {
+        site_id: siteId,
+        name: values.name || "",
+        email: values.email || "",
+        phone: values.phone || "",
+        message: messageForApi || "",
+        source_page: typeof window !== "undefined" ? window.location.pathname : ""
+      });
+      toast.success("Message sent successfully!");
+      setValues({ name: "", email: "", phone: "", company: "", subject: "", message: "" });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to send message";
+      toast.error(msg);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      className: "!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: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+            heading && /* @__PURE__ */ jsx("h2", { className: cn("font-serif text-3xl leading-tight tracking-tighter xl:text-4xl", vars.heading), children: heading }),
+            description && /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-relaxed", vars.desc), children: description })
+          ] }),
+          infoItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: infoItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", vars.iconBox), children: /* @__PURE__ */ jsx(InfoIcon, { type: item.icon }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("text-xs font-medium uppercase tracking-wide", vars.label), children: item.label }),
+              /* @__PURE__ */ jsx("span", { className: cn("whitespace-pre-line text-sm font-medium", vars.value), children: item.value })
+            ] })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center p-8 lg:col-span-3 lg:p-10 xl:p-12", children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-5", onSubmit: handleSubmit, children: [
+          /* @__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: [
+                labels.name,
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "cu3-name",
+                  type: "text",
+                  required: true,
+                  value: values.name,
+                  onChange: setValue("name")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxs(Label, { htmlFor: "cu3-email", className: "text-sm font-medium", children: [
+                labels.email,
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "cu3-email",
+                  type: "email",
+                  required: true,
+                  value: values.email,
+                  onChange: setValue("email")
+                }
+              )
+            ] })
+          ] }),
+          /* @__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: labels.phone }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "cu3-phone",
+                  type: "tel",
+                  value: values.phone,
+                  onChange: setValue("phone")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "cu3-company", className: "text-sm font-medium", children: labels.company }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "cu3-company",
+                  type: "text",
+                  value: values.company,
+                  onChange: setValue("company")
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "cu3-subject", className: "text-sm font-medium", children: labels.subject }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "cu3-subject",
+                type: "text",
+                value: values.subject,
+                onChange: setValue("subject")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "cu3-message", className: "text-sm font-medium", children: [
+              labels.message,
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: "cu3-message",
+                required: true,
+                className: "min-h-36 resize-y",
+                value: values.message,
+                onChange: setValue("message")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(
+            CompoundButton,
+            {
+              label: submitting ? "Sending..." : submitLabel ?? "Send Message",
+              variant: submitVariant ?? "default",
+              size: submitSize ?? "default",
+              icon: submitting ? "loader" : submitIcon ?? "send",
+              type: "submit",
+              disabled: submitting
+            }
+          ) })
+        ] }) })
+      ] })
+    }
+  );
+};
+export {
+  ContactUs3
+};

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

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { ContactUs3Props } from "./contact-us-3";
+export type { ContactUs3Props };
+export declare const conf: ComponentConfig<ContactUs3Props>;
+export default conf;

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

@@ -0,0 +1,114 @@
+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"
+  }
+];
+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 },
+    infoItems: {
+      type: "array",
+      min: 0,
+      max: 6,
+      getItemSummary: (item, index = 0) => item.label || `Info ${index + 1}`,
+      arrayFields: {
+        icon: {
+          type: "select",
+          label: "Icon",
+          options: [
+            { label: "Phone", value: "phone" },
+            { label: "Email", value: "mail" },
+            { label: "Location", value: "map-pin" },
+            { label: "Clock", value: "clock" }
+          ]
+        },
+        label: { type: "text", contentEditable: true },
+        value: { type: "textarea", contentEditable: true }
+      },
+      defaultItemProps: {
+        icon: "phone",
+        label: "Phone",
+        value: "+1 (555) 000-0000"
+      }
+    },
+    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.",
+    infoItems: defaultInfoItems,
+    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
+};
+export {
+  conf
+};

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

@@ -1,43 +1,41 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
 const variantStyles = {
   primary: "bg-primary text-primary-foreground",
   dark: "bg-foreground text-background",
   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(
-      "a",
-      {
-        href: ctaUrl,
-        className: "inline-flex items-center rounded-full bg-background text-foreground px-8 py-3 text-sm font-semibold shadow hover:opacity-90 transition-opacity",
-        children: ctaLabel
-      }
-    ),
-    secondaryLabel && secondaryUrl && /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: secondaryUrl,
-        className: "inline-flex items-center rounded-full border border-current px-8 py-3 text-sm font-semibold hover:bg-white/10 transition-colors",
-        children: secondaryLabel
-      }
-    )
-  ] })
-] }) });
+  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
 };