dune-react 0.0.7 → 0.0.9

package/dist/components/puck-base/article-card.js

@@ -10,7 +10,7 @@ const CompoundArticleCard = ({
   className
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-md aspect-video mb-2 overflow-hidden", children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt }) : null }),
+    image && /* @__PURE__ */ jsx("div", { className: "bg-muted mb-2 aspect-video overflow-hidden rounded-md [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src || "", alt: image.alt, className: "h-full w-full object-cover" }) }),
     !!heading || !!description || !!button ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       heading ? /* @__PURE__ */ jsx("h3", { className: "text-xl tracking-tight", children: heading }) : null,
       description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xs text-base", children: description }) : null,

package/dist/components/puck-base/button.d.ts

@@ -8,6 +8,7 @@ export interface CompoundButtonProps {
     size?: ButtonProps["size"];
     icon?: IconName;
     type?: "button" | "submit" | "reset";
+    disabled?: boolean;
     className?: string;
 }
 export declare const CompoundButton: (props: CompoundButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-base/button.js

@@ -72,6 +72,7 @@ function CompoundButtonBase(props) {
       size: props.size,
       className: cn("gap-4", props.className),
       type: props.type ?? "button",
+      disabled: props.disabled,
       children: content
     }
   );

package/dist/components/puck-base/container.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 type PaddingLevel = "none" | "small" | "medium" | "large";
 export type SectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
 export type OverlayStyle = "none" | "gradient-top" | "gradient-bottom" | "noise";
@@ -14,5 +14,11 @@ export interface CompoundContainerProps {
     overlay?: OverlayStyle;
     className?: string;
 }
+/**
+ * Section-scoped CSS variable presets.
+ * These override the root-level CSS variables so child components
+ * using `bg-background`, `text-foreground` etc. automatically adapt.
+ */
+export declare const SECTION_STYLE_VARS: Record<string, CSSProperties>;
 export declare const CompoundContainer: ({ children, padding, sectionStyle, backgroundColor, backgroundImage, overlay, className, }: CompoundContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/puck-base/container.js

@@ -86,5 +86,6 @@ const CompoundContainer = ({
   ) });
 };
 export {
-  CompoundContainer
+  CompoundContainer,
+  SECTION_STYLE_VARS
 };

package/dist/components/puck-base/content.d.ts

@@ -9,9 +9,6 @@ export interface CompoundContentProps {
     buttons?: CompoundButtonProps[];
     alignContent?: "start" | "center" | "end";
     className?: string;
-}
-interface CompoundContentPropsWithSpacing extends CompoundContentProps {
     spacing?: "normal" | "tight";
 }
-export declare const CompoundContent: ({ badge, heading, description, features, buttons, alignContent, className, spacing, }: CompoundContentPropsWithSpacing) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const CompoundContent: ({ badge, heading, description, features, buttons, alignContent, className, spacing, }: CompoundContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-base/content.js

@@ -61,7 +61,7 @@ const CompoundContent = ({
                   "h2",
                   {
                     className: cn(
-                      "text-3xl md:text-5xl tracking-tighter lg:max-w-xl font-regular",
+                      "font-serif font-regular text-3xl tracking-tighter md:text-5xl lg:max-w-xl",
                       textAlignClassnames
                     ),
                     children: heading
@@ -71,7 +71,7 @@ const CompoundContent = ({
                   "p",
                   {
                     className: cn(
-                      "text-lg leading-relaxed tracking-tight text-muted-foreground",
+                      "text-muted-foreground text-lg leading-relaxed tracking-tight",
                       {
                         "lg:max-w-sm": alignContent === "start" || alignContent === "end",
                         "lg:max-w-xl": alignContent === "center"
@@ -86,7 +86,7 @@ const CompoundContent = ({
                     DynamicIcon,
                     {
                       name: feature.icon,
-                      className: "w-6 h-6 shrink-0"
+                      className: "h-6 w-6 shrink-0"
                     }
                   ) : null,
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
@@ -98,20 +98,18 @@ const CompoundContent = ({
             }
           )
         ] }) : null,
-        Array.isArray(buttons) && buttons.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn("gap-4 flex-wrap", rowPositionClassNames), children: buttons.map(
-          (button, index) => button.label ? /* @__PURE__ */ jsx(
-            CompoundButton,
-            {
-              label: button.label,
-              url: button.url,
-              action: button.action,
-              variant: button.variant,
-              size: button.size,
-              icon: button.icon
-            },
-            index
-          ) : null
-        ) }) : null
+        Array.isArray(buttons) && buttons.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn("flex-wrap gap-4", rowPositionClassNames), children: buttons.filter((button) => !!button.label).map((button, index) => /* @__PURE__ */ jsx(
+          CompoundButton,
+          {
+            label: button.label,
+            url: button.url,
+            action: button.action,
+            variant: button.variant,
+            size: button.size,
+            icon: button.icon
+          },
+          index
+        )) }) : null
       ]
     }
   );

package/dist/components/puck-base/core/types.d.ts

@@ -5,12 +5,12 @@ export type Feature = {
     name: string;
     description?: string;
 };
-export type ActionType = "page" | "external" | "email" | "phone" | "section" | "download" | "none";
+export type ActionType = "page" | "external" | "scroll" | "email" | "phone" | "section" | "download" | "none";
 export type Action = {
     type: ActionType;
     pageUrl?: string;
     externalUrl?: string;
-    openInNewTab?: "true" | "false";
+    openInNewTab?: string;
     email?: string;
     subject?: string;
     phone?: string;

package/dist/components/puck-base/editor-context.d.ts

@@ -1,10 +1,22 @@
 import { type RefObject } from "react";
+export type SitePage = {
+    /** 页面 slug，如 "about"、"pricing"，用作路由值 */
+    slug: string;
+    /** 页面显示名，如 "关于我们"、"定价" */
+    label: string;
+};
 type EditorContextValue = {
     openFieldsPanel: (componentId: string, componentType: string) => void;
     openAddSection: (index: number, zone: string) => void;
     isEditor: boolean;
     toolbarPortalRef: RefObject<HTMLDivElement | null> | null;
     fetchLibraryImages?: () => Promise<string[]>;
+    /** 站点 ID，用于表单提交等业务接口 */
+    siteId?: string;
+    /** 后台 API 域名，如 https://api.example.com */
+    domain?: string;
+    /** 站内可选页面列表，用于 url 字段快捷选择 */
+    sitePages?: SitePage[];
 };
 export declare const EditorContextProvider: import("react").Provider<EditorContextValue>;
 export declare const useEditorContext: () => EditorContextValue;

package/dist/components/puck-base/fields/auto-field.d.ts

@@ -1,2 +1,3 @@
 import type { AutoFieldProps } from "./types";
+/** 按 field.type 分发控件；名为 url 且类型为 text 时固定使用 UrlField（链接 + 站内路由） */
 export declare const AutoField: import("react").NamedExoticComponent<AutoFieldProps>;

package/dist/components/puck-base/fields/auto-field.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { memo, useCallback, useState, useRef, useMemo, useEffect } from "react";
 import { Input } from "../../shadcn/input.js";
 import { Textarea } from "../../shadcn/textarea.js";
 import { Label } from "../../shadcn/label.js";
@@ -8,7 +8,8 @@ import { Button } from "../../shadcn/button.js";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../shadcn/select.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../../shadcn/popover.js";
 import { ToggleGroup, ToggleGroupItem } from "../../shadcn/toggle-group.js";
-import { ChevronDownIcon, CheckIcon } from "lucide-react";
+import { LinkIcon, XIcon, ClipboardIcon, GlobeIcon, ChevronDownIcon, CheckIcon } from "lucide-react";
+import { useEditorContext } from "../editor-context.js";
 const LARGE_SELECT_THRESHOLD = 200;
 const VIRTUAL_ITEM_HEIGHT = 32;
 const VIRTUAL_VIEWPORT_HEIGHT = 256;
@@ -159,62 +160,131 @@ const VirtualizedSelectField = memo(function VirtualizedSelectField2({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
-        {
-          className: "w-(--radix-popover-trigger-width) p-2",
-          children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                placeholder: "Search options...",
-                className: "mb-2"
-              }
-            ),
-            /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(PopoverContent, { className: "w-(--radix-popover-trigger-width) p-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: "Search options...",
+            className: "mb-2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: viewportRef,
+            className: "relative touch-pan-y overflow-y-auto overscroll-contain rounded-md border",
+            style: {
+              height: VIRTUAL_VIEWPORT_HEIGHT,
+              WebkitOverflowScrolling: "touch"
+            },
+            onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+            children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground p-3 text-sm", children: "No options found." }) : /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
               "div",
               {
-                ref: viewportRef,
-                className: "relative touch-pan-y overflow-y-auto overscroll-contain rounded-md border",
                 style: {
-                  height: VIRTUAL_VIEWPORT_HEIGHT,
-                  WebkitOverflowScrolling: "touch"
+                  position: "absolute",
+                  top: startIndex * VIRTUAL_ITEM_HEIGHT,
+                  left: 0,
+                  right: 0
                 },
-                onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-                children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground p-3 text-sm", children: "No options found." }) : /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: startIndex * VIRTUAL_ITEM_HEIGHT,
-                      left: 0,
-                      right: 0
+                children: visibleOptions.map((opt) => {
+                  const isSelected = opt.stringValue === selectedString;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "hover:bg-accent hover:text-accent-foreground flex h-8 w-full items-center justify-between px-2 text-left text-sm",
+                      onClick: () => handleSelect(opt.stringValue),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
+                        isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary ml-2 size-4 shrink-0" }) : null
+                      ]
                     },
-                    children: visibleOptions.map((opt) => {
-                      const isSelected = opt.stringValue === selectedString;
-                      return /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          className: "hover:bg-accent hover:text-accent-foreground flex h-8 w-full items-center justify-between px-2 text-left text-sm",
-                          onClick: () => handleSelect(opt.stringValue),
-                          children: [
-                            /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
-                            isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary ml-2 size-4 shrink-0" }) : null
-                          ]
-                        },
-                        opt.stringValue
-                      );
-                    })
-                  }
-                ) })
+                    opt.stringValue
+                  );
+                })
               }
-            )
+            ) })
+          }
+        )
+      ] })
+    ] })
+  ] });
+});
+const UrlField = memo(function UrlField2({
+  label,
+  value,
+  onChange,
+  sitePages
+}) {
+  const currentValue = value ?? "";
+  const selectedSlug = currentValue.startsWith("/") ? currentValue.slice(1) : null;
+  const handlePaste = useCallback(async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text) onChange(text.trim());
+    } catch {
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-3", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 rounded-lg border px-3 py-2", children: [
+        /* @__PURE__ */ jsx(LinkIcon, { className: "text-muted-foreground size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+            placeholder: "https:// or /page-slug",
+            value: currentValue,
+            onChange: (e) => onChange(e.target.value)
+          }
+        ),
+        currentValue && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            onClick: () => onChange(""),
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "shrink-0 gap-1.5",
+          onClick: handlePaste,
+          children: [
+            /* @__PURE__ */ jsx(ClipboardIcon, { className: "size-3.5" }),
+            "Paste"
           ]
         }
       )
+    ] }),
+    sitePages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Site pages" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: sitePages.map((page) => {
+        const isSelected = selectedSlug === page.slug;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: `inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors ${isSelected ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-foreground hover:bg-accent"}`,
+            onClick: () => onChange(isSelected ? "" : `${page.slug}`),
+            children: [
+              /* @__PURE__ */ jsx(GlobeIcon, { className: "size-3" }),
+              page.label
+            ]
+          },
+          page.slug
+        );
+      }) })
     ] })
   ] });
 });
@@ -226,6 +296,18 @@ const AutoField = memo(function AutoField2({
 }) {
   var _a, _b;
   const label = field.label || name;
+  const { sitePages } = useEditorContext();
+  if (name === "url" && field.type === "text") {
+    return /* @__PURE__ */ jsx(
+      UrlField,
+      {
+        label,
+        value,
+        onChange,
+        sitePages: sitePages ?? []
+      }
+    );
+  }
   switch (field.type) {
     case "text":
       return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [

package/dist/components/puck-base/gradient-text.js

@@ -8,17 +8,26 @@ const TAG_STYLES = {
   p: "text-base md:text-lg",
   span: ""
 };
+const DIRECTION_MAP = {
+  "to-r": "to right",
+  "to-l": "to left",
+  "to-t": "to top",
+  "to-b": "to bottom",
+  "to-br": "to bottom right",
+  "to-bl": "to bottom left"
+};
 const GradientText = ({
   text,
   as: Tag = "h2",
-  gradientFrom = "oklch(0.7 0.25 260)",
-  gradientTo = "oklch(0.7 0.25 330)",
+  gradientFrom = "var(--primary)",
+  gradientTo = "var(--chart-2)",
   gradientVia,
   direction = "to-r",
   className
 }) => {
+  const cssDirection = DIRECTION_MAP[direction] ?? "to right";
   const gradientStyle = {
-    backgroundImage: gradientVia ? `linear-gradient(${direction.replace("to-", "to ")}, ${gradientFrom}, ${gradientVia}, ${gradientTo})` : `linear-gradient(${direction.replace("to-", "to ")}, ${gradientFrom}, ${gradientTo})`
+    backgroundImage: gradientVia ? `linear-gradient(${cssDirection}, ${gradientFrom}, ${gradientVia}, ${gradientTo})` : `linear-gradient(${cssDirection}, ${gradientFrom}, ${gradientTo})`
   };
   return /* @__PURE__ */ jsx(
     Tag,

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

@@ -4,7 +4,7 @@ const AnnouncementBanner = ({
   text,
   linkText,
   linkUrl,
-  backgroundColor = "oklch(0.85 0.15 85)",
+  backgroundColor = "var(--primary)",
   textColor,
   align = "center",
   size = "default"

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

@@ -0,0 +1,16 @@
+/**
+ * 联系表单线索：POST 到 `{domain}/api/form-leads`，与站点后端约定一致。
+ */
+export interface SubmitFormLeadBody {
+    site_id?: string | null;
+    name: string;
+    email: string;
+    phone: string;
+    message: string;
+    /** 当前页路径，用于归因 */
+    source_page: string;
+}
+/**
+ * 提交表单线索。成功 resolve；HTTP 非 2xx 或业务 success !== true 时 throw Error（message 为 errMsg 或 HTTP 状态）。
+ */
+export declare function submitFormLead(domain: string | undefined | null, body: SubmitFormLeadBody): Promise<void>;

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

@@ -0,0 +1,25 @@
+function normalizeBaseUrl(domain) {
+  return (domain ?? "").replace(/\/$/, "");
+}
+async function submitFormLead(domain, body) {
+  const baseUrl = normalizeBaseUrl(domain);
+  const res = await fetch(`${baseUrl}/api/form-leads`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      site_id: body.site_id,
+      name: body.name || "",
+      email: body.email || "",
+      phone: body.phone || "",
+      message: body.message || "",
+      source_page: body.source_page
+    })
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok || !(data == null ? void 0 : data.success)) {
+    throw new Error((data == null ? void 0 : data.errMsg) || `HTTP ${res.status}`);
+  }
+}
+export {
+  submitFormLead
+};

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

@@ -9,6 +9,7 @@ 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 DEFAULT_FIELDS = [
   { label: "Name", name: "name", type: "text", required: true },
   { label: "Email", name: "email", type: "email", required: true },
@@ -17,17 +18,33 @@ const DEFAULT_FIELDS = [
   { label: "Message", name: "message", type: "textarea", required: true }
 ];
 const ContactUs = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { isEditor: isEditorMode } = useEditorContext();
+  var _a, _b, _c, _d, _e, _f;
+  const { isEditor: isEditorMode, siteId, domain } = useEditorContext();
   const formFields = ((_b = (_a = props.form) == null ? void 0 : _a.fields) == null ? void 0 : _b.length) ? props.form.fields : DEFAULT_FIELDS;
   const [values, setValues] = useState({});
+  const [submitting, setSubmitting] = useState(false);
   const setValue = (name, value) => setValues((prev) => ({ ...prev, [name]: value }));
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     if (isEditorMode) return;
-    console.log({ ...values });
-    toast.success("Message sent successfully!");
-    setValues({});
+    setSubmitting(true);
+    try {
+      await submitFormLead(domain, {
+        site_id: siteId,
+        name: values.name || "",
+        email: values.email || "",
+        phone: values.phone || "",
+        message: values.message || "",
+        source_page: typeof window !== "undefined" ? window.location.pathname : ""
+      });
+      toast.success("Message sent successfully!");
+      setValues({});
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to send message";
+      toast.error(msg);
+    } finally {
+      setSubmitting(false);
+    }
   };
   const submitLabel = ((_d = (_c = props.form) == null ? void 0 : _c.button) == null ? void 0 : _d.label) ?? "Send Message";
   const submitIcon = ((_f = (_e = props.form) == null ? void 0 : _e.button) == null ? void 0 : _f.icon) ?? "send";
@@ -49,8 +66,6 @@ const ContactUs = (props) => {
       {
         className: "rounded-md max-w-md w-full flex flex-col border p-8 gap-4",
         onSubmit: handleSubmit,
-        action: (_g = props.form) == null ? void 0 : _g.action,
-        method: (_h = props.form) == null ? void 0 : _h.method,
         children: [
           formFields.reduce((rows, field, i) => {
             var _a2, _b2, _c2;
@@ -127,11 +142,12 @@ const ContactUs = (props) => {
           /* @__PURE__ */ jsx(
             CompoundButton,
             {
-              label: submitLabel,
+              label: submitting ? "Sending..." : submitLabel,
               variant: "default",
               size: "default",
-              icon: submitIcon,
-              type: "submit"
+              icon: submitting ? "loader" : submitIcon,
+              type: "submit",
+              disabled: submitting
             }
           )
         ]

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

@@ -0,0 +1,26 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface ContactUs2Button {
+    label: string;
+    variant?: string;
+    size?: string;
+    icon?: string;
+}
+export interface ContactUs2Props {
+    heading?: string;
+    description?: string;
+    nameLabel?: string;
+    emailLabel?: string;
+    phoneLabel?: string;
+    companyLabel?: string;
+    messageLabel?: string;
+    button?: ContactUs2Button;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    imagePosition?: "start" | "end";
+    padding?: CompoundContainerProps["padding"];
+    sectionStyle?: CompoundContainerProps["sectionStyle"];
+    backgroundColor?: string;
+}
+export declare const ContactUs2: ({ heading, description, nameLabel, emailLabel, phoneLabel, companyLabel, messageLabel, button, image, imagePosition, padding, sectionStyle, backgroundColor, }: ContactUs2Props) => import("react/jsx-runtime").JSX.Element;