@opensite/ui 2.1.9 → 2.2.2

package/dist/registry.js

@@ -9041,6 +9041,7 @@ function AboutNetworkSpotlight({
   spotlightCard,
   spotlightCardSlot,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   eyebrowClassName,
   headingClassName,
@@ -9050,7 +9051,7 @@ function AboutNetworkSpotlight({
   imageClassName,
   spotlightCardClassName,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -9071,7 +9072,7 @@ function AboutNetworkSpotlight({
       /* @__PURE__ */ jsx("span", { children: item })
     ] }, index)) });
   }, [highlightsSlot, highlights, highlightsClassName]);
-  const actionsContent = useMemo(() => {
+  useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -9135,9 +9136,10 @@ function AboutNetworkSpotlight({
     {
       background,
       spacing,
-      className: cn(className),
       pattern,
       patternOpacity,
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -9153,7 +9155,7 @@ function AboutNetworkSpotlight({
                 whileInView: { opacity: 1, x: 0 },
                 viewport: { once: true, margin: "-50px" },
                 transition: { duration: 0.5 },
-                children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl", children: [
+                children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl aspect-square md:aspect-auto", children: [
                   /* @__PURE__ */ jsx(
                     Img,
                     {
@@ -9164,7 +9166,7 @@ function AboutNetworkSpotlight({
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-black/70 via-transparent to-transparent" }),
-                  /* @__PURE__ */ jsx("div", { className: "absolute bottom-6 left-6 right-6", children: spotlightCardContent })
+                  /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 md:bottom-6 left-2 md:left-6 right-2 md:right-6", children: spotlightCardContent })
                 ] })
               }
             ),
@@ -9185,29 +9187,33 @@ function AboutNetworkSpotlight({
                       ),
                       children: eyebrow
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  ) : eyebrow),
                   heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                     "h2",
                     {
                       className: cn(
-                        "mt-2 text-3xl font-bold text-background md:text-4xl",
+                        "mt-2 text-3xl font-bold md:text-4xl text-pretty",
                         headingClassName
                       ),
                       children: heading
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading })),
+                  ) : heading),
                   description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                     "p",
                     {
-                      className: cn(
-                        "mt-4 text-lg text-background/80",
-                        descriptionClassName
-                      ),
+                      className: cn("mt-4 text-lg text-pretty", descriptionClassName),
                       children: description
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
+                  ) : description),
                   (highlightsSlot || highlights && highlights.length > 0) && highlightsContent,
-                  (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
+                  /* @__PURE__ */ jsx(
+                    BlockActions,
+                    {
+                      actions,
+                      actionsSlot,
+                      actionsClassName
+                    }
+                  )
                 ]
               }
             )
@@ -13686,104 +13692,115 @@ function ContactCallback({
     }
   );
 }
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-6"
+};
 var DEFAULT_FORM_FIELDS3 = [
   {
-    name: "firstName",
+    name: "fullName",
     type: "text",
-    label: "First Name",
-    placeholder: "John",
+    label: "Full Name",
+    placeholder: "Full Name",
     required: true,
     columnSpan: 6
   },
   {
-    name: "lastName",
-    type: "text",
-    label: "Last Name",
-    placeholder: "Doe",
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "your@email.com",
     required: true,
     columnSpan: 6
   },
   {
-    name: "email",
-    type: "email",
-    label: "Email Address",
-    placeholder: "john@example.com",
-    required: true,
+    name: "phone",
+    type: "tel",
+    label: "Phone",
+    placeholder: "+1 (555) 000-0000",
     columnSpan: 12
   },
   {
     name: "message",
     type: "textarea",
-    label: "Message",
-    placeholder: "How can we help you?",
+    label: "Your Message",
+    placeholder: "How can we help you today?",
     required: true,
     rows: 4,
     columnSpan: 12
-  },
-  {
-    name: "privacyPolicy",
-    type: "checkbox",
-    label: "I agree to the privacy policy",
-    required: true,
-    columnSpan: 12
   }
 ];
 function ContactCard({
-  heading,
-  description,
-  actions,
-  actionsSlot,
-  actionsClassName,
+  heading = "Get In Touch",
+  description = "We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
+  buttonText = "Send Message",
+  buttonIcon,
   contactOptions,
   contactOptionsSlot,
-  formFields,
-  successMessage = "Thank you! We'll be in touch soon.",
+  socialLinks,
+  socialLinksSlot,
+  formEngineSetup,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   cardClassName,
-  formClassName,
-  successMessageClassName,
-  errorMessageClassName,
+  cardContentClassName,
   infoPanelClassName,
   headingClassName,
   descriptionClassName,
   contactOptionsClassName,
+  socialLinksClassName,
+  gridClassName,
   background,
   spacing = "py-16 md:py-32",
   pattern,
-  patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity
 }) {
-  const fields = useMemo(() => formFields || DEFAULT_FORM_FIELDS3, [formFields]);
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields: fields,
-    formConfig,
-    onSubmit,
-    onSuccess,
-    onError
-  });
-  const contactOptionsContent = useMemo(() => {
+  const contactOptionsContent = React25.useMemo(() => {
     if (contactOptionsSlot) return contactOptionsSlot;
     if (contactOptions && contactOptions.length > 0) {
-      return contactOptions.map((option, key) => /* @__PURE__ */ jsxs(
+      return contactOptions.map((option, key) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: option.icon,
+            size: 20,
+            className: "shrink-0 text-muted-foreground"
+          }
+        ),
+        option.href ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: option.href,
+            className: "text-sm font-medium text-muted-foreground",
+            children: option.info
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: option.info })
+      ] }, key));
+    }
+    return null;
+  }, [contactOptionsSlot, contactOptions]);
+  const socialLinksContent = React25.useMemo(() => {
+    if (socialLinksSlot) return socialLinksSlot;
+    if (socialLinks && socialLinks.length > 0) {
+      return socialLinks.map((social, key) => /* @__PURE__ */ jsx(
         Pressable,
         {
-          variant: "link",
-          href: option.href,
-          className: "gap-4 font-bold",
-          children: [
-            /* @__PURE__ */ jsx(DynamicIcon, { name: option.icon, size: 20 }),
-            option.info
-          ]
+          href: social.href,
+          className: cn(
+            "flex h-9 w-9 items-center justify-center",
+            "rounded-full transition-colors",
+            "text-muted-foreground hover:text-foreground"
+          ),
+          "aria-label": social.label,
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 18 })
         },
         key
       ));
     }
     return null;
-  }, [contactOptionsSlot, contactOptions]);
+  }, [socialLinksSlot, socialLinks]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -13793,82 +13810,89 @@ function ContactCard({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-10 md:gap-12 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsx(Card, { className: cn("p-6 lg:p-8 order-2 md:order-1", cardClassName), children: /* @__PURE__ */ jsxs(
-          Form,
-          {
-            form,
-            action: formConfig?.endpoint,
-            method: formMethod,
-            submissionError,
-            successMessage,
-            successMessageClassName,
-            errorMessageClassName,
-            submissionConfig: formConfig?.submissionConfig,
-            onNewSubmission: resetSubmissionState,
-            className: cn("space-y-6", formClassName),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: fields.map((field) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: getColumnSpanClass(field.columnSpan),
-                  children: /* @__PURE__ */ jsx(DynamicFormField, { field })
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid items-start gap-10 md:gap-12 grid-cols-1 lg:grid-cols-2",
+            gridClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Card, { className: cn("order-2 lg:order-1 pt-0 pb-0", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsx(
+              FormEngine,
+              {
+                formEngineSetup: {
+                  ...formEngineSetup,
+                  formLayoutSettings: {
+                    ...formEngineSetup.formLayoutSettings,
+                    formLayout: "standard",
+                    submitButtonSetup: {
+                      ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                      submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                        buttonIcon,
+                        buttonText
+                      ] })
+                    }
+                  }
                 },
-                field.name
-              )) }),
-              /* @__PURE__ */ jsx(
-                BlockActions,
-                {
-                  actions,
-                  actionsSlot,
-                  actionsClassName
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex flex-col items-start gap-2 md:gap-4 order-1 md:order-2",
-              infoPanelClassName
-            ),
-            children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-4xl lg:text-6xl font-bold tracking-tight text-pretty",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "leading-relaxed text-pretty text-lg opacity-70",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : description),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mt-4 space-y-4 w-full md:w-fit px-6 py-6 md:px-12 md:py-8 bg-muted rounded-xl text-sm md:text-normal flex flex-col items-start gap-1",
-                    contactOptionsClassName
+                defaultFields: DEFAULT_FORM_FIELDS3,
+                defaultStyleRules: DEFAULT_STYLE_RULES
+              }
+            ) : null }) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-start gap-2 md:gap-4 order-1 lg:order-2",
+                  infoPanelClassName
+                ),
+                children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "text-4xl lg:text-6xl font-bold tracking-tight text-pretty",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : heading),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "leading-relaxed text-pretty text-lg text-muted-foreground",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : description),
+                  contactOptionsContent && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mt-4 w-full rounded-xl bg-muted px-6 py-6 md:px-8 md:py-8 space-y-6",
+                        contactOptionsClassName
+                      ),
+                      children: contactOptionsContent
+                    }
                   ),
-                  children: contactOptionsContent
-                }
-              )
-            ]
-          }
-        )
-      ] }) })
+                  socialLinksContent && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mt-2 flex items-center gap-2",
+                        socialLinksClassName
+                      ),
+                      children: socialLinksContent
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
     }
   );
 }
@@ -14685,6 +14709,12 @@ function ContactConsultation({
     }
   );
 }
+var DEFAULT_STYLE_RULES2 = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-6"
+};
 var DEFAULT_FORM_FIELDS7 = [
   {
     name: "firstName",
@@ -14727,87 +14757,26 @@ function ContactDark({
   contactDescription = "Fill up the form and our team will get back to you within 24 hours.",
   buttonText = "Submit",
   buttonIcon,
-  actions,
-  actionsSlot,
   contactOptions,
   contactOptionsSlot,
   socialLinks,
   socialLinksSlot,
-  formFields = DEFAULT_FORM_FIELDS7,
-  successMessage = "Thank you! Your message has been sent successfully.",
+  formEngineSetup,
   className,
   headerClassName,
   headingClassName,
   descriptionClassName,
   cardClassName,
   formPanelClassName,
-  formClassName,
-  submitClassName,
   infoPanelClassName,
   contactOptionsClassName,
   socialLinksClassName,
-  successMessageClassName,
-  errorMessageClassName,
   background,
   spacing = "py-8 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity
 }) {
-  const {
-    uploadTokens,
-    uploadProgress,
-    isUploading,
-    uploadFiles,
-    removeFile,
-    resetUpload
-  } = useFileUpload({ onError });
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields,
-    formConfig,
-    onSubmit,
-    onSuccess: (data) => {
-      resetUpload();
-      onSuccess?.(data);
-    },
-    onError,
-    resetOnSuccess: formConfig?.resetOnSuccess !== false,
-    uploadTokens
-  });
-  const actionsContent = React25.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (actions && actions.length > 0) {
-      return 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
-        );
-      });
-    }
-    return null;
-  }, [actionsSlot, actions]);
   const contactOptionsContent = React25.useMemo(() => {
     if (contactOptionsSlot) return contactOptionsSlot;
     if (contactOptions && contactOptions.length > 0) {
@@ -14862,124 +14831,104 @@ function ContactDark({
       patternOpacity,
       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 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__ */ jsxs(
-          Card,
-          {
-            className: cn(
-              "grid gap-0 overflow-hidden grid-cols-1 lg:grid-cols-2 pt-0 pb-0",
-              cardClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: cn("p-6 lg:p-12", formPanelClassName), children: /* @__PURE__ */ jsxs(
-                Form,
-                {
-                  form,
-                  notificationConfig: {
-                    submissionError,
-                    successMessage
-                  },
-                  styleConfig: {
-                    formClassName: cn("space-y-6", formClassName),
-                    successMessageClassName,
-                    errorMessageClassName
-                  },
-                  formConfig: {
-                    endpoint: formConfig?.endpoint,
-                    method: formMethod,
-                    submissionConfig: formConfig?.submissionConfig
-                  },
-                  onNewSubmission: () => {
-                    resetUpload();
-                    resetSubmissionState();
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: getColumnSpanClass(field.columnSpan),
-                        children: /* @__PURE__ */ jsx(
-                          DynamicFormField,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+        Card,
+        {
+          className: cn(
+            "grid gap-0 overflow-hidden grid-cols-1 lg:grid-cols-2 pt-0 pb-0",
+            cardClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: cn("p-6 lg:p-12", formPanelClassName), children: formEngineSetup ? /* @__PURE__ */ jsx(
+              FormEngine,
+              {
+                formEngineSetup: {
+                  ...formEngineSetup,
+                  formLayoutSettings: {
+                    ...formEngineSetup.formLayoutSettings,
+                    formLayout: "standard",
+                    submitButtonSetup: {
+                      ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                      submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                        buttonIcon,
+                        buttonText
+                      ] })
+                    }
+                  }
+                },
+                defaultFields: DEFAULT_FORM_FIELDS7,
+                defaultStyleRules: DEFAULT_STYLE_RULES2
+              }
+            ) : null }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col justify-between bg-primary p-6 text-primary-foreground lg:p-8",
+                  infoPanelClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "pb-6 md:pb-8 border-b-2 border-border/50 mb-6 md:mb-8 text-left",
+                        headerClassName
+                      ),
+                      children: [
+                        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                          "h2",
+                          {
+                            className: cn(
+                              "text-3xl font-bold tracking-tight text-pretty md:text-5xl",
+                              headingClassName
+                            ),
+                            children: heading
+                          }
+                        ) : heading),
+                        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                          "p",
                           {
-                            field,
-                            uploadProgress,
-                            onFileUpload: uploadFiles,
-                            onFileRemove: removeFile,
-                            isUploading
+                            className: cn(
+                              "leading-relaxed text-balance",
+                              descriptionClassName
+                            ),
+                            children: description
                           }
-                        )
-                      },
-                      field.name
-                    )) }),
-                    actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        componentType: "button",
-                        type: "submit",
-                        className: cn("w-full", submitClassName),
-                        asButton: true,
-                        disabled: form.isSubmitting,
-                        children: [
-                          buttonIcon,
-                          buttonText
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-col justify-between bg-primary p-6 text-primary-foreground lg:p-8",
-                    infoPanelClassName
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      contactHeading && (typeof contactHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xl font-semibold", children: contactHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-3", children: contactHeading })),
-                      contactDescription && (typeof contactDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-8 text-sm text-primary-foreground/80", children: contactDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-8", children: contactDescription })),
-                      /* @__PURE__ */ jsx("div", { className: cn("space-y-4", contactOptionsClassName), children: contactOptionsContent })
-                    ] }),
+                        ) : description)
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4", children: [
+                    contactHeading && (typeof contactHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold", children: contactHeading }) : contactHeading),
+                    contactDescription && (typeof contactDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-foreground/80", children: contactDescription }) : contactDescription),
                     /* @__PURE__ */ jsx(
                       "div",
                       {
                         className: cn(
-                          "mt-8 flex items-center gap-4",
-                          socialLinksClassName
+                          "pt-6 md:pt-8 space-y-4",
+                          contactOptionsClassName
                         ),
-                        children: socialLinksContent
+                        children: contactOptionsContent
                       }
                     )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mt-8 flex items-center gap-4",
+                        socialLinksClassName
+                      ),
+                      children: socialLinksContent
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
     }
   );
 }
@@ -15328,32 +15277,12 @@ function ContactDemo({
     }
   );
 }
-var DEFAULT_CONTACT_ITEMS = [
-  {
-    icon: "lucide/phone",
-    title: "Critical Hotline",
-    subtitle: "+1 (555) 911-0000",
-    href: "tel:+15559110000"
-  },
-  {
-    icon: "lucide/mail",
-    title: "Email Support",
-    subtitle: "emergency@support.com",
-    href: "mailto:emergency@support.com"
-  },
-  {
-    icon: "lucide/message-circle",
-    title: "Live Chat",
-    subtitle: "24/7 Available",
-    href: "#chat"
-  },
-  {
-    icon: "lucide/map-pin",
-    title: "Visit Us",
-    subtitle: "123 Support Lane",
-    href: "#location"
-  }
-];
+var DEFAULT_STYLE_RULES3 = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-4"
+};
 var PRIORITIES = [
   {
     value: "critical",
@@ -15428,281 +15357,182 @@ var DEFAULT_FORM_FIELDS9 = [
 function ContactEmergency({
   heading,
   description,
-  contactItems = DEFAULT_CONTACT_ITEMS,
+  contactItems,
   buttonText = "Submit Emergency Request",
   buttonIcon,
+  formEngineSetup,
+  className,
+  headerClassName,
+  headingClassName,
+  descriptionClassName,
+  spacing = "py-16 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background,
+  pattern,
+  patternOpacity
+}) {
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-12 md:gap-28", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between h-full gap-8 md:gap-12", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col items-start gap-4 text-left",
+                headerClassName
+              ),
+              children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-4xl lg:text-5xl xl:text-6xl font-bold text-pretty",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : heading),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "leading-relaxed text-pretty md:text-balance text-lg",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : description)
+              ]
+            }
+          ),
+          contactItems && contactItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:gap-6 w-full", children: contactItems.map((item, index) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: item.href,
+              className: cn(
+                "rounded-xl border bg-transparent hover:bg-muted ring-2",
+                "px-4 py-4 flex",
+                "justify-start items-start transition-all",
+                "duration-500 hover:text-muted-foreground",
+                item.className
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                item.icon ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-2 rounded-xl border bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: item.icon,
+                    size: item.iconSize ?? 24
+                  }
+                ) }) : null,
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-bold text-xs uppercase opacity-70", children: item.title }),
+                  /* @__PURE__ */ jsx("p", { className: "text-md font-medium", children: item.subtitle })
+                ] })
+              ] })
+            },
+            index
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "p-6", children: formEngineSetup ? /* @__PURE__ */ jsx(
+          FormEngine,
+          {
+            formEngineSetup: {
+              ...formEngineSetup,
+              formLayoutSettings: {
+                ...formEngineSetup.formLayoutSettings,
+                formLayout: "standard",
+                submitButtonSetup: {
+                  ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                  submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                    buttonIcon,
+                    buttonText
+                  ] })
+                }
+              }
+            },
+            defaultFields: DEFAULT_FORM_FIELDS9,
+            defaultStyleRules: DEFAULT_STYLE_RULES3
+          }
+        ) : null })
+      ] })
+    }
+  );
+}
+var DEFAULT_FORM_FIELDS10 = [
+  {
+    name: "first_name",
+    type: "text",
+    label: "First Name",
+    placeholder: "John",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "last_name",
+    type: "text",
+    label: "Last Name",
+    placeholder: "Doe",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "john@example.com",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "phone",
+    type: "tel",
+    label: "Phone",
+    placeholder: "+1 (555) 000-0000",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "message",
+    type: "textarea",
+    label: "Message",
+    placeholder: "Your message...",
+    required: true,
+    rows: 4,
+    columnSpan: 12
+  }
+];
+function ContactEvent({
+  heading,
+  description,
+  buttonText = "Submit",
+  buttonIcon,
   actions,
   actionsSlot,
-  formFields = DEFAULT_FORM_FIELDS9,
-  successMessage = "Thank you! Your emergency request has been received.",
+  formFields = DEFAULT_FORM_FIELDS10,
+  successMessage = "Thank you! Your message has been sent successfully.",
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
+  cardClassName,
+  cardContentClassName,
   formClassName,
   submitClassName,
   successMessageClassName,
   errorMessageClassName,
-  spacing = "py-8 md:py-32",
-  containerClassName = "w-full max-w-full relative z-10 px-6 sm:px-6 md:px-8 lg:px-8",
-  background,
+  background = "white",
+  spacing = "xl",
   pattern,
-  patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
-}) {
-  const {
-    uploadTokens,
-    uploadProgress,
-    isUploading,
-    uploadFiles,
-    removeFile,
-    resetUpload
-  } = useFileUpload({ onError });
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields,
-    formConfig,
-    onSubmit,
-    onSuccess: (data) => {
-      resetUpload();
-      onSuccess?.(data);
-    },
-    onError,
-    resetOnSuccess: formConfig?.resetOnSuccess !== false,
-    uploadTokens
-  });
-  const otherFields = formFields.filter((f) => f.name !== "priority");
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (actions && actions.length > 0) {
-      return 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
-        );
-      });
-    }
-    return null;
-  }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className,
-      containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
-        Form,
-        {
-          form,
-          notificationConfig: {
-            submissionError,
-            successMessage
-          },
-          styleConfig: {
-            formClassName,
-            successMessageClassName,
-            errorMessageClassName
-          },
-          formConfig: {
-            endpoint: formConfig?.endpoint,
-            method: formMethod,
-            submissionConfig: formConfig?.submissionConfig
-          },
-          onNewSubmission: () => {
-            resetUpload();
-            resetSubmissionState();
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsxs("div", { className: cn("p-0 md:p-12"), children: [
-              /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 gap-12 md:gap-24", children: /* @__PURE__ */ jsx("div", { className: "border-b border-border/60 p-6 md:border-b-0 md:border-r md:border-border/60", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-8 md:gap-12", children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-col items-start gap-4 text-left",
-                    headerClassName
-                  ),
-                  children: [
-                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                      "h2",
-                      {
-                        className: cn(
-                          "text-4xl lg:text-5xl xl:text-6xl font-bold",
-                          headingClassName
-                        ),
-                        children: heading
-                      }
-                    ) : heading),
-                    description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "leading-relaxed",
-                          descriptionClassName
-                        ),
-                        children: description
-                      }
-                    ) : description)
-                  ]
-                }
-              ) }) }) }),
-              contactItems && contactItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 w-full", children: contactItems.map((item, index) => /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  href: item.href,
-                  className: cn(
-                    "rounded-md border bg-muted ring-2",
-                    "text-muted-foreground px-4 py-3 flex",
-                    "justify-start items-start transition-shadow",
-                    "duration-500 hover:shadow-xl",
-                    item.className
-                  ),
-                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    item.icon ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-2 rounded-xl border bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: item.icon,
-                        size: item.iconSize ?? 24
-                      }
-                    ) }) : null,
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "font-bold text-xs uppercase opacity-70", children: item.title }),
-                      /* @__PURE__ */ jsx("p", { className: "text-md font-semibold", children: item.subtitle })
-                    ] })
-                  ] })
-                },
-                index
-              )) })
-            ] }) }),
-            /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-4", children: otherFields.map((field) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: getColumnSpanClass(field.columnSpan),
-                  children: /* @__PURE__ */ jsx(
-                    DynamicFormField,
-                    {
-                      field,
-                      uploadProgress,
-                      onFileUpload: uploadFiles,
-                      onFileRemove: removeFile,
-                      isUploading
-                    }
-                  )
-                },
-                field.name
-              )) }),
-              actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
-                Pressable,
-                {
-                  componentType: "button",
-                  type: "submit",
-                  className: cn("w-full", submitClassName),
-                  size: "lg",
-                  asButton: true,
-                  disabled: form.isSubmitting,
-                  children: [
-                    buttonIcon,
-                    buttonText
-                  ]
-                }
-              )
-            ] }) })
-          ]
-        }
-      ) })
-    }
-  );
-}
-var DEFAULT_FORM_FIELDS10 = [
-  {
-    name: "first_name",
-    type: "text",
-    label: "First Name",
-    placeholder: "John",
-    required: true,
-    columnSpan: 6
-  },
-  {
-    name: "last_name",
-    type: "text",
-    label: "Last Name",
-    placeholder: "Doe",
-    required: true,
-    columnSpan: 6
-  },
-  {
-    name: "email",
-    type: "email",
-    label: "Email",
-    placeholder: "john@example.com",
-    required: true,
-    columnSpan: 12
-  },
-  {
-    name: "phone",
-    type: "tel",
-    label: "Phone",
-    placeholder: "+1 (555) 000-0000",
-    required: true,
-    columnSpan: 12
-  },
-  {
-    name: "message",
-    type: "textarea",
-    label: "Message",
-    placeholder: "Your message...",
-    required: true,
-    rows: 4,
-    columnSpan: 12
-  }
-];
-function ContactEvent({
-  heading,
-  description,
-  buttonText = "Submit",
-  buttonIcon,
-  actions,
-  actionsSlot,
-  formFields = DEFAULT_FORM_FIELDS10,
-  successMessage = "Thank you! Your message has been sent successfully.",
-  className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  headerClassName,
-  headingClassName,
-  descriptionClassName,
-  cardClassName,
-  cardContentClassName,
-  formClassName,
-  submitClassName,
-  successMessageClassName,
-  errorMessageClassName,
-  background = "white",
-  spacing = "xl",
-  pattern,
-  patternOpacity = 0.1,
+  patternOpacity = 0.1,
   formConfig,
   onSubmit,
   onSuccess,
@@ -15912,7 +15742,7 @@ function AccordionContent({
     }
   );
 }
-var DEFAULT_STYLE_RULES = {
+var DEFAULT_STYLE_RULES4 = {
   formContainer: "",
   fieldsContainer: "",
   fieldClassName: "",
@@ -15983,23 +15813,6 @@ function ContactFaq({
   pattern,
   patternOpacity
 }) {
-  const formStyleRules = React25.useMemo(() => {
-    return {
-      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
-      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
-      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
-      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
-      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
-      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
-    };
-  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
-  const formFields = React25.useMemo(() => {
-    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
-      return formEngineSetup.fields;
-    } else {
-      return DEFAULT_FORM_FIELDS11;
-    }
-  }, [formEngineSetup?.fields]);
   const hasFaqItems = itemsSlot || items && items.length > 0;
   const faqContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
@@ -16093,24 +15906,26 @@ function ContactFaq({
                     ),
                     children: formHeading
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: formHeadingClassName, children: formHeading })),
+                ) : formHeading),
                 formEngineSetup ? /* @__PURE__ */ jsx(
                   FormEngine,
                   {
-                    ...formEngineSetup,
-                    formLayoutSettings: {
-                      ...formEngineSetup.formLayoutSettings,
-                      formLayout: "standard",
-                      submitButtonSetup: {
-                        ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
-                        submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                          buttonIcon,
-                          buttonText
-                        ] })
-                      },
-                      styleRules: formStyleRules
+                    formEngineSetup: {
+                      ...formEngineSetup,
+                      formLayoutSettings: {
+                        ...formEngineSetup.formLayoutSettings,
+                        formLayout: "standard",
+                        submitButtonSetup: {
+                          ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                          submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                            buttonIcon,
+                            buttonText
+                          ] })
+                        }
+                      }
                     },
-                    fields: formFields
+                    defaultFields: DEFAULT_FORM_FIELDS11,
+                    defaultStyleRules: DEFAULT_STYLE_RULES4
                   }
                 ) : null
               ] }) }),
@@ -16782,6 +16597,12 @@ function ContactGuest({
     }
   );
 }
+var DEFAULT_STYLE_RULES5 = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-4"
+};
 var DEFAULT_FORM_FIELDS15 = [
   {
     name: "first_name",
@@ -16826,207 +16647,172 @@ var DEFAULT_FORM_FIELDS15 = [
   }
 ];
 function ContactImage({
+  eyebrow,
   heading,
   description,
-  buttonText = "Submit",
+  buttonText = "Send Message",
   buttonIcon,
-  actions,
-  actionsSlot,
-  formFields = DEFAULT_FORM_FIELDS15,
-  successMessage = "Thank you! Your message has been sent successfully.",
+  image,
+  contactOverlays,
+  contactOverlaysSlot,
+  formEngineSetup,
+  className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  contentClassName,
+  eyebrowClassName,
   headingClassName,
   descriptionClassName,
-  cardClassName,
-  cardContentClassName,
-  formClassName,
-  submitClassName,
-  successMessageClassName,
-  errorMessageClassName,
-  backgroundImage,
+  imageClassName,
+  contactOverlaysClassName,
   background,
-  optixFlowConfig,
-  spacing = "none",
-  className,
-  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-screen w-screen flex justify-center items-center",
-  contentClassName = "",
+  spacing = "py-16 md:py-32",
   pattern,
-  patternOpacity = 0.1,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity,
+  optixFlowConfig
 }) {
-  const {
-    uploadTokens,
-    uploadProgress,
-    isUploading,
-    uploadFiles,
-    removeFile,
-    resetUpload
-  } = useFileUpload({ onError });
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields,
-    formConfig,
-    onSubmit,
-    onSuccess: (data) => {
-      resetUpload();
-      onSuccess?.(data);
-    },
-    onError,
-    resetOnSuccess: formConfig?.resetOnSuccess !== false,
-    uploadTokens
-  });
-  const actionsContent = 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 contactOverlaysContent = React25.useMemo(() => {
+    if (contactOverlaysSlot) return contactOverlaysSlot;
+    if (!contactOverlays || contactOverlays.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", contactOverlaysClassName), children: contactOverlays.map((item, index) => {
+      const content = /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "rounded-2xl border border-white/10 bg-foreground/80 p-4 backdrop-blur-sm",
+            item.className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex size-fit p-2 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 18 }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-bold uppercase tracking-[0.15em] text-background/70", children: item.label }),
+                /* @__PURE__ */ jsx("p", { className: "font-semibold text-background", children: item.title })
+              ] })
+            ] }),
+            item.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-background/80", children: item.description })
+          ]
+        }
+      );
+      if (item.href) {
         return /* @__PURE__ */ jsx(
-          Pressable,
+          "a",
           {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              icon,
-              label,
-              iconAfter
-            ] })
+            href: item.href,
+            className: "block transition-transform hover:scale-[1.02]",
+            children: content
           },
           index
         );
-      });
-    }
-    return null;
-  }, [actionsSlot, actions]);
-  const renderBackground = useMemo(() => {
-    if (!backgroundImage) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
-      /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: backgroundImage,
-          alt: "Full screen background image",
-          className: "h-full w-full object-cover",
-          loading: "eager",
-          optixFlowConfig
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
-    ] });
-  }, [backgroundImage, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
+      }
+      return /* @__PURE__ */ jsx("div", { children: content }, index);
+    }) });
+  }, [contactOverlaysSlot, contactOverlays, contactOverlaysClassName]);
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
+      className,
+      containerClassName,
       pattern,
       patternOpacity,
-      className: cn(
-        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
-        className
-      ),
-      containerClassName,
-      children: [
-        renderBackground,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex flex-col gap-4 md:gap-6 px-6 pt-28 pb-6 md:pt-0 md:pb-0",
-              "relative z-30 m-auto max-w-full md:max-w-md flex-col items-center justify-center text-center",
-              contentClassName
-            ),
-            children: /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxs(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-5xl md:text-6xl lg:text-7xl text-card-foreground text-shadow-2xl font-semibold",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-center text-base text-balance text-card-foreground text-shadow-2xl",
-                    descriptionClassName
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 items-center gap-12 lg:grid-cols-2",
+            contentClassName
+          ),
+          children: [
+            image && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, x: -20 },
+                whileInView: { opacity: 1, x: 0 },
+                viewport: { once: true, margin: "-50px" },
+                transition: { duration: 0.5 },
+                className: "order-2 lg:order-1",
+                children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl", children: [
+                  /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: image.src,
+                      alt: image.alt,
+                      className: cn("h-full w-full object-cover", imageClassName),
+                      optixFlowConfig
+                    }
                   ),
-                  children: description
-                }
-              ) : description),
-              /* @__PURE__ */ jsxs(
-                Form,
-                {
-                  form,
-                  notificationConfig: {
-                    submissionError,
-                    successMessage
-                  },
-                  styleConfig: {
-                    formClassName: cn("space-y-4", formClassName),
-                    successMessageClassName,
-                    errorMessageClassName
-                  },
-                  formConfig: {
-                    endpoint: formConfig?.endpoint,
-                    method: formMethod,
-                    submissionConfig: formConfig?.submissionConfig
-                  },
-                  onNewSubmission: () => {
-                    resetUpload();
-                    resetSubmissionState();
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: getColumnSpanClass(field.columnSpan),
-                        children: /* @__PURE__ */ jsx(
-                          DynamicFormField,
-                          {
-                            field,
-                            uploadProgress,
-                            onFileUpload: uploadFiles,
-                            onFileRemove: removeFile,
-                            isUploading
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-black/70 via-transparent to-transparent" }),
+                  contactOverlaysContent && /* @__PURE__ */ jsx("div", { className: "absolute bottom-6 left-6 right-6", children: contactOverlaysContent })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                initial: { opacity: 0, x: 20 },
+                whileInView: { opacity: 1, x: 0 },
+                viewport: { once: true, margin: "-50px" },
+                transition: { duration: 0.5 },
+                className: "order-1 lg:order-2",
+                children: [
+                  eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground",
+                        eyebrowClassName
+                      ),
+                      children: eyebrow
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mt-2 text-3xl font-bold md:text-4xl lg:text-5xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mt-4 text-lg text-muted-foreground",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
+                  /* @__PURE__ */ jsx("div", { className: "mt-8", children: formEngineSetup ? /* @__PURE__ */ jsx(
+                    FormEngine,
+                    {
+                      formEngineSetup: {
+                        ...formEngineSetup,
+                        formLayoutSettings: {
+                          ...formEngineSetup.formLayoutSettings,
+                          formLayout: "standard",
+                          submitButtonSetup: {
+                            ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                            submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                              buttonIcon,
+                              buttonText
+                            ] })
                           }
-                        )
+                        }
                       },
-                      field.name
-                    )) }),
-                    actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        componentType: "button",
-                        type: "submit",
-                        className: cn("w-full", submitClassName),
-                        size: "lg",
-                        asButton: true,
-                        disabled: form.isSubmitting,
-                        children: [
-                          buttonIcon,
-                          buttonText
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }) })
-          }
-        )
-      ]
+                      defaultFields: DEFAULT_FORM_FIELDS15,
+                      defaultStyleRules: DEFAULT_STYLE_RULES5
+                    }
+                  ) : null })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -21807,7 +21593,7 @@ function ContactTenant({
     }
   );
 }
-var DEFAULT_STYLE_RULES2 = {
+var DEFAULT_STYLE_RULES6 = {
   formContainer: "",
   fieldsContainer: "",
   fieldClassName: "",
@@ -21872,23 +21658,6 @@ function ContactVendor({
   pattern,
   patternOpacity = 0.1
 }) {
-  const formStyleRules = React25.useMemo(() => {
-    return {
-      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES2.formContainer,
-      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES2.fieldsContainer,
-      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES2.fieldClassName,
-      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES2.formClassName,
-      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES2.successMessageClassName,
-      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES2.errorMessageClassName
-    };
-  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
-  const formFields = React25.useMemo(() => {
-    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
-      return formEngineSetup.fields;
-    } else {
-      return DEFAULT_FORM_FIELDS38;
-    }
-  }, [formEngineSetup?.fields]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -21924,12 +21693,9 @@ function ContactVendor({
         /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsx(
           FormEngine,
           {
-            ...formEngineSetup,
-            formLayoutSettings: {
-              ...formEngineSetup.formLayoutSettings,
-              styleRules: formStyleRules
-            },
-            fields: formFields
+            formEngineSetup,
+            defaultFields: DEFAULT_FORM_FIELDS38,
+            defaultStyleRules: DEFAULT_STYLE_RULES6
           }
         ) : null }) })
       ] })
@@ -31264,61 +31030,49 @@ function TeamSocialGrid({
             }
           ),
           /* @__PURE__ */ jsx("p", { className: cn("text-center font-medium", memberNameClassName), children: member.name }),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-center",
-                getTextColor(background, "muted"),
-                memberRoleClassName
-              ),
-              children: member.role
-            }
-          ),
-          member.social && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "mt-2 flex gap-2",
-                getTextColor(background, "muted"),
-                socialLinksClassName
-              ),
-              children: [
-                member.social.github && /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    href: member.social.github,
-                    className: "transition-colors",
-                    "aria-label": `${member.name}'s GitHub`,
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/github", size: 20 })
-                  }
-                ),
-                member.social.twitter && /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    href: member.social.twitter,
-                    className: "transition-colors",
-                    "aria-label": `${member.name}'s Twitter`,
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/twitter", size: 20 })
-                  }
-                ),
-                member.social.linkedin && /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    href: member.social.linkedin,
-                    className: "transition-colors",
-                    "aria-label": `${member.name}'s LinkedIn`,
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/linkedin", size: 20 })
-                  }
-                )
-              ]
-            }
-          )
+          /* @__PURE__ */ jsx("p", { className: cn("text-center", memberRoleClassName), children: member.role }),
+          member.social && /* @__PURE__ */ jsxs("div", { className: cn("mt-2 flex gap-2", socialLinksClassName), children: [
+            member.social.github && /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                href: member.social.github,
+                className: "transition-colors",
+                "aria-label": `${member.name}'s GitHub`,
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/github", size: 20 })
+              }
+            ),
+            member.social.twitter && /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                href: member.social.twitter,
+                className: "transition-colors",
+                "aria-label": `${member.name}'s Twitter`,
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/twitter", size: 20 })
+              }
+            ),
+            member.social.linkedin && /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                href: member.social.linkedin,
+                className: "transition-colors",
+                "aria-label": `${member.name}'s LinkedIn`,
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/linkedin", size: 20 })
+              }
+            )
+          ] })
         ]
       },
       member.id
     ));
-  }, [membersSlot, members, memberCardClassName, avatarClassName, memberNameClassName, memberRoleClassName, socialLinksClassName]);
+  }, [
+    membersSlot,
+    members,
+    memberCardClassName,
+    avatarClassName,
+    memberNameClassName,
+    memberRoleClassName,
+    socialLinksClassName
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -31349,11 +31103,7 @@ function TeamSocialGrid({
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn(
-                    "mb-8 max-w-3xl lg:text-xl",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
+                  className: cn("mb-8 max-w-3xl lg:text-xl", descriptionClassName),
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
@@ -51328,7 +51078,7 @@ function HeroImageLeftContent({
     }
   );
 }
-var DEFAULT_STYLE_RULES3 = {
+var DEFAULT_STYLE_RULES7 = {
   formContainer: "",
   fieldsContainer: "",
   fieldClassName: "",
@@ -51399,23 +51149,6 @@ function HeroImageSlider({
   privacyNoticeClassName,
   gridClassName
 }) {
-  const formStyleRules = React25.useMemo(() => {
-    return {
-      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES3.formContainer,
-      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES3.fieldsContainer,
-      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES3.fieldClassName,
-      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES3.formClassName,
-      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES3.successMessageClassName,
-      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES3.errorMessageClassName
-    };
-  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
-  const formFields = React25.useMemo(() => {
-    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
-      return formEngineSetup.fields;
-    } else {
-      return DEFAULT_FORM_FIELDS42;
-    }
-  }, [formEngineSetup?.fields]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -51574,20 +51307,22 @@ function HeroImageSlider({
                     /* @__PURE__ */ jsx(
                       FormEngine,
                       {
-                        ...formEngineSetup,
-                        formLayoutSettings: {
-                          ...formEngineSetup?.formLayoutSettings,
-                          formLayout: "standard",
-                          submitButtonSetup: {
-                            ...formEngineSetup?.formLayoutSettings?.submitButtonSetup,
-                            submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                              buttonIcon,
-                              buttonText
-                            ] })
-                          },
-                          styleRules: formStyleRules
+                        formEngineSetup: {
+                          ...formEngineSetup,
+                          formLayoutSettings: {
+                            ...formEngineSetup?.formLayoutSettings,
+                            formLayout: "standard",
+                            submitButtonSetup: {
+                              ...formEngineSetup?.formLayoutSettings?.submitButtonSetup,
+                              submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                                buttonIcon,
+                                buttonText
+                              ] })
+                            }
+                          }
                         },
-                        fields: formFields
+                        defaultFields: DEFAULT_FORM_FIELDS42,
+                        defaultStyleRules: DEFAULT_STYLE_RULES7
                       }
                     ),
                     privacyNotice && /* @__PURE__ */ jsx(
@@ -61426,7 +61161,7 @@ function HeroPricingComparison({
     }
   );
 }
-var DEFAULT_STYLE_RULES4 = {
+var DEFAULT_STYLE_RULES8 = {
   formContainer: "mt-10 flex justify-center items-center w-full max-w-md flex-col gap-4 sm:flex-row",
   fieldsContainer: "",
   fieldClassName: "",
@@ -61464,23 +61199,6 @@ function HeroNewsletterMinimal({
   disclaimerClassName,
   statsClassName
 }) {
-  const formStyleRules = React25.useMemo(() => {
-    return {
-      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES4.formContainer,
-      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES4.fieldsContainer,
-      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES4.fieldClassName,
-      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES4.formClassName,
-      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES4.successMessageClassName,
-      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES4.errorMessageClassName
-    };
-  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
-  const formFields = React25.useMemo(() => {
-    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
-      return formEngineSetup.fields;
-    } else {
-      return DEFAULT_FORM_FIELDS45;
-    }
-  }, [formEngineSetup?.fields]);
   const renderStats = React25.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -61519,22 +61237,24 @@ function HeroNewsletterMinimal({
       /* @__PURE__ */ jsx(
         FormEngine,
         {
-          ...formEngineSetup,
-          formLayoutSettings: {
-            ...formEngineSetup.formLayoutSettings,
-            formLayout: "button-group",
-            buttonGroupSetup: {
-              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
-              size: "lg",
-              submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                action.label,
-                action.iconAfter
-              ] }),
-              submitVariant: action.variant || "default"
-            },
-            styleRules: formStyleRules
+          formEngineSetup: {
+            ...formEngineSetup,
+            formLayoutSettings: {
+              ...formEngineSetup.formLayoutSettings,
+              formLayout: "button-group",
+              buttonGroupSetup: {
+                ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+                size: "lg",
+                submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  action.label,
+                  action.iconAfter
+                ] }),
+                submitVariant: action.variant || "default"
+              }
+            }
           },
-          fields: formFields
+          defaultFields: DEFAULT_FORM_FIELDS45,
+          defaultStyleRules: DEFAULT_STYLE_RULES8
         }
       ),
       helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
@@ -61543,8 +61263,6 @@ function HeroNewsletterMinimal({
     formSlot,
     formEngineSetup,
     buttonAction,
-    formFields,
-    formStyleRules,
     helperText
   ]);
   return /* @__PURE__ */ jsx(
@@ -85478,7 +85196,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo445 } = React25;
+var { useMemo: useMemo441 } = React25;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -85546,7 +85264,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo445(() => {
+  const renderCloseButton = useMemo441(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -85560,12 +85278,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo445(() => {
+  const renderHeader = useMemo441(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo445(() => {
+  const renderForm = useMemo441(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -85627,7 +85345,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo446 } = React25;
+var { useMemo: useMemo442 } = React25;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -85704,7 +85422,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo446(() => {
+  const renderImage = useMemo442(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsx(
@@ -85717,7 +85435,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo446(() => {
+  const renderCloseButton = useMemo442(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       Pressable,
@@ -85733,7 +85451,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo446(() => {
+  const renderForm = useMemo442(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -85796,7 +85514,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo446(() => {
+  const renderFooter = useMemo442(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -85916,7 +85634,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo447 } = React25;
+var { useMemo: useMemo443 } = React25;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -85999,7 +85717,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo447(() => {
+  const renderLogo = useMemo443(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -86013,7 +85731,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo447(() => {
+  const renderHeader = useMemo443(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -86023,7 +85741,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo447(() => {
+  const renderForm = useMemo443(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -86071,7 +85789,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo447(() => {
+  const renderLegal = useMemo443(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -86085,7 +85803,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo447(() => {
+  const renderImage = useMemo443(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -105215,11 +104933,16 @@ var BLOCK_REGISTRY = {
     props: "ContactCardProps",
     exampleUsage: `
 <ContactCard
-  heading="Get in Touch"
-  description="We'd love to hear from you"
-  formHeading="Contact us"
+  heading="Get In Touch"
+  description="We'd love to hear from you. Send us a message and we'll respond as soon as possible."
   buttonText="Send Message"
-  formConfig={{ endpoint: "/api/contact", format: "json" }}
+  contactOptions={[
+    { icon: "Phone", info: "+1 (555) 987-6543", href: "tel:+15559876543" },
+    { icon: "Mail", info: "support@example.com", href: "mailto:support@example.com" },
+    { icon: "MapPin", info: "456 Business Ave, New York, NY 10001" },
+    { icon: "Clock", info: "Mon-Fri: 9 AM - 6 PM EST" },
+  ]}
+  formEngineSetup={{ formConfig: { endpoint: "/api/contact", format: "json" } }}
 />
     `.trim()
   },
@@ -105320,7 +105043,7 @@ var BLOCK_REGISTRY = {
   heading="Contact Us"
   description="Any questions or remarks? Just write us a message!"
   buttonText="Send Message"
-  formConfig={{ endpoint: "/api/contact", format: "json" }}
+  formEngineSetup={{ formConfig: { endpoint: "/api/contact", format: "json" } }}
 />
     `.trim()
   },
@@ -105371,7 +105094,7 @@ var BLOCK_REGISTRY = {
   heading="Emergency Contact"
   description="We're here to help 24/7"
   buttonText="Submit Emergency Request"
-  formConfig={{ endpoint: "/api/emergency", format: "json" }}
+  formEngineSetup={{ formConfig: { endpoint: "/api/emergency", format: "json" } }}
 />
     `.trim()
   },
@@ -105403,7 +105126,16 @@ var BLOCK_REGISTRY = {
     id: "contact-faq",
     name: "Contact FAQ",
     description: "A two-column contact form with an FAQ accordion sidebar. Displays frequently asked questions alongside a contact form so visitors can find answers before submitting inquiries. Falls back to a single-column centered layout when no FAQ items are provided.",
-    semanticTags: ["contact", "faq", "questions", "inquiry", "form", "support", "accordion", "two-column"],
+    semanticTags: [
+      "contact",
+      "faq",
+      "questions",
+      "inquiry",
+      "form",
+      "support",
+      "accordion",
+      "two-column"
+    ],
     category: "contact",
     component: ContactFaq,
     props: "ContactFaqProps",
@@ -105496,17 +105228,29 @@ var BLOCK_REGISTRY = {
   "contact-image": {
     id: "contact-image",
     name: "Contact Image",
-    description: "Contact form with image background layout. Features a clean card design with first name, last name, email, phone, and message fields.",
-    semanticTags: ["contact", "form", "image", "card", "simple"],
+    description: "Split-layout contact form with an image panel featuring overlay contact items (phone, email, etc.) on the left and a form with heading on the right. Modern, professional design with motion animations.",
+    semanticTags: [
+      "contact",
+      "form",
+      "image",
+      "split-layout",
+      "overlay",
+      "modern"
+    ],
     category: "contact",
     component: ContactImage,
     props: "ContactImageProps",
     exampleUsage: `
 <ContactImage
-  heading="Get in Touch"
-  description="We'd love to hear from you"
-  buttonText="Send Message"
-  formConfig={{ endpoint: "/api/contact", format: "json" }}
+  eyebrow="Get in Touch"
+  heading="Contact Us"
+  description="We'd love to hear from you."
+  image={{ src: "/office.jpg", alt: "Our office" }}
+  contactOverlays={[
+    { icon: "lucide/phone", label: "Phone", title: "+1 (555) 987-6543", href: "tel:+15559876543" },
+    { icon: "lucide/mail", label: "Email", title: "support@example.com", href: "mailto:support@example.com" },
+  ]}
+  formEngineSetup={{ formConfig: { endpoint: "/api/contact", format: "json" } }}
 />
     `.trim()
   },