@opensite/ui 1.5.4 → 1.5.5

package/dist/feature-integration-cards.js

@@ -3,171 +3,14 @@ import * as React from 'react';
 import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 
 // components/blocks/features/feature-integration-cards.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
-function getBorderColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "border-foreground/20";
-      case "muted":
-        return "border-foreground/10";
-      case "accent":
-        return "border-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "border-border";
-      case "muted":
-        return "border-muted";
-      case "accent":
-        return "border-primary";
-    }
-  }
-}
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -980,66 +823,39 @@ function FeatureIntegrationCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderIntegrationIcon = useCallback((integration) => {
-    if (integration.iconSlot) return integration.iconSlot;
-    if (!integration.icon) return null;
-    return /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: integration.icon,
-        alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
-        className: cn("h-auto w-7", integration.iconClassName),
-        loading: "lazy",
-        optixFlowConfig
-      }
-    );
-  }, [optixFlowConfig]);
-  const renderLinkLabel = useCallback((integration) => {
-    if (integration.linkLabelSlot) return integration.linkLabelSlot;
-    if (!integration.linkLabel) return null;
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          "flex items-center gap-1.5 rounded-full border px-3 py-2 text-sm font-medium transition-colors",
-          getBorderColor(background),
-          getAccentColor(background),
-          integration.linkLabelClassName
-        ),
-        children: [
-          integration.linkLabel,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14 })
-        ]
-      }
-    );
-  }, [background]);
+  const renderIntegrationIcon = useCallback(
+    (integration) => {
+      if (integration.iconSlot) return integration.iconSlot;
+      if (!integration.icon) return null;
+      return /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: integration.icon,
+          alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
+          className: cn(
+            "min-h-12 h-auto w-auto object-contain",
+            integration.iconClassName
+          ),
+          loading: "lazy",
+          optixFlowConfig
+        }
+      );
+    },
+    [optixFlowConfig]
+  );
   const integrationsContent = useMemo(() => {
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
     return integrations.map((integration, index) => {
       const iconContent = renderIntegrationIcon(integration);
-      const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          iconContent && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "grid size-12 shrink-0 place-content-center rounded-lg border bg-background/50",
-                getBorderColor(background)
-              ),
-              children: iconContent
-            }
-          ),
-          linkLabelContent
-        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-start gap-2 justify-between", children: iconContent && /* @__PURE__ */ jsx("div", { className: cn("flex"), children: iconContent }) }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsx(
             "h3",
             {
               className: cn(
                 "font-semibold md:text-lg",
-                getTextColor(background),
                 integration.titleClassName
               ),
               children: integration.title
@@ -1049,7 +865,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "font-semibold md:text-lg",
-                getTextColor(background),
                 integration.titleClassName
               ),
               children: integration.title
@@ -1060,7 +875,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "text-sm leading-relaxed md:text-base",
-                getTextColor(background, "muted"),
                 integration.descriptionClassName
               ),
               children: integration.description
@@ -1070,7 +884,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "text-sm leading-relaxed md:text-base",
-                getTextColor(background, "muted"),
                 integration.descriptionClassName
               ),
               children: integration.description
@@ -1079,8 +892,7 @@ function FeatureIntegrationCards({
         ] })
       ] });
       const cardClasses = cn(
-        "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300",
-        getBorderColor(background),
+        "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300 bg-card card-text-foreground",
         "hover:shadow-lg",
         cardClassName,
         integration.className
@@ -1098,7 +910,7 @@ function FeatureIntegrationCards({
       }
       return /* @__PURE__ */ jsx("div", { className: cardClasses, children: cardContent }, index);
     });
-  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel, background]);
+  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1110,11 +922,47 @@ function FeatureIntegrationCards({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mb-12 flex max-w-3xl flex-col items-center gap-4 text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }))
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", gridClassName), children: integrationsContent })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-12 flex max-w-3xl flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn(descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 sm:grid-cols-2 lg:grid-cols-4",
+              gridClassName
+            ),
+            children: integrationsContent
+          }
+        )
       ]
     }
   );

package/dist/footer-accordion-social.cjs

@@ -1817,43 +1817,45 @@ function FooterAccordionSocial({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: newsletterDescription })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              forms.Form,
-              {
-                form,
-                action: formConfig?.endpoint,
-                method: formMethod,
-                className: "flex gap-2",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: "Email Address",
-                      error: meta.touched && !!meta.error,
-                      className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                      "aria-label": "Email Address"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-                      asButton: false,
-                      disabled: form.isSubmitting,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-                    }
-                  )
-                ]
-              }
-            )
+            formConfig?.token && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: newsletterDescription })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                forms.Form,
+                {
+                  form,
+                  action: formConfig?.endpoint,
+                  method: formMethod,
+                  className: "flex gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
+                      TextInput,
+                      {
+                        ...field,
+                        type: "email",
+                        placeholder: "Email Address",
+                        error: meta.touched && !!meta.error,
+                        className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        "aria-label": "Email Address"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Pressable,
+                      {
+                        componentType: "button",
+                        type: "submit",
+                        className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+                        asButton: false,
+                        disabled: form.isSubmitting,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
           ] }),
           footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-16 gap-y-8 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-bold", children: section.title }),

package/dist/footer-accordion-social.d.cts

@@ -74,8 +74,11 @@ interface FooterAccordionSocialProps {
     };
     /**
      * Optional form submission configuration for newsletter signup.
+     * Requires `token` to render the newsletter UI.
      */
-    formConfig?: PageSpeedFormConfig;
+    formConfig?: PageSpeedFormConfig & {
+        token: string;
+    };
     /**
      * Optional custom submission handler for newsletter signup.
      */

package/dist/footer-accordion-social.d.ts

@@ -74,8 +74,11 @@ interface FooterAccordionSocialProps {
     };
     /**
      * Optional form submission configuration for newsletter signup.
+     * Requires `token` to render the newsletter UI.
      */
-    formConfig?: PageSpeedFormConfig;
+    formConfig?: PageSpeedFormConfig & {
+        token: string;
+    };
     /**
      * Optional custom submission handler for newsletter signup.
      */

package/dist/footer-accordion-social.js

@@ -1796,43 +1796,45 @@ function FooterAccordionSocial({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
-              /* @__PURE__ */ jsx("p", { className: "opacity-80", children: newsletterDescription })
-            ] }),
-            /* @__PURE__ */ jsxs(
-              Form,
-              {
-                form,
-                action: formConfig?.endpoint,
-                method: formMethod,
-                className: "flex gap-2",
-                children: [
-                  /* @__PURE__ */ jsx(Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: "Email Address",
-                      error: meta.touched && !!meta.error,
-                      className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                      "aria-label": "Email Address"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-                      asButton: false,
-                      disabled: form.isSubmitting,
-                      children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-                    }
-                  )
-                ]
-              }
-            )
+            formConfig?.token && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
+                /* @__PURE__ */ jsx("p", { className: "opacity-80", children: newsletterDescription })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Form,
+                {
+                  form,
+                  action: formConfig?.endpoint,
+                  method: formMethod,
+                  className: "flex gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx(Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        ...field,
+                        type: "email",
+                        placeholder: "Email Address",
+                        error: meta.touched && !!meta.error,
+                        className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        "aria-label": "Email Address"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        componentType: "button",
+                        type: "submit",
+                        className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+                        asButton: false,
+                        disabled: form.isSubmitting,
+                        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
           ] }),
           footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-16 gap-y-8 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-bold", children: section.title }),

package/dist/footer-newsletter-contact.cjs

@@ -1873,7 +1873,7 @@ function FooterNewsletterContact({
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-x-16 gap-y-8 md:grid-cols-2 xl:grid-cols-4", children: [
-          (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          formConfig?.token && (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
             newsletterTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-3xl font-medium font-serif leading-none", children: newsletterTitle }),
             newsletterDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-light leading-normal", children: newsletterDescription }),
             /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/footer-newsletter-contact.d.cts

@@ -108,8 +108,11 @@ interface FooterNewsletterContactProps {
     };
     /**
      * Optional form submission configuration for newsletter signup.
+     * Requires `token` to render the newsletter UI.
      */
-    formConfig?: PageSpeedFormConfig;
+    formConfig?: PageSpeedFormConfig & {
+        token: string;
+    };
     /**
      * Optional custom submission handler for newsletter signup.
      */

package/dist/footer-newsletter-contact.d.ts

@@ -108,8 +108,11 @@ interface FooterNewsletterContactProps {
     };
     /**
      * Optional form submission configuration for newsletter signup.
+     * Requires `token` to render the newsletter UI.
      */
-    formConfig?: PageSpeedFormConfig;
+    formConfig?: PageSpeedFormConfig & {
+        token: string;
+    };
     /**
      * Optional custom submission handler for newsletter signup.
      */

package/dist/footer-newsletter-contact.js

@@ -1851,7 +1851,7 @@ function FooterNewsletterContact({
       className: cn(className),
       children: /* @__PURE__ */ jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-x-16 gap-y-8 md:grid-cols-2 xl:grid-cols-4", children: [
-          (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          formConfig?.token && (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
             newsletterTitle && /* @__PURE__ */ jsx("h3", { className: "text-3xl font-medium font-serif leading-none", children: newsletterTitle }),
             newsletterDescription && /* @__PURE__ */ jsx("p", { className: "font-light leading-normal", children: newsletterDescription }),
             /* @__PURE__ */ jsxs(

package/dist/footer-newsletter-minimal.cjs

@@ -1807,7 +1807,7 @@ function FooterNewsletterMinimal({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 flex flex-col justify-between gap-15 lg:flex-row", newsletterSectionClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
+          formConfig?.token && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
             newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { children: newsletterLabel }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               forms.Form,

package/dist/footer-newsletter-minimal.d.cts

@@ -95,6 +95,7 @@ interface FooterNewsletterMinimalProps {
     patternOpacity?: number;
     /**
      * Optional form submission configuration.
+     * Requires `token` to render the newsletter UI.
      *
      * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
      * and the form will submit to it in JSON format.
@@ -116,7 +117,9 @@ interface FooterNewsletterMinimalProps {
      *
      * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
      */
-    formConfig?: PageSpeedFormConfig;
+    formConfig?: PageSpeedFormConfig & {
+        token: string;
+    };
     /**
      * Optional custom submission handler for maximum flexibility.
      *

package/dist/footer-newsletter-minimal.d.ts

@@ -95,6 +95,7 @@ interface FooterNewsletterMinimalProps {
     patternOpacity?: number;
     /**
      * Optional form submission configuration.
+     * Requires `token` to render the newsletter UI.
      *
      * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
      * and the form will submit to it in JSON format.
@@ -116,7 +117,9 @@ interface FooterNewsletterMinimalProps {
      *
      * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
      */
-    formConfig?: PageSpeedFormConfig;
+    formConfig?: PageSpeedFormConfig & {
+        token: string;
+    };
     /**
      * Optional custom submission handler for maximum flexibility.
      *