dune-react 0.0.18 → 0.0.20

package/dist/components/puck-block/banner-sections/dual-row-marquee/index.d.ts

@@ -0,0 +1,53 @@
+import { DualRowMarquee, DualRowMarqueeDefaults } from "./dual-row-marquee";
+import type { DualRowMarqueeProps } from "./dual-row-marquee";
+export { DualRowMarquee, DualRowMarqueeDefaults };
+export type { DualRowMarqueeProps };
+declare const conf: {
+    fields: {
+        headingsTop: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        headingsBottom: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").BannerSectionBaseProps>;
+    render: (props: DualRowMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/banner-sections/dual-row-marquee/index.js

@@ -0,0 +1,31 @@
+import { DualRowMarquee, DualRowMarqueeDefaults } from "./dual-row-marquee.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    headingsTop: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.title || `Item ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" },
+        image: imageField
+      }
+    },
+    headingsBottom: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.title || `Item ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" },
+        image: imageField
+      }
+    }
+  },
+  defaultProps: DualRowMarqueeDefaults,
+  render: DualRowMarquee
+};
+export {
+  DualRowMarquee,
+  DualRowMarqueeDefaults,
+  conf as default
+};

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

@@ -0,0 +1,4 @@
+export { default as CssMarqueeBannerConf } from "./css-marquee-banner";
+export { default as DualRowMarqueeConf } from "./dual-row-marquee";
+export { default as ScrollDrivenMarqueeConf } from "./scroll-driven-marquee";
+export { default as ScrollParallaxTextConf } from "./scroll-parallax-text";

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

@@ -1,22 +1,119 @@
-type BannerVariant = "announcement-banner-1" | "marquee-1";
-type BannerPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type BannerSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type BannerSectionProps = {
-    variant?: BannerVariant;
-    items?: string[];
-    linkLabel?: string;
-    linkUrl?: string;
-    styles?: {
-        padding?: BannerPadding;
-        sectionStyle?: BannerSectionStyle;
-        backgroundColor?: string;
-        textColor?: string;
-        align?: "left" | "center" | "right";
-        size?: "small" | "default";
-        speed?: "slow" | "normal" | "fast";
-        tone?: "default" | "outline" | "muted";
+/**
+ * Banner Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * BannerSectionStyles 为 banner 特有的样式字段
+ */
+import type { BaseImage } from "@/components/puck-core/core/props/media";
+import type { BaseButton, Action } from "@/components/puck-core/core/props/interactive";
+export type { BaseImage, BaseButton, Action };
+export interface BannerSectionStyles {
+    containerStyle?: "boxed" | "fullWidth";
+    textLayout?: "default" | "centered" | "inlineLink";
+    ctaType?: "email" | "button" | "buttons" | "socialLinks";
+    direction?: "left" | "right";
+    contentType?: "text" | "textWithImage";
+}
+export interface BannerSectionBaseProps {
+    heading: string;
+    description: string;
+    headings: string[];
+    buttons: BaseButton[];
+    logo: BaseImage & {
+        url?: string;
+    };
+    inputPlaceholder: string;
+    formButton: BaseButton;
+    headingStart: string;
+    headingEnd: string;
+    link: {
+        action?: Action;
+        title: string;
+    };
+    socialMediaLinks: {
+        platform: string;
+        url: string;
+    }[];
+    sections: {
+        title: string;
+        image: BaseImage;
+    }[];
+    headingsTop: {
+        title: string;
+        image: BaseImage;
+    }[];
+    headingsBottom: {
+        title: string;
+        image: BaseImage;
+    }[];
+    images: BaseImage[];
+    styles: BannerSectionStyles;
+}
+export declare const bannerStyleFields: {
+    readonly containerStyle: {
+        readonly type: "radio";
+        readonly label: "Container Style";
+        readonly options: readonly [{
+            readonly label: "Boxed";
+            readonly value: "boxed";
+        }, {
+            readonly label: "Full Width";
+            readonly value: "fullWidth";
+        }];
+    };
+    readonly textLayout: {
+        readonly type: "radio";
+        readonly label: "Text Layout";
+        readonly options: readonly [{
+            readonly label: "Default";
+            readonly value: "default";
+        }, {
+            readonly label: "Centered";
+            readonly value: "centered";
+        }, {
+            readonly label: "Inline Link";
+            readonly value: "inlineLink";
+        }];
+    };
+    readonly ctaType: {
+        readonly type: "select";
+        readonly label: "CTA Type";
+        readonly options: readonly [{
+            readonly label: "Email Form";
+            readonly value: "email";
+        }, {
+            readonly label: "Single Button";
+            readonly value: "button";
+        }, {
+            readonly label: "Multiple Buttons";
+            readonly value: "buttons";
+        }, {
+            readonly label: "Social Links";
+            readonly value: "socialLinks";
+        }];
+    };
+    readonly direction: {
+        readonly type: "radio";
+        readonly label: "Direction";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Right";
+            readonly value: "right";
+        }];
+    };
+    readonly contentType: {
+        readonly type: "radio";
+        readonly label: "Content Type";
+        readonly options: readonly [{
+            readonly label: "Text Only";
+            readonly value: "text";
+        }, {
+            readonly label: "Text + Image";
+            readonly value: "textWithImage";
+        }];
     };
 };
+/** 将 BannerSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type BannerComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<BannerSectionBaseProps> & Partial<T>;

package/dist/components/puck-block/banner-sections/props.js

@@ -0,0 +1,21 @@
+const bannerStyleFields = {
+  direction: {
+    type: "radio",
+    label: "Direction",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  contentType: {
+    type: "radio",
+    label: "Content Type",
+    options: [
+      { label: "Text Only", value: "text" },
+      { label: "Text + Image", value: "textWithImage" }
+    ]
+  }
+};
+export {
+  bannerStyleFields
+};

package/dist/components/puck-block/banner-sections/scroll-driven-marquee/index.d.ts

@@ -0,0 +1,19 @@
+import { ScrollDrivenMarquee, ScrollDrivenMarqueeDefaults } from "./scroll-driven-marquee";
+import type { ScrollDrivenMarqueeProps } from "./scroll-driven-marquee";
+export { ScrollDrivenMarquee, ScrollDrivenMarqueeDefaults };
+export type { ScrollDrivenMarqueeProps };
+declare const conf: {
+    fields: {
+        headings: {
+            type: string;
+            max: number;
+            getItemSummary: (item: string, index?: number) => string;
+            arrayFields: {
+                type: string;
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").BannerSectionBaseProps>;
+    render: (props: ScrollDrivenMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/banner-sections/scroll-driven-marquee/index.js

@@ -0,0 +1,20 @@
+import { ScrollDrivenMarquee, ScrollDrivenMarqueeDefaults } from "./scroll-driven-marquee.js";
+const conf = {
+  fields: {
+    headings: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item || `Heading ${index + 1}`,
+      arrayFields: {
+        type: "text"
+      }
+    }
+  },
+  defaultProps: ScrollDrivenMarqueeDefaults,
+  render: ScrollDrivenMarquee
+};
+export {
+  ScrollDrivenMarquee,
+  ScrollDrivenMarqueeDefaults,
+  conf as default
+};

package/dist/components/puck-block/banner-sections/scroll-driven-marquee/scroll-driven-marquee.d.ts

@@ -0,0 +1,4 @@
+import type { BannerComponentProps, BannerSectionBaseProps } from "../props";
+export type ScrollDrivenMarqueeProps = BannerComponentProps;
+export declare const ScrollDrivenMarquee: (props: ScrollDrivenMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollDrivenMarqueeDefaults: Partial<BannerSectionBaseProps>;

package/dist/components/puck-block/banner-sections/scroll-driven-marquee/scroll-driven-marquee.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useScroll, useTransform, motion } from "framer-motion";
+import { useRef } from "react";
+const ScrollDrivenMarquee = (props) => {
+  const {
+    headings = []
+  } = {
+    ...ScrollDrivenMarqueeDefaults,
+    ...props
+  };
+  const sectionRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ["start end", "end start"]
+  });
+  const headingTranslate = useTransform(scrollYProgress, [0, 1], ["-50%", "0%"]);
+  return /* @__PURE__ */ jsx("section", { id: "relume", ref: sectionRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex whitespace-nowrap border-b border-t border-border-primary", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center overflow-hidden whitespace-nowrap py-4", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "ml-12 grid auto-cols-max grid-flow-col grid-cols-[max-content] gap-12",
+      style: { x: headingTranslate },
+      children: headings.map((heading, headingIndex) => /* @__PURE__ */ jsx("h1", { className: "text-md font-bold md:text-lg", children: heading }, headingIndex))
+    },
+    index
+  )) }) }) });
+};
+const ScrollDrivenMarqueeDefaults = {
+  headings: [
+    "Relume Library",
+    "Relume Library",
+    "Relume Library",
+    "Relume Library",
+    "Relume Library"
+  ]
+};
+export {
+  ScrollDrivenMarquee,
+  ScrollDrivenMarqueeDefaults
+};

package/dist/components/puck-block/banner-sections/scroll-parallax-text/index.d.ts

@@ -0,0 +1,19 @@
+import { ScrollParallaxText, ScrollParallaxTextDefaults } from "./scroll-parallax-text";
+import type { ScrollParallaxTextProps } from "./scroll-parallax-text";
+export { ScrollParallaxText, ScrollParallaxTextDefaults };
+export type { ScrollParallaxTextProps };
+declare const conf: {
+    fields: {
+        headings: {
+            type: string;
+            max: number;
+            getItemSummary: (item: string, index?: number) => string;
+            arrayFields: {
+                type: string;
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").BannerSectionBaseProps>;
+    render: (props: ScrollParallaxTextProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/banner-sections/scroll-parallax-text/index.js

@@ -0,0 +1,20 @@
+import { ScrollParallaxText, ScrollParallaxTextDefaults } from "./scroll-parallax-text.js";
+const conf = {
+  fields: {
+    headings: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item || `Heading ${index + 1}`,
+      arrayFields: {
+        type: "text"
+      }
+    }
+  },
+  defaultProps: ScrollParallaxTextDefaults,
+  render: ScrollParallaxText
+};
+export {
+  ScrollParallaxText,
+  ScrollParallaxTextDefaults,
+  conf as default
+};

package/dist/components/puck-block/banner-sections/scroll-parallax-text/scroll-parallax-text.d.ts

@@ -0,0 +1,4 @@
+import type { BannerComponentProps, BannerSectionBaseProps } from "../props";
+export type ScrollParallaxTextProps = BannerComponentProps;
+export declare const ScrollParallaxText: (props: ScrollParallaxTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollParallaxTextDefaults: Partial<BannerSectionBaseProps>;

package/dist/components/puck-block/banner-sections/scroll-parallax-text/scroll-parallax-text.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useScroll, useTransform, motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+const ScrollParallaxText = (props) => {
+  const {
+    headings = []
+  } = {
+    ...ScrollParallaxTextDefaults,
+    ...props
+  };
+  const sectionRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ["start start", "end start"]
+  });
+  const xPartOne = useTransform(scrollYProgress, [0, 1], ["-10%", "0%"]);
+  const xPartTwo = useTransform(scrollYProgress, [0, 1], ["10%", "0%"]);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: "relume",
+      ref: sectionRef,
+      className: "overflow-hidden px-[5%] py-16 md:py-24 lg:py-28",
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col whitespace-nowrap", children: headings.map((heading, index) => /* @__PURE__ */ jsx(
+        motion.h1,
+        {
+          style: index % 2 === 0 ? { x: xPartOne } : { x: xPartTwo },
+          className: cn("text-[6rem] font-bold leading-[1.2]", {
+            "self-end": index % 2 !== 0
+          }),
+          children: heading
+        },
+        index
+      )) })
+    }
+  );
+};
+const ScrollParallaxTextDefaults = {
+  headings: [
+    "Medium length banner heading goes here",
+    "Medium length banner heading goes here"
+  ]
+};
+export {
+  ScrollParallaxText,
+  ScrollParallaxTextDefaults
+};

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

@@ -0,0 +1,4 @@
+import type { ContactComponentProps, ContactSectionBaseProps } from "../props";
+export type CenteredFormProps = ContactComponentProps;
+export declare const CenteredForm: (props: CenteredFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CenteredFormDefaults: ContactSectionBaseProps;

package/dist/components/puck-block/contact-sections/centered-form/centered-form.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../../shadcn/select.js";
+import { Input } from "../../../shadcn/input.js";
+import { Checkbox } from "../../../shadcn/checkbox.js";
+import { Label } from "../../../shadcn/label.js";
+import { Textarea } from "../../../shadcn/textarea.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { useContactForm } from "../use-contact-form.js";
+import { cn } from "../../../../utils/css-utils.js";
+const CenteredForm = (props) => {
+  const { tagline, heading, description, button, styles } = {
+    ...CenteredFormDefaults,
+    ...props
+  };
+  const { formType = "simple", textAlign = "center" } = styles ?? {};
+  const { createSubmitHandler, submitting } = useContactForm();
+  const [name, setName] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [message, setMessage] = useState("");
+  const [topic, setTopic] = useState("");
+  const [acceptTerms, setAcceptTerms] = useState(false);
+  const handleSubmit = createSubmitHandler(
+    () => ({
+      name: name || `${firstName} ${lastName}`.trim() || "",
+      email: email || "",
+      phone: phone || "",
+      message: [topic, message].filter(Boolean).join("\n\n") || ""
+    }),
+    () => {
+      setName("");
+      setFirstName("");
+      setLastName("");
+      setEmail("");
+      setPhone("");
+      setMessage("");
+      setTopic("");
+      setAcceptTerms(false);
+    }
+  );
+  const isCenter = textAlign === "center";
+  const renderSimpleForm = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "name", className: "mb-2", children: "Name" }),
+      /* @__PURE__ */ jsx(Input, { type: "text", id: "name", value: name, onChange: (e) => setName(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-2", children: "Email" }),
+      /* @__PURE__ */ jsx(Input, { type: "email", id: "email", value: email, onChange: (e) => setEmail(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "phone", className: "mb-2", children: "Phone" }),
+      /* @__PURE__ */ jsx(Input, { type: "tel", id: "phone", value: phone, onChange: (e) => setPhone(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "message", className: "mb-2", children: "Message" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "message",
+          placeholder: "Type your message...",
+          className: "min-h-[11.25rem] overflow-auto",
+          value: message,
+          onChange: (e) => setMessage(e.target.value)
+        }
+      )
+    ] })
+  ] });
+  const renderAdvancedForm = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "firstName", className: "mb-2", children: "First name" }),
+        /* @__PURE__ */ jsx(Input, { type: "text", id: "firstName", value: firstName, onChange: (e) => setFirstName(e.target.value) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "lastName", className: "mb-2", children: "Last name" }),
+        /* @__PURE__ */ jsx(Input, { type: "text", id: "lastName", value: lastName, onChange: (e) => setLastName(e.target.value) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-2", children: "Email" }),
+      /* @__PURE__ */ jsx(Input, { type: "email", id: "email", value: email, onChange: (e) => setEmail(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "phone", className: "mb-2", children: "Phone number" }),
+      /* @__PURE__ */ jsx(Input, { type: "tel", id: "phone", value: phone, onChange: (e) => setPhone(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "topic", className: "mb-2", children: "Choose a topic" }),
+      /* @__PURE__ */ jsxs(Select, { value: topic, onValueChange: setTopic, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select one..." }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "topic-1", children: "Topic one" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "topic-2", children: "Topic two" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "topic-3", children: "Topic three" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "message", className: "mb-2", children: "Message" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "message",
+          placeholder: "Type your message...",
+          className: "min-h-[11.25rem] overflow-auto",
+          value: message,
+          onChange: (e) => setMessage(e.target.value)
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container max-w-lg", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("mx-auto mb-8 w-full max-w-lg md:mb-10 lg:mb-12", {
+          "text-center": isCenter
+        }),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+          /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "mx-auto grid w-full max-w-md grid-cols-1 gap-6",
+        onSubmit: handleSubmit,
+        children: [
+          formType === "advanced" ? renderAdvancedForm() : renderSimpleForm(),
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center space-x-2 text-sm md:mb-4", children: [
+            /* @__PURE__ */ jsx(Checkbox, { id: "terms", checked: acceptTerms, onCheckedChange: setAcceptTerms }),
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "terms", className: "cursor-pointer", children: [
+              "I accept the",
+              " ",
+              /* @__PURE__ */ jsx("a", { className: "text-link-primary underline", href: "#", children: "Terms" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cn({ "text-center": isCenter }), children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
+        ]
+      }
+    )
+  ] }) });
+};
+const CenteredFormDefaults = {
+  tagline: "Tagline",
+  heading: "Contact us",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  button: { label: "Submit" },
+  buttons: [],
+  image: { src: "https://picsum.photos/seed/contact-form/800/600", alt: "Placeholder" },
+  email: "",
+  phone: "",
+  address: "",
+  contacts: [],
+  locations: [],
+  tabs: [],
+  styles: {
+    formType: "simple",
+    textAlign: "center"
+  }
+};
+export {
+  CenteredForm,
+  CenteredFormDefaults
+};