@opensite/ui 1.7.6 → 1.7.9

package/dist/contact-demo.js

@@ -1115,7 +1115,11 @@ var Section = React__default.forwardRef(
 Section.displayName = "Section";
 var USE_CASES = [
   { value: "automation", label: "Workflow Automation", icon: "lucide/zap" },
-  { value: "analytics", label: "Analytics & Reporting", icon: "lucide/bar-chart-3" },
+  {
+    value: "analytics",
+    label: "Analytics & Reporting",
+    icon: "lucide/bar-chart-3"
+  },
   { value: "collaboration", label: "Team Collaboration", icon: "lucide/users" }
 ];
 var TEAM_SIZES = [
@@ -1139,7 +1143,6 @@ function ContactDemo({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1147,10 +1150,11 @@ function ContactDemo({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background,
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -1215,7 +1219,14 @@ function ContactDemo({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -1241,11 +1252,21 @@ function ContactDemo({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxs(
           Form,
@@ -1407,12 +1428,18 @@ function ContactDemo({
                   asButton: true,
                   disabled: form.isSubmitting,
                   children: [
-                    buttonIcon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/calendar", size: 16, className: "mr-2" }),
+                    buttonIcon ?? /* @__PURE__ */ jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/calendar",
+                        size: 16,
+                        className: "mr-2"
+                      }
+                    ),
                     buttonText
                   ]
                 }
-              ),
-              /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-muted-foreground", children: "We'll contact you within 24 hours to schedule your personalized demo." })
+              )
             ]
           }
         ) }) })

package/dist/contact-emergency.cjs

@@ -1173,7 +1173,6 @@ function ContactEmergency({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1181,10 +1180,11 @@ function ContactEmergency({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background,
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -1240,14 +1240,21 @@ function ContactEmergency({
     }
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const selectedPriority = PRIORITIES.find(
+  PRIORITIES.find(
     (p) => p.value === form.values.priority
   );
   const actionsContent = React__namespace.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -1273,11 +1280,21 @@ function ContactEmergency({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-0", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           forms.Form,
@@ -1289,14 +1306,7 @@ function ContactEmergency({
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b p-6 md:border-b-0 md:border-r", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/alert-triangle",
-                      size: 20,
-                      className: "text-muted-foreground"
-                    }
-                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/alert-triangle", size: 20 }),
                   /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: "Priority Level" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "priority", children: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: PRIORITIES.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1344,32 +1354,18 @@ function ContactEmergency({
                 /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-6" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border p-4", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/phone",
-                        size: 20,
-                        className: "text-muted-foreground"
-                      }
-                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/phone", size: 20 }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Call for Critical Issues" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "+1 (555) 911-0000" })
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm ", children: "+1 (555) 911-0000" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Available 24/7 for critical emergencies only" })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs", children: "Available 24/7 for critical emergencies only" })
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/send",
-                      size: 20,
-                      className: "text-muted-foreground"
-                    }
-                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/send", size: 20 }),
                   /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: "Describe Your Issue" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -1444,10 +1440,6 @@ function ContactEmergency({
                     )
                   ] }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Expected response:" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: selectedPriority?.response })
-                  ] }),
                   actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                     Pressable,
                     {

package/dist/contact-emergency.d.cts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.cjs';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.cjs';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-Bs7X576B.cjs';
+import { A as ActionConfig } from './blocks-DyVWHMtH.cjs';
+import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface EmergencyFormValues {
@@ -120,6 +121,6 @@ interface ContactEmergencyProps {
  * />
  * ```
  */
-declare function ContactEmergency({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEmergencyProps): React.JSX.Element;
+declare function ContactEmergency({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEmergencyProps): React.JSX.Element;
 
 export { ContactEmergency, type ContactEmergencyProps };

package/dist/contact-emergency.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.js';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.js';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-CxYoHqdn.js';
+import { A as ActionConfig } from './blocks-S9tBV7Wg.js';
+import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface EmergencyFormValues {
@@ -120,6 +121,6 @@ interface ContactEmergencyProps {
  * />
  * ```
  */
-declare function ContactEmergency({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEmergencyProps): React.JSX.Element;
+declare function ContactEmergency({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEmergencyProps): React.JSX.Element;
 
 export { ContactEmergency, type ContactEmergencyProps };

package/dist/contact-emergency.js

@@ -1150,7 +1150,6 @@ function ContactEmergency({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1158,10 +1157,11 @@ function ContactEmergency({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background,
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -1217,14 +1217,21 @@ function ContactEmergency({
     }
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const selectedPriority = PRIORITIES.find(
+  PRIORITIES.find(
     (p) => p.value === form.values.priority
   );
   const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -1250,11 +1257,21 @@ function ContactEmergency({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-0", cardContentClassName), children: /* @__PURE__ */ jsx(
           Form,
@@ -1266,14 +1283,7 @@ function ContactEmergency({
             children: /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2", children: [
               /* @__PURE__ */ jsxs("div", { className: "border-b p-6 md:border-b-0 md:border-r", children: [
                 /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/alert-triangle",
-                      size: 20,
-                      className: "text-muted-foreground"
-                    }
-                  ),
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/alert-triangle", size: 20 }),
                   /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Priority Level" })
                 ] }),
                 /* @__PURE__ */ jsx(Field, { name: "priority", children: ({ field }) => /* @__PURE__ */ jsx("div", { className: "space-y-3", children: PRIORITIES.map((item) => /* @__PURE__ */ jsxs(
@@ -1321,32 +1331,18 @@ function ContactEmergency({
                 /* @__PURE__ */ jsx(Separator, { className: "my-6" }),
                 /* @__PURE__ */ jsxs("div", { className: "rounded-lg border p-4", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/phone",
-                        size: 20,
-                        className: "text-muted-foreground"
-                      }
-                    ),
+                    /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/phone", size: 20 }),
                     /* @__PURE__ */ jsxs("div", { children: [
                       /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Call for Critical Issues" }),
-                      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "+1 (555) 911-0000" })
+                      /* @__PURE__ */ jsx("p", { className: "text-sm ", children: "+1 (555) 911-0000" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Available 24/7 for critical emergencies only" })
+                  /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs", children: "Available 24/7 for critical emergencies only" })
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
                 /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/send",
-                      size: 20,
-                      className: "text-muted-foreground"
-                    }
-                  ),
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/send", size: 20 }),
                   /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Describe Your Issue" })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -1421,10 +1417,6 @@ function ContactEmergency({
                     )
                   ] }) }),
                   /* @__PURE__ */ jsx(Separator, {}),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
-                    /* @__PURE__ */ jsx("span", { children: "Expected response:" }),
-                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedPriority?.response })
-                  ] }),
                   actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
                     Pressable,
                     {

package/dist/contact-event.cjs

@@ -993,7 +993,6 @@ function ContactEvent({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1001,10 +1000,11 @@ function ContactEvent({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -1063,7 +1063,14 @@ function ContactEvent({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -1089,11 +1096,30 @@ function ContactEvent({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,

package/dist/contact-event.d.cts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.cjs';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.cjs';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-Bs7X576B.cjs';
+import { A as ActionConfig } from './blocks-DyVWHMtH.cjs';
+import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ContactEventFormValues {
@@ -118,6 +119,6 @@ interface ContactEventProps {
  * />
  * ```
  */
-declare function ContactEvent({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEventProps): React.JSX.Element;
+declare function ContactEvent({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEventProps): React.JSX.Element;
 
 export { ContactEvent, type ContactEventProps };

package/dist/contact-event.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.js';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.js';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-CxYoHqdn.js';
+import { A as ActionConfig } from './blocks-S9tBV7Wg.js';
+import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ContactEventFormValues {
@@ -118,6 +119,6 @@ interface ContactEventProps {
  * />
  * ```
  */
-declare function ContactEvent({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEventProps): React.JSX.Element;
+declare function ContactEvent({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEventProps): React.JSX.Element;
 
 export { ContactEvent, type ContactEventProps };

package/dist/contact-event.js

@@ -971,7 +971,6 @@ function ContactEvent({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -979,10 +978,11 @@ function ContactEvent({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -1041,7 +1041,14 @@ function ContactEvent({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -1067,11 +1074,30 @@ function ContactEvent({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxs(
           Form,