@opensite/ui 1.7.6 → 1.7.9

package/dist/contact-consultation.js

@@ -17,36 +17,6 @@ var TextArea = TextArea$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1148,7 +1118,6 @@ function ContactConsultation({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1156,10 +1125,11 @@ function ContactConsultation({
   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,
@@ -1223,7 +1193,14 @@ function ContactConsultation({
     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,
           {
@@ -1249,11 +1226,30 @@ function ContactConsultation({
       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 text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-balance",
+                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,
@@ -1402,20 +1398,6 @@ function ContactConsultation({
                   )
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: cn("rounded-lg border p-4", getNestedCardBg(background, "subtle"), getNestedCardTextColor(background)), children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
-                /* @__PURE__ */ jsx(
-                  DynamicIcon,
-                  {
-                    name: "lucide/info",
-                    size: 20,
-                    className: "mt-0.5 text-muted-foreground"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "What happens next?" }),
-                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "We'll review your request and contact you within 24 hours to schedule your consultation at a time that works for you." })
-                ] })
-              ] }) }),
               actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
                 Pressable,
                 {
@@ -1425,7 +1407,14 @@ function ContactConsultation({
                   asButton: true,
                   disabled: form.isSubmitting,
                   children: [
-                    buttonIcon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/calendar-check", size: 16, className: "mr-2" }),
+                    buttonIcon ?? /* @__PURE__ */ jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/calendar-check",
+                        size: 16,
+                        className: "mr-2"
+                      }
+                    ),
                     buttonText
                   ]
                 }

package/dist/contact-dark.cjs

@@ -778,8 +778,7 @@ function DynamicFormField({
         disabled: field.disabled,
         "aria-label": field.label
       }
-    ),
-    meta.touched && meta.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: meta.error })
+    )
   ] }) });
 }
 
@@ -949,7 +948,7 @@ function useContactForm(options) {
             helpers.resetForm();
           }
           onSuccess?.(result);
-          setTimeout(() => setIsSubmitted(false), 5e3);
+          setTimeout(() => setIsSubmitted(false), 1e4);
         }
       } catch (error) {
         if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
@@ -1461,6 +1460,38 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var FormFeedback = ({
+  isSubmitted,
+  successMessageClassName,
+  successMessage,
+  submissionError,
+  errorMessageClassName
+}) => {
+  if (!isSubmitted && !submissionError) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isSubmitted && !submissionError && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-6 p-4 bg-primary/10 border border-primary rounded-md",
+          successMessageClassName
+        ),
+        children: typeof successMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary-foreground/90 text-center", children: successMessage }) : successMessage
+      }
+    ),
+    submissionError && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-6 p-4 bg-destructive/10 border border-destructive rounded-md",
+          errorMessageClassName
+        ),
+        children: typeof submissionError === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive text-center", children: submissionError }) : submissionError
+      }
+    )
+  ] });
+};
+var form_feedback_default = FormFeedback;
 var DEFAULT_FORM_FIELDS = [
   {
     name: "firstName",
@@ -1511,7 +1542,6 @@ function ContactDark({
   socialLinksSlot,
   formFields = DEFAULT_FORM_FIELDS,
   successMessage = "Thank you! Your message has been sent successfully.",
-  errorMessage = "There was an error sending your message. Please try again.",
   className,
   headerClassName,
   headingClassName,
@@ -1666,24 +1696,14 @@ function ContactDark({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("p-6 lg:p-12", formPanelClassName), children: [
-                isSubmitted && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "mb-6 p-4 bg-primary/10 border border-primary rounded-md",
-                      successMessageClassName
-                    ),
-                    children: typeof successMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary-foreground/90 text-center", children: successMessage }) : successMessage
-                  }
-                ),
-                submissionError && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  form_feedback_default,
                   {
-                    className: cn(
-                      "mb-6 p-4 bg-destructive/10 border border-destructive rounded-md",
-                      errorMessageClassName
-                    ),
-                    children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive text-center", children: submissionError })
+                    isSubmitted,
+                    successMessageClassName,
+                    successMessage,
+                    submissionError,
+                    errorMessageClassName
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/contact-dark.d.cts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { F as FormFieldConfig } from './form-field-types-BYdJNOsW.cjs';
-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 { F as FormFieldConfig } from './form-field-types-1zE7Be71.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 ContactDarkOption {
@@ -95,11 +96,6 @@ interface ContactDarkProps {
      * @default "Thank you! Your message has been sent successfully."
      */
     successMessage?: React.ReactNode;
-    /**
-     * Error message to display if submission fails
-     * @default "There was an error sending your message. Please try again."
-     */
-    errorMessage?: React.ReactNode;
     /**
      * Additional CSS classes for the section
      */
@@ -242,6 +238,6 @@ interface ContactDarkProps {
  * />
  * ```
  */
-declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formFields, successMessage, errorMessage, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, successMessageClassName, errorMessageClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
+declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formFields, successMessage, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, successMessageClassName, errorMessageClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
 
 export { ContactDark, type ContactDarkProps };

package/dist/contact-dark.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { F as FormFieldConfig } from './form-field-types-BYdJNOsW.js';
-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 { F as FormFieldConfig } from './form-field-types-1zE7Be71.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 ContactDarkOption {
@@ -95,11 +96,6 @@ interface ContactDarkProps {
      * @default "Thank you! Your message has been sent successfully."
      */
     successMessage?: React.ReactNode;
-    /**
-     * Error message to display if submission fails
-     * @default "There was an error sending your message. Please try again."
-     */
-    errorMessage?: React.ReactNode;
     /**
      * Additional CSS classes for the section
      */
@@ -242,6 +238,6 @@ interface ContactDarkProps {
  * />
  * ```
  */
-declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formFields, successMessage, errorMessage, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, successMessageClassName, errorMessageClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
+declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formFields, successMessage, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, successMessageClassName, errorMessageClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
 
 export { ContactDark, type ContactDarkProps };

package/dist/contact-dark.js

@@ -756,8 +756,7 @@ function DynamicFormField({
         disabled: field.disabled,
         "aria-label": field.label
       }
-    ),
-    meta.touched && meta.error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: meta.error })
+    )
   ] }) });
 }
 
@@ -927,7 +926,7 @@ function useContactForm(options) {
             helpers.resetForm();
           }
           onSuccess?.(result);
-          setTimeout(() => setIsSubmitted(false), 5e3);
+          setTimeout(() => setIsSubmitted(false), 1e4);
         }
       } catch (error) {
         if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
@@ -1439,6 +1438,38 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var FormFeedback = ({
+  isSubmitted,
+  successMessageClassName,
+  successMessage,
+  submissionError,
+  errorMessageClassName
+}) => {
+  if (!isSubmitted && !submissionError) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSubmitted && !submissionError && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mb-6 p-4 bg-primary/10 border border-primary rounded-md",
+          successMessageClassName
+        ),
+        children: typeof successMessage === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-foreground/90 text-center", children: successMessage }) : successMessage
+      }
+    ),
+    submissionError && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mb-6 p-4 bg-destructive/10 border border-destructive rounded-md",
+          errorMessageClassName
+        ),
+        children: typeof submissionError === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive text-center", children: submissionError }) : submissionError
+      }
+    )
+  ] });
+};
+var form_feedback_default = FormFeedback;
 var DEFAULT_FORM_FIELDS = [
   {
     name: "firstName",
@@ -1489,7 +1520,6 @@ function ContactDark({
   socialLinksSlot,
   formFields = DEFAULT_FORM_FIELDS,
   successMessage = "Thank you! Your message has been sent successfully.",
-  errorMessage = "There was an error sending your message. Please try again.",
   className,
   headerClassName,
   headingClassName,
@@ -1644,24 +1674,14 @@ function ContactDark({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: cn("p-6 lg:p-12", formPanelClassName), children: [
-                isSubmitted && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "mb-6 p-4 bg-primary/10 border border-primary rounded-md",
-                      successMessageClassName
-                    ),
-                    children: typeof successMessage === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-foreground/90 text-center", children: successMessage }) : successMessage
-                  }
-                ),
-                submissionError && /* @__PURE__ */ jsx(
-                  "div",
+                /* @__PURE__ */ jsx(
+                  form_feedback_default,
                   {
-                    className: cn(
-                      "mb-6 p-4 bg-destructive/10 border border-destructive rounded-md",
-                      errorMessageClassName
-                    ),
-                    children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive text-center", children: submissionError })
+                    isSubmitted,
+                    successMessageClassName,
+                    successMessage,
+                    submissionError,
+                    errorMessageClassName
                   }
                 ),
                 /* @__PURE__ */ jsxs(

package/dist/contact-demo.cjs

@@ -1139,7 +1139,11 @@ var Section = React__namespace.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 = [
@@ -1163,7 +1167,6 @@ function ContactDemo({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1171,10 +1174,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,
@@ -1239,7 +1243,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__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -1265,11 +1276,21 @@ function ContactDemo({
       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-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -1431,12 +1452,18 @@ function ContactDemo({
                   asButton: true,
                   disabled: form.isSubmitting,
                   children: [
-                    buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/calendar", size: 16, className: "mr-2" }),
+                    buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/calendar",
+                        size: 16,
+                        className: "mr-2"
+                      }
+                    ),
                     buttonText
                   ]
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.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-demo.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 DemoFormValues {
@@ -163,6 +164,6 @@ interface ContactDemoProps {
  * />
  * ```
  */
-declare function ContactDemo({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDemoProps): React.JSX.Element;
+declare function ContactDemo({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDemoProps): React.JSX.Element;
 
 export { ContactDemo, type ContactDemoProps };

package/dist/contact-demo.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 DemoFormValues {
@@ -163,6 +164,6 @@ interface ContactDemoProps {
  * />
  * ```
  */
-declare function ContactDemo({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDemoProps): React.JSX.Element;
+declare function ContactDemo({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDemoProps): React.JSX.Element;
 
 export { ContactDemo, type ContactDemoProps };