@opensite/ui 2.0.8 → 2.1.0

package/dist/hero-agency-animated-images.cjs

@@ -1024,12 +1024,12 @@ function HeroAgencyAnimatedImages({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full gap-12 md:gap-20 grid-cols-1 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "flex w-full max-w-125 flex-col gap-8 md:gap-14 lg:max-w-full",
+              "flex w-full flex-col gap-4 items-start",
               contentClassName
             ),
             children: [
@@ -1037,12 +1037,12 @@ function HeroAgencyAnimatedImages({
                 "h1",
                 {
                   className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl xl:text-[5rem] text-left text-pretty",
+                    "text-4xl md:text-5xl lg:text-7xl xl:text-[5rem] font-bold text-left text-pretty",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {

package/dist/hero-agency-animated-images.js

@@ -1002,12 +1002,12 @@ function HeroAgencyAnimatedImages({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-12 md:gap-20 grid-cols-1 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex w-full max-w-125 flex-col gap-8 md:gap-14 lg:max-w-full",
+              "flex w-full flex-col gap-4 items-start",
               contentClassName
             ),
             children: [
@@ -1015,12 +1015,12 @@ function HeroAgencyAnimatedImages({
                 "h1",
                 {
                   className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl xl:text-[5rem] text-left text-pretty",
+                    "text-4xl md:text-5xl lg:text-7xl xl:text-[5rem] font-bold text-left text-pretty",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {

package/dist/hero-business-carousel-dots.cjs

@@ -927,11 +927,11 @@ var fadeVariants = {
   initial: { opacity: 0 },
   animate: {
     opacity: 1,
-    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] }
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] }
   },
   exit: {
     opacity: 0,
-    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] }
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] }
   }
 };
 function HeroBusinessCarouselDots({
@@ -965,7 +965,7 @@ function HeroBusinessCarouselDots({
     if (imageCount <= 1) return;
     timerRef.current = setInterval(() => {
       setCurrentIndex((prev) => (prev + 1) % imageCount);
-    }, 4e3);
+    }, 7e3);
   }, [imageCount]);
   React3.useEffect(() => {
     startTimer();
@@ -985,42 +985,52 @@ function HeroBusinessCarouselDots({
       className: cn("overflow-hidden", className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-8 md:pt-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl text-center", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariant, className: badgeClassName, children: badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "mt-6 text-4xl font-bold md:text-6xl text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "mt-5 text-lg md:text-xl lg:px-32 text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : description),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "relative mx-4 mt-10 md:mx-10 md:mt-16",
+              "mx-auto max-w-full md:max-w-5xl text-center flex flex-col items-center px-4",
+              contentClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariant, className: badgeClassName, children: badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mt-6 text-4xl font-bold md:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-5 text-lg md:text-xl lg:px-32 text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName,
+                  mobileConfig: { width: "full", position: "center" }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mx-4 mt-18 md:mx-10 md:mt-32",
               carouselClassName
             ),
             children: [
@@ -1028,7 +1038,7 @@ function HeroBusinessCarouselDots({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 -right-4 -left-4 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-right-20 md:-left-20" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-10 left-0 z-10 h-[calc(100%+80px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-top-20 md:h-[calc(100%+160px)]" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-10 right-0 z-10 h-[calc(100%+80px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-top-20 md:h-[calc(100%+160px)]" }),
-              carouselSlot ? carouselSlot : activeImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+              carouselSlot ? carouselSlot : activeImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden ", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.div,
                 {
                   variants: fadeVariants,

package/dist/hero-business-carousel-dots.js

@@ -906,11 +906,11 @@ var fadeVariants = {
   initial: { opacity: 0 },
   animate: {
     opacity: 1,
-    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] }
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] }
   },
   exit: {
     opacity: 0,
-    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] }
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] }
   }
 };
 function HeroBusinessCarouselDots({
@@ -944,7 +944,7 @@ function HeroBusinessCarouselDots({
     if (imageCount <= 1) return;
     timerRef.current = setInterval(() => {
       setCurrentIndex((prev) => (prev + 1) % imageCount);
-    }, 4e3);
+    }, 7e3);
   }, [imageCount]);
   useEffect(() => {
     startTimer();
@@ -964,42 +964,52 @@ function HeroBusinessCarouselDots({
       className: cn("overflow-hidden", className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl text-center", contentClassName), children: [
-          badge && /* @__PURE__ */ jsx(Badge, { variant: badgeVariant, className: badgeClassName, children: badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "mt-6 text-4xl font-bold md:text-6xl text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mt-5 text-lg md:text-xl lg:px-32 text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : description),
-          /* @__PURE__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "relative mx-4 mt-10 md:mx-10 md:mt-16",
+              "mx-auto max-w-full md:max-w-5xl text-center flex flex-col items-center px-4",
+              contentClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsx(Badge, { variant: badgeVariant, className: badgeClassName, children: badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mt-6 text-4xl font-bold md:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-5 text-lg md:text-xl lg:px-32 text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName,
+                  mobileConfig: { width: "full", position: "center" }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mx-4 mt-18 md:mx-10 md:mt-32",
               carouselClassName
             ),
             children: [
@@ -1007,7 +1017,7 @@ function HeroBusinessCarouselDots({
               /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 -right-4 -left-4 z-10 h-px bg-[linear-gradient(to_right,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-right-20 md:-left-20" }),
               /* @__PURE__ */ jsx("div", { className: "absolute -top-10 left-0 z-10 h-[calc(100%+80px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-top-20 md:h-[calc(100%+160px)]" }),
               /* @__PURE__ */ jsx("div", { className: "absolute -top-10 right-0 z-10 h-[calc(100%+80px)] w-px bg-[linear-gradient(to_bottom,transparent,hsl(var(--border))_4%,hsl(var(--border))_96%,transparent)] md:-top-20 md:h-[calc(100%+160px)]" }),
-              carouselSlot ? carouselSlot : activeImage ? /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx(
+              carouselSlot ? carouselSlot : activeImage ? /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden ", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
                 motion.div,
                 {
                   variants: fadeVariants,

package/dist/hero-coming-soon-countdown.cjs

@@ -10,6 +10,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
 var reactSlot = require('@radix-ui/react-slot');
 var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
+var forms = require('@page-speed/forms');
+var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -457,22 +459,6 @@ var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 }
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -961,6 +947,16 @@ var SocialLinkIcon = React__namespace.forwardRef(
   }
 );
 SocialLinkIcon.displayName = "SocialLinkIcon";
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 var digitVariants = {
   initial: { y: -20, opacity: 0 },
   animate: {
@@ -976,7 +972,7 @@ var digitVariants = {
 };
 function CountdownDigit({ value, label }) {
   const display = value.toString().padStart(2, "0");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center bg-card pt-2 pb-6 px-2 text-card-foreground rounded-xl md:rounded-2xl shadow-xl", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -996,7 +992,7 @@ function CountdownDigit({ value, label }) {
         ) })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-2 text-sm"), children: label })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-2 text-xs md:text-sm"), children: label })
   ] });
 }
 function HeroComingSoonCountdown({
@@ -1006,8 +1002,14 @@ function HeroComingSoonCountdown({
   description,
   countdownDate,
   countdownSlot,
-  emailPlaceholder = "Enter your email",
-  submitAction,
+  formFields = DEFAULT_FORM_FIELDS,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
   formSlot,
   socialLinks,
   socialLinksSlot,
@@ -1026,6 +1028,18 @@ function HeroComingSoonCountdown({
   socialLinksClassName
 }) {
   const [timeLeft, setTimeLeft] = React.useState(null);
+  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = integration.useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
   const calculateTimeLeft = React.useCallback(() => {
     if (!countdownDate) return null;
     const now = Date.now();
@@ -1052,31 +1066,59 @@ function HeroComingSoonCountdown({
   const showCountdown = countdownSlot || timeLeft;
   const renderForm = React.useMemo(() => {
     if (formSlot) return formSlot;
-    if (!submitAction) return null;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = submitAction;
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          type: "email",
-          placeholder: emailPlaceholder,
-          className: cn("h-12 flex-1 border-border/50")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) })
-    ] });
-  }, [formSlot, submitAction, emailPlaceholder]);
+    const defaultButtonAction = {
+      label: "Notify Me",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      forms.Form,
+      {
+        form,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            integration.DynamicFormField,
+            {
+              field,
+              uploadProgress,
+              onFileUpload: uploadFiles,
+              onFileRemove: removeFile,
+              isUploading
+            }
+          ) }, field.name)),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Pressable,
+            {
+              onClick: form.handleSubmit,
+              asButton: true,
+              variant: action.variant,
+              className: cn("h-12", action.className),
+              disabled: form.isSubmitting,
+              children: [
+                action.label,
+                action.iconAfter
+              ]
+            }
+          ),
+          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1102,7 +1144,7 @@ function HeroComingSoonCountdown({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-8 md:pt-0", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-8 md:px-12 md:py-12 lg:py-16 lg:px-16 rounded-2xl flex flex-col items-center text-center bg-muted gap-4 md:gap-8", children: [
         (badgeText || badgeIcon) && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("gap-2 px-4 py-2", badgeClassName), children: [
           badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
@@ -1111,7 +1153,7 @@ function HeroComingSoonCountdown({
           "h1",
           {
             className: cn(
-              "mt-8 max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              "max-w-full md:max-w-lg text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
               headingClassName
             ),
             children: heading
@@ -1121,7 +1163,7 @@ function HeroComingSoonCountdown({
           "p",
           {
             className: cn(
-              "mt-6 max-w-xl text-lg md:text-xl text-balance",
+              "max-w-full md:max-w-md text-lg md:text-xl text-balance",
               descriptionClassName
             ),
             children: description
@@ -1131,7 +1173,7 @@ function HeroComingSoonCountdown({
           "div",
           {
             className: cn(
-              "mt-12 grid grid-cols-4 gap-4 md:gap-8",
+              "py-8 grid grid-cols-4 gap-2 md:gap-4 lg:gap-8",
               countdownClassName
             ),
             children: countdownSlot ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1146,7 +1188,7 @@ function HeroComingSoonCountdown({
           "div",
           {
             className: cn(
-              "mt-12 flex w-full max-w-md flex-col gap-4 sm:flex-row",
+              "flex w-full max-w-md flex-col gap-4 sm:flex-row",
               formClassName
             ),
             children: renderForm
@@ -1155,10 +1197,7 @@ function HeroComingSoonCountdown({
         (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(
-              "mt-16 flex items-center gap-6",
-              socialLinksClassName
-            ),
+            className: cn("mt-8 flex items-center gap-6", socialLinksClassName),
             children: renderSocialLinks
           }
         )

package/dist/hero-coming-soon-countdown.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { A as ActionConfig, a as SocialLinkItem } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -32,15 +33,39 @@ interface HeroComingSoonCountdownProps {
      */
     countdownSlot?: React.ReactNode;
     /**
-     * Email input placeholder text
+     * Form field configuration
      */
-    emailPlaceholder?: string;
+    formFields?: FormFieldConfig[];
     /**
-     * Submit button action configuration
+     * Form configuration for submission
      */
-    submitAction?: ActionConfig;
+    formConfig?: PageSpeedFormConfig;
     /**
-     * Custom slot for the form (overrides email input and submit)
+     * Custom submit handler
+     */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /**
+     * Success callback
+     */
+    onSuccess?: (data: unknown) => void;
+    /**
+     * Error callback
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Success message to display
+     */
+    successMessage?: React.ReactNode;
+    /**
+     * Submit button configuration
+     */
+    buttonAction?: ActionConfig;
+    /**
+     * Helper text below form
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Custom slot for the form (overrides form props)
      */
     formSlot?: React.ReactNode;
     /**
@@ -106,6 +131,6 @@ interface HeroComingSoonCountdownProps {
      */
     patternClassName?: string;
 }
-declare function HeroComingSoonCountdown({ badgeIcon, badgeText, heading, description, countdownDate, countdownSlot, emailPlaceholder, submitAction, formSlot, socialLinks, socialLinksSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, badgeClassName, headingClassName, descriptionClassName, countdownClassName, formClassName, socialLinksClassName, }: HeroComingSoonCountdownProps): React.JSX.Element;
+declare function HeroComingSoonCountdown({ badgeIcon, badgeText, heading, description, countdownDate, countdownSlot, formFields, formConfig, onSubmit, onSuccess, onError, successMessage, buttonAction, helperText, formSlot, socialLinks, socialLinksSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, badgeClassName, headingClassName, descriptionClassName, countdownClassName, formClassName, socialLinksClassName, }: HeroComingSoonCountdownProps): React.JSX.Element;
 
 export { HeroComingSoonCountdown, type HeroComingSoonCountdownProps };

package/dist/hero-coming-soon-countdown.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { A as ActionConfig, a as SocialLinkItem } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -32,15 +33,39 @@ interface HeroComingSoonCountdownProps {
      */
     countdownSlot?: React.ReactNode;
     /**
-     * Email input placeholder text
+     * Form field configuration
      */
-    emailPlaceholder?: string;
+    formFields?: FormFieldConfig[];
     /**
-     * Submit button action configuration
+     * Form configuration for submission
      */
-    submitAction?: ActionConfig;
+    formConfig?: PageSpeedFormConfig;
     /**
-     * Custom slot for the form (overrides email input and submit)
+     * Custom submit handler
+     */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /**
+     * Success callback
+     */
+    onSuccess?: (data: unknown) => void;
+    /**
+     * Error callback
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Success message to display
+     */
+    successMessage?: React.ReactNode;
+    /**
+     * Submit button configuration
+     */
+    buttonAction?: ActionConfig;
+    /**
+     * Helper text below form
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Custom slot for the form (overrides form props)
      */
     formSlot?: React.ReactNode;
     /**
@@ -106,6 +131,6 @@ interface HeroComingSoonCountdownProps {
      */
     patternClassName?: string;
 }
-declare function HeroComingSoonCountdown({ badgeIcon, badgeText, heading, description, countdownDate, countdownSlot, emailPlaceholder, submitAction, formSlot, socialLinks, socialLinksSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, badgeClassName, headingClassName, descriptionClassName, countdownClassName, formClassName, socialLinksClassName, }: HeroComingSoonCountdownProps): React.JSX.Element;
+declare function HeroComingSoonCountdown({ badgeIcon, badgeText, heading, description, countdownDate, countdownSlot, formFields, formConfig, onSubmit, onSuccess, onError, successMessage, buttonAction, helperText, formSlot, socialLinks, socialLinksSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, badgeClassName, headingClassName, descriptionClassName, countdownClassName, formClassName, socialLinksClassName, }: HeroComingSoonCountdownProps): React.JSX.Element;
 
 export { HeroComingSoonCountdown, type HeroComingSoonCountdownProps };