@forms.expert/sdk 0.2.10 → 0.2.12

package/dist/react/index.js

@@ -793,7 +793,34 @@ function FormsExpertForm({
   const resolvedButtonText = styling.buttonText || submitText;
   const googleFonts = ["Inter", "Roboto", "Open Sans", "Lato", "Poppins", "Montserrat", "Nunito", "Source Sans Pro", "Raleway", "Ubuntu", "Playfair Display", "Merriweather"];
   const fontToLoad = styling.fontFamily?.split(",")[0]?.trim();
-  const googleFontUrl = fontToLoad && googleFonts.includes(fontToLoad) ? `https://fonts.googleapis.com/css2?family=${fontToLoad.replace(/ /g, "+")}:wght@400;500;600;700&display=swap` : null;
+  const hasExistingFonts = useMemo2(() => {
+    if (typeof document === "undefined") return false;
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+      const href = link.href || "";
+      if (href.includes("fonts.googleapis.com") || href.includes("fonts.gstatic.com") || href.includes("typekit") || href.includes("fonts.")) {
+        return true;
+      }
+    }
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          const rules = sheet.cssRules || sheet.rules;
+          if (rules) {
+            for (const rule of rules) {
+              if (rule instanceof CSSFontFaceRule) {
+                return true;
+              }
+            }
+          }
+        } catch {
+        }
+      }
+    } catch {
+    }
+    return false;
+  }, []);
+  const googleFontUrl = fontToLoad && googleFonts.includes(fontToLoad) && !hasExistingFonts ? `https://fonts.googleapis.com/css2?family=${fontToLoad.replace(/ /g, "+")}:wght@400;500;600;700&display=swap` : null;
   const handleSubmit = async (e) => {
     e.preventDefault();
     const result = await form.submit(captchaToken || void 0);
@@ -996,7 +1023,7 @@ function FormsExpertForm({
             }
           }
         ),
-        form.config.settings?.showFormName !== false && form.config.name && /* @__PURE__ */ jsx2("h1", { style: {
+        form.config.settings?.showFormName !== false && form.config.name && /* @__PURE__ */ jsx2("div", { style: {
           fontSize: styling.formNameFontSize != null ? `${styling.formNameFontSize}px` : "1.5rem",
           fontWeight: styling.formNameFontWeight === "normal" ? 400 : styling.formNameFontWeight === "medium" ? 500 : styling.formNameFontWeight === "semibold" ? 600 : 700,
           marginBottom: "0.5rem",
@@ -1064,6 +1091,7 @@ function FormsExpertForm({
                 {
                   type: "submit",
                   disabled: form.isLoading,
+                  className: styling.buttonClassName,
                   style: {
                     ...styling.buttonFullWidth ? { width: "100%" } : styling.buttonAlign ? {} : { width: "100%" },
                     padding: `${btnPy} ${btnPx}`,
@@ -1207,7 +1235,7 @@ function FormFieldInput({
           style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor }
         }
       ),
-      (field.label || field.type === "consent" && field.consentText) && /* @__PURE__ */ jsxs("label", { htmlFor: field.name, children: [
+      (field.label || field.type === "consent" && field.consentText) && /* @__PURE__ */ jsxs("label", { htmlFor: field.name, className: styling.labelClassName, children: [
         field.type === "consent" && field.consentText ? field.consentUrl ? /* @__PURE__ */ jsxs("span", { children: [
           field.consentText,
           " ",
@@ -1222,6 +1250,7 @@ function FormFieldInput({
     "label",
     {
       htmlFor: field.name,
+      className: styling.labelClassName,
       style: {
         display: "block",
         fontWeight: 500,
@@ -1245,11 +1274,12 @@ function FormFieldInput({
         onChange,
         placeholder: field.placeholder,
         required: field.required,
-        style: { ...inputStyle, minHeight: "100px", resize: "vertical" }
+        style: { ...inputStyle, minHeight: "100px", resize: "vertical" },
+        className: styling.fieldClassName
       }
     );
   } else if (field.type === "select" || field.type === "dropdown") {
-    fieldEl = /* @__PURE__ */ jsxs("select", { id: field.name, name: field.name, value: String(value || ""), onChange, required: field.required, style: inputStyle, children: [
+    fieldEl = /* @__PURE__ */ jsxs("select", { id: field.name, name: field.name, value: String(value || ""), onChange, required: field.required, style: inputStyle, className: styling.fieldClassName, children: [
       /* @__PURE__ */ jsx2("option", { value: "", children: "Select an option..." }),
       getOpts().map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, children: opt.label }, opt.value))
     ] });
@@ -1393,7 +1423,8 @@ function FormFieldInput({
         required: field.required,
         accept: field.allowedMimeTypes?.join(","),
         multiple: field.multiple,
-        style: inputStyle
+        style: inputStyle,
+        className: styling.fieldClassName
       }
     );
   } else if (field.type === "name") {
@@ -1406,7 +1437,8 @@ function FormFieldInput({
         placeholder: labels[nf] || nf,
         value: nameVal[nf] || "",
         onChange: (e) => onValueChange(field.name, { ...nameVal, [nf]: e.target.value }),
-        style: { ...inputStyle, flex: 1, minWidth: "120px" }
+        style: { ...inputStyle, flex: 1, minWidth: "120px" },
+        className: styling.fieldClassName
       },
       nf
     )) });
@@ -1420,7 +1452,8 @@ function FormFieldInput({
         placeholder: labels[af] || af,
         value: addr[af] || "",
         onChange: (e) => onValueChange(field.name, { ...addr, [af]: e.target.value }),
-        style: inputStyle
+        style: inputStyle,
+        className: styling.fieldClassName
       },
       af
     )) });
@@ -1439,7 +1472,8 @@ function FormFieldInput({
           min: field.min,
           max: field.max,
           required: field.required,
-          style: inputStyle
+          style: inputStyle,
+          className: styling.fieldClassName
         }
       )
     ] });
@@ -1462,16 +1496,17 @@ function FormFieldInput({
           value: String(value || ""),
           onChange: (e) => onValueChange(field.name, e.target.value),
           placeholder: "#000000",
-          style: { ...inputStyle, flex: 1 }
+          style: { ...inputStyle, flex: 1 },
+          className: styling.fieldClassName
         }
       )
     ] });
   } else if (field.type === "dateRange") {
     const range = value || {};
     fieldEl = /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx2("input", { type: "date", value: range.start || "", onChange: (e) => onValueChange(field.name, { ...range, start: e.target.value }), style: { ...inputStyle, flex: 1 } }),
+      /* @__PURE__ */ jsx2("input", { type: "date", value: range.start || "", onChange: (e) => onValueChange(field.name, { ...range, start: e.target.value }), style: { ...inputStyle, flex: 1 }, className: styling.fieldClassName }),
       /* @__PURE__ */ jsx2("span", { children: "to" }),
-      /* @__PURE__ */ jsx2("input", { type: "date", value: range.end || "", onChange: (e) => onValueChange(field.name, { ...range, end: e.target.value }), style: { ...inputStyle, flex: 1 } })
+      /* @__PURE__ */ jsx2("input", { type: "date", value: range.end || "", onChange: (e) => onValueChange(field.name, { ...range, end: e.target.value }), style: { ...inputStyle, flex: 1 }, className: styling.fieldClassName })
     ] });
   } else {
     const typeMap = {
@@ -1498,7 +1533,8 @@ function FormFieldInput({
         max: field.max,
         step: field.step,
         maxLength: field.maxLength,
-        style: inputStyle
+        style: inputStyle,
+        className: styling.fieldClassName
       }
     );
   }