@rxdrag/website-lib-react 0.0.3 → 0.0.6

package/dist/forms.mjs

@@ -0,0 +1,1647 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-c02cc059.js";
+import { useRef, useState, useEffect, forwardRef, useMemo } from "react";
+import clsx from "clsx";
+const Submit = (props) => {
+  const {
+    title = "Send Message",
+    className,
+    spinner,
+    submitting,
+    disabled,
+    onClick,
+    rawHtml,
+    needClasses,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        className,
+        disabled: disabled ?? submitting,
+        onClick,
+        ...rest,
+        children: [
+          submitting && spinner,
+          rawHtml ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              style: { display: "contents" },
+              dangerouslySetInnerHTML: { __html: rawHtml }
+            }
+          ) : title
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "fixed -z-10 top-0 left-0 w-0 h-0 overflow-hidden opacity-0 pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: needClasses }) })
+  ] });
+};
+const encrypt = (value, formSalt) => {
+  const timestamp = Math.floor(Date.now() / (60 * 1e3));
+  const dataToEncrypt = `${formSalt}:${timestamp}:${value}`;
+  let hash = 0;
+  for (let i = 0; i < dataToEncrypt.length; i++) {
+    const char = dataToEncrypt.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return `${hash.toString(16)}_${timestamp}`;
+};
+const verifyEncryption = (formSalt, encryptedValue = "", originalValue = "", maxAgeMinutes = 30) => {
+  const parts = encryptedValue.split("_");
+  if (parts.length !== 2) {
+    return false;
+  }
+  const [hashString, timestampString] = parts;
+  const timestamp = parseInt(timestampString, 10);
+  const currentTimestamp = Math.floor(Date.now() / (60 * 1e3));
+  if (isNaN(timestamp) || currentTimestamp - timestamp > maxAgeMinutes) {
+    return false;
+  }
+  const dataToEncrypt = `${formSalt}:${timestamp}:${originalValue}`;
+  let hash = 0;
+  for (let i = 0; i < dataToEncrypt.length; i++) {
+    const char = dataToEncrypt.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return hashString === hash.toString(16);
+};
+function useInlineLabelPadding(extraSpace = 16) {
+  const labelRef = useRef(null);
+  const [paddingLeft, setPaddingLeft] = useState("3.5rem");
+  useEffect(() => {
+    const labelEl = labelRef.current;
+    if (!labelEl)
+      return;
+    let rafId = 0;
+    const measure = () => {
+      const width = labelEl.getBoundingClientRect().width;
+      setPaddingLeft(`${width + extraSpace}px`);
+    };
+    measure();
+    rafId = requestAnimationFrame(measure);
+    if (typeof ResizeObserver === "undefined") {
+      return () => {
+        cancelAnimationFrame(rafId);
+      };
+    }
+    const ro = new ResizeObserver(() => {
+      measure();
+    });
+    ro.observe(labelEl);
+    return () => {
+      cancelAnimationFrame(rafId);
+      ro.disconnect();
+    };
+  }, [extraSpace]);
+  return { labelRef, paddingLeft };
+}
+const generateEncryption = (formSalt, value) => {
+  const timestamp = Math.floor(Date.now() / (60 * 1e3));
+  const dataToEncrypt = `${formSalt}:${timestamp}:${value}`;
+  let hash = 0;
+  for (let i = 0; i < dataToEncrypt.length; i++) {
+    const char = dataToEncrypt.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return `${hash.toString(16)}_${timestamp}`;
+};
+const FileUpload2 = forwardRef(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      className,
+      labelClassName,
+      inputClassName,
+      accept = "*/*",
+      onChange,
+      onUploadStateChange,
+      error,
+      placeholder = "Click to select file",
+      uploadingText = "Uploading...",
+      selectedText = "Selected: {name}",
+      formSalt = "default-salt",
+      maxSize = 5 * 1024 * 1024,
+      ...rest
+    } = props;
+    const [uploadedFile, setUploadedFile] = useState(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadError, setUploadError] = useState("");
+    const fileInputRef = useRef(null);
+    const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+    const abortControllerRef = useRef(null);
+    const uploadFile = async (file, signal) => {
+      var _a;
+      if (file.size > maxSize) {
+        throw new Error(
+          `File ${file.name} exceeds maximum size limit of ${maxSize / 1024 / 1024}MB`
+        );
+      }
+      const honeypot = "";
+      const encryptedField = generateEncryption(formSalt, honeypot);
+      const credentialsResponse = await fetch("/api/get-upload-credentials", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          fileName: file.name,
+          fileSize: file.size,
+          fileType: file.type,
+          mediaType: "document",
+          // Request document type credentials (usually R2)
+          encryptedField,
+          honeypot
+        }),
+        signal
+      });
+      if (!credentialsResponse.ok) {
+        const errorData = await credentialsResponse.json();
+        throw new Error(
+          errorData.message || "Failed to get upload credentials"
+        );
+      }
+      const credentialsData = await credentialsResponse.json();
+      if (!credentialsData.success) {
+        throw new Error(
+          credentialsData.message || "Failed to get upload credentials"
+        );
+      }
+      const { credentials, mediaType } = credentialsData;
+      const uploadUrl = credentials == null ? void 0 : credentials.uploadUrl;
+      const platform = credentials == null ? void 0 : credentials.platform;
+      if (!uploadUrl) {
+        throw new Error("Failed to get upload URL");
+      }
+      let uploadResponse;
+      if (platform === "cloudflare_images") {
+        const formData = new FormData();
+        formData.append("file", file);
+        uploadResponse = await fetch(uploadUrl, {
+          method: "POST",
+          body: formData,
+          signal
+        });
+      } else {
+        uploadResponse = await fetch(uploadUrl, {
+          method: "PUT",
+          headers: {
+            "Content-Type": file.type
+          },
+          body: file,
+          signal
+        });
+      }
+      if (!uploadResponse.ok) {
+        throw new Error(
+          `File upload failed: ${uploadResponse.status} ${uploadResponse.statusText}`
+        );
+      }
+      let resourceId;
+      let publicUrl;
+      if (platform === "cloudflare_images") {
+        const uploadResult = await uploadResponse.json();
+        resourceId = ((_a = uploadResult == null ? void 0 : uploadResult.result) == null ? void 0 : _a.id) || uploadUrl;
+        const accountHash = uploadUrl.split("/")[3];
+        publicUrl = `https://imagedelivery.net/${accountHash}/${resourceId}/public`;
+      } else if (platform === "cloudflare_r2") {
+        resourceId = uploadUrl.split("/").pop() || uploadUrl;
+        publicUrl = uploadUrl;
+      } else {
+        resourceId = uploadUrl;
+        publicUrl = uploadUrl;
+      }
+      const mediaPayload = {
+        name: file.name,
+        size: file.size,
+        mimeType: file.type,
+        mediaType,
+        resourceUrl: resourceId,
+        storageType: platform || "cloudflare_images",
+        encryptedField,
+        honeypot
+      };
+      const createMediaResponse = await fetch("/api/create-media", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(mediaPayload),
+        signal
+      });
+      if (!createMediaResponse.ok) {
+        const errorData = await createMediaResponse.json();
+        throw new Error(errorData.message || "Failed to create Media object");
+      }
+      const mediaData = await createMediaResponse.json();
+      if (!mediaData.success) {
+        throw new Error(mediaData.message || "Failed to create Media object");
+      }
+      return {
+        id: mediaData.mediaId,
+        name: file.name,
+        size: file.size,
+        url: publicUrl
+        // Use public URL instead of resource ID
+      };
+    };
+    const handleFileChange = async (e) => {
+      const files = e.target.files;
+      if (!files || files.length === 0)
+        return;
+      const file = files[0];
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      setIsUploading(true);
+      onUploadStateChange == null ? void 0 : onUploadStateChange(true);
+      setUploadError("");
+      try {
+        if (file.size > maxSize) {
+          throw new Error(
+            `File ${file.name} exceeds ${maxSize / 1024 / 1024}MB limit`
+          );
+        }
+        const uploadedFileData = await uploadFile(file, abortController.signal);
+        setUploadedFile(uploadedFileData);
+        onChange == null ? void 0 : onChange(uploadedFileData);
+      } catch (error2) {
+        if (error2 instanceof Error && error2.name === "AbortError") {
+          console.log("User cancelled upload");
+        } else {
+          console.error("File upload failed:", error2);
+          setUploadError(
+            error2 instanceof Error ? error2.message : "File upload failed"
+          );
+        }
+      } finally {
+        setIsUploading(false);
+        onUploadStateChange == null ? void 0 : onUploadStateChange(false);
+        abortControllerRef.current = null;
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      }
+    };
+    const handleClick = () => {
+      var _a;
+      if (isUploading || uploadedFile)
+        return;
+      (_a = fileInputRef.current) == null ? void 0 : _a.click();
+    };
+    const handleRemoveFile = (e) => {
+      e.stopPropagation();
+      setUploadedFile(null);
+      onChange == null ? void 0 : onChange(null);
+      setUploadError("");
+    };
+    const handleCancelUpload = (e) => {
+      e.stopPropagation();
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+    const getDisplayText = () => {
+      if (isUploading)
+        return uploadingText;
+      if (uploadedFile) {
+        return selectedText.replace("{name}", uploadedFile.name);
+      }
+      return placeholder;
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx("relative w-full", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "label",
+            {
+              ref: labelRef,
+              htmlFor: name,
+              className: clsx(
+                "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap z-10",
+                labelClassName
+              ),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              id: name,
+              name,
+              required,
+              accept,
+              onChange: handleFileChange,
+              disabled: !!uploadedFile,
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              onClick: handleClick,
+              className: clsx(
+                "w-full pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300 bg-transparent transition-colors duration-200 flex items-center justify-start min-h-[2.5rem]",
+                isUploading || uploadedFile ? "cursor-not-allowed opacity-75" : "cursor-pointer hover:bg-white",
+                inputClassName
+              ),
+              style: { paddingLeft },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "span",
+                  {
+                    className: clsx(
+                      "pl-6 text-sm font-medium flex-1 mr-4",
+                      uploadedFile ? "text-gray-900" : "text-gray-600"
+                    ),
+                    children: getDisplayText()
+                  }
+                ),
+                isUploading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleCancelUpload,
+                    className: "ml-2 p-1 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0 flex items-center gap-1",
+                    title: "Cancel upload",
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-primary-500" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "svg",
+                        {
+                          className: "w-3 h-3 text-gray-500",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M6 18L18 6M6 6l12 12"
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ) : uploadedFile ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleRemoveFile,
+                    className: "ml-2 p-1 hover:bg-red-100 rounded-full transition-colors flex-shrink-0",
+                    title: "Delete file",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "svg",
+                      {
+                        className: "w-4 h-4 text-red-500",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2,
+                            d: "M6 18L18 6M6 6l12 12"
+                          }
+                        )
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "svg",
+                  {
+                    className: "w-5 h-5 text-gray-400 flex-shrink-0",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          (error || uploadError) && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1 text-sm", children: error || uploadError })
+        ]
+      }
+    );
+  }
+);
+const Input = forwardRef((props, ref) => {
+  const {
+    label,
+    name,
+    required,
+    requiredClassName,
+    labelClassName,
+    inputClassName,
+    type,
+    autoFocus,
+    value,
+    onChange,
+    error,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...rest, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: name, className: labelClassName, children: [
+      label,
+      required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : ""
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        ref,
+        type: type || "text",
+        id: name,
+        name,
+        required,
+        className: inputClassName,
+        autoComplete: name,
+        autoFocus,
+        value,
+        onChange
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1", children: error })
+  ] });
+});
+const Input2 = forwardRef((props, ref) => {
+  const {
+    label,
+    name,
+    required,
+    requiredClassName,
+    className,
+    labelClassName,
+    inputClassName,
+    type = "text",
+    autoFocus,
+    value,
+    placeholder,
+    onChange,
+    error,
+    ...rest
+  } = props;
+  const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("relative w-full", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "label",
+      {
+        ref: labelRef,
+        htmlFor: name,
+        className: clsx(
+          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+          labelClassName
+        ),
+        children: [
+          label,
+          required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : ""
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        ref,
+        type,
+        id: name,
+        name,
+        required,
+        placeholder,
+        className: clsx(
+          "w-full pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300 bg-transparent focus:bg-white transition-colors duration-200",
+          inputClassName
+        ),
+        style: { paddingLeft },
+        autoComplete: name,
+        autoFocus,
+        value,
+        onChange
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1 text-sm", children: error })
+  ] });
+});
+const Textarea = forwardRef(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      labelClassName,
+      inputClassName,
+      rows = 8,
+      value,
+      onChange,
+      error,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...rest, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: name, className: labelClassName, children: [
+        label,
+        required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : ""
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "textarea",
+        {
+          ref,
+          id: name,
+          name,
+          required,
+          className: inputClassName,
+          rows,
+          value,
+          onChange,
+          autoComplete: name
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1", children: error })
+    ] });
+  }
+);
+const Textarea2 = forwardRef(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      labelClassName,
+      inputClassName,
+      className,
+      rows = 6,
+      value,
+      onChange,
+      error,
+      ...rest
+    } = props;
+    const [paddingTop, setPaddingTop] = useState("2.5rem");
+    const labelRef = useRef(null);
+    useEffect(() => {
+      const labelEl = labelRef.current;
+      if (!labelEl)
+        return;
+      let rafId = 0;
+      const measure = () => {
+        const height = labelEl.getBoundingClientRect().height;
+        setPaddingTop(`${height + 12}px`);
+      };
+      measure();
+      rafId = requestAnimationFrame(measure);
+      if (typeof ResizeObserver === "undefined") {
+        return () => {
+          cancelAnimationFrame(rafId);
+        };
+      }
+      const ro = new ResizeObserver(() => {
+        measure();
+      });
+      ro.observe(labelEl);
+      return () => {
+        cancelAnimationFrame(rafId);
+        ro.disconnect();
+      };
+    }, [label]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className, ...rest, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "label",
+          {
+            ref: labelRef,
+            htmlFor: name,
+            className: `absolute left-3 top-2 opacity-70 text-sm pointer-events-none ${labelClassName || ""}`,
+            children: [
+              label,
+              required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : ""
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "textarea",
+          {
+            ref,
+            id: name,
+            name,
+            required,
+            rows,
+            value,
+            onChange,
+            autoComplete: name,
+            style: { paddingTop },
+            className: `w-full px-3 pb-2 border border-gray-300 rounded-md shadow-sm focus:outline-none 
+                        focus:ring-2 focus:ring-primary-300 focus:border-transparent resize-y bg-transparent focus:bg-white transition-colors duration-200 ${inputClassName || ""}`
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1 text-sm", children: error })
+    ] });
+  }
+);
+Textarea2.displayName = "Textarea2";
+const countries = [
+  { code: "AF", name: "Afghanistan", region: "Asia", dialCode: "+93" },
+  { code: "AL", name: "Albania", region: "Europe", dialCode: "+355" },
+  { code: "DZ", name: "Algeria", region: "Africa", dialCode: "+213" },
+  { code: "AS", name: "American Samoa", region: "Oceania", dialCode: "+1" },
+  { code: "AD", name: "Andorra", region: "Europe", dialCode: "+376" },
+  { code: "AO", name: "Angola", region: "Africa", dialCode: "+244" },
+  { code: "AI", name: "Anguilla", region: "North America", dialCode: "+1" },
+  { code: "AG", name: "Antigua and Barbuda", region: "North America", dialCode: "+1" },
+  { code: "AR", name: "Argentina", region: "South America", dialCode: "+54" },
+  { code: "AM", name: "Armenia", region: "Asia", dialCode: "+374" },
+  { code: "AW", name: "Aruba", region: "North America", dialCode: "+297" },
+  { code: "AU", name: "Australia", region: "Oceania", dialCode: "+61" },
+  { code: "AT", name: "Austria", region: "Europe", dialCode: "+43" },
+  { code: "AZ", name: "Azerbaijan", region: "Asia", dialCode: "+994" },
+  { code: "BS", name: "Bahamas", region: "North America", dialCode: "+1" },
+  { code: "BH", name: "Bahrain", region: "Asia", dialCode: "+973" },
+  { code: "BD", name: "Bangladesh", region: "Asia", dialCode: "+880" },
+  { code: "BB", name: "Barbados", region: "North America", dialCode: "+1" },
+  { code: "BY", name: "Belarus", region: "Europe", dialCode: "+375" },
+  { code: "BE", name: "Belgium", region: "Europe", dialCode: "+32" },
+  { code: "BZ", name: "Belize", region: "North America", dialCode: "+501" },
+  { code: "BJ", name: "Benin", region: "Africa", dialCode: "+229" },
+  { code: "BM", name: "Bermuda", region: "North America", dialCode: "+1" },
+  { code: "BT", name: "Bhutan", region: "Asia", dialCode: "+975" },
+  { code: "BO", name: "Bolivia", region: "South America", dialCode: "+591" },
+  { code: "BA", name: "Bosnia and Herzegovina", region: "Europe", dialCode: "+387" },
+  { code: "BW", name: "Botswana", region: "Africa", dialCode: "+267" },
+  { code: "BR", name: "Brazil", region: "South America", dialCode: "+55" },
+  { code: "VG", name: "British Virgin Islands", region: "North America", dialCode: "+1" },
+  { code: "BN", name: "Brunei", region: "Asia", dialCode: "+673" },
+  { code: "BG", name: "Bulgaria", region: "Europe", dialCode: "+359" },
+  { code: "BF", name: "Burkina Faso", region: "Africa", dialCode: "+226" },
+  { code: "BI", name: "Burundi", region: "Africa", dialCode: "+257" },
+  { code: "KH", name: "Cambodia", region: "Asia", dialCode: "+855" },
+  { code: "CM", name: "Cameroon", region: "Africa", dialCode: "+237" },
+  { code: "CA", name: "Canada", region: "North America", dialCode: "+1" },
+  { code: "CV", name: "Cape Verde", region: "Africa", dialCode: "+238" },
+  { code: "KY", name: "Cayman Islands", region: "North America", dialCode: "+1" },
+  { code: "CF", name: "Central African Republic", region: "Africa", dialCode: "+236" },
+  { code: "TD", name: "Chad", region: "Africa", dialCode: "+235" },
+  { code: "CL", name: "Chile", region: "South America", dialCode: "+56" },
+  { code: "CN", name: "China", region: "Asia", dialCode: "+86" },
+  { code: "HK", name: "Hong Kong, China", region: "Asia", dialCode: "+852" },
+  { code: "MO", name: "Macao, China", region: "Asia", dialCode: "+853" },
+  { code: "TW", name: "Taiwan, China", region: "Asia", dialCode: "+886" },
+  { code: "CO", name: "Colombia", region: "South America", dialCode: "+57" },
+  { code: "KM", name: "Comoros", region: "Africa", dialCode: "+269" },
+  { code: "CG", name: "Congo", region: "Africa", dialCode: "+242" },
+  { code: "CD", name: "Congo (DRC)", region: "Africa", dialCode: "+243" },
+  { code: "CR", name: "Costa Rica", region: "North America", dialCode: "+506" },
+  { code: "CI", name: "Côte d’Ivoire", region: "Africa", dialCode: "+225" },
+  { code: "HR", name: "Croatia", region: "Europe", dialCode: "+385" },
+  { code: "CU", name: "Cuba", region: "North America", dialCode: "+53" },
+  { code: "CY", name: "Cyprus", region: "Europe", dialCode: "+357" },
+  { code: "CZ", name: "Czechia", region: "Europe", dialCode: "+420" },
+  { code: "DK", name: "Denmark", region: "Europe", dialCode: "+45" },
+  { code: "DJ", name: "Djibouti", region: "Africa", dialCode: "+253" },
+  { code: "DM", name: "Dominica", region: "North America", dialCode: "+1" },
+  { code: "DO", name: "Dominican Republic", region: "North America", dialCode: "+1" },
+  { code: "EC", name: "Ecuador", region: "South America", dialCode: "+593" },
+  { code: "EG", name: "Egypt", region: "Africa", dialCode: "+20" },
+  { code: "SV", name: "El Salvador", region: "North America", dialCode: "+503" },
+  { code: "GQ", name: "Equatorial Guinea", region: "Africa", dialCode: "+240" },
+  { code: "ER", name: "Eritrea", region: "Africa", dialCode: "+291" },
+  { code: "EE", name: "Estonia", region: "Europe", dialCode: "+372" },
+  { code: "SZ", name: "Eswatini", region: "Africa", dialCode: "+268" },
+  { code: "ET", name: "Ethiopia", region: "Africa", dialCode: "+251" },
+  { code: "FO", name: "Faroe Islands", region: "Europe", dialCode: "+298" },
+  { code: "FJ", name: "Fiji", region: "Oceania", dialCode: "+679" },
+  { code: "FI", name: "Finland", region: "Europe", dialCode: "+358" },
+  { code: "FR", name: "France", region: "Europe", dialCode: "+33" },
+  { code: "GF", name: "French Guiana", region: "South America", dialCode: "+594" },
+  { code: "PF", name: "French Polynesia", region: "Oceania", dialCode: "+689" },
+  { code: "GA", name: "Gabon", region: "Africa", dialCode: "+241" },
+  { code: "GM", name: "Gambia", region: "Africa", dialCode: "+220" },
+  { code: "GE", name: "Georgia", region: "Asia", dialCode: "+995" },
+  { code: "DE", name: "Germany", region: "Europe", dialCode: "+49" },
+  { code: "GH", name: "Ghana", region: "Africa", dialCode: "+233" },
+  { code: "GI", name: "Gibraltar", region: "Europe", dialCode: "+350" },
+  { code: "GR", name: "Greece", region: "Europe", dialCode: "+30" },
+  { code: "GL", name: "Greenland", region: "North America", dialCode: "+299" },
+  { code: "GD", name: "Grenada", region: "North America", dialCode: "+1" },
+  { code: "GP", name: "Guadeloupe", region: "North America", dialCode: "+590" },
+  { code: "GU", name: "Guam", region: "Oceania", dialCode: "+1" },
+  { code: "GT", name: "Guatemala", region: "North America", dialCode: "+502" },
+  { code: "GG", name: "Guernsey", region: "Europe", dialCode: "+44" },
+  { code: "GN", name: "Guinea", region: "Africa", dialCode: "+224" },
+  { code: "GW", name: "Guinea-Bissau", region: "Africa", dialCode: "+245" },
+  { code: "GY", name: "Guyana", region: "South America", dialCode: "+592" },
+  { code: "HT", name: "Haiti", region: "North America", dialCode: "+509" },
+  { code: "HN", name: "Honduras", region: "North America", dialCode: "+504" },
+  { code: "HU", name: "Hungary", region: "Europe", dialCode: "+36" },
+  { code: "IS", name: "Iceland", region: "Europe", dialCode: "+354" },
+  { code: "IN", name: "India", region: "Asia", dialCode: "+91" },
+  { code: "ID", name: "Indonesia", region: "Asia", dialCode: "+62" },
+  { code: "IR", name: "Iran", region: "Asia", dialCode: "+98" },
+  { code: "IQ", name: "Iraq", region: "Asia", dialCode: "+964" },
+  { code: "IE", name: "Ireland", region: "Europe", dialCode: "+353" },
+  { code: "IM", name: "Isle of Man", region: "Europe", dialCode: "+44" },
+  { code: "IL", name: "Israel", region: "Asia", dialCode: "+972" },
+  { code: "IT", name: "Italy", region: "Europe", dialCode: "+39" },
+  { code: "JM", name: "Jamaica", region: "North America", dialCode: "+1" },
+  { code: "JP", name: "Japan", region: "Asia", dialCode: "+81" },
+  { code: "JE", name: "Jersey", region: "Europe", dialCode: "+44" },
+  { code: "JO", name: "Jordan", region: "Asia", dialCode: "+962" },
+  { code: "KZ", name: "Kazakhstan", region: "Asia", dialCode: "+7" },
+  { code: "KE", name: "Kenya", region: "Africa", dialCode: "+254" },
+  { code: "KI", name: "Kiribati", region: "Oceania", dialCode: "+686" },
+  { code: "XK", name: "Kosovo", region: "Europe", dialCode: "+383" },
+  { code: "KW", name: "Kuwait", region: "Asia", dialCode: "+965" },
+  { code: "KG", name: "Kyrgyzstan", region: "Asia", dialCode: "+996" },
+  { code: "LA", name: "Laos", region: "Asia", dialCode: "+856" },
+  { code: "LV", name: "Latvia", region: "Europe", dialCode: "+371" },
+  { code: "LB", name: "Lebanon", region: "Asia", dialCode: "+961" },
+  { code: "LS", name: "Lesotho", region: "Africa", dialCode: "+266" },
+  { code: "LR", name: "Liberia", region: "Africa", dialCode: "+231" },
+  { code: "LY", name: "Libya", region: "Africa", dialCode: "+218" },
+  { code: "LI", name: "Liechtenstein", region: "Europe", dialCode: "+423" },
+  { code: "LT", name: "Lithuania", region: "Europe", dialCode: "+370" },
+  { code: "LU", name: "Luxembourg", region: "Europe", dialCode: "+352" },
+  { code: "MG", name: "Madagascar", region: "Africa", dialCode: "+261" },
+  { code: "MW", name: "Malawi", region: "Africa", dialCode: "+265" },
+  { code: "MY", name: "Malaysia", region: "Asia", dialCode: "+60" },
+  { code: "MV", name: "Maldives", region: "Asia", dialCode: "+960" },
+  { code: "ML", name: "Mali", region: "Africa", dialCode: "+223" },
+  { code: "MT", name: "Malta", region: "Europe", dialCode: "+356" },
+  { code: "MH", name: "Marshall Islands", region: "Oceania", dialCode: "+692" },
+  { code: "MQ", name: "Martinique", region: "North America", dialCode: "+596" },
+  { code: "MR", name: "Mauritania", region: "Africa", dialCode: "+222" },
+  { code: "MU", name: "Mauritius", region: "Africa", dialCode: "+230" },
+  { code: "YT", name: "Mayotte", region: "Africa", dialCode: "+262" },
+  { code: "MX", name: "Mexico", region: "North America", dialCode: "+52" },
+  { code: "FM", name: "Micronesia", region: "Oceania", dialCode: "+691" },
+  { code: "MD", name: "Moldova", region: "Europe", dialCode: "+373" },
+  { code: "MC", name: "Monaco", region: "Europe", dialCode: "+377" },
+  { code: "MN", name: "Mongolia", region: "Asia", dialCode: "+976" },
+  { code: "ME", name: "Montenegro", region: "Europe", dialCode: "+382" },
+  { code: "MS", name: "Montserrat", region: "North America", dialCode: "+1" },
+  { code: "MA", name: "Morocco", region: "Africa", dialCode: "+212" },
+  { code: "MZ", name: "Mozambique", region: "Africa", dialCode: "+258" },
+  { code: "MM", name: "Myanmar", region: "Asia", dialCode: "+95" },
+  { code: "NA", name: "Namibia", region: "Africa", dialCode: "+264" },
+  { code: "NR", name: "Nauru", region: "Oceania", dialCode: "+674" },
+  { code: "NP", name: "Nepal", region: "Asia", dialCode: "+977" },
+  { code: "NL", name: "Netherlands", region: "Europe", dialCode: "+31" },
+  { code: "NC", name: "New Caledonia", region: "Oceania", dialCode: "+687" },
+  { code: "NZ", name: "New Zealand", region: "Oceania", dialCode: "+64" },
+  { code: "NI", name: "Nicaragua", region: "North America", dialCode: "+505" },
+  { code: "NE", name: "Niger", region: "Africa", dialCode: "+227" },
+  { code: "NG", name: "Nigeria", region: "Africa", dialCode: "+234" },
+  { code: "NU", name: "Niue", region: "Oceania", dialCode: "+683" },
+  { code: "NF", name: "Norfolk Island", region: "Oceania", dialCode: "+672" },
+  { code: "KP", name: "North Korea", region: "Asia", dialCode: "+850" },
+  { code: "MK", name: "North Macedonia", region: "Europe", dialCode: "+389" },
+  { code: "MP", name: "Northern Mariana Islands", region: "Oceania", dialCode: "+1" },
+  { code: "NO", name: "Norway", region: "Europe", dialCode: "+47" },
+  { code: "OM", name: "Oman", region: "Asia", dialCode: "+968" },
+  { code: "PK", name: "Pakistan", region: "Asia", dialCode: "+92" },
+  { code: "PW", name: "Palau", region: "Oceania", dialCode: "+680" },
+  { code: "PS", name: "Palestine", region: "Asia", dialCode: "+970" },
+  { code: "PA", name: "Panama", region: "North America", dialCode: "+507" },
+  { code: "PG", name: "Papua New Guinea", region: "Oceania", dialCode: "+675" },
+  { code: "PY", name: "Paraguay", region: "South America", dialCode: "+595" },
+  { code: "PE", name: "Peru", region: "South America", dialCode: "+51" },
+  { code: "PH", name: "Philippines", region: "Asia", dialCode: "+63" },
+  { code: "PL", name: "Poland", region: "Europe", dialCode: "+48" },
+  { code: "PT", name: "Portugal", region: "Europe", dialCode: "+351" },
+  { code: "PR", name: "Puerto Rico", region: "North America", dialCode: "+1" },
+  { code: "QA", name: "Qatar", region: "Asia", dialCode: "+974" },
+  { code: "RE", name: "Réunion", region: "Africa", dialCode: "+262" },
+  { code: "RO", name: "Romania", region: "Europe", dialCode: "+40" },
+  { code: "RU", name: "Russia", region: "Europe", dialCode: "+7" },
+  { code: "RW", name: "Rwanda", region: "Africa", dialCode: "+250" },
+  { code: "BL", name: "Saint Barthélemy", region: "North America", dialCode: "+590" },
+  { code: "KN", name: "Saint Kitts and Nevis", region: "North America", dialCode: "+1" },
+  { code: "LC", name: "Saint Lucia", region: "North America", dialCode: "+1" },
+  { code: "MF", name: "Saint Martin", region: "North America", dialCode: "+590" },
+  { code: "PM", name: "Saint Pierre and Miquelon", region: "North America", dialCode: "+508" },
+  { code: "VC", name: "Saint Vincent and the Grenadines", region: "North America", dialCode: "+1" },
+  { code: "WS", name: "Samoa", region: "Oceania", dialCode: "+685" },
+  { code: "SM", name: "San Marino", region: "Europe", dialCode: "+378" },
+  { code: "ST", name: "São Tomé and Príncipe", region: "Africa", dialCode: "+239" },
+  { code: "SA", name: "Saudi Arabia", region: "Asia", dialCode: "+966" },
+  { code: "SN", name: "Senegal", region: "Africa", dialCode: "+221" },
+  { code: "RS", name: "Serbia", region: "Europe", dialCode: "+381" },
+  { code: "SC", name: "Seychelles", region: "Africa", dialCode: "+248" },
+  { code: "SL", name: "Sierra Leone", region: "Africa", dialCode: "+232" },
+  { code: "SG", name: "Singapore", region: "Asia", dialCode: "+65" },
+  { code: "SX", name: "Sint Maarten", region: "North America", dialCode: "+1" },
+  { code: "SK", name: "Slovakia", region: "Europe", dialCode: "+421" },
+  { code: "SI", name: "Slovenia", region: "Europe", dialCode: "+386" },
+  { code: "SB", name: "Solomon Islands", region: "Oceania", dialCode: "+677" },
+  { code: "SO", name: "Somalia", region: "Africa", dialCode: "+252" },
+  { code: "ZA", name: "South Africa", region: "Africa", dialCode: "+27" },
+  { code: "KR", name: "South Korea", region: "Asia", dialCode: "+82" },
+  { code: "SS", name: "South Sudan", region: "Africa", dialCode: "+211" },
+  { code: "ES", name: "Spain", region: "Europe", dialCode: "+34" },
+  { code: "LK", name: "Sri Lanka", region: "Asia", dialCode: "+94" },
+  { code: "SD", name: "Sudan", region: "Africa", dialCode: "+249" },
+  { code: "SR", name: "Suriname", region: "South America", dialCode: "+597" },
+  { code: "SE", name: "Sweden", region: "Europe", dialCode: "+46" },
+  { code: "CH", name: "Switzerland", region: "Europe", dialCode: "+41" },
+  { code: "SY", name: "Syria", region: "Asia", dialCode: "+963" },
+  { code: "TJ", name: "Tajikistan", region: "Asia", dialCode: "+992" },
+  { code: "TZ", name: "Tanzania", region: "Africa", dialCode: "+255" },
+  { code: "TH", name: "Thailand", region: "Asia", dialCode: "+66" },
+  { code: "TG", name: "Togo", region: "Africa", dialCode: "+228" },
+  { code: "TK", name: "Tokelau", region: "Oceania", dialCode: "+690" },
+  { code: "TO", name: "Tonga", region: "Oceania", dialCode: "+676" },
+  { code: "TT", name: "Trinidad and Tobago", region: "North America", dialCode: "+1" },
+  { code: "TN", name: "Tunisia", region: "Africa", dialCode: "+216" },
+  { code: "TR", name: "Türkiye", region: "Europe", dialCode: "+90" },
+  { code: "TM", name: "Turkmenistan", region: "Asia", dialCode: "+993" },
+  { code: "TC", name: "Turks and Caicos Islands", region: "North America", dialCode: "+1" },
+  { code: "TV", name: "Tuvalu", region: "Oceania", dialCode: "+688" },
+  { code: "UG", name: "Uganda", region: "Africa", dialCode: "+256" },
+  { code: "UA", name: "Ukraine", region: "Europe", dialCode: "+380" },
+  { code: "AE", name: "United Arab Emirates", region: "Asia", dialCode: "+971" },
+  { code: "GB", name: "United Kingdom", region: "Europe", dialCode: "+44" },
+  { code: "US", name: "United States", region: "North America", dialCode: "+1" },
+  { code: "UY", name: "Uruguay", region: "South America", dialCode: "+598" },
+  { code: "UZ", name: "Uzbekistan", region: "Asia", dialCode: "+998" },
+  { code: "VU", name: "Vanuatu", region: "Oceania", dialCode: "+678" },
+  { code: "VA", name: "Vatican City", region: "Europe", dialCode: "+39" },
+  { code: "VE", name: "Venezuela", region: "South America", dialCode: "+58" },
+  { code: "VN", name: "Vietnam", region: "Asia", dialCode: "+84" },
+  { code: "VI", name: "U.S. Virgin Islands", region: "North America", dialCode: "+1" },
+  { code: "WF", name: "Wallis and Futuna", region: "Oceania", dialCode: "+681" },
+  { code: "EH", name: "Western Sahara", region: "Africa", dialCode: "+212" },
+  { code: "YE", name: "Yemen", region: "Asia", dialCode: "+967" },
+  { code: "ZM", name: "Zambia", region: "Africa", dialCode: "+260" },
+  { code: "ZW", name: "Zimbabwe", region: "Africa", dialCode: "+263" }
+];
+function useTelControl({ countries: countries$1, name, value, onChange }) {
+  const allCountries = useMemo(() => countries$1 || countries, [countries$1]);
+  const [selected, setSelected] = useState(null);
+  const [localNumber, setLocalNumber] = useState("");
+  const toStringValue = (val) => {
+    if (typeof val === "string")
+      return val;
+    if (typeof val === "number")
+      return String(val);
+    if (Array.isArray(val))
+      return val[0] ?? "";
+    return "";
+  };
+  useEffect(() => {
+    const s = toStringValue(value).trim();
+    const m = s.match(/^\+\d{1,4}/);
+    const dial = m ? m[0] : "";
+    const number = s.slice(dial.length).trimStart();
+    setLocalNumber(number || "");
+    if (dial) {
+      const found = allCountries.find((c) => c.dialCode === dial) || null;
+      setSelected(found);
+    } else {
+      setSelected(null);
+    }
+  }, [value, allCountries]);
+  const emitChange = (combined) => {
+    if (!onChange)
+      return;
+    const evt = {
+      target: { value: combined, name },
+      currentTarget: { value: combined, name }
+    };
+    onChange(evt);
+  };
+  const filtered = (query) => {
+    if (!query)
+      return allCountries;
+    const q = query.toLowerCase();
+    return allCountries.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.region && c.region.toLowerCase().includes(q) || c.dialCode.replace("+", "").includes(q.replace("+", ""))
+    );
+  };
+  const onSelectCountry = (c) => {
+    setSelected(c);
+    const combined = `${c.dialCode} ${localNumber}`.trim();
+    emitChange(combined);
+  };
+  const onChangeLocal = (next) => {
+    setLocalNumber(next);
+    const combined = `${(selected == null ? void 0 : selected.dialCode) || ""} ${next}`.trim();
+    emitChange(combined);
+  };
+  return {
+    allCountries,
+    selected,
+    setSelected,
+    localNumber,
+    setLocalNumber,
+    filtered,
+    onSelectCountry,
+    onChangeLocal
+  };
+}
+const TelInput = forwardRef(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries: countries2,
+      placeholder,
+      value,
+      onChange
+    } = props;
+    const { allCountries, selected, localNumber, onSelectCountry, onChangeLocal } = useTelControl({ countries: countries2, name, value, onChange });
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef(null);
+    const buttonRef = useRef(null);
+    useEffect(() => {
+      const onDocClick = (e) => {
+        const target = e.target;
+        if (open && panelRef.current && !panelRef.current.contains(target) && buttonRef.current && !buttonRef.current.contains(target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+    const filtered = useMemo(() => {
+      if (!query)
+        return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c) => c.name.toLowerCase().includes(q) || c.region && c.region.toLowerCase().includes(q) || c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("w-full", className), children: [
+      label ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: name,
+          className: clsx(
+            "mb-1 inline-flex items-center text-sm text-gray-600",
+            labelClassName
+          ),
+          children: [
+            label,
+            required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : null
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: clsx(
+            "flex h-10 items-center gap-2 rounded-md focus-within:ring-2 focus-within:ring-primary-300 focus-within:ring-offset-0 bg-white",
+            inputClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-full", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  ref: buttonRef,
+                  type: "button",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": open,
+                  onClick: () => setOpen((v) => !v),
+                  className: "h-full min-w-[200px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-left leading-tight", children: selected ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selected.name }),
+                      selected.region ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500", children: [
+                        ", ",
+                        selected.region
+                      ] }) : null,
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-gray-700", children: selected.dialCode })
+                    ] }) : "Select Country/Region" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "svg",
+                      {
+                        className: "ml-2 h-4 w-4 text-gray-500",
+                        viewBox: "0 0 20 20",
+                        fill: "currentColor",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "path",
+                          {
+                            fillRule: "evenodd",
+                            d: "M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z",
+                            clipRule: "evenodd"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              open ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  ref: panelRef,
+                  className: "absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "input",
+                        {
+                          value: query,
+                          onChange: (e) => setQuery(e.target.value),
+                          placeholder: "Enter Country/Region",
+                          className: "h-8 w-full bg-transparent text-sm outline-none"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "svg",
+                        {
+                          className: "h-4 w-4 text-gray-500",
+                          viewBox: "0 0 20 20",
+                          fill: "currentColor",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-h-64 overflow-auto pr-1", children: filtered.map((c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onSelectCountry(c);
+                          setOpen(false);
+                        },
+                        className: "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50",
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "span",
+                            {
+                              className: clsx(
+                                "inline-block h-3 w-3 rounded-full border",
+                                (selected == null ? void 0 : selected.code) === c.code ? "border-primary-500 ring-4 ring-primary-200" : "border-gray-400"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex-1 truncate", children: [
+                            c.name,
+                            c.region ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500", children: [
+                              ", ",
+                              c.region
+                            ] }) : null
+                          ] }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700", children: c.dialCode })
+                        ]
+                      },
+                      c.code
+                    )) })
+                  ]
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                ref,
+                id: name,
+                name,
+                required,
+                placeholder: placeholder || "Phone number",
+                inputMode: "tel",
+                className: clsx("h-10 w-full px-3 py-0 text-sm leading-tight ring-0 outline-none rounded-md"),
+                value: localNumber,
+                onChange: (e) => {
+                  const next = e.target.value;
+                  onChangeLocal(next);
+                },
+                autoComplete: name,
+                autoCorrect: "off",
+                spellCheck: false
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+const TelInput2 = forwardRef(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries: countries2,
+      placeholder,
+      selectPlaceholder,
+      value,
+      onChange
+    } = props;
+    const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+    const {
+      allCountries,
+      selected,
+      localNumber,
+      onSelectCountry,
+      onChangeLocal
+    } = useTelControl({ countries: countries2, name, value, onChange });
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef(null);
+    const buttonRef = useRef(null);
+    const filtered = useMemo(() => {
+      if (!query)
+        return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c) => c.name.toLowerCase().includes(q) || c.region && c.region.toLowerCase().includes(q) || c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
+    useEffect(() => {
+      const onDocClick = (e) => {
+        const target = e.target;
+        if (open && panelRef.current && !panelRef.current.contains(target) && buttonRef.current && !buttonRef.current.contains(target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("relative w-full", className), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          ref: labelRef,
+          htmlFor: name,
+          className: clsx(
+            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+            labelClassName
+          ),
+          children: [
+            label,
+            required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: clsx(
+            "flex h-10 items-center gap-2 rounded-md shadow-sm focus-within:ring-2 focus-within:ring-primary-300",
+            inputClassName
+          ),
+          style: { paddingLeft },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-full", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  ref: buttonRef,
+                  type: "button",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": open,
+                  onClick: () => setOpen((v) => !v),
+                  className: "h-full min-w-[100px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-left leading-tight", children: selected ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selected.dialCode }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "+ Code" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "svg",
+                      {
+                        className: "ml-2 h-4 w-4 text-gray-500",
+                        viewBox: "0 0 20 20",
+                        fill: "currentColor",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "path",
+                          {
+                            fillRule: "evenodd",
+                            d: "M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z",
+                            clipRule: "evenodd"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              open ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  ref: panelRef,
+                  className: "absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "input",
+                        {
+                          value: query,
+                          onChange: (e) => setQuery(e.target.value),
+                          placeholder: selectPlaceholder || "Enter Country/Region",
+                          className: "h-8 w-full bg-transparent text-sm outline-none"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "svg",
+                        {
+                          className: "h-4 w-4 text-gray-500",
+                          viewBox: "0 0 20 20",
+                          fill: "currentColor",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-h-64 overflow-auto pr-1", children: filtered.map((c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onSelectCountry(c);
+                          setOpen(false);
+                        },
+                        className: "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50",
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "span",
+                            {
+                              className: clsx(
+                                "inline-block h-3 w-3 rounded-full border",
+                                (selected == null ? void 0 : selected.code) === c.code ? "border-primary-500 ring-4 ring-primary-200" : "border-gray-400"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex-1 truncate", children: [
+                            c.name,
+                            c.region ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500", children: [
+                              ", ",
+                              c.region
+                            ] }) : null
+                          ] }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700", children: c.dialCode })
+                        ]
+                      },
+                      c.code
+                    )) })
+                  ]
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                ref,
+                id: name,
+                name,
+                required,
+                placeholder: placeholder || "Phone number",
+                inputMode: "tel",
+                className: clsx(
+                  "h-10 w-full appearance-none rounded-md border-0 bg-transparent px-3 py-0 text-sm leading-tight focus:outline-none"
+                ),
+                value: localNumber,
+                onChange: (e) => onChangeLocal(e.target.value),
+                autoComplete: name,
+                autoCorrect: "off",
+                spellCheck: false
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+const getControl = (controlName, fieldStyle) => {
+  switch (controlName) {
+    case "Input":
+      return getInput(fieldStyle);
+    case "Textarea":
+      return getTextarea(fieldStyle);
+    case "TelInput":
+      return getTelInput(fieldStyle);
+    default:
+      return getInput(fieldStyle);
+  }
+};
+const getInput = (fieldStyle) => {
+  if (fieldStyle === "default") {
+    return Input;
+  } else if (fieldStyle === "label-inline") {
+    return Input2;
+  } else {
+    return Input;
+  }
+};
+const getTextarea = (fieldStyle) => {
+  if (fieldStyle === "default") {
+    return Textarea;
+  } else if (fieldStyle === "label-inline") {
+    return Textarea2;
+  } else {
+    return Textarea;
+  }
+};
+const getTelInput = (fieldStyle) => {
+  if (fieldStyle === "label-inline") {
+    return TelInput2;
+  }
+  return TelInput;
+};
+const getFileUpload = (fieldStyle) => {
+  if (fieldStyle === "default") {
+    return FileUpload2;
+  } else if (fieldStyle === "label-inline") {
+    return FileUpload2;
+  } else {
+    return FileUpload2;
+  }
+};
+const ContactForm = forwardRef(
+  (props, ref) => {
+    const {
+      submit,
+      actionUrl = "/api/ask-for-quote",
+      formSalt,
+      fields = [],
+      className,
+      classNames,
+      fromCta,
+      ...rest
+    } = props;
+    const [formData, setFormData] = useState({
+      name: "",
+      email: "",
+      company: "",
+      message: "",
+      phone: "",
+      // 初始化蜜罐字段
+      attachments: []
+      // 附件 ID 列表
+    });
+    const [errors, setErrors] = useState({});
+    const [submitting, setSubmitting] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [submitStatus, setSubmitStatus] = useState({});
+    const lastCta = window.lastCta;
+    const handleChange = (e, isExtends) => {
+      const { name, value } = e.target;
+      if (isExtends) {
+        setFormData((prev) => ({
+          ...prev,
+          extents: {
+            ...prev.extends || {},
+            [name]: value
+          }
+        }));
+      } else {
+        setFormData((prev) => ({
+          ...prev,
+          [name]: value
+        }));
+      }
+      setSubmitStatus({});
+      if (errors[name]) {
+        setErrors((prev) => ({
+          ...prev,
+          [name]: void 0
+        }));
+      }
+    };
+    const handleFileChange = (fileInfo) => {
+      setFormData((prev) => ({
+        ...prev,
+        attachments: fileInfo ? [fileInfo] : []
+        // 存储完整的文件信息
+      }));
+    };
+    const handleFileUploadStateChange = (uploading) => {
+      setIsUploading(uploading);
+    };
+    const validateForm = () => {
+      var _a, _b;
+      const newErrors = {};
+      if (!((_a = formData.email) == null ? void 0 : _a.trim())) {
+        newErrors.email = "Please enter your email";
+      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+        newErrors.email = "Please enter a valid email address";
+      }
+      if (!((_b = formData.message) == null ? void 0 : _b.trim())) {
+        newErrors.message = "Please enter your message";
+      }
+      if (formData.phone) {
+        console.log("Honeypot triggered - likely spam submission");
+        return false;
+      }
+      setErrors(newErrors);
+      return Object.keys(newErrors).length === 0;
+    };
+    const handleClick = async (event) => {
+      event.preventDefault();
+      if (!validateForm()) {
+        return;
+      }
+      try {
+        setSubmitting(true);
+        setSubmitStatus({});
+        const response = await fetch(actionUrl, {
+          method: "POST",
+          body: JSON.stringify({
+            ...formData,
+            //TODO:后面改成从window 或者传入
+            fromCta: fromCta || lastCta,
+            encryptedField: encrypt(formData.phone, formSalt)
+          }),
+          headers: {
+            "X-Request-URL": window.location.href,
+            "Content-Type": "application/json"
+          }
+        });
+        if (!response.ok) {
+          throw new Error(`Server responded with status: ${response.status}`);
+        }
+        const result = await response.json();
+        setSubmitStatus({
+          success: result.success,
+          message: result.message
+        });
+        if (result.success) {
+          setFormData({
+            name: "",
+            email: "",
+            company: "",
+            message: "",
+            phone: "",
+            attachments: []
+          });
+          window.location.href = "/thanks";
+        }
+      } catch (error) {
+        console.error("Form submission error:", error);
+        setSubmitStatus({
+          success: false,
+          message: error instanceof Error ? `Error: ${error.message}` : "Failed to submit the form. Please try again later."
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx(
+          "py-4 grid max-w-2xl grid-cols-1 gap-x-6 sm:grid-cols-2 w-full",
+          className || "gap-y-6"
+        ),
+        ...rest,
+        children: [
+          fields.map((field, index) => {
+            const {
+              controlName,
+              feildStyle,
+              isExtends,
+              name,
+              className: className2,
+              inputClassName,
+              labelClassName,
+              ...rest2
+            } = field;
+            if (controlName === "FileUpload") {
+              const FileUploadControl = getFileUpload(feildStyle);
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FileUploadControl,
+                {
+                  name: name || "attachments",
+                  formSalt,
+                  className: clsx(classNames == null ? void 0 : classNames.inputContainer, className2),
+                  inputClassName: clsx(classNames == null ? void 0 : classNames.input, inputClassName),
+                  labelClassName: clsx(classNames == null ? void 0 : classNames.label, labelClassName),
+                  maxSize: 3 * 1024 * 1024,
+                  onChange: handleFileChange,
+                  onUploadStateChange: handleFileUploadStateChange,
+                  placeholder: "Click to select file",
+                  uploadingText: "Uploading...",
+                  selectedText: "Selected: {name}",
+                  accept: "*/*",
+                  ...rest2
+                },
+                name || index
+              );
+            }
+            const Control = getControl(controlName, feildStyle);
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Control,
+              {
+                name,
+                className: clsx(classNames == null ? void 0 : classNames.inputContainer, className2),
+                labelClassName: clsx(classNames == null ? void 0 : classNames.label, labelClassName),
+                inputClassName: clsx(classNames == null ? void 0 : classNames.input, inputClassName),
+                requiredClassName: classNames == null ? void 0 : classNames.required,
+                value: formData[name],
+                onChange: (e) => handleChange(e, isExtends),
+                error: errors[name],
+                ...rest2
+              },
+              name || index
+            );
+          }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "text",
+              name: "phone",
+              value: formData.phone,
+              onChange: handleChange,
+              tabIndex: -1,
+              autoComplete: "off"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: clsx(
+                "col-span-full flex items-center gap-x-6 px-0 py-2",
+                submit == null ? void 0 : submit.containerClassName
+              ),
+              children: [
+                submitStatus.message && !submitStatus.success && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: `text-sm ${submitStatus.success ? "text-green-600" : "text-red-600"}`,
+                    children: submitStatus.message
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Submit,
+                  {
+                    className: clsx(
+                      "flex gap-2 items-center relative shadow-sm btn btn-lg nowrap",
+                      (submit == null ? void 0 : submit.className) || "btn-primary"
+                    ),
+                    title: (submit == null ? void 0 : submit.title) || "Send Message",
+                    spinner: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "left-8 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white" }) }),
+                    rawHtml: submit == null ? void 0 : submit.rawHtml,
+                    needClasses: submit == null ? void 0 : submit.needClasses,
+                    submitting,
+                    disabled: submitting || isUploading,
+                    onClick: handleClick
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  ContactForm,
+  FileUpload2,
+  Input,
+  Submit,
+  Textarea,
+  encrypt,
+  verifyEncryption
+};
+//# sourceMappingURL=forms.mjs.map