@burdenoff/website-sdk 2026.1003.2 → 2026.1004.1

package/dist/index.mjs

@@ -345,6 +345,17 @@ function useWebSDKConfig() {
   const client = useWebSDK();
   return client.getConfig();
 }
+var RECAPTCHA_WIDGET_HEIGHT = 78;
+function useDeferredRecaptcha(siteKey) {
+  const [engaged, setEngaged] = useState(false);
+  const arm = 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(
@@ -808,12 +819,14 @@ function ContactPage({
   const displayName = productName ?? product?.name ?? config.productId;
   const effectiveRecaptchaSiteKey = recaptchaSiteKey ?? product?.recaptchaSiteKey ?? config.recaptchaSiteKey ?? "";
   const recaptchaRef = useRef(null);
+  const recaptchaGate = useDeferredRecaptcha(effectiveRecaptchaSiteKey);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitStatus, setSubmitStatus] = useState("idle");
   const handleSubmit = async (e) => {
     e.preventDefault();
     const recaptchaToken = recaptchaRef.current?.getValue() ?? "";
     if (effectiveRecaptchaSiteKey && !recaptchaToken) {
+      recaptchaGate.arm();
       toast.error("Please complete the reCAPTCHA verification");
       return;
     }
@@ -940,6 +953,7 @@ function ContactPage({
           {
             onSubmit: handleSubmit,
             className: "space-y-4 sm:space-y-6",
+            ...recaptchaGate.formProps,
             children: [
               /* @__PURE__ */ jsxs("div", { className: "grid sm:grid-cols-2 gap-4 sm:gap-6", children: [
                 /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
@@ -1064,13 +1078,20 @@ function ContactPage({
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                effectiveRecaptchaSiteKey && /* @__PURE__ */ jsx("div", { className: "flex justify-center sm:justify-start", children: /* @__PURE__ */ jsx(
-                  ReCAPTCHA4,
+                effectiveRecaptchaSiteKey && /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    ref: recaptchaRef,
-                    sitekey: effectiveRecaptchaSiteKey
+                    className: "flex justify-center sm:justify-start",
+                    style: { minHeight: RECAPTCHA_WIDGET_HEIGHT },
+                    children: recaptchaGate.armed && /* @__PURE__ */ jsx(
+                      ReCAPTCHA4,
+                      {
+                        ref: recaptchaRef,
+                        sitekey: effectiveRecaptchaSiteKey
+                      }
+                    )
                   }
-                ) }),
+                ),
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -2791,6 +2812,7 @@ function NewsletterForm({
   const effectiveProductId = product?.id || config.productId;
   const effectiveRecaptchaSiteKey = recaptchaSiteKey ?? productConfig.recaptchaSiteKey ?? config.recaptchaSiteKey ?? "";
   const recaptchaRef = useRef(null);
+  const recaptchaGate = useDeferredRecaptcha(effectiveRecaptchaSiteKey);
   const [email, setEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const handleSubmit = async (e) => {
@@ -2801,6 +2823,7 @@ function NewsletterForm({
     }
     const recaptchaToken = recaptchaRef.current?.getValue() ?? "";
     if (effectiveRecaptchaSiteKey && !recaptchaToken) {
+      recaptchaGate.arm();
       toast.error("Please complete the reCAPTCHA verification");
       return;
     }
@@ -2839,6 +2862,7 @@ function NewsletterForm({
         onSubmit: handleSubmit,
         className: isInline ? "flex flex-col gap-2" : "flex flex-col gap-2",
         style: { overflow: "visible" },
+        ...recaptchaGate.formProps,
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -2909,9 +2933,10 @@ function NewsletterForm({
                   position: "relative",
                   zIndex: 50,
                   display: "flex",
-                  justifyContent: "flex-start"
+                  justifyContent: "flex-start",
+                  minHeight: RECAPTCHA_WIDGET_HEIGHT
                 },
-                children: /* @__PURE__ */ jsx(
+                children: recaptchaGate.armed && /* @__PURE__ */ jsx(
                   ReCAPTCHA4,
                   {
                     ref: recaptchaRef,
@@ -6019,7 +6044,7 @@ function ConceptDetail({
             {
               "aria-label": "Previous and next concepts",
               "data-concepts": "pager",
-              className: "mt-16 grid gap-4 sm:grid-cols-2",
+              className: "mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2",
               children: [
                 previous ? /* @__PURE__ */ jsxs(
                   Link,
@@ -6068,7 +6093,7 @@ function ConceptDetail({
             Link,
             {
               href: CONCEPTS_PATH,
-              className: "inline-flex items-center gap-2 rounded text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              className: "inline-flex items-center gap-2 rounded text-sm font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               children: [
                 /* @__PURE__ */ jsx(ArrowLeft, { "aria-hidden": "true", className: "h-4 w-4" }),
                 "All ",
@@ -17967,7 +17992,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__ */ jsx("span", { className: "truncate", children: f.value }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs opacity-60 flex-shrink-0", children: f.count })
+          /* @__PURE__ */ jsx("span", { className: "text-xs flex-shrink-0", children: f.count })
         ]
       }
     ) }, f.value)) })
@@ -18150,7 +18175,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__ */ jsx("span", { className: "truncate", children: cat?.name ?? f.value }),
-                f.count > 0 && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-60 flex-shrink-0", children: f.count })
+                f.count > 0 && /* @__PURE__ */ jsx("span", { className: "text-xs flex-shrink-0", children: f.count })
               ]
             },
             f.value