@opensite/ui 2.0.9 → 2.1.1

package/dist/registry.js

@@ -55833,8 +55833,6 @@ function HeroHiringAnimatedText({
   description,
   actions,
   actionsSlot,
-  scrollAction,
-  scrollActionSlot,
   backgroundImage,
   background,
   pattern,
@@ -55889,51 +55887,6 @@ function HeroHiringAnimatedText({
     headingClassName,
     activeIndex
   ]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
-  const renderScrollAction = useMemo(() => {
-    if (scrollActionSlot) return scrollActionSlot;
-    if (!scrollAction) return null;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = scrollAction;
-    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      icon,
-      /* @__PURE__ */ jsx("div", { children: label }),
-      iconAfter
-    ] }) });
-  }, [scrollActionSlot, scrollAction]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -55956,7 +55909,7 @@ function HeroHiringAnimatedText({
           ),
           children: [
             renderHeading,
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-stretch md:items-start flex-col gap-8", children: [
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
@@ -55967,10 +55920,15 @@ function HeroHiringAnimatedText({
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
-                renderActions,
-                renderScrollAction
-              ] })
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName,
+                  mobileConfig: { width: "full", position: "center" }
+                }
+              )
             ] })
           ]
         }
@@ -55978,11 +55936,28 @@ function HeroHiringAnimatedText({
     }
   );
 }
+var DEFAULT_FORM_FIELDS41 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroSplitImageNewsletter({
   heading,
   description,
-  newsletterForm,
-  newsletterFormSlot,
+  formFields = DEFAULT_FORM_FIELDS41,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
+  formSlot,
   image,
   imageSlot,
   background,
@@ -55997,37 +55972,104 @@ function HeroSplitImageNewsletter({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderNewsletterForm = useMemo(() => {
-    if (newsletterFormSlot) return newsletterFormSlot;
-    if (!newsletterForm) return null;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "email",
-            placeholder: newsletterForm.placeholder,
-            className: "h-12 flex-1 rounded-full px-6"
-          }
-        ),
-        newsletterForm.action && /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            href: newsletterForm.action.href,
-            asButton: true,
-            variant: newsletterForm.action.variant,
-            className: newsletterForm.action.className,
-            children: [
-              newsletterForm.action.label,
-              newsletterForm.action.iconAfter
-            ]
-          }
-        )
-      ] }),
-      newsletterForm.helperText && (typeof newsletterForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm"), children: newsletterForm.helperText }) : newsletterForm.helperText)
-    ] });
-  }, [newsletterFormSlot, newsletterForm]);
-  const renderImage = useMemo(() => {
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
+  const renderForm = React22.useMemo(() => {
+    if (formSlot) return formSlot;
+    const defaultButtonAction = {
+      label: "Subscribe",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        form,
+        fields: formFields,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig,
+          formLayout: "button-group",
+          buttonGroupSize: "default",
+          submitLabel: action.label,
+          submitVariant: action.variant || "default"
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
+            formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+              DynamicFormField,
+              {
+                field,
+                uploadProgress,
+                onFileUpload: uploadFiles,
+                onFileRemove: removeFile,
+                isUploading
+              }
+            ) }, field.name)),
+            /* @__PURE__ */ 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__ */ jsx("p", { className: cn("text-sm mt-2"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [
+    formSlot,
+    formFields,
+    form,
+    formConfig,
+    formMethod,
+    buttonAction,
+    uploadProgress,
+    uploadFiles,
+    removeFile,
+    isUploading,
+    submissionError,
+    successMessage,
+    helperText,
+    resetUpload,
+    resetSubmissionState
+  ]);
+  const renderImage = React22.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: "relative lg:w-1/2", children: /* @__PURE__ */ jsx(
@@ -56091,7 +56133,7 @@ function HeroSplitImageNewsletter({
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderNewsletterForm
+              renderForm
             ]
           }
         ),
@@ -57397,14 +57439,31 @@ function HeroProductShowcaseFloating({
     }
   );
 }
+var DEFAULT_FORM_FIELDS42 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroSaasDashboardPreview({
   badgeText,
   badgeIcon,
   badgeSlot,
   heading,
   description,
-  emailForm,
-  emailFormSlot,
+  formFields = DEFAULT_FORM_FIELDS42,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
+  formSlot,
   browserPreview,
   browserPreviewSlot,
   background,
@@ -57419,7 +57478,26 @@ function HeroSaasDashboardPreview({
   previewClassName,
   optixFlowConfig
 }) {
-  const renderBadge = useMemo(() => {
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
+  const renderBadge = React22.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -57434,34 +57512,82 @@ function HeroSaasDashboardPreview({
       }
     );
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderEmailForm = useMemo(() => {
-    if (emailFormSlot) return emailFormSlot;
-    if (!emailForm) return null;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "email",
-            placeholder: emailForm.placeholder,
-            className: "h-12 flex-1"
-          }
-        ),
-        emailForm.action && /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: emailForm.action.href,
-            asButton: true,
-            variant: emailForm.action.variant,
-            className: emailForm.action.className,
-            children: emailForm.action.label
-          }
-        )
-      ] }) }),
-      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm", children: emailForm.helperText }) : emailForm.helperText)
-    ] });
-  }, [emailFormSlot, emailForm]);
-  const renderBrowserPreview = useMemo(() => {
+  const renderForm = React22.useMemo(() => {
+    if (formSlot) return formSlot;
+    const defaultButtonAction = {
+      label: "Start Free Trial",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        form,
+        fields: formFields,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig,
+          formLayout: "button-group",
+          buttonGroupSize: "lg",
+          submitLabel: action.label,
+          submitVariant: action.variant || "default"
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-center gap-2", children: [
+            formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+              DynamicFormField,
+              {
+                field,
+                uploadProgress,
+                onFileUpload: uploadFiles,
+                onFileRemove: removeFile,
+                isUploading
+              }
+            ) }, field.name)),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onClick: form.handleSubmit,
+                asButton: true,
+                variant: action.variant,
+                className: cn("h-12", action.className),
+                disabled: form.isSubmitting,
+                children: action.label
+              }
+            )
+          ] }) }),
+          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-center mt-4"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [
+    formSlot,
+    formFields,
+    form,
+    formConfig,
+    formMethod,
+    buttonAction,
+    uploadProgress,
+    uploadFiles,
+    removeFile,
+    isUploading,
+    submissionError,
+    successMessage,
+    helperText,
+    resetUpload,
+    resetSubmissionState
+  ]);
+  const renderBrowserPreview = React22.useMemo(() => {
     if (browserPreviewSlot) return browserPreviewSlot;
     if (!browserPreview) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-20", previewClassName), children: [
@@ -57544,7 +57670,7 @@ function HeroSaasDashboardPreview({
               children: description
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderEmailForm
+          renderForm
         ] }),
         renderBrowserPreview
       ] })
@@ -58304,37 +58430,46 @@ function HeroAgencyAnimatedImages({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-12 md:gap-14 grid-cols-1 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-4", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl md:text-5xl lg:text-7xl xl:text-[5rem] text-left text-pretty",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-left text-lg md:text-xl text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsx(
-            BlockActions,
-            {
-              actions,
-              actionsSlot,
-              actionsClassName
-            }
-          )
-        ] }),
+      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 flex-col gap-4 items-start",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl md:text-5xl lg:text-7xl xl:text-[5rem] font-bold text-left text-pretty",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-left text-lg md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -58750,11 +58885,11 @@ function HeroCreativeStudioStacked({
   images,
   imagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -59004,7 +59139,7 @@ function HeroDigitalAgencyFullscreen({
           "div",
           {
             className: cn(
-              "flex min-h-screen min-w-screen h-full w-full flex-col items-center justify-end",
+              "flex min-h-screen h-full w-full flex-col items-center justify-end",
               contentClassName
             ),
             children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col gap-6 mb-6 md:mb-24 px-6 md:px-0", children: [
@@ -59247,7 +59382,7 @@ function HeroSharedInboxLayered({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-full md:max-w-125 flex-col gap-4 md:gap-12 items-start", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "pt-8 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-20 md:grid-cols-2", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -60109,30 +60244,64 @@ function HeroPricingComparison({
     }
   );
 }
+var DEFAULT_FORM_FIELDS43 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroNewsletterMinimal({
   heading,
   description,
-  inputPlaceholder,
-  submitAction,
+  formFields = DEFAULT_FORM_FIELDS43,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
   formSlot,
   disclaimer,
   stats,
   patternClassName,
   statsSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   headingClassName,
   descriptionClassName,
   formClassName,
-  inputClassName,
   disclaimerClassName,
   statsClassName
 }) {
-  const renderStats = useMemo(() => {
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
+  const renderStats = React22.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center", stat.className), children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -60158,33 +60327,82 @@ function HeroNewsletterMinimal({
       /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
     ] }) }, index));
   }, [statsSlot, stats]);
-  const renderForm = useMemo(() => {
+  const renderForm = React22.useMemo(() => {
     if (formSlot) return formSlot;
-    if (!submitAction) return null;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = submitAction;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "email",
-          placeholder: inputPlaceholder,
-          className: cn("h-12 flex-1", inputClassName)
-        }
-      ),
-      /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) })
-    ] });
-  }, [formSlot, submitAction, inputPlaceholder, inputClassName]);
+    const defaultButtonAction = {
+      label: "Subscribe",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        form,
+        fields: formFields,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig,
+          formLayout: "button-group",
+          buttonGroupSize: "lg",
+          submitLabel: action.label,
+          submitVariant: action.variant || "default"
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            DynamicFormField,
+            {
+              field,
+              uploadProgress,
+              onFileUpload: uploadFiles,
+              onFileRemove: removeFile,
+              isUploading
+            }
+          ) }, field.name)),
+          /* @__PURE__ */ 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__ */ 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
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -60238,7 +60456,7 @@ function HeroNewsletterMinimal({
               "div",
               {
                 className: cn(
-                  "mt-16 flex flex-wrap items-center justify-center gap-8",
+                  "mt-16 flex flex-wrap items-center justify-center gap-8 md:gap-12",
                   statsClassName
                 ),
                 children: renderStats
@@ -60250,6 +60468,16 @@ function HeroNewsletterMinimal({
     }
   );
 }
+var DEFAULT_FORM_FIELDS44 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 var digitVariants = {
   initial: { y: -20, opacity: 0 },
   animate: {
@@ -60265,7 +60493,7 @@ var digitVariants = {
 };
 function CountdownDigit({ value, label }) {
   const display = value.toString().padStart(2, "0");
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+  return /* @__PURE__ */ 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__ */ jsx(
       "div",
       {
@@ -60285,7 +60513,7 @@ function CountdownDigit({ value, label }) {
         ) })
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-sm"), children: label })
+    /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-xs md:text-sm"), children: label })
   ] });
 }
 function HeroComingSoonCountdown({
@@ -60295,8 +60523,14 @@ function HeroComingSoonCountdown({
   description,
   countdownDate,
   countdownSlot,
-  emailPlaceholder = "Enter your email",
-  submitAction,
+  formFields = DEFAULT_FORM_FIELDS44,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
   formSlot,
   socialLinks,
   socialLinksSlot,
@@ -60314,8 +60548,27 @@ function HeroComingSoonCountdown({
   formClassName,
   socialLinksClassName
 }) {
-  const [timeLeft, setTimeLeft] = useState(null);
-  const calculateTimeLeft = useCallback(() => {
+  const [timeLeft, setTimeLeft] = React22.useState(null);
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
+  const calculateTimeLeft = React22.useCallback(() => {
     if (!countdownDate) return null;
     const now = Date.now();
     const target = countdownDate.getTime();
@@ -60328,7 +60581,7 @@ function HeroComingSoonCountdown({
       seconds: Math.floor(diff % (1e3 * 60) / 1e3)
     };
   }, [countdownDate]);
-  useEffect(() => {
+  React22.useEffect(() => {
     setTimeLeft(calculateTimeLeft());
     if (!countdownDate) return;
     const timer = setInterval(() => {
@@ -60339,34 +60592,83 @@ function HeroComingSoonCountdown({
     return () => clearInterval(timer);
   }, [countdownDate, calculateTimeLeft]);
   const showCountdown = countdownSlot || timeLeft;
-  const renderForm = useMemo(() => {
+  const renderForm = React22.useMemo(() => {
     if (formSlot) return formSlot;
-    if (!submitAction) return null;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = submitAction;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "email",
-          placeholder: emailPlaceholder,
-          className: cn("h-12 flex-1 border-border/50")
-        }
-      ),
-      /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) })
-    ] });
-  }, [formSlot, submitAction, emailPlaceholder]);
-  const renderSocialLinks = useMemo(() => {
+    const defaultButtonAction = {
+      label: "Notify Me",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        form,
+        fields: formFields,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig,
+          formLayout: "button-group",
+          buttonGroupSize: "lg",
+          submitLabel: action.label,
+          submitVariant: action.variant || "default"
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            DynamicFormField,
+            {
+              field,
+              uploadProgress,
+              onFileUpload: uploadFiles,
+              onFileRemove: removeFile,
+              isUploading
+            }
+          ) }, field.name)),
+          /* @__PURE__ */ 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__ */ 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 = React22.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, index) => /* @__PURE__ */ jsx(
@@ -60391,7 +60693,7 @@ function HeroComingSoonCountdown({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
+      children: /* @__PURE__ */ 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__ */ jsxs(Badge, { className: cn("gap-2 px-4 py-2", badgeClassName), children: [
           badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
           /* @__PURE__ */ jsx("span", { children: badgeText })
@@ -60400,7 +60702,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
@@ -60410,7 +60712,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
@@ -60420,7 +60722,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__ */ jsxs(Fragment$1, { children: [
@@ -60435,7 +60737,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 items-center justify-center",
               formClassName
             ),
             children: renderForm
@@ -60444,10 +60746,7 @@ function HeroComingSoonCountdown({
         (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "mt-16 flex items-center gap-6",
-              socialLinksClassName
-            ),
+            className: cn("mt-8 flex items-center gap-6", socialLinksClassName),
             children: renderSocialLinks
           }
         )
@@ -60498,7 +60797,7 @@ function HeroEventRegistration({
       "div",
       {
         className: cn(
-          "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12",
+          "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12 w-full md:w-fit",
           statsClassName
         ),
         children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
@@ -60535,7 +60834,7 @@ function HeroEventRegistration({
   const renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card p-4 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg ring-4 ring-primary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -60546,8 +60845,8 @@ function HeroEventRegistration({
         }
       ),
       /* @__PURE__ */ jsxs("div", { children: [
-        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: locationSublabel }) : locationSublabel)
+        locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: locationLabel }) : locationLabel),
+        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm text-card-foreground"), children: locationSublabel }) : locationSublabel)
       ] })
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
@@ -60581,7 +60880,7 @@ function HeroEventRegistration({
           "div",
           {
             className: cn(
-              "flex flex-col items-start gap-6 md:gap-8",
+              "flex flex-col items-start gap-4 md:gap-6",
               contentClassName
             ),
             children: [