@forms.expert/sdk 0.2.10 → 0.2.11

package/dist/react/index.js

@@ -996,7 +996,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 +1064,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 +1208,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 +1223,7 @@ function FormFieldInput({
     "label",
     {
       htmlFor: field.name,
+      className: styling.labelClassName,
       style: {
         display: "block",
         fontWeight: 500,
@@ -1245,11 +1247,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 +1396,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 +1410,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 +1425,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 +1445,8 @@ function FormFieldInput({
           min: field.min,
           max: field.max,
           required: field.required,
-          style: inputStyle
+          style: inputStyle,
+          className: styling.fieldClassName
         }
       )
     ] });
@@ -1462,16 +1469,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 +1506,8 @@ function FormFieldInput({
         max: field.max,
         step: field.step,
         maxLength: field.maxLength,
-        style: inputStyle
+        style: inputStyle,
+        className: styling.fieldClassName
       }
     );
   }