dune-react 0.0.8 → 0.0.9

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

@@ -0,0 +1,229 @@
+"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 { CompoundImage } from "../../../puck-base/image.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 ContactUs2 = ({
+  heading,
+  description,
+  nameLabel,
+  emailLabel,
+  phoneLabel = "Phone",
+  companyLabel = "Company",
+  messageLabel,
+  button,
+  image,
+  imagePosition = "end",
+  padding,
+  sectionStyle,
+  backgroundColor
+}) => {
+  const { isEditor: isEditorMode, siteId, domain } = useEditorContext();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [company, setCompany] = useState("");
+  const [message, setMessage] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (isEditorMode) return;
+    setSubmitting(true);
+    try {
+      await submitFormLead(domain, {
+        site_id: siteId,
+        name: name || "",
+        email: email || "",
+        phone: phone || "",
+        message: message || "",
+        source_page: typeof window !== "undefined" ? window.location.pathname : ""
+      });
+      toast.success("Message sent successfully!");
+      setName("");
+      setEmail("");
+      setPhone("");
+      setCompany("");
+      setMessage("");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to send message";
+      toast.error(msg);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const contentCol = /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-center lg:basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold leading-tight text-foreground lg:text-4xl", children: heading }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-base text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: "w-full space-y-4", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: "contact2-name",
+            className: "text-sm font-medium text-foreground",
+            children: nameLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "contact2-name",
+            type: "text",
+            name: "name",
+            required: true,
+            className: "rounded-3xl",
+            value: name,
+            onChange: (e) => setName(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: "contact2-email",
+            className: "text-sm font-medium text-foreground",
+            children: emailLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "contact2-email",
+            type: "email",
+            name: "email",
+            required: true,
+            className: "rounded-3xl",
+            value: email,
+            onChange: (e) => setEmail(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: "contact2-phone",
+            className: "text-sm font-medium text-foreground",
+            children: phoneLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "contact2-phone",
+            type: "tel",
+            name: "phone",
+            className: "rounded-3xl",
+            value: phone,
+            onChange: (e) => setPhone(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: "contact2-company",
+            className: "text-sm font-medium text-foreground",
+            children: companyLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "contact2-company",
+            type: "text",
+            name: "company",
+            className: "rounded-3xl",
+            value: company,
+            onChange: (e) => setCompany(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: "contact2-message",
+            className: "text-sm font-medium text-foreground",
+            children: messageLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: "contact2-message",
+            name: "message",
+            required: true,
+            className: "min-h-40 resize-y rounded-3xl",
+            value: message,
+            onChange: (e) => setMessage(e.target.value)
+          }
+        )
+      ] }),
+      /* @__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) ?? "none",
+          type: "submit",
+          disabled: submitting
+        }
+      )
+    ] })
+  ] }) });
+  const imageCol = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative w-full overflow-hidden rounded-3xl lg:basis-1/2 lg:self-stretch",
+        "aspect-square lg:aspect-auto"
+      ),
+      children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(
+        CompoundImage,
+        {
+          src: image.src,
+          alt: image.alt ?? "",
+          className: "absolute inset-0 h-full w-full object-cover"
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Image" }) })
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding,
+      sectionStyle,
+      backgroundColor,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex flex-col gap-12 lg:items-stretch", {
+            "lg:flex-row": imagePosition === "end",
+            "lg:flex-row-reverse": imagePosition === "start"
+          }),
+          children: [
+            contentCol,
+            imageCol
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ContactUs2
+};

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

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

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

@@ -0,0 +1,72 @@
+import { paddingDefaults, image1x1Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { ContactUs2 } from "./contact-us-2.js";
+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"
+        }
+      }
+    },
+    image,
+    imagePosition: {
+      type: "radio",
+      options: [
+        { label: "Image Right", value: "end" },
+        { label: "Image Left", value: "start" }
+      ]
+    },
+    padding,
+    sectionStyle,
+    backgroundColor
+  },
+  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"
+    },
+    image: image1x1Placeholder,
+    imagePosition: "end",
+    padding: paddingDefaults
+  },
+  render: ContactUs2
+};
+export {
+  conf
+};

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

@@ -0,0 +1,29 @@
+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;
+    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;
+}
+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;

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

@@ -0,0 +1,245 @@
+"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,
+  panelStyle = "dark",
+  infoItems = [],
+  nameLabel = "Full Name",
+  emailLabel = "Email Address",
+  phoneLabel = "Phone",
+  companyLabel = "Company",
+  subjectLabel = "Subject",
+  messageLabel = "Your Message",
+  button,
+  padding,
+  sectionStyle,
+  backgroundColor
+}) => {
+  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,
+      sectionStyle,
+      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: [
+                nameLabel,
+                " ",
+                /* @__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: [
+                emailLabel,
+                " ",
+                /* @__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: phoneLabel }),
+              /* @__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: companyLabel }),
+              /* @__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: subjectLabel }),
+            /* @__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: [
+              messageLabel,
+              " ",
+              /* @__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..." : (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",
+              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,101 @@
+import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
+import { ContactUs3 } from "./contact-us-3.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 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,
+      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" }
+    },
+    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" }
+      }
+    },
+    padding,
+    sectionStyle,
+    backgroundColor
+  },
+  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
+  },
+  render: ContactUs3
+};
+export {
+  conf
+};