@forms.expert/sdk 0.2.2 → 0.2.4

package/dist/react/index.js

@@ -939,7 +939,13 @@ function FormsExpertForm({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: `form[data-fe-scope="${formScopeId}"] input::placeholder, form[data-fe-scope="${formScopeId}"] textarea::placeholder { font-size: ${phFontSize}; }` } }),
+        /* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: `
+        form[data-fe-scope="${formScopeId}"] input::placeholder, form[data-fe-scope="${formScopeId}"] textarea::placeholder { font-size: ${phFontSize}; }
+        form[data-fe-scope="${formScopeId}"] button[type="submit"]:hover:not(:disabled) { filter: brightness(0.9); }
+        form[data-fe-scope="${formScopeId}"] button[type="submit"]:active:not(:disabled) { filter: brightness(0.85); transform: scale(0.98); }
+        form[data-fe-scope="${formScopeId}"] a[href]:hover { filter: brightness(0.9); }
+        form[data-fe-scope="${formScopeId}"] a[href]:active { filter: brightness(0.85); }
+      ` } }),
         styling.logoUrl && /* @__PURE__ */ jsx2("div", { style: {
           textAlign: styling.logoPosition === "top-left" ? "left" : styling.logoPosition === "top-right" ? "right" : "center",
           marginBottom: "1rem"
@@ -959,8 +965,8 @@ function FormsExpertForm({
           }
         ),
         form.config.settings?.showFormName !== false && form.config.name && /* @__PURE__ */ jsx2("h1", { style: {
-          fontSize: "1.5rem",
-          fontWeight: 700,
+          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",
           color: styling.textColor
         }, children: form.config.hostedConfig?.pageTitle || form.config.name }),
@@ -990,6 +996,7 @@ function FormsExpertForm({
           const btnSize = btnSizeMap[styling.buttonSize || "medium"];
           const btnPx = styling.buttonPaddingX != null ? `${styling.buttonPaddingX}px` : btnSize.px;
           const btnPy = styling.buttonPaddingY != null ? `${styling.buttonPaddingY}px` : btnSize.py;
+          const btnFs = styling.buttonFontSize != null ? `${styling.buttonFontSize}px` : btnSize.fs;
           const btnBg = styling.buttonGradient || (styling.buttonStyle === "filled" ? btnBgColor : "transparent");
           const sec = styling.secondaryButton;
           const secColor = sec?.color || btnBgColor;
@@ -999,7 +1006,7 @@ function FormsExpertForm({
             justifyContent: "center",
             padding: `${btnPy} ${btnPx}`,
             fontWeight: 500,
-            fontSize: btnSize.fs,
+            fontSize: sec.fontSize != null ? `${sec.fontSize}px` : btnFs,
             fontFamily: "inherit",
             borderRadius: btnRadius,
             cursor: "pointer",
@@ -1008,7 +1015,14 @@ function FormsExpertForm({
             color: sec.textColor || (sec.style === "filled" ? "#ffffff" : secColor),
             border: sec.style === "outlined" ? `2px solid ${secColor}` : "none",
             marginTop: sec.marginTop != null ? `${sec.marginTop}px` : void 0,
-            marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0
+            marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0,
+            maxWidth: "100%",
+            boxSizing: "border-box",
+            flexShrink: 1,
+            minWidth: 0,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
           } : void 0;
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: btnAlign, marginTop: "1rem", gap: "0.5rem", flexWrap: "wrap" }, children: [
@@ -1022,14 +1036,21 @@ function FormsExpertForm({
                     ...styling.buttonFullWidth ? { width: "100%" } : styling.buttonAlign ? {} : { width: "100%" },
                     padding: `${btnPy} ${btnPx}`,
                     fontWeight: 500,
-                    fontSize: btnSize.fs,
+                    fontSize: btnFs,
                     fontFamily: "inherit",
                     borderRadius: btnRadius,
                     cursor: form.isLoading ? "not-allowed" : "pointer",
                     opacity: form.isLoading ? 0.5 : 1,
                     background: btnBg,
                     color: styling.buttonStyle === "filled" ? btnTextColor || "white" : btnBgColor,
-                    border: styling.buttonStyle === "filled" ? "none" : `2px solid ${btnBgColor}`
+                    border: styling.buttonStyle === "filled" ? "none" : `2px solid ${btnBgColor}`,
+                    maxWidth: "100%",
+                    boxSizing: "border-box",
+                    flexShrink: 1,
+                    minWidth: 0,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
                   },
                   children: form.isLoading ? "Submitting..." : resolvedButtonText
                 }