@burdenoff/website-sdk 2026.1003.2 → 2026.1003.3

package/dist/index.js

@@ -375,6 +375,17 @@ function useWebSDKConfig() {
   const client = useWebSDK();
   return client.getConfig();
 }
+var RECAPTCHA_WIDGET_HEIGHT = 78;
+function useDeferredRecaptcha(siteKey) {
+  const [engaged, setEngaged] = React.useState(false);
+  const arm = React.useCallback(() => setEngaged(true), []);
+  const enabled = siteKey.length > 0;
+  return {
+    armed: enabled && engaged,
+    arm,
+    formProps: enabled && !engaged ? { onFocus: arm, onPointerDown: arm } : {}
+  };
+}
 
 // src/utils/product-slug.ts
 var PRODUCT_SLUG_RENAMES = Object.freeze(
@@ -838,12 +849,14 @@ function ContactPage({
   const displayName = productName ?? product?.name ?? config.productId;
   const effectiveRecaptchaSiteKey = recaptchaSiteKey ?? product?.recaptchaSiteKey ?? config.recaptchaSiteKey ?? "";
   const recaptchaRef = React.useRef(null);
+  const recaptchaGate = useDeferredRecaptcha(effectiveRecaptchaSiteKey);
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [submitStatus, setSubmitStatus] = React.useState("idle");
   const handleSubmit = async (e) => {
     e.preventDefault();
     const recaptchaToken = recaptchaRef.current?.getValue() ?? "";
     if (effectiveRecaptchaSiteKey && !recaptchaToken) {
+      recaptchaGate.arm();
       sonner.toast.error("Please complete the reCAPTCHA verification");
       return;
     }
@@ -970,6 +983,7 @@ function ContactPage({
           {
             onSubmit: handleSubmit,
             className: "space-y-4 sm:space-y-6",
+            ...recaptchaGate.formProps,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid sm:grid-cols-2 gap-4 sm:gap-6", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
@@ -1094,13 +1108,20 @@ function ContactPage({
                 )
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                effectiveRecaptchaSiteKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center sm:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  ReCAPTCHA4__default.default,
+                effectiveRecaptchaSiteKey && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    ref: recaptchaRef,
-                    sitekey: effectiveRecaptchaSiteKey
+                    className: "flex justify-center sm:justify-start",
+                    style: { minHeight: RECAPTCHA_WIDGET_HEIGHT },
+                    children: recaptchaGate.armed && /* @__PURE__ */ jsxRuntime.jsx(
+                      ReCAPTCHA4__default.default,
+                      {
+                        ref: recaptchaRef,
+                        sitekey: effectiveRecaptchaSiteKey
+                      }
+                    )
                   }
-                ) }),
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Button,
                   {
@@ -2821,6 +2842,7 @@ function NewsletterForm({
   const effectiveProductId = product?.id || config.productId;
   const effectiveRecaptchaSiteKey = recaptchaSiteKey ?? productConfig.recaptchaSiteKey ?? config.recaptchaSiteKey ?? "";
   const recaptchaRef = React.useRef(null);
+  const recaptchaGate = useDeferredRecaptcha(effectiveRecaptchaSiteKey);
   const [email, setEmail] = React.useState("");
   const [isLoading, setIsLoading] = React.useState(false);
   const handleSubmit = async (e) => {
@@ -2831,6 +2853,7 @@ function NewsletterForm({
     }
     const recaptchaToken = recaptchaRef.current?.getValue() ?? "";
     if (effectiveRecaptchaSiteKey && !recaptchaToken) {
+      recaptchaGate.arm();
       sonner.toast.error("Please complete the reCAPTCHA verification");
       return;
     }
@@ -2869,6 +2892,7 @@ function NewsletterForm({
         onSubmit: handleSubmit,
         className: isInline ? "flex flex-col gap-2" : "flex flex-col gap-2",
         style: { overflow: "visible" },
+        ...recaptchaGate.formProps,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
@@ -2939,9 +2963,10 @@ function NewsletterForm({
                   position: "relative",
                   zIndex: 50,
                   display: "flex",
-                  justifyContent: "flex-start"
+                  justifyContent: "flex-start",
+                  minHeight: RECAPTCHA_WIDGET_HEIGHT
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: recaptchaGate.armed && /* @__PURE__ */ jsxRuntime.jsx(
                   ReCAPTCHA4__default.default,
                   {
                     ref: recaptchaRef,
@@ -17997,7 +18022,7 @@ function FacetList({
         className: `w-full text-left text-sm px-2 py-1 rounded flex items-center justify-between gap-2 transition-colors ${selected === f.value ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: f.value }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs opacity-60 flex-shrink-0", children: f.count })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs flex-shrink-0", children: f.count })
         ]
       }
     ) }, f.value)) })
@@ -18180,7 +18205,7 @@ function StoreBrowsePage({
               className: `w-full text-left text-sm px-2 py-1.5 rounded flex items-center justify-between gap-2 transition-colors ${category === f.value ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: cat?.name ?? f.value }),
-                f.count > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs opacity-60 flex-shrink-0", children: f.count })
+                f.count > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs flex-shrink-0", children: f.count })
               ]
             },
             f.value