@opensite/ui 2.1.9 → 2.2.1

package/dist/registry.js

@@ -1,5 +1,5 @@
-import * as React25 from 'react';
-import React25__default, { Fragment, createContext, useMemo, forwardRef, useCallback, useState, useEffect, useRef, startTransition, useContext } from 'react';
+import * as React28 from 'react';
+import React28__default, { Fragment, createContext, useMemo, forwardRef, useCallback, useState, useEffect, useRef, startTransition, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -140,7 +140,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React25__default.forwardRef(
+var Container = React28__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -445,7 +445,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React25__default.forwardRef(
+var Section = React28__default.forwardRef(
   ({
     id,
     title,
@@ -1035,7 +1035,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React25.useMemo(() => {
+  const linkType = React28.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -1056,7 +1056,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React25.useMemo(() => {
+  const normalizedHref = React28.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -1074,7 +1074,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React25.useMemo(() => {
+  const target = React28.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -1087,7 +1087,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React25.useMemo(() => {
+  const rel = React28.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -1096,7 +1096,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React25.useCallback(
+  const handleClick = React28.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -1280,7 +1280,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React25.forwardRef(
+var Pressable = React28.forwardRef(
   ({
     children,
     className,
@@ -2328,10 +2328,10 @@ var ImageSlider = ({
   optixFlowConfig
 }) => {
   const hasImages = images.length > 0;
-  const [currentIndex, setCurrentIndex] = React25.useState(
+  const [currentIndex, setCurrentIndex] = React28.useState(
     () => normalizeIndex(startIndex, images.length)
   );
-  const handleNext = React25.useCallback(() => {
+  const handleNext = React28.useCallback(() => {
     if (!hasImages) return;
     setCurrentIndex((prevIndex) => {
       const nextIndex = prevIndex + 1 >= images.length ? 0 : prevIndex + 1;
@@ -2339,7 +2339,7 @@ var ImageSlider = ({
       return nextIndex;
     });
   }, [hasImages, images.length, onSlideChange]);
-  const handlePrevious = React25.useCallback(() => {
+  const handlePrevious = React28.useCallback(() => {
     if (!hasImages) return;
     setCurrentIndex((prevIndex) => {
       const nextIndex = prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1;
@@ -2347,11 +2347,11 @@ var ImageSlider = ({
       return nextIndex;
     });
   }, [hasImages, images.length, onSlideChange]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!hasImages) return;
     setCurrentIndex(normalizeIndex(startIndex, images.length));
   }, [startIndex, images.length, hasImages]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!enableKeyboard || !hasImages) return;
     const handleKeyDown = (event) => {
       if (event.key === "ArrowRight") {
@@ -2365,7 +2365,7 @@ var ImageSlider = ({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [enableKeyboard, handleNext, handlePrevious, hasImages]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!autoplay || images.length < 2) return;
     const interval = window.setInterval(handleNext, autoplayIntervalMs);
     return () => window.clearInterval(interval);
@@ -2657,7 +2657,7 @@ var platformIconMap = {
   dribbble: "cib/dribbble",
   unknown: "icon-park-solid/circular-connection"
 };
-var SocialLinkIcon = React25.forwardRef(
+var SocialLinkIcon = React28.forwardRef(
   ({
     platformName,
     label,
@@ -2670,13 +2670,13 @@ var SocialLinkIcon = React25.forwardRef(
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
-    const smartPlatformName = React25.useMemo(() => {
+    const smartPlatformName = React28.useMemo(() => {
       return platform || platformName;
     }, [platform, platformName]);
-    const iconName = React25.useMemo(() => {
+    const iconName = React28.useMemo(() => {
       return iconNameOverride || platformIconMap[smartPlatformName];
     }, [iconNameOverride, smartPlatformName]);
-    const accessibleLabel = React25.useMemo(() => {
+    const accessibleLabel = React28.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
     return /* @__PURE__ */ jsx(
@@ -3101,7 +3101,7 @@ function AboutExpandableValues({
   pattern,
   patternOpacity
 }) {
-  const [expandedValue, setExpandedValue] = React25.useState(null);
+  const [expandedValue, setExpandedValue] = React28.useState(null);
   const toggleExpand = useCallback((id) => {
     setExpandedValue((prev) => prev === id ? null : id);
   }, []);
@@ -3355,7 +3355,7 @@ function CommunityInitiatives({
   pattern,
   patternOpacity
 }) {
-  const [activeCategory, setActiveCategory] = React25.useState(
+  const [activeCategory, setActiveCategory] = React28.useState(
     categories?.[0]?.id || ""
   );
   const currentCategory = categories?.find((category) => category.id === activeCategory) || categories?.[0];
@@ -3628,7 +3628,7 @@ function AboutCultureTabs({
   patternOpacity
 }) {
   const resolvedAspects = aspects ?? [];
-  const [activeTab, setActiveTab] = React25.useState(
+  const [activeTab, setActiveTab] = React28.useState(
     resolvedAspects[0]?.id || ""
   );
   const ctaImagesContent = useMemo(() => {
@@ -4127,7 +4127,7 @@ function BannerDeliveryCountdown({
   }, [prefixText, timerContent, middleText, deliveryDateContent]);
   return /* @__PURE__ */ jsx(Section, { background, spacing: "none", className: cn("bg-accent text-accent-foreground", className), children: /* @__PURE__ */ jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-3 text-sm", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", messageClassName), children: [
     iconContent,
-    messageParts.length > 0 && /* @__PURE__ */ jsx("span", { children: messageParts.map((part, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+    messageParts.length > 0 && /* @__PURE__ */ jsx("span", { children: messageParts.map((part, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
       index > 0 ? " " : null,
       part
     ] }, index)) })
@@ -5398,8 +5398,8 @@ var BrandAttribution = ({
   }
   const { prefix = "", anchorText, href, suffix = "" } = options[optionIndex];
   const ContainerEl = variant;
-  const [trackedHref, setTrackedHref] = React25.useState(href);
-  React25.useEffect(() => {
+  const [trackedHref, setTrackedHref] = React28.useState(href);
+  React28.useEffect(() => {
     setTrackedHref(buildTrackedHref(href));
   }, [href]);
   return /* @__PURE__ */ jsxs(ContainerEl, { className: containerClassName, children: [
@@ -5542,7 +5542,7 @@ function FooterSocialNewsletter({
     onError,
     uploadTokens
   });
-  const renderForm = React25.useMemo(() => {
+  const renderForm = React28.useMemo(() => {
     if (formSlot) return formSlot;
     const defaultButtonAction = {
       label: "Subscribe",
@@ -5876,7 +5876,7 @@ function FooterSimpleCentered({
   ]);
   const bottomLinksContent = useMemo(() => {
     if (!bottomLinks || bottomLinks.length === 0) return null;
-    return bottomLinks.map((link, idx) => /* @__PURE__ */ jsx(React25.Fragment, { children: /* @__PURE__ */ jsx(
+    return bottomLinks.map((link, idx) => /* @__PURE__ */ jsx(React28.Fragment, { children: /* @__PURE__ */ jsx(
       Pressable,
       {
         href: link.href,
@@ -8501,7 +8501,7 @@ function AboutInteractiveTabs({
   pattern,
   patternOpacity
 }) {
-  const [activeTab, setActiveTab] = React25.useState(tabs?.[0]?.id ?? "");
+  const [activeTab, setActiveTab] = React28.useState(tabs?.[0]?.id ?? "");
   const activeContent = useMemo(() => {
     return tabs?.find((tab) => tab.id === activeTab)?.content;
   }, [tabs, activeTab]);
@@ -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
+                    }
+                  )
                 ]
               }
             )
@@ -12526,7 +12532,7 @@ function CtaVideoBackgroundHero({
   pattern,
   patternOpacity
 }) {
-  const [isModalOpen, setIsModalOpen] = React25.useState(false);
+  const [isModalOpen, setIsModalOpen] = React28.useState(false);
   const handleOpenModal = () => {
     setIsModalOpen(true);
     onModalOpen?.();
@@ -12714,7 +12720,7 @@ function CtaWorkflowTabs({
   patternOpacity,
   optixFlowConfig
 }) {
-  const [activeTab, setActiveTab] = React25.useState(tabs?.[0]?.id || "");
+  const [activeTab, setActiveTab] = React28.useState(tabs?.[0]?.id || "");
   const activeTabData = tabs?.find((tab) => tab.id === activeTab) || tabs?.[0];
   const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -13327,7 +13333,7 @@ function ContactFloatingBanner({
   pattern,
   patternOpacity
 }) {
-  const actionsContent = React25.useMemo(() => {
+  const actionsContent = React28.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
@@ -13686,104 +13692,131 @@ 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 formStyleRules = React28.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 = React28.useMemo(() => {
+    if (formEngineSetup?.fields && formEngineSetup.fields.length > 0) {
+      return formEngineSetup.fields;
+    }
+    return DEFAULT_FORM_FIELDS3;
+  }, [formEngineSetup?.fields]);
+  const contactOptionsContent = React28.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 = React28.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 +13826,87 @@ 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,
+                formLayoutSettings: {
+                  ...formEngineSetup.formLayoutSettings,
+                  formLayout: "standard",
+                  submitButtonSetup: {
+                    ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                    submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                      buttonIcon,
+                      buttonText
+                    ] })
+                  },
+                  styleRules: formStyleRules
                 },
-                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
+                fields: formFields
+              }
+            ) : 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
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
     }
   );
 }
@@ -14336,7 +14374,7 @@ function ContactCatering({
     onSuccess,
     onError
   });
-  const actionsContent = React25.useMemo(() => {
+  const actionsContent = React28.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
@@ -14580,7 +14618,7 @@ function ContactConsultation({
     onSuccess,
     onError
   });
-  const actionsContent = React25.useMemo(() => {
+  const actionsContent = React28.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
@@ -14685,6 +14723,12 @@ function ContactConsultation({
     }
   );
 }
+var DEFAULT_STYLE_RULES2 = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-6"
+};
 var DEFAULT_FORM_FIELDS7 = [
   {
     name: "firstName",
@@ -14727,88 +14771,43 @@ 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
-        );
-      });
+  const formStyleRules = React28.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 = React28.useMemo(() => {
+    if (formEngineSetup?.fields && formEngineSetup.fields.length > 0) {
+      return formEngineSetup.fields;
     }
-    return null;
-  }, [actionsSlot, actions]);
-  const contactOptionsContent = React25.useMemo(() => {
+    return DEFAULT_FORM_FIELDS7;
+  }, [formEngineSetup?.fields]);
+  const contactOptionsContent = React28.useMemo(() => {
     if (contactOptionsSlot) return contactOptionsSlot;
     if (contactOptions && contactOptions.length > 0) {
       return contactOptions.map((option, key) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -14832,7 +14831,7 @@ function ContactDark({
     }
     return null;
   }, [contactOptionsSlot, contactOptions]);
-  const socialLinksContent = React25.useMemo(() => {
+  const socialLinksContent = React28.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (socialLinks && socialLinks.length > 0) {
       return socialLinks.map((social, key) => /* @__PURE__ */ jsx(
@@ -14862,124 +14861,102 @@ 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: "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,
+                formLayoutSettings: {
+                  ...formEngineSetup.formLayoutSettings,
+                  formLayout: "standard",
+                  submitButtonSetup: {
+                    ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                    submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                      buttonIcon,
+                      buttonText
+                    ] })
                   },
-                  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,
+                  styleRules: formStyleRules
+                },
+                fields: formFields
+              }
+            ) : 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",
                           {
-                            field,
-                            uploadProgress,
-                            onFileUpload: uploadFiles,
-                            onFileRemove: removeFile,
-                            isUploading
+                            className: cn(
+                              "text-3xl font-bold tracking-tight text-pretty md:text-5xl",
+                              headingClassName
+                            ),
+                            children: heading
                           }
-                        )
-                      },
-                      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 })
-                    ] }),
+                        ) : heading),
+                        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: cn(
+                              "leading-relaxed text-balance",
+                              descriptionClassName
+                            ),
+                            children: description
+                          }
+                        ) : 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 +15305,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 +15385,196 @@ 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
+}) {
+  const formStyleRules = React28.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 = React28.useMemo(() => {
+    if (formEngineSetup?.fields && formEngineSetup.fields.length > 0) {
+      return formEngineSetup.fields;
+    }
+    return DEFAULT_FORM_FIELDS9;
+  }, [formEngineSetup?.fields]);
+  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,
+            formLayoutSettings: {
+              ...formEngineSetup.formLayoutSettings,
+              formLayout: "standard",
+              submitButtonSetup: {
+                ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  buttonIcon,
+                  buttonText
+                ] })
+              },
+              styleRules: formStyleRules
+            },
+            fields: formFields
+          }
+        ) : 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 +15784,7 @@ function AccordionContent({
     }
   );
 }
-var DEFAULT_STYLE_RULES = {
+var DEFAULT_STYLE_RULES4 = {
   formContainer: "",
   fieldsContainer: "",
   fieldClassName: "",
@@ -15983,17 +15855,17 @@ function ContactFaq({
   pattern,
   patternOpacity
 }) {
-  const formStyleRules = React25.useMemo(() => {
+  const formStyleRules = React28.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
+      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(() => {
+  const formFields = React28.useMemo(() => {
     if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
       return formEngineSetup.fields;
     } else {
@@ -16093,7 +15965,7 @@ function ContactFaq({
                     ),
                     children: formHeading
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: formHeadingClassName, children: formHeading })),
+                ) : formHeading),
                 formEngineSetup ? /* @__PURE__ */ jsx(
                   FormEngine,
                   {
@@ -16782,6 +16654,12 @@ function ContactGuest({
     }
   );
 }
+var DEFAULT_STYLE_RULES5 = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-4"
+};
 var DEFAULT_FORM_FIELDS15 = [
   {
     name: "first_name",
@@ -16826,207 +16704,186 @@ 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 formStyleRules = React28.useMemo(() => {
+    return {
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES5.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES5.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES5.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES5.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES5.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES5.errorMessageClassName
+    };
+  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
+  const formFields = React28.useMemo(() => {
+    if (formEngineSetup?.fields && formEngineSetup.fields.length > 0) {
+      return formEngineSetup.fields;
+    }
+    return DEFAULT_FORM_FIELDS15;
+  }, [formEngineSetup?.fields]);
+  const contactOverlaysContent = React28.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,
+                      formLayoutSettings: {
+                        ...formEngineSetup.formLayoutSettings,
+                        formLayout: "standard",
+                        submitButtonSetup: {
+                          ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                          submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                            buttonIcon,
+                            buttonText
+                          ] })
+                        },
+                        styleRules: formStyleRules
                       },
-                      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
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }) })
-          }
-        )
-      ]
+                      fields: formFields
+                    }
+                  ) : null })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -21807,7 +21664,7 @@ function ContactTenant({
     }
   );
 }
-var DEFAULT_STYLE_RULES2 = {
+var DEFAULT_STYLE_RULES6 = {
   formContainer: "",
   fieldsContainer: "",
   fieldClassName: "",
@@ -21872,17 +21729,17 @@ function ContactVendor({
   pattern,
   patternOpacity = 0.1
 }) {
-  const formStyleRules = React25.useMemo(() => {
+  const formStyleRules = React28.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
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES6.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES6.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES6.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES6.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES6.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES6.errorMessageClassName
     };
   }, [formEngineSetup?.formLayoutSettings?.styleRules]);
-  const formFields = React25.useMemo(() => {
+  const formFields = React28.useMemo(() => {
     if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
       return formEngineSetup.fields;
     } else {
@@ -22698,16 +22555,16 @@ function CarouselAnimatedSections({
   pattern = "diagonalCrossBasic",
   patternOpacity = 0.033
 }) {
-  const [currentIndex, setCurrentIndex] = React25.useState(0);
-  const [direction, setDirection] = React25.useState(0);
-  const [isAnimating, setIsAnimating] = React25.useState(false);
-  const goToNext = React25.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React28.useState(0);
+  const [direction, setDirection] = React28.useState(0);
+  const [isAnimating, setIsAnimating] = React28.useState(false);
+  const goToNext = React28.useCallback(() => {
     if (isAnimating || currentIndex >= (sections?.length ?? 0) - 1) return;
     setIsAnimating(true);
     setDirection(1);
     setCurrentIndex((prev) => prev + 1);
   }, [currentIndex, isAnimating, sections?.length]);
-  const goToPrev = React25.useCallback(() => {
+  const goToPrev = React28.useCallback(() => {
     if (isAnimating || currentIndex <= 0) return;
     setIsAnimating(true);
     setDirection(-1);
@@ -22719,7 +22576,7 @@ function CarouselAnimatedSections({
     setDirection(index > currentIndex ? 1 : -1);
     setCurrentIndex(index);
   };
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "ArrowDown" || e.key === "ArrowRight") {
         goToNext();
@@ -22745,7 +22602,7 @@ function CarouselAnimatedSections({
     })
   };
   const currentSection = sections?.[currentIndex];
-  const actionElements = React25.useMemo(() => {
+  const actionElements = React28.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => /* @__PURE__ */ jsxs(
@@ -22993,11 +22850,11 @@ function CarouselAutoProgressSlides({
   pattern,
   patternOpacity
 }) {
-  const [currentIndex, setCurrentIndex] = React25.useState(0);
+  const [currentIndex, setCurrentIndex] = React28.useState(0);
   const progress = useMotionValue(100);
-  const [direction, setDirection] = React25.useState(1);
+  const [direction, setDirection] = React28.useState(1);
   const clipPath = useMotionTemplate`inset(0 ${progress}% 0 0 round 10px)`;
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const interval = setInterval(() => {
       const currentProgress = progress.get();
       if (currentProgress > 0) {
@@ -23176,22 +23033,22 @@ function CarouselAutoProgressSlides({
   );
 }
 function useDotButton(emblaApi) {
-  const [selectedIndex, setSelectedIndex] = React25.useState(0);
-  const [scrollSnaps, setScrollSnaps] = React25.useState([]);
-  const onDotButtonClick = React25.useCallback(
+  const [selectedIndex, setSelectedIndex] = React28.useState(0);
+  const [scrollSnaps, setScrollSnaps] = React28.useState([]);
+  const onDotButtonClick = React28.useCallback(
     (index) => {
       if (!emblaApi) return;
       emblaApi.scrollTo(index);
     },
     [emblaApi]
   );
-  const onInit = React25.useCallback((api) => {
+  const onInit = React28.useCallback((api) => {
     setScrollSnaps(api.scrollSnapList());
   }, []);
-  const onSelect = React25.useCallback((api) => {
+  const onSelect = React28.useCallback((api) => {
     setSelectedIndex(api.selectedScrollSnap());
   }, []);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!emblaApi) return;
     onInit(emblaApi);
     onSelect(emblaApi);
@@ -23200,8 +23057,8 @@ function useDotButton(emblaApi) {
   return { selectedIndex, scrollSnaps, onDotButtonClick };
 }
 function useAutoplay(emblaApi) {
-  const [autoplayIsPlaying, setAutoplayIsPlaying] = React25.useState(false);
-  const onAutoplayButtonClick = React25.useCallback(
+  const [autoplayIsPlaying, setAutoplayIsPlaying] = React28.useState(false);
+  const onAutoplayButtonClick = React28.useCallback(
     (callback) => {
       const autoplay = emblaApi?.plugins()?.autoplay;
       if (!autoplay) return;
@@ -23211,13 +23068,13 @@ function useAutoplay(emblaApi) {
     },
     [emblaApi]
   );
-  const toggleAutoplay = React25.useCallback(() => {
+  const toggleAutoplay = React28.useCallback(() => {
     const autoplay = emblaApi?.plugins()?.autoplay;
     if (!autoplay) return;
     const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
     playOrStop();
   }, [emblaApi]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const autoplay = emblaApi?.plugins()?.autoplay;
     if (!autoplay) return;
     setAutoplayIsPlaying(autoplay.isPlaying());
@@ -23226,11 +23083,11 @@ function useAutoplay(emblaApi) {
   return { autoplayIsPlaying, toggleAutoplay, onAutoplayButtonClick };
 }
 function useAutoplayProgress(emblaApi, progressNode) {
-  const [showAutoplayProgress, setShowAutoplayProgress] = React25.useState(false);
-  const animationName = React25.useRef("");
-  const timeoutId = React25.useRef(0);
-  const rafId = React25.useRef(0);
-  const startProgress = React25.useCallback(
+  const [showAutoplayProgress, setShowAutoplayProgress] = React28.useState(false);
+  const animationName = React28.useRef("");
+  const timeoutId = React28.useRef(0);
+  const rafId = React28.useRef(0);
+  const startProgress = React28.useCallback(
     (timeUntilNext) => {
       const node = progressNode.current;
       if (!node || timeUntilNext === null) return;
@@ -23250,12 +23107,12 @@ function useAutoplayProgress(emblaApi, progressNode) {
     },
     [progressNode]
   );
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const autoplay = emblaApi?.plugins()?.autoplay;
     if (!autoplay) return;
     emblaApi.on("autoplay:timerset", () => startProgress(autoplay.timeUntilNext())).on("autoplay:timerstopped", () => setShowAutoplayProgress(false));
   }, [emblaApi, startProgress]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     return () => {
       cancelAnimationFrame(rafId.current);
       clearTimeout(timeoutId.current);
@@ -23282,7 +23139,7 @@ function CarouselAutoplayProgress({
   pattern,
   patternOpacity
 }) {
-  const progressNode = React25.useRef(null);
+  const progressNode = React28.useRef(null);
   const [emblaRef, emblaApi] = useEmblaCarousel(options, [
     Autoplay({ playOnInit: true, delay: autoplayDelay })
   ]);
@@ -23405,20 +23262,20 @@ function CarouselFeatureBadge({
   containerMaxWidth = "2xl"
 }) {
   const [emblaRef, emblaApi] = useEmblaCarousel();
-  const [canScrollPrev, setCanScrollPrev] = React25.useState(false);
-  const [canScrollNext, setCanScrollNext] = React25.useState(false);
-  const scrollPrev = React25.useCallback(() => {
+  const [canScrollPrev, setCanScrollPrev] = React28.useState(false);
+  const [canScrollNext, setCanScrollNext] = React28.useState(false);
+  const scrollPrev = React28.useCallback(() => {
     emblaApi?.scrollPrev();
   }, [emblaApi]);
-  const scrollNext = React25.useCallback(() => {
+  const scrollNext = React28.useCallback(() => {
     emblaApi?.scrollNext();
   }, [emblaApi]);
-  const onSelect = React25.useCallback(() => {
+  const onSelect = React28.useCallback(() => {
     if (!emblaApi) return;
     setCanScrollPrev(emblaApi.canScrollPrev());
     setCanScrollNext(emblaApi.canScrollNext());
   }, [emblaApi]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!emblaApi) return;
     onSelect();
     emblaApi.on("reInit", onSelect);
@@ -23538,10 +23395,10 @@ function CarouselFullscreenScrollFx({
   pattern = "diagonalCrossBasic",
   patternOpacity = 0.033
 }) {
-  const containerRef = React25.useRef(null);
-  const scrollContainerRef = React25.useRef(null);
-  const [activeIndex, setActiveIndex] = React25.useState(0);
-  React25.useEffect(() => {
+  const containerRef = React28.useRef(null);
+  const scrollContainerRef = React28.useRef(null);
+  const [activeIndex, setActiveIndex] = React28.useState(0);
+  React28.useEffect(() => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer || !slides?.length) return;
     const handleScroll = () => {
@@ -23553,7 +23410,7 @@ function CarouselFullscreenScrollFx({
     scrollContainer.addEventListener("scroll", handleScroll);
     return () => scrollContainer.removeEventListener("scroll", handleScroll);
   }, [slides]);
-  const scrollToSlide = React25.useCallback((index) => {
+  const scrollToSlide = React28.useCallback((index) => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) return;
     const slideHeight = scrollContainer.clientHeight;
@@ -23636,7 +23493,7 @@ function CarouselFullscreenScrollFx({
             className: "flex h-screen flex-col snap-y snap-mandatory overflow-x-hidden overflow-y-auto scroll-smooth",
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
             children: slidesSlot ? slidesSlot : slides?.map((slide, index) => {
-              const renderActions = React25.useMemo(() => {
+              const renderActions = React28.useMemo(() => {
                 if (!slide.actions || slide.actions.length === 0) return null;
                 return slide.actions.map((action, actionIndex) => {
                   const {
@@ -23769,25 +23626,25 @@ function CarouselGalleryThumbnails({
   patternOpacity,
   slideMediaBrightness = "100"
 }) {
-  const [currentIndex, setCurrentIndex] = React25.useState(0);
-  const prevSlide = React25.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React28.useState(0);
+  const prevSlide = React28.useCallback(() => {
     setCurrentIndex(
       (prev) => prev === 0 ? (images?.length ?? 0) - 1 : prev - 1
     );
   }, [images?.length]);
-  const nextSlide = React25.useCallback(() => {
+  const nextSlide = React28.useCallback(() => {
     setCurrentIndex(
       (prev) => prev === (images?.length ?? 0) - 1 ? 0 : prev + 1
     );
   }, [images?.length]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!autoPlay) return;
     const interval = setInterval(() => {
       nextSlide();
     }, autoPlayInterval);
     return () => clearInterval(interval);
   }, [currentIndex, autoPlay, autoPlayInterval, nextSlide]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "ArrowRight") {
         nextSlide();
@@ -23932,9 +23789,9 @@ function CarouselHorizontalCards({
   pattern,
   patternOpacity
 }) {
-  const carouselRef = React25.useRef(null);
-  const [isAtStart, setIsAtStart] = React25.useState(true);
-  const [isAtEnd, setIsAtEnd] = React25.useState(false);
+  const carouselRef = React28.useRef(null);
+  const [isAtStart, setIsAtStart] = React28.useState(true);
+  const [isAtEnd, setIsAtEnd] = React28.useState(false);
   const scrollLeft = () => {
     if (carouselRef.current) {
       carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
@@ -23945,7 +23802,7 @@ function CarouselHorizontalCards({
       carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
     }
   };
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const checkScrollPosition = () => {
       if (carouselRef.current) {
         const { scrollLeft: scrollLeft2, scrollWidth, clientWidth } = carouselRef.current;
@@ -24145,13 +24002,13 @@ function CarouselImageHero({
   pattern,
   patternOpacity
 }) {
-  const hasImages = React25.useMemo(() => {
+  const hasImages = React28.useMemo(() => {
     return images && images?.length > 0;
   }, [images]);
-  const [currentImageIndex, setCurrentImageIndex] = React25.useState(0);
+  const [currentImageIndex, setCurrentImageIndex] = React28.useState(0);
   const progress = useMotionValue(100);
   const clipPath = useMotionTemplate`inset(0 ${progress}% 0 0 round 10px)`;
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!hasImages || (images?.length ?? 0) < 2) return;
     const tickInterval = autoPlayInterval / 100;
     const interval = setInterval(() => {
@@ -24173,19 +24030,19 @@ function CarouselImageHero({
     autoPlayInterval,
     hasImages
   ]);
-  const handlePrev = React25.useCallback(() => {
+  const handlePrev = React28.useCallback(() => {
     progress.set(100);
     setCurrentImageIndex(
       (prevIndex) => prevIndex > 0 ? prevIndex - 1 : (images?.length ?? 1) - 1
     );
   }, [images?.length, progress]);
-  const handleNext = React25.useCallback(() => {
+  const handleNext = React28.useCallback(() => {
     progress.set(100);
     setCurrentImageIndex(
       (prevIndex) => prevIndex < (images?.length ?? 0) - 1 ? prevIndex + 1 : 0
     );
   }, [images?.length, progress]);
-  const handleDotClick = React25.useCallback(
+  const handleDotClick = React28.useCallback(
     (index) => {
       progress.set(100);
       setCurrentImageIndex(index);
@@ -24362,8 +24219,8 @@ function CarouselMultiStepShowcase({
   pattern,
   patternOpacity
 }) {
-  const [activeStep, setActiveStep] = React25.useState(0);
-  const [direction, setDirection] = React25.useState(0);
+  const [activeStep, setActiveStep] = React28.useState(0);
+  const [direction, setDirection] = React28.useState(0);
   const goToStep = (index) => {
     setDirection(index > activeStep ? 1 : -1);
     setActiveStep(index);
@@ -24655,9 +24512,9 @@ function CarouselPortfolioHero({
   patternOpacity,
   slideMediaBrightness = "50"
 }) {
-  const [currentIndex, setCurrentIndex] = React25.useState(0);
-  const intervalRef = React25.useRef(null);
-  const resetInterval = React25.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React28.useState(0);
+  const intervalRef = React28.useRef(null);
+  const resetInterval = React28.useCallback(() => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
     }
@@ -24665,17 +24522,17 @@ function CarouselPortfolioHero({
       setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
     }, autoPlayInterval);
   }, [autoPlayInterval, slides?.length]);
-  const goToNext = React25.useCallback(() => {
+  const goToNext = React28.useCallback(() => {
     setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
     resetInterval();
   }, [slides?.length, resetInterval]);
-  const goToPrev = React25.useCallback(() => {
+  const goToPrev = React28.useCallback(() => {
     setCurrentIndex(
       (prevIndex) => (prevIndex - 1 + (slides?.length ?? 1)) % (slides?.length ?? 1)
     );
     resetInterval();
   }, [slides?.length, resetInterval]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     resetInterval();
     return () => {
       if (intervalRef.current) {
@@ -24867,9 +24724,9 @@ function CarouselProductFeatureShowcase({
   pattern,
   patternOpacity
 }) {
-  const [activeIndex, setActiveIndex] = React25.useState(0);
-  const [activeColorIndex, setActiveColorIndex] = React25.useState(0);
-  const [direction, setDirection] = React25.useState(0);
+  const [activeIndex, setActiveIndex] = React28.useState(0);
+  const [activeColorIndex, setActiveColorIndex] = React28.useState(0);
+  const [direction, setDirection] = React28.useState(0);
   const activeFeature = features?.[activeIndex];
   const goToNext = () => {
     setDirection(1);
@@ -25089,9 +24946,9 @@ function CarouselProductFeatureShowcase({
     }
   );
 }
-var ProgressSliderContext = React25.createContext(void 0);
+var ProgressSliderContext = React28.createContext(void 0);
 function useProgressSliderContext() {
-  const context = React25.useContext(ProgressSliderContext);
+  const context = React28.useContext(ProgressSliderContext);
   if (!context) {
     throw new Error(
       "useProgressSliderContext must be used within a ProgressSlider"
@@ -25177,19 +25034,19 @@ function CarouselProgressSlider({
   pattern,
   patternOpacity
 }) {
-  const [active, setActive] = React25.useState(slides?.[0]?.id ?? "");
-  const [progress, setProgress] = React25.useState(0);
-  const [isFastForward, setIsFastForward] = React25.useState(false);
-  const [isPaused, setIsPaused] = React25.useState(false);
-  const frame = React25.useRef(0);
-  const firstFrameTime = React25.useRef(performance.now());
-  const targetValue = React25.useRef(null);
-  const pausedProgress = React25.useRef(0);
-  const sliderValues = React25.useMemo(
+  const [active, setActive] = React28.useState(slides?.[0]?.id ?? "");
+  const [progress, setProgress] = React28.useState(0);
+  const [isFastForward, setIsFastForward] = React28.useState(false);
+  const [isPaused, setIsPaused] = React28.useState(false);
+  const frame = React28.useRef(0);
+  const firstFrameTime = React28.useRef(performance.now());
+  const targetValue = React28.useRef(null);
+  const pausedProgress = React28.useRef(0);
+  const sliderValues = React28.useMemo(
     () => slides?.map((slide) => slide.id),
     [slides]
   );
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if ((sliderValues?.length ?? 0) > 0 && !isPaused) {
       firstFrameTime.current = performance.now();
       if (pausedProgress.current > 0) {
@@ -25354,11 +25211,11 @@ function CarouselScrollingFeatureShowcase({
   pattern,
   patternOpacity
 }) {
-  const [activeFeature, setActiveFeature] = React25.useState(
+  const [activeFeature, setActiveFeature] = React28.useState(
     features?.[0]?.id ?? ""
   );
-  const featureRefs = React25.useRef(/* @__PURE__ */ new Map());
-  React25.useEffect(() => {
+  const featureRefs = React28.useRef(/* @__PURE__ */ new Map());
+  React28.useEffect(() => {
     if (!features || features.length === 0) return;
     const observerOptions = {
       root: null,
@@ -26283,9 +26140,9 @@ function FeatureChecklistImage({
     }
   );
 }
-var CarouselContext = React25.createContext(null);
+var CarouselContext = React28.createContext(null);
 function useCarousel() {
-  const context = React25.useContext(CarouselContext);
+  const context = React28.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -26307,20 +26164,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React25.useState(false);
-  const [canScrollNext, setCanScrollNext] = React25.useState(false);
-  const onSelect = React25.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React28.useState(false);
+  const [canScrollNext, setCanScrollNext] = React28.useState(false);
+  const onSelect = React28.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React25.useCallback(() => {
+  const scrollPrev = React28.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React25.useCallback(() => {
+  const scrollNext = React28.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React25.useCallback(
+  const handleKeyDown = React28.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -26332,11 +26189,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -27260,7 +27117,7 @@ function FeatureThreeColumnValues({
   patternOpacity,
   patternClassName
 }) {
-  const renderValueIcon = React25.useCallback(
+  const renderValueIcon = React28.useCallback(
     (value) => {
       if (value.icon) return value.icon;
       if (value.iconName)
@@ -27762,7 +27619,7 @@ function FeatureTabbedContentImage({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatures = React25.useCallback(
+  const renderFeatures = React28.useCallback(
     (slide) => {
       if (slide.featuresSlot) return slide.featuresSlot;
       if (!slide.features || slide.features.length === 0) return null;
@@ -27786,7 +27643,7 @@ function FeatureTabbedContentImage({
     },
     []
   );
-  const renderActions = React25.useCallback(
+  const renderActions = React28.useCallback(
     (slide) => {
       if (slide.actionsSlot) return slide.actionsSlot;
       if (!slide.actions || slide.actions.length === 0) return null;
@@ -27829,7 +27686,7 @@ function FeatureTabbedContentImage({
     },
     []
   );
-  const renderImage = React25.useCallback(
+  const renderImage = React28.useCallback(
     (slide) => {
       if (slide.imageSlot) return slide.imageSlot;
       if (!slide.image) return null;
@@ -28065,7 +27922,7 @@ function FeatureUtilityCardsGrid({
       }
     );
   }, [learnMoreSlot, learnMoreAction, background]);
-  const renderUtilityImage = React25.useCallback(
+  const renderUtilityImage = React28.useCallback(
     (utility) => {
       if (utility.imageSlot) return utility.imageSlot;
       if (utility.image) {
@@ -28243,7 +28100,7 @@ function FeatureBentoUtilities({
   patternOpacity,
   patternClassName
 }) {
-  const renderCard = React25.useCallback(
+  const renderCard = React28.useCallback(
     (card, index) => {
       const hasImage = card.imageSrc || card.imageSlot;
       const cardClasses = cn(
@@ -28299,7 +28156,7 @@ function FeatureBentoUtilities({
     },
     [optixFlowConfig]
   );
-  const renderColumn = React25.useCallback(
+  const renderColumn = React28.useCallback(
     (cards, slot) => {
       if (slot) return slot;
       if (!cards || cards.length === 0) return null;
@@ -29545,7 +29402,7 @@ function FeatureBentoImageGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = React25.useCallback(
+  const renderItemIcon = React28.useCallback(
     (item) => {
       if (item.icon) return item.icon;
       if (item.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 24 });
@@ -29553,7 +29410,7 @@ function FeatureBentoImageGrid({
     },
     []
   );
-  const renderItemImage = React25.useCallback(
+  const renderItemImage = React28.useCallback(
     (item, imageClassName) => {
       if (item.imageSlot) return item.imageSlot;
       if (item.imageSrc) {
@@ -29572,7 +29429,7 @@ function FeatureBentoImageGrid({
     },
     [optixFlowConfig]
   );
-  const renderLargeCard = React25.useCallback(
+  const renderLargeCard = React28.useCallback(
     (item) => {
       const iconContent = renderItemIcon(item);
       const hasIconBadgeContent = iconContent || item.iconBadge;
@@ -29660,7 +29517,7 @@ function FeatureBentoImageGrid({
     },
     [largeCardClassName, renderItemImage, renderItemIcon]
   );
-  const renderSmallCard = React25.useCallback(
+  const renderSmallCard = React28.useCallback(
     (item, index) => {
       const iconContent = renderItemIcon(item);
       const hasIconBadgeContent = iconContent || item.iconBadge;
@@ -30275,7 +30132,7 @@ function FeatureAccordionImage({
   patternOpacity,
   patternClassName
 }) {
-  const [activeItem, setActiveItem] = React25.useState(defaultValue || "item-0");
+  const [activeItem, setActiveItem] = React28.useState(defaultValue || "item-0");
   const activeIndex = parseInt(activeItem.replace("item-", ""), 10) || 0;
   const currentImage = items?.[activeIndex] || items?.[0];
   const accordionItemsContent = useMemo(() => {
@@ -30424,7 +30281,7 @@ function FeatureCapabilitiesGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = React25.useCallback(
+  const renderItemIcon = React28.useCallback(
     (item) => {
       if (item.icon) return item.icon;
       if (item.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 });
@@ -30576,7 +30433,7 @@ function FeatureCapabilitiesGrid({
     }
   );
 }
-var TeamMemberBackgroundImageCard = React25.forwardRef(
+var TeamMemberBackgroundImageCard = React28.forwardRef(
   ({ className, imageUrl, imageAlt, children, optixFlowConfig, background, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -30624,7 +30481,7 @@ function TeamMediaShowcase({
   actionClassName,
   optixFlowConfig
 }) {
-  const renderItems = React25.useMemo(() => {
+  const renderItems = React28.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     return items.map((member, idx) => {
       const imageAlt = member.imageAlt || (member.name && typeof member.name === "string" && member.name.trim() !== "" ? member.name : `member-${idx}`);
@@ -30722,7 +30579,7 @@ function TeamSimpleGrid({
   memberNameClassName,
   memberRoleClassName
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsxs(
@@ -30884,7 +30741,7 @@ function FooterBrandLinksContact({
     linkListClassName,
     linkItemClassName
   ]);
-  const contactItemsContent = React25.useMemo(() => {
+  const contactItemsContent = React28.useMemo(() => {
     if (!contactItems || contactItems.length === 0) return null;
     return contactItems.map((item, idx) => /* @__PURE__ */ jsxs(
       "div",
@@ -31242,7 +31099,7 @@ function TeamSocialGrid({
   memberRoleClassName,
   socialLinksClassName
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsxs(
@@ -31264,61 +31121,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 +31194,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 }))
@@ -31394,7 +31235,7 @@ function TeamGradientCards({
   memberRoleClassName,
   socialLinksClassName
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsx(
@@ -31550,7 +31391,7 @@ function TeamBioBadges({
   memberBioClassName,
   socialLinksClassName
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsxs(
@@ -31727,7 +31568,7 @@ function TeamExpertiseCards({
   ctaDescriptionClassName,
   ctaButtonClassName
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsx(
@@ -31804,7 +31645,7 @@ function TeamExpertiseCards({
       member.id
     ));
   }, [membersSlot, members, background, memberCardClassName, avatarClassName, memberNameClassName, memberRoleClassName, departmentBadgeClassName, memberDescriptionClassName, expertiseClassName]);
-  const renderCta = React25.useMemo(() => {
+  const renderCta = React28.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -31920,7 +31761,7 @@ function TeamCompactGrid({
   ctaDescriptionClassName,
   ctaButtonClassName
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsxs(
@@ -31975,7 +31816,7 @@ function TeamCompactGrid({
       member.id
     ));
   }, [membersSlot, members, background, memberCardClassName, avatarClassName, memberNameClassName, memberRoleClassName, departmentBadgeClassName]);
-  const renderCta = React25.useMemo(() => {
+  const renderCta = React28.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -32079,7 +31920,7 @@ function TeamInvestorShowcase({
   investorCompanyClassName,
   optixFlowConfig
 }) {
-  const renderInvestors = React25.useMemo(() => {
+  const renderInvestors = React28.useMemo(() => {
     if (investorsSlot) return investorsSlot;
     if (!investors || investors.length === 0) return null;
     return investors.map((investor) => /* @__PURE__ */ jsxs("div", { className: investorCardClassName, children: [
@@ -32153,7 +31994,7 @@ function TeamCarouselExperience({
   memberRoleClassName,
   optixFlowConfig
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member, idx) => /* @__PURE__ */ jsx(CarouselItem, { className: "max-w-72", children: /* @__PURE__ */ jsxs(
@@ -32303,20 +32144,20 @@ function TeamFilterableSearch({
   emptyStateClassName,
   emptyStateMessage
 }) {
-  const [searchQuery, setSearchQuery] = React25.useState("");
-  const [selectedDepartment, setSelectedDepartment] = React25.useState("All");
-  const departments = React25.useMemo(() => {
+  const [searchQuery, setSearchQuery] = React28.useState("");
+  const [selectedDepartment, setSelectedDepartment] = React28.useState("All");
+  const departments = React28.useMemo(() => {
     const depts = new Set(members.map((m) => m.department));
     return ["All", ...Array.from(depts)];
   }, [members]);
-  const filteredMembers = React25.useMemo(() => {
+  const filteredMembers = React28.useMemo(() => {
     return members.filter((member) => {
       const matchesSearch = searchQuery === "" || member.name.toLowerCase().includes(searchQuery.toLowerCase()) || member.role.toLowerCase().includes(searchQuery.toLowerCase()) || member.description.toLowerCase().includes(searchQuery.toLowerCase());
       const matchesDepartment = selectedDepartment === "All" || member.department === selectedDepartment;
       return matchesSearch && matchesDepartment;
     });
   }, [members, searchQuery, selectedDepartment]);
-  const renderFilters = React25.useMemo(() => {
+  const renderFilters = React28.useMemo(() => {
     if (filtersSlot) return filtersSlot;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -32371,7 +32212,7 @@ function TeamFilterableSearch({
     selectedDepartment,
     filterButtonClassName
   ]);
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     return filteredMembers.map((member) => /* @__PURE__ */ jsx(
       "div",
@@ -32558,7 +32399,7 @@ function TeamCompactCta({
   memberRoleClassName,
   ctaClassName
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsxs(
@@ -32586,7 +32427,7 @@ function TeamCompactCta({
       member.id
     ));
   }, [membersSlot, members, memberCardClassName, avatarClassName, memberNameClassName, memberRoleClassName, background]);
-  const renderCta = React25.useMemo(() => {
+  const renderCta = React28.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     return /* @__PURE__ */ jsx(
       Pressable,
@@ -32677,7 +32518,7 @@ function TeamHoverHighlight({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsxs(
@@ -32826,7 +32667,7 @@ function TeamSocialCards({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsx(
@@ -32996,7 +32837,7 @@ function TeamGridAnimated({
     "hsl(var(--muted))",
     "hsl(var(--warning)/0.2)"
   ];
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member, index) => /* @__PURE__ */ jsxs(
@@ -33096,7 +32937,7 @@ function TeamGridAnimated({
     memberDesignationClassName,
     socialLinksClassName
   ]);
-  const renderSocialLinksMain = React25.useMemo(() => {
+  const renderSocialLinksMain = React28.useMemo(() => {
     if (socialLinksMainSlot) return socialLinksMainSlot;
     if (!socialLinksMain || socialLinksMain.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-4 py-4 md:justify-center", children: [
@@ -33213,7 +33054,7 @@ function TeamDepartmentSections({
   memberRoleClassName,
   optixFlowConfig
 }) {
-  const renderDepartments = React25.useMemo(() => {
+  const renderDepartments = React28.useMemo(() => {
     if (departmentsSlot) return departmentsSlot;
     if (!departments || departments.length === 0) return null;
     return departments.map((department, deptIndex) => /* @__PURE__ */ jsxs(
@@ -33317,7 +33158,7 @@ function TeamAlternatingBios({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member, index) => /* @__PURE__ */ jsxs(
@@ -33499,7 +33340,7 @@ function TeamAvatarSocial({
   memberRoleClassName,
   socialLinksClassName
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsxs(
@@ -33642,7 +33483,7 @@ function TeamHoverOverlay({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsx(
@@ -33818,14 +33659,14 @@ function TeamRoleFilter({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const [selectedRole, setSelectedRole] = React25.useState("All");
-  const filteredMembers = React25.useMemo(() => {
+  const [selectedRole, setSelectedRole] = React28.useState("All");
+  const filteredMembers = React28.useMemo(() => {
     if (!members) return [];
     return members.filter(
       (member) => selectedRole === "All" ? true : member.role === selectedRole
     );
   }, [members, selectedRole]);
-  const renderRoles = React25.useMemo(() => {
+  const renderRoles = React28.useMemo(() => {
     if (rolesSlot) return rolesSlot;
     if (!roles) return null;
     return /* @__PURE__ */ jsx(
@@ -33849,7 +33690,7 @@ function TeamRoleFilter({
       }
     );
   }, [rolesSlot, filtersClassName, roles, selectedRole, filterButtonClassName]);
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     return filteredMembers.map((member) => /* @__PURE__ */ jsx(
       Card,
@@ -34009,7 +33850,7 @@ function TeamContactCards({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const getStatusColor = React25.useCallback((status) => {
+  const getStatusColor = React28.useCallback((status) => {
     switch (status) {
       case "active":
         return "bg-success";
@@ -34019,7 +33860,7 @@ function TeamContactCards({
         return getTextColor(background, "muted");
     }
   }, [background]);
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsx(Card, { className: cn("p-0", memberCardClassName), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6!", children: [
@@ -34226,7 +34067,7 @@ function TeamLargeImages({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsxs(
@@ -34401,7 +34242,7 @@ function TeamSkillBadges({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsx(
@@ -34591,7 +34432,7 @@ function TeamTestimonialStats({
   socialLinksClassName,
   optixFlowConfig
 }) {
-  const renderMembers = React25.useMemo(() => {
+  const renderMembers = React28.useMemo(() => {
     if (membersSlot) return membersSlot;
     if (!members || members.length === 0) return null;
     return members.map((member) => /* @__PURE__ */ jsx(
@@ -38735,7 +38576,7 @@ function BlogGridAuthorCardsComponent({
   pattern,
   patternOpacity
 }) {
-  const viewAllActionContent = React25.useMemo(() => {
+  const viewAllActionContent = React28.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
     const {
@@ -38760,7 +38601,7 @@ function BlogGridAuthorCardsComponent({
       }
     );
   }, [viewAllSlot, viewAllAction]);
-  const postsContent = React25.useMemo(() => {
+  const postsContent = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!posts || posts.length === 0) return null;
     return posts.map((post) => {
@@ -38872,7 +38713,7 @@ function BlogCardsTaglineCta({
   pattern,
   patternOpacity
 }) {
-  const ctaActionContent = React25.useMemo(() => {
+  const ctaActionContent = React28.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
     const {
@@ -38900,7 +38741,7 @@ function BlogCardsTaglineCta({
       }
     );
   }, [ctaSlot, ctaAction, ctaClassName]);
-  const postsContent = React25.useMemo(() => {
+  const postsContent = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!posts || posts.length === 0) return null;
     return posts.map((post) => {
@@ -39046,7 +38887,7 @@ function BlogCardsReadTime({
   pattern,
   patternOpacity
 }) {
-  const renderedViewAllAction = React25.useMemo(() => {
+  const renderedViewAllAction = React28.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
     const {
@@ -39063,7 +38904,7 @@ function BlogCardsReadTime({
       iconAfter
     ] }) });
   }, [viewAllSlot, viewAllAction]);
-  const renderedPosts = React25.useMemo(() => {
+  const renderedPosts = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!posts || posts.length === 0) return null;
     return posts.map((post) => {
@@ -39200,7 +39041,7 @@ function BlogCategoryOverlay({
   pattern,
   patternOpacity
 }) {
-  const viewAllActionContent = React25.useMemo(() => {
+  const viewAllActionContent = React28.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
     const {
@@ -39228,7 +39069,7 @@ function BlogCategoryOverlay({
       }
     );
   }, [viewAllSlot, viewAllAction, viewAllClassName]);
-  const postsContent = React25.useMemo(() => {
+  const postsContent = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!posts || posts.length === 0) return null;
     return posts.map((post) => {
@@ -39376,7 +39217,7 @@ function BlogFeaturedPopular({
 }) {
   const featuredPost = posts?.[0];
   const popularPosts = posts?.slice(1);
-  const renderedFeaturedPost = React25.useMemo(() => {
+  const renderedFeaturedPost = React28.useMemo(() => {
     if (featuredSlot) return featuredSlot;
     if (!featuredPost) return null;
     const postHref = featuredPost.href || featuredPost.url || featuredPost.link;
@@ -39428,7 +39269,7 @@ function BlogFeaturedPopular({
     featuredContentClassName,
     optixFlowConfig
   ]);
-  const renderedPopularPosts = React25.useMemo(() => {
+  const renderedPopularPosts = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!popularPosts || popularPosts.length === 0) return null;
     return popularPosts.map((post) => {
@@ -39545,7 +39386,7 @@ function BlogRelatedArticles({
   pattern,
   patternOpacity
 }) {
-  const renderedSeeAllAction = React25.useMemo(() => {
+  const renderedSeeAllAction = React28.useMemo(() => {
     if (seeAllSlot) return seeAllSlot;
     if (!seeAllAction) return null;
     const {
@@ -39574,7 +39415,7 @@ function BlogRelatedArticles({
       }
     );
   }, [seeAllSlot, seeAllAction, seeAllClassName]);
-  const renderedArticles = React25.useMemo(() => {
+  const renderedArticles = React28.useMemo(() => {
     if (articlesSlot) return articlesSlot;
     if (!articles || articles.length === 0) return null;
     return articles.map((item) => {
@@ -39882,7 +39723,7 @@ function BlogHorizontalCards({
   pattern,
   patternOpacity
 }) {
-  const ctaContent = React25.useMemo(() => {
+  const ctaContent = React28.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
     const {
@@ -39907,7 +39748,7 @@ function BlogHorizontalCards({
       }
     );
   }, [ctaSlot, ctaAction]);
-  const postsContent = React25.useMemo(() => {
+  const postsContent = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!posts || posts.length === 0) return null;
     return posts.map((post) => {
@@ -40129,7 +39970,7 @@ function Label({
   );
 }
 var POSTS_PER_PAGE = 6;
-var BlogCard = React25.memo(function BlogCard2({
+var BlogCard = React28.memo(function BlogCard2({
   post,
   optixFlowConfig,
   className
@@ -40168,7 +40009,7 @@ var BlogCard = React25.memo(function BlogCard2({
     ] })
   ] }) });
 });
-var FilterForm = React25.memo(function FilterForm2({
+var FilterForm = React28.memo(function FilterForm2({
   categories,
   selectedCategories,
   onCategoryChange,
@@ -40201,7 +40042,7 @@ var FilterForm = React25.memo(function FilterForm2({
     }
   );
 });
-var BreadcrumbBlog = React25.memo(function BreadcrumbBlog2({
+var BreadcrumbBlog = React28.memo(function BreadcrumbBlog2({
   breadcrumb
 }) {
   return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumb.map((item, i) => {
@@ -40283,12 +40124,12 @@ function BlogFilteredResultsComponent({
   }, [posts, selectedCategories]);
   const postsToDisplay = filteredPosts.length > 0 ? filteredPosts : posts || [];
   const hasMore = visibleCount < postsToDisplay.length;
-  const breadcrumbContent = React25.useMemo(() => {
+  const breadcrumbContent = React28.useMemo(() => {
     if (breadcrumbSlot) return breadcrumbSlot;
     if (!breadcrumb || breadcrumb.length === 0) return null;
     return /* @__PURE__ */ jsx(BreadcrumbBlog, { breadcrumb });
   }, [breadcrumbSlot, breadcrumb]);
-  const primaryPostContent = React25.useMemo(() => {
+  const primaryPostContent = React28.useMemo(() => {
     if (primaryPostSlot) return primaryPostSlot;
     if (!primaryPost) return null;
     return /* @__PURE__ */ jsx(
@@ -40300,7 +40141,7 @@ function BlogFilteredResultsComponent({
       }
     );
   }, [primaryPostSlot, primaryPost, optixFlowConfig, postCardClassName]);
-  const categoriesContent = React25.useMemo(() => {
+  const categoriesContent = React28.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -40319,7 +40160,7 @@ function BlogFilteredResultsComponent({
     handleCategoryChange,
     categoriesClassName
   ]);
-  const postsContent = React25.useMemo(() => {
+  const postsContent = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     return postsToDisplay.slice(0, visibleCount).map((post) => {
       const postKey = post.id || String(post.title) || Math.random().toString();
@@ -40340,7 +40181,7 @@ function BlogFilteredResultsComponent({
     optixFlowConfig,
     postCardClassName
   ]);
-  const loadMoreContent = React25.useMemo(() => {
+  const loadMoreContent = React28.useMemo(() => {
     if (loadMoreSlot) return loadMoreSlot;
     if (!loadMoreAction || !hasMore) return null;
     const {
@@ -40466,7 +40307,7 @@ function BlogMasonryFeaturedComponent({
 }) {
   const featuredPost = posts?.[0];
   const otherPosts = posts?.slice(1);
-  const featuredPostContent = React25.useMemo(() => {
+  const featuredPostContent = React28.useMemo(() => {
     if (featuredSlot) return featuredSlot;
     if (!featuredPost) return null;
     const postHref = featuredPost.href || featuredPost.url || featuredPost.link || "#";
@@ -40516,7 +40357,7 @@ function BlogMasonryFeaturedComponent({
     featuredImageClassName,
     optixFlowConfig
   ]);
-  const otherPostsContent = React25.useMemo(() => {
+  const otherPostsContent = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!otherPosts || otherPosts.length === 0) return null;
     return otherPosts.map((post) => {
@@ -40605,7 +40446,7 @@ function BlogHorizontalTimelineComponent({
   pattern,
   patternOpacity
 }) {
-  const renderPosts = React25.useMemo(() => {
+  const renderPosts = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!posts || posts.length === 0) return null;
     return posts.map((post, index) => {
@@ -40730,7 +40571,7 @@ function BlogGridNinePosts({
   pattern,
   patternOpacity
 }) {
-  const renderedCtaAction = React25.useMemo(() => {
+  const renderedCtaAction = React28.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
     const {
@@ -40755,7 +40596,7 @@ function BlogGridNinePosts({
       }
     );
   }, [ctaSlot, ctaAction]);
-  const renderedPosts = React25.useMemo(() => {
+  const renderedPosts = React28.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!posts || posts.length === 0) return null;
     return posts.map((post) => {
@@ -40853,9 +40694,9 @@ var AppleCarousel = ({
   className,
   containerClassName
 }) => {
-  const carouselRef = React25__default.useRef(null);
-  const [canScrollLeft, setCanScrollLeft] = React25__default.useState(false);
-  const [canScrollRight, setCanScrollRight] = React25__default.useState(true);
+  const carouselRef = React28__default.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = React28__default.useState(false);
+  const [canScrollRight, setCanScrollRight] = React28__default.useState(true);
   const [currentIndex, setCurrentIndex] = useState(0);
   useEffect(() => {
     if (carouselRef.current) {
@@ -41092,7 +40933,7 @@ function BlogCarouselAppleComponent({
   containerClassName,
   cardClassName
 }) {
-  const carouselCards = React25.useMemo(() => {
+  const carouselCards = React28.useMemo(() => {
     if (!posts || posts.length === 0) return [];
     return posts.map(
       (post, idx) => ({
@@ -41104,7 +40945,7 @@ function BlogCarouselAppleComponent({
       })
     );
   }, [posts]);
-  const cardElements = React25.useMemo(() => {
+  const cardElements = React28.useMemo(() => {
     if (!posts || posts.length === 0) return [];
     return carouselCards.map((card, index) => {
       const post = posts[index];
@@ -41189,7 +41030,7 @@ function ArticleHeroProseComponent({
     description,
     authorImage
   } = post ?? {};
-  const authorContent = React25.useMemo(() => {
+  const authorContent = React28.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs(
@@ -41223,7 +41064,7 @@ function ArticleHeroProseComponent({
     dateFormat,
     authorClassName
   ]);
-  const heroMediaContent = React25.useMemo(() => {
+  const heroMediaContent = React28.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx(
@@ -41324,7 +41165,7 @@ function ArticleSidebarStickyComponent({
   pattern,
   patternOpacity
 }) {
-  const backLinkContent = React25.useMemo(() => {
+  const backLinkContent = React28.useMemo(() => {
     if (backLinkSlot) return backLinkSlot;
     if (!backHref && !backText) return null;
     return /* @__PURE__ */ jsxs(
@@ -41342,7 +41183,7 @@ function ArticleSidebarStickyComponent({
       }
     );
   }, [backLinkSlot, backHref, backText, backIcon, backLinkClassName]);
-  const renderAuthor = React25.useCallback(
+  const renderAuthor = React28.useCallback(
     (isMobile = false) => {
       if (authorSlot) return authorSlot;
       if (!authorName) return null;
@@ -41374,7 +41215,7 @@ function ArticleSidebarStickyComponent({
       authorClassName
     ]
   );
-  const heroMediaContent = React25.useMemo(() => {
+  const heroMediaContent = React28.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -41481,10 +41322,10 @@ function ArticleTocSidebarComponent({
   patternOpacity
 }) {
   const ctaActions = ctaActionsProp ?? (ctaButtonText ? [{ label: ctaButtonText, href: ctaButtonHref || "#", variant: "default", className: "w-full" }] : []);
-  const [activeSection, setActiveSection] = React25.useState(
+  const [activeSection, setActiveSection] = React28.useState(
     sections?.[0]?.id || ""
   );
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!enableTocTracking || !sections || sections.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -41502,12 +41343,12 @@ function ArticleTocSidebarComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const categoryContent = React25.useMemo(() => {
+  const categoryContent = React28.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: category });
   }, [categorySlot, category]);
-  const authorContent = React25.useMemo(() => {
+  const authorContent = React28.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-6 flex items-center gap-4", authorClassName), children: [
@@ -41527,7 +41368,7 @@ function ArticleTocSidebarComponent({
       ] })
     ] });
   }, [authorSlot, authorName, authorImage, authorHref, publishDate, readTime, authorClassName]);
-  const heroMediaContent = React25.useMemo(() => {
+  const heroMediaContent = React28.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -41540,7 +41381,7 @@ function ArticleTocSidebarComponent({
       }
     );
   }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
-  const tocContent = React25.useMemo(() => {
+  const tocContent = React28.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", tocClassName), children: [
@@ -41548,7 +41389,7 @@ function ArticleTocSidebarComponent({
       /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: sections.map((section) => {
         const isActive = activeSection === section.id;
         if (renderSectionLink) {
-          return /* @__PURE__ */ jsx(React25.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsx(React28.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -41565,7 +41406,7 @@ function ArticleTocSidebarComponent({
       }) })
     ] });
   }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
-  const ctaContent = React25.useMemo(() => {
+  const ctaContent = React28.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", getNestedCardBg(background, "subtle"), getNestedCardTextColor(background), ctaClassName), children: [
@@ -41654,11 +41495,11 @@ function ArticleBreadcrumbSocialComponent({
   patternOpacity
 }) {
   const author = authorProp ?? (authorName ? { name: authorName, image: authorImage, role: authorRole } : void 0);
-  const [activeSection, setActiveSection] = React25.useState(
+  const [activeSection, setActiveSection] = React28.useState(
     sections?.[0]?.id || ""
   );
-  const [showBackToTop, setShowBackToTop] = React25.useState(false);
-  React25.useEffect(() => {
+  const [showBackToTop, setShowBackToTop] = React28.useState(false);
+  React28.useEffect(() => {
     if (!enableTocTracking || !sections || sections.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -41676,7 +41517,7 @@ function ArticleBreadcrumbSocialComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!enableBackToTop) return;
     const handleScroll = () => {
       setShowBackToTop(window.scrollY > 400);
@@ -41684,15 +41525,15 @@ function ArticleBreadcrumbSocialComponent({
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, [enableBackToTop]);
-  const scrollToTop = React25.useCallback(() => {
+  const scrollToTop = React28.useCallback(() => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   }, []);
-  const breadcrumbsContent = React25.useMemo(() => {
+  const breadcrumbsContent = React28.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs || breadcrumbs.length === 0) return null;
     return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-8", breadcrumbClassName), children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
-      breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+      breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
         /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
         /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: crumb.href, children: crumb.label }) }) })
       ] }, index)),
@@ -41702,7 +41543,7 @@ function ArticleBreadcrumbSocialComponent({
       ] })
     ] }) });
   }, [breadcrumbsSlot, breadcrumbs, currentPage, breadcrumbClassName]);
-  const authorContent = React25.useMemo(() => {
+  const authorContent = React28.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
     return /* @__PURE__ */ jsxs(
@@ -41725,7 +41566,7 @@ function ArticleBreadcrumbSocialComponent({
       }
     );
   }, [authorSlot, author, publishDate, readTime, authorClassName]);
-  const heroMediaContent = React25.useMemo(() => {
+  const heroMediaContent = React28.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -41747,7 +41588,7 @@ function ArticleBreadcrumbSocialComponent({
     heroImageClassName,
     optixFlowConfig
   ]);
-  const tocContent = React25.useMemo(() => {
+  const tocContent = React28.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", tocClassName), children: [
@@ -41755,7 +41596,7 @@ function ArticleBreadcrumbSocialComponent({
       /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: sections.map((section) => {
         const isActive = activeSection === section.id;
         if (renderSectionLink) {
-          return /* @__PURE__ */ jsx(React25.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsx(React28.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -41860,11 +41701,11 @@ function ArticleCompactTocComponent({
   pattern,
   patternOpacity
 }) {
-  const [activeSection, setActiveSection] = React25.useState(
+  const [activeSection, setActiveSection] = React28.useState(
     sections?.[0]?.id || ""
   );
-  const [isTocOpen, setIsTocOpen] = React25.useState(false);
-  React25.useEffect(() => {
+  const [isTocOpen, setIsTocOpen] = React28.useState(false);
+  React28.useEffect(() => {
     if (!enableTocTracking) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -41882,12 +41723,12 @@ function ArticleCompactTocComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const breadcrumbsContent = React25.useMemo(() => {
+  const breadcrumbsContent = React28.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs && !currentPage) return null;
     return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-6 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
-      breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+      breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
         /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
         /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: crumb.href, children: crumb.label }) }) })
       ] }, index)),
@@ -41895,7 +41736,7 @@ function ArticleCompactTocComponent({
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: currentPage }) })
     ] }) });
   }, [breadcrumbsSlot, breadcrumbs, currentPage, breadcrumbClassName]);
-  const shareContent = React25.useMemo(() => {
+  const shareContent = React28.useMemo(() => {
     if (shareSlot) return shareSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-6 flex items-center gap-2", shareClassName), children: [
@@ -41912,13 +41753,13 @@ function ArticleCompactTocComponent({
       ))
     ] });
   }, [shareSlot, socialLinks, shareClassName]);
-  const renderTocLinks = React25.useCallback(
+  const renderTocLinks = React28.useCallback(
     (onLinkClick) => {
       if (!sections) return null;
       return sections.map((section) => {
         const isActive = activeSection === section.id;
         if (renderSectionLink) {
-          return /* @__PURE__ */ jsx(React25.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsx(React28.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -41937,7 +41778,7 @@ function ArticleCompactTocComponent({
     },
     [sections, activeSection, renderSectionLink]
   );
-  const tocContent = React25.useMemo(() => {
+  const tocContent = React28.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "mb-8 lg:hidden", children: /* @__PURE__ */ jsxs(Popover, { open: isTocOpen, onOpenChange: setIsTocOpen, children: [
@@ -41970,7 +41811,7 @@ function ArticleCompactTocComponent({
       )
     ] }) });
   }, [tocSlot, sections, isTocOpen, tocClassName, renderTocLinks]);
-  const desktopTocContent = React25.useMemo(() => {
+  const desktopTocContent = React28.useMemo(() => {
     if (tocSlot) return null;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -41987,7 +41828,7 @@ function ArticleCompactTocComponent({
       }
     );
   }, [tocSlot, sections, tocClassName, renderTocLinks]);
-  const heroMediaContent = React25.useMemo(() => {
+  const heroMediaContent = React28.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -42117,10 +41958,10 @@ function ArticleChaptersAuthorComponent({
       variant: "default"
     }
   ] : []);
-  const [activeChapter, setActiveChapter] = React25.useState(
+  const [activeChapter, setActiveChapter] = React28.useState(
     chapters?.[0]?.id || ""
   );
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!enableChapterTracking || !chapters || chapters.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -42138,12 +41979,12 @@ function ArticleChaptersAuthorComponent({
     });
     return () => observer.disconnect();
   }, [chapters, enableChapterTracking]);
-  const breadcrumbsContent = React25.useMemo(() => {
+  const breadcrumbsContent = React28.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs || breadcrumbs.length === 0) return null;
     return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-8 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
-      breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+      breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
         /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
         /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: crumb.href, children: crumb.label }) }) })
       ] }, index)),
@@ -42151,7 +41992,7 @@ function ArticleChaptersAuthorComponent({
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: typeof currentPage === "string" ? currentPage : currentPage }) })
     ] }) });
   }, [breadcrumbsSlot, breadcrumbs, currentPage, breadcrumbClassName]);
-  const chaptersNavContent = React25.useMemo(() => {
+  const chaptersNavContent = React28.useMemo(() => {
     if (chaptersSlot) return chaptersSlot;
     if (!chapters || chapters.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", chaptersClassName), children: [
@@ -42159,7 +42000,7 @@ function ArticleChaptersAuthorComponent({
       /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: chapters.map((chapter) => {
         const isActive = activeChapter === chapter.id;
         if (renderChapterLink) {
-          return /* @__PURE__ */ jsx(React25.Fragment, { children: renderChapterLink(chapter, isActive) }, chapter.id);
+          return /* @__PURE__ */ jsx(React28.Fragment, { children: renderChapterLink(chapter, isActive) }, chapter.id);
         }
         return /* @__PURE__ */ jsxs(
           Pressable,
@@ -42185,7 +42026,7 @@ function ArticleChaptersAuthorComponent({
     renderChapterLink,
     chaptersClassName
   ]);
-  const authorCardContent = React25.useMemo(() => {
+  const authorCardContent = React28.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
     let socialLinksContent = null;
@@ -42246,7 +42087,7 @@ function ArticleChaptersAuthorComponent({
       socialLinksContent
     ] });
   }, [authorSlot, author, authorClassName]);
-  const heroMediaContent = React25.useMemo(() => {
+  const heroMediaContent = React28.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -42268,7 +42109,7 @@ function ArticleChaptersAuthorComponent({
     heroImageClassName,
     optixFlowConfig
   ]);
-  const conclusionContent = React25.useMemo(() => {
+  const conclusionContent = React28.useMemo(() => {
     if (conclusionSlot) return conclusionSlot;
     if (!conclusionTitle && !conclusionDescription && (!conclusionActions || conclusionActions.length === 0))
       return null;
@@ -42420,7 +42261,7 @@ function ArticleSplitAnimatedComponent({
     }
   ] : []);
   const MotionWrapper = enableAnimations ? motion.div : "div";
-  const categoryContent = React25.useMemo(() => {
+  const categoryContent = React28.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
     return /* @__PURE__ */ jsx(
@@ -42435,7 +42276,7 @@ function ArticleSplitAnimatedComponent({
       }
     );
   }, [categorySlot, category, categoryHref, categoryClassName]);
-  const heroMediaContent = React25.useMemo(() => {
+  const heroMediaContent = React28.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx(
@@ -42448,7 +42289,7 @@ function ArticleSplitAnimatedComponent({
       }
     );
   }, [heroMediaSlot, image, imageAlt, title, optixFlowConfig]);
-  const authorContent = React25.useMemo(() => {
+  const authorContent = React28.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-8 flex items-center gap-4", authorClassName), children: [
@@ -42476,7 +42317,7 @@ function ArticleSplitAnimatedComponent({
     authorRole,
     authorClassName
   ]);
-  const ctaContent = React25.useMemo(() => {
+  const ctaContent = React28.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaActions || ctaActions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-3", ctaClassName), children: ctaActions.map((action, index) => {
@@ -43933,7 +43774,7 @@ function FaqSidebarNavigation({
   accordionTriggerClassName,
   accordionContentClassName
 }) {
-  const [activeCategory, setActiveCategory] = React25.useState(
+  const [activeCategory, setActiveCategory] = React28.useState(
     categories && categories.length > 1 ? "all" : categories?.[0]?.id || ""
   );
   const filteredCategories = useMemo(() => {
@@ -44822,7 +44663,7 @@ function FaqSplitHero({
     imageArea
   ] }) });
 }
-var Controls = React25.memo(
+var Controls = React28.memo(
   ({
     handleNext,
     handlePrevious,
@@ -44853,7 +44694,7 @@ var Controls = React25.memo(
     ] });
   }
 );
-var FeatureCard = React25.memo(
+var FeatureCard = React28.memo(
   ({ feature, isActive, onClick }) => {
     const variants2 = useMemo(
       () => ({
@@ -44961,7 +44802,7 @@ var FeatureCard = React25.memo(
     ) });
   }
 );
-var FeaturesDesktop = React25.memo(
+var FeaturesDesktop = React28.memo(
   ({
     features,
     handleNext,
@@ -44995,7 +44836,7 @@ var FeaturesDesktop = React25.memo(
     ] });
   }
 );
-var FeaturesMobile = React25.memo(
+var FeaturesMobile = React28.memo(
   ({
     features,
     handleNext,
@@ -45086,8 +44927,8 @@ function FeatureAnimatedCarousel({
   spacing = "py-12 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const [activeIndex, setActiveIndex] = React25.useState(0);
-  const [direction, setDirection] = React25.useState(1);
+  const [activeIndex, setActiveIndex] = React28.useState(0);
+  const [direction, setDirection] = React28.useState(1);
   const handleNext = useCallback(() => {
     if (features && activeIndex < features.length - 1) {
       setDirection(1);
@@ -45949,7 +45790,7 @@ function FooterInfoCardsAccordion({
   patternOpacity,
   optixFlowConfig
 }) {
-  const [email, setEmail] = React25.useState("");
+  const [email, setEmail] = React28.useState("");
   (/* @__PURE__ */ new Date()).getFullYear();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -46254,13 +46095,13 @@ function CaseStudiesImageGrid({
   patternOpacity,
   optixFlowConfig
 }) {
-  const getGridClass = React25.useCallback((index) => {
+  const getGridClass = React28.useCallback((index) => {
     if (index === 0 || index === 4) {
       return "row-span-2 aspect-square lg:aspect-auto";
     }
     return "aspect-3/2 md:aspect-2/1";
   }, []);
-  const renderedItems = React25.useMemo(() => {
+  const renderedItems = React28.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, index) => /* @__PURE__ */ jsxs(
@@ -46346,7 +46187,7 @@ function CaseStudiesTestimonialStats({
   patternOpacity,
   optixFlowConfig
 }) {
-  const renderedTestimonials = React25.useMemo(() => {
+  const renderedTestimonials = React28.useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
     return testimonials.map((testimonial, index) => /* @__PURE__ */ jsxs("div", { className: testimonialItemClassName, children: [
@@ -49819,7 +49660,7 @@ function CaseStudiesFeaturedBorder({
   patternOpacity,
   optixFlowConfig
 }) {
-  const renderedFeatured = React25.useMemo(() => {
+  const renderedFeatured = React28.useMemo(() => {
     if (featuredSlot) return featuredSlot;
     if (!featuredCaseStudy) return null;
     return /* @__PURE__ */ jsxs(
@@ -49893,7 +49734,7 @@ function CaseStudiesFeaturedBorder({
     featuredImageClassName,
     optixFlowConfig
   ]);
-  const renderedCaseStudies = React25.useMemo(() => {
+  const renderedCaseStudies = React28.useMemo(() => {
     if (caseStudiesSlot) return caseStudiesSlot;
     if (!caseStudies || caseStudies.length === 0) return null;
     return caseStudies.map((item, idx) => /* @__PURE__ */ jsxs(
@@ -50002,7 +49843,7 @@ function CaseStudiesStatsCard({
   patternOpacity,
   optixFlowConfig
 }) {
-  const renderedStats = React25.useMemo(() => {
+  const renderedStats = React28.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col gap-8 sm:flex-row", statsClassName), children: stats.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
@@ -50010,7 +49851,7 @@ function CaseStudiesStatsCard({
       /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: item.text })
     ] }, `stats-${i}`)) });
   }, [statsSlot, stats, statsClassName]);
-  const renderedAuthor = React25.useMemo(() => {
+  const renderedAuthor = React28.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", authorClassName), children: [
@@ -50024,7 +49865,7 @@ function CaseStudiesStatsCard({
       ] })
     ] });
   }, [authorSlot, author, authorClassName]);
-  const renderedActions = React25.useMemo(() => {
+  const renderedActions = React28.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("shrink-0", actionsClassName), children: actions.map((action, index) => {
@@ -51328,7 +51169,7 @@ function HeroImageLeftContent({
     }
   );
 }
-var DEFAULT_STYLE_RULES3 = {
+var DEFAULT_STYLE_RULES7 = {
   formContainer: "",
   fieldsContainer: "",
   fieldClassName: "",
@@ -51399,17 +51240,17 @@ function HeroImageSlider({
   privacyNoticeClassName,
   gridClassName
 }) {
-  const formStyleRules = React25.useMemo(() => {
+  const formStyleRules = React28.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
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES7.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES7.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES7.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES7.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES7.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES7.errorMessageClassName
     };
   }, [formEngineSetup?.formLayoutSettings?.styleRules]);
-  const formFields = React25.useMemo(() => {
+  const formFields = React28.useMemo(() => {
     if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
       return formEngineSetup.fields;
     } else {
@@ -57172,7 +57013,7 @@ function HeroSplitImageNewsletter({
     onError,
     uploadTokens
   });
-  const renderForm = React25.useMemo(() => {
+  const renderForm = React28.useMemo(() => {
     if (formSlot) return formSlot;
     if (!formFields || formFields.length === 0) return null;
     const defaultButtonAction = {
@@ -57251,7 +57092,7 @@ function HeroSplitImageNewsletter({
     resetUpload,
     resetSubmissionState
   ]);
-  const renderImage = React25.useMemo(() => {
+  const renderImage = React28.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: "relative lg:w-1/2", children: /* @__PURE__ */ jsx(
@@ -58679,7 +58520,7 @@ function HeroSaasDashboardPreview({
     onError,
     uploadTokens
   });
-  const renderBadge = React25.useMemo(() => {
+  const renderBadge = React28.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -58694,7 +58535,7 @@ function HeroSaasDashboardPreview({
       }
     );
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderForm = React25.useMemo(() => {
+  const renderForm = React28.useMemo(() => {
     if (formSlot) return formSlot;
     const defaultButtonAction = {
       label: "Start Free Trial",
@@ -58769,7 +58610,7 @@ function HeroSaasDashboardPreview({
     resetUpload,
     resetSubmissionState
   ]);
-  const renderBrowserPreview = React25.useMemo(() => {
+  const renderBrowserPreview = React28.useMemo(() => {
     if (browserPreviewSlot) return browserPreviewSlot;
     if (!browserPreview) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-12 md:mt-20", previewClassName), children: [
@@ -61020,7 +60861,7 @@ function HeroEcommerceProductShowcase({
           "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12",
           statsClassName
         ),
-        children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border hidden md:flex" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-between flex-row md:flex-col text-left md:text-center w-full md:w-fit border md:border-none rounded-xl md:rounded-none p-4 md:p-0", children: [
             /* @__PURE__ */ jsxs(
@@ -61426,7 +61267,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,24 +61305,24 @@ function HeroNewsletterMinimal({
   disclaimerClassName,
   statsClassName
 }) {
-  const formStyleRules = React25.useMemo(() => {
+  const formStyleRules = React28.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
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES8.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES8.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES8.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES8.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES8.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES8.errorMessageClassName
     };
   }, [formEngineSetup?.formLayoutSettings?.styleRules]);
-  const formFields = React25.useMemo(() => {
+  const formFields = React28.useMemo(() => {
     if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
       return formEngineSetup.fields;
     } else {
       return DEFAULT_FORM_FIELDS45;
     }
   }, [formEngineSetup?.fields]);
-  const renderStats = React25.useMemo(() => {
+  const renderStats = React28.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: [
@@ -61507,7 +61348,7 @@ function HeroNewsletterMinimal({
       /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
     ] }) }, index));
   }, [statsSlot, stats]);
-  const renderForm = React25.useMemo(() => {
+  const renderForm = React28.useMemo(() => {
     if (formSlot) return formSlot;
     if (!formEngineSetup) return null;
     const defaultButtonAction = {
@@ -61674,7 +61515,7 @@ function HeroComingSoonCountdown({
   formClassName,
   socialLinksClassName
 }) {
-  const [timeLeft, setTimeLeft] = React25.useState(null);
+  const [timeLeft, setTimeLeft] = React28.useState(null);
   const {
     uploadTokens,
     uploadProgress,
@@ -61694,7 +61535,7 @@ function HeroComingSoonCountdown({
     onError,
     uploadTokens
   });
-  const calculateTimeLeft = React25.useCallback(() => {
+  const calculateTimeLeft = React28.useCallback(() => {
     if (!countdownDate) return null;
     const now = Date.now();
     const target = countdownDate.getTime();
@@ -61707,7 +61548,7 @@ function HeroComingSoonCountdown({
       seconds: Math.floor(diff % (1e3 * 60) / 1e3)
     };
   }, [countdownDate]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     setTimeLeft(calculateTimeLeft());
     if (!countdownDate) return;
     const timer = setInterval(() => {
@@ -61718,7 +61559,7 @@ function HeroComingSoonCountdown({
     return () => clearInterval(timer);
   }, [countdownDate, calculateTimeLeft]);
   const showCountdown = countdownSlot || timeLeft;
-  const renderForm = React25.useMemo(() => {
+  const renderForm = React28.useMemo(() => {
     if (formSlot) return formSlot;
     const defaultButtonAction = {
       label: "Notify Me",
@@ -61794,7 +61635,7 @@ function HeroComingSoonCountdown({
     resetUpload,
     resetSubmissionState
   ]);
-  const renderSocialLinks = React25.useMemo(() => {
+  const renderSocialLinks = React28.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, index) => /* @__PURE__ */ jsx(
@@ -61926,7 +61767,7 @@ function HeroEventRegistration({
           "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(React25.Fragment, { children: [
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border hidden md:flex" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-between flex-row md:flex-col text-left md:text-center w-full md:w-fit border md:border-none rounded-xl md:rounded-none p-4 md:p-0", children: [
             /* @__PURE__ */ jsxs(
@@ -62266,7 +62107,7 @@ function ComparisonTableTwoColumn({
   patternOpacity,
   optixFlowConfig
 }) {
-  const tableContent = React25.useMemo(() => {
+  const tableContent = React28.useMemo(() => {
     if (tableSlot) return tableSlot;
     if (!rows || rows.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("-mr-4 overflow-x-auto", tableWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "min-w-2xl overflow-hidden", children: /* @__PURE__ */ jsxs(
@@ -62296,7 +62137,7 @@ function ComparisonTableTwoColumn({
               optixFlowConfig
             }
           ) : optionBLabel && (typeof optionBLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: optionBLabel }) : optionBLabel) }),
-          rows.map((row, idx) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+          rows.map((row, idx) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "flex items-center border-b p-3 text-base font-medium md:p-4 md:text-lg", children: row.label }),
             /* @__PURE__ */ jsx("div", { className: cn("border-b bg-success/5 p-3 md:p-6", optionACellClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               row.hasIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 20, className: "text-success" }),
@@ -62325,14 +62166,14 @@ function ComparisonTableTwoColumn({
     optionBLabel,
     optixFlowConfig
   ]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h1", { className: cn("mb-8 text-3xl font-bold md:mb-12 md:text-5xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mb-8 text-muted-foreground md:text-lg", descriptionClassName), children: description });
@@ -62379,7 +62220,7 @@ function ComparisonFeatureCards({
   patternOpacity,
   optixFlowConfig
 }) {
-  const renderCard = React25.useCallback(
+  const renderCard = React28.useCallback(
     (product, isHighlighted) => /* @__PURE__ */ jsxs(
       "div",
       {
@@ -62435,7 +62276,7 @@ function ComparisonFeatureCards({
     ),
     [cardClassName, optixFlowConfig]
   );
-  const cardsContent = React25.useMemo(() => {
+  const cardsContent = React28.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!productA || !productB) return null;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -62443,28 +62284,28 @@ function ComparisonFeatureCards({
       renderCard(productB, productB.highlighted ?? false)
     ] });
   }, [cardsSlot, productA, productB, renderCard]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl font-semibold md:text-7xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground md:text-xl", descriptionClassName), children: description });
     }
     return /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description });
   }, [description, descriptionClassName]);
-  const suitabilityContent = React25.useMemo(() => {
+  const suitabilityContent = React28.useMemo(() => {
     if (!suitabilityTitle && !suitabilityDescription) return null;
     return /* @__PURE__ */ jsxs("div", { className: suitabilityClassName, children: [
       suitabilityTitle && (typeof suitabilityTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-semibold", children: suitabilityTitle }) : suitabilityTitle),
       suitabilityDescription && (typeof suitabilityDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "leading-6 text-muted-foreground md:text-lg", children: suitabilityDescription }) : suitabilityDescription)
     ] });
   }, [suitabilityTitle, suitabilityDescription, suitabilityClassName]);
-  const differencesContent = React25.useMemo(() => {
+  const differencesContent = React28.useMemo(() => {
     if (!differencesTitle && !differencesDescription) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-16", differencesClassName), children: [
       differencesTitle && (typeof differencesTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-semibold", children: differencesTitle }) : differencesTitle),
@@ -62512,7 +62353,7 @@ function ComparisonGridBadges({
   pattern,
   patternOpacity
 }) {
-  const featuresContent = React25.useMemo(() => {
+  const featuresContent = React28.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, idx) => /* @__PURE__ */ jsxs(
@@ -62559,14 +62400,14 @@ function ComparisonGridBadges({
       idx
     ));
   }, [featuresSlot, features, featureCardClassName, badgeClassName, optionALabel, optionBLabel]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg", descriptionClassName), children: description });
@@ -62614,7 +62455,7 @@ function ComparisonMetricsRows({
   pattern,
   patternOpacity
 }) {
-  const metricsContent = React25.useMemo(() => {
+  const metricsContent = React28.useMemo(() => {
     if (metricsSlot) return metricsSlot;
     if (!metrics || metrics.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -62654,7 +62495,7 @@ function ComparisonMetricsRows({
       }
     );
   }, [metricsSlot, metrics, metricsClassName, metricRowClassName]);
-  const actionsContent = React25.useMemo(() => {
+  const actionsContent = React28.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex justify-end", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxs(
@@ -62675,7 +62516,7 @@ function ComparisonMetricsRows({
       idx
     )) });
   }, [actionsSlot, actions, actionsClassName]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx(
@@ -62691,7 +62532,7 @@ function ComparisonMetricsRows({
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground md:text-lg", descriptionClassName), children: description });
@@ -62754,7 +62595,7 @@ function ComparisonImageCards({
   patternOpacity,
   optixFlowConfig
 }) {
-  const renderCard = React25.useCallback(
+  const renderCard = React28.useCallback(
     (option) => /* @__PURE__ */ jsx("div", { className: cn("relative h-full", cardClassName), children: /* @__PURE__ */ jsxs("div", { className: cn(
       "relative aspect-4/5 min-h-[400px] overflow-hidden rounded-2xl sm:aspect-[0.9] sm:min-h-[480px] sm:rounded-3xl md:min-h-[520px]",
       getNestedCardBg(background, "accent"),
@@ -62778,7 +62619,7 @@ function ComparisonImageCards({
     ] }) }),
     [cardClassName, optixFlowConfig]
   );
-  const cardsContent = React25.useMemo(() => {
+  const cardsContent = React28.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!optionA || !optionB) return null;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -62796,14 +62637,14 @@ function ComparisonImageCards({
       )
     ] });
   }, [cardsSlot, optionA, optionB, dividerText, dividerClassName, renderCard]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium sm:text-4xl md:text-5xl lg:text-6xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-3xl text-lg text-muted-foreground sm:mt-6 sm:text-xl", descriptionClassName), children: description });
@@ -62933,7 +62774,7 @@ function ComparisonTableTabs({
   patternOpacity
 }) {
   const [selectedTab, setSelectedTab] = useState(models?.[0]?.name || "");
-  const renderStatusIcon = React25.useCallback((status) => {
+  const renderStatusIcon = React28.useCallback((status) => {
     if (status === "positive") {
       return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-success/10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-success" }) });
     }
@@ -62942,7 +62783,7 @@ function ComparisonTableTabs({
     }
     return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-accent/10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-minus", size: 16, className: "text-accent" }) });
   }, []);
-  const tableContent = React25.useMemo(() => {
+  const tableContent = React28.useMemo(() => {
     if (tableSlot) return tableSlot;
     if (!models || models.length === 0 || !features || features.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -63001,14 +62842,14 @@ function ComparisonTableTabs({
       ] }) })
     ] });
   }, [tableSlot, models, features, tabsClassName, tableClassName, tableHeaderClassName, tableCellClassName, selectedTab, renderStatusIcon]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl lg:text-5xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-muted-foreground md:text-lg", descriptionClassName), children: description });
@@ -63099,7 +62940,7 @@ function ComparisonTableTooltips({
   pattern,
   patternOpacity
 }) {
-  const renderCellContent = React25.useCallback(
+  const renderCellContent = React28.useCallback(
     (cell, isHighlighted) => {
       if (typeof cell === "string") {
         return cell;
@@ -63126,7 +62967,7 @@ function ComparisonTableTooltips({
     },
     []
   );
-  const tableContent = React25.useMemo(() => {
+  const tableContent = React28.useMemo(() => {
     if (tableSlot) return tableSlot;
     if (!rows || rows.length === 0) return null;
     return /* @__PURE__ */ jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
@@ -63152,14 +62993,14 @@ function ComparisonTableTooltips({
       ] }, idx)) })
     ] });
   }, [tableSlot, rows, tableClassName, tableHeaderClassName, tableCellClassName, optionALabel, optionBLabel, renderCellContent]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-center text-4xl font-semibold", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mb-8 text-center text-muted-foreground", descriptionClassName), children: description });
@@ -63201,7 +63042,7 @@ function ComparisonFeatureGrid({
   pattern,
   patternOpacity
 }) {
-  const renderStatusIcon = React25.useCallback((status) => {
+  const renderStatusIcon = React28.useCallback((status) => {
     if (status === true) {
       return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-success" });
     }
@@ -63210,7 +63051,7 @@ function ComparisonFeatureGrid({
     }
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20, className: "text-destructive" });
   }, []);
-  const gridContent = React25.useMemo(() => {
+  const gridContent = React28.useMemo(() => {
     if (gridSlot) return gridSlot;
     if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsxs(
@@ -63276,14 +63117,14 @@ function ComparisonFeatureGrid({
     optionBLabel,
     renderStatusIcon
   ]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-center text-4xl font-semibold", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mb-8 text-center text-muted-foreground", descriptionClassName), children: description });
@@ -63327,7 +63168,7 @@ function ComparisonAiModels({
   optixFlowConfig
 }) {
   const [hoveredModel, setHoveredModel] = useState(null);
-  const renderStatusIcon = React25.useCallback((status) => {
+  const renderStatusIcon = React28.useCallback((status) => {
     if (status === "best") {
       return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-success" });
     }
@@ -63336,7 +63177,7 @@ function ComparisonAiModels({
     }
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/minus", size: 16, className: "text-muted-foreground" });
   }, []);
-  const getCellClassName = React25.useCallback(
+  const getCellClassName = React28.useCallback(
     (status, modelKey) => {
       const baseClass = "cursor-pointer py-4 text-center font-medium transition-all duration-300";
       let statusClass = "";
@@ -63357,7 +63198,7 @@ function ComparisonAiModels({
     },
     [hoveredModel]
   );
-  const getSummaryCardClassName = React25.useCallback(
+  const getSummaryCardClassName = React28.useCallback(
     (modelKey) => {
       const baseClass = "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300";
       if (hoveredModel === modelKey) {
@@ -63372,7 +63213,7 @@ function ComparisonAiModels({
     },
     [hoveredModel]
   );
-  const tableContent = React25.useMemo(() => {
+  const tableContent = React28.useMemo(() => {
     if (tableSlot) return tableSlot;
     if (!models || !comparisonData || comparisonData.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -63450,7 +63291,7 @@ function ComparisonAiModels({
     getCellClassName,
     renderStatusIcon
   ]);
-  const analysisContent = React25.useMemo(() => {
+  const analysisContent = React28.useMemo(() => {
     if (analysisSlot) return analysisSlot;
     if (!models) return null;
     return /* @__PURE__ */ jsx("div", { className: cn(
@@ -63491,14 +63332,14 @@ function ComparisonAiModels({
       ] })
     ] }) });
   }, [analysisSlot, models, analysisClassName, getSummaryCardClassName]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl lg:text-5xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-muted-foreground md:text-lg", descriptionClassName), children: description });
@@ -63548,7 +63389,7 @@ function ComparisonLegacyModern({
   pattern,
   patternOpacity
 }) {
-  const columnsContent = React25.useMemo(() => {
+  const columnsContent = React28.useMemo(() => {
     if (columnsSlot) return columnsSlot;
     if (!legacyFeatures || legacyFeatures.length === 0 || !modernFeatures || modernFeatures.length === 0)
       return null;
@@ -63560,7 +63401,7 @@ function ComparisonLegacyModern({
         legacyColumnClassName
       ), children: [
         legacyTitle && (typeof legacyTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-medium", children: legacyTitle }) : legacyTitle),
-        /* @__PURE__ */ jsx("ul", { className: "mt-9 space-y-3", children: legacyFeatures.map((feature, idx) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+        /* @__PURE__ */ jsx("ul", { className: "mt-9 space-y-3", children: legacyFeatures.map((feature, idx) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16, className: "my-1.5 shrink-0 text-muted-foreground" }),
             /* @__PURE__ */ jsx("li", { className: "text-sm", children: feature.text })
@@ -63577,7 +63418,7 @@ function ComparisonLegacyModern({
           ),
           children: [
             modernTitle && (typeof modernTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-medium", children: modernTitle }) : modernTitle),
-            /* @__PURE__ */ jsx("ul", { className: "mt-9 space-y-3", children: modernFeatures.map((feature, idx) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+            /* @__PURE__ */ jsx("ul", { className: "mt-9 space-y-3", children: modernFeatures.map((feature, idx) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
               /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 text-sm", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-lg", children: feature.emoji }),
                 feature.text
@@ -63589,7 +63430,7 @@ function ComparisonLegacyModern({
       )
     ] });
   }, [columnsSlot, legacyFeatures, modernFeatures, legacyTitle, modernTitle, legacyColumnClassName, modernColumnClassName]);
-  const headingContent = React25.useMemo(() => {
+  const headingContent = React28.useMemo(() => {
     if (!heading && !headingHighlight) return null;
     return /* @__PURE__ */ jsxs("h2", { className: cn("text-4xl font-medium md:text-5xl lg:text-7xl", headingClassName), children: [
       heading && (typeof heading === "string" ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
@@ -63602,7 +63443,7 @@ function ComparisonLegacyModern({
       ] }) : headingHighlight)
     ] });
   }, [heading, headingHighlight, headingClassName, headingHighlightClassName]);
-  const descriptionContent = React25.useMemo(() => {
+  const descriptionContent = React28.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description });
@@ -63775,7 +63616,7 @@ var NavbarMobileMenu = ({
   closeIconClassName,
   title = "Mobile Navigation"
 }) => {
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (open) {
       const originalOverflow = document.body.style.overflow;
       document.body.style.overflow = "hidden";
@@ -64004,7 +63845,7 @@ var NavbarDropdownMenu = ({
   patternOpacity,
   optixFlowConfig
 }) => {
-  const [open, setOpen] = React25.useState(false);
+  const [open, setOpen] = React28.useState(false);
   const renderAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
@@ -64230,7 +64071,7 @@ var NavbarCenteredMenu = ({
   patternOpacity,
   optixFlowConfig
 }) => {
-  const [open, setOpen] = React25.useState(false);
+  const [open, setOpen] = React28.useState(false);
   const renderAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
@@ -64370,7 +64211,7 @@ var DesktopMenuItem = ({
   index,
   optixFlowConfig
 }) => {
-  const imagesRef = React25.useRef([]);
+  const imagesRef = React28.useRef([]);
   const layout = link.layout || "simple-grid";
   const handleMouseEnter = (event) => {
     const index2 = Number(event.currentTarget.getAttribute("data-index"));
@@ -65605,7 +65446,7 @@ var NavbarFeatureGrid = ({
   patternOpacity,
   optixFlowConfig
 }) => {
-  const [open, setOpen] = React25.useState(false);
+  const [open, setOpen] = React28.useState(false);
   const renderAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
@@ -68815,7 +68656,7 @@ var DesktopMenuItem7 = ({
   if (item.groups && item.groups.length > 0) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "flex", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "flex", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
         groupIndex > 0 && /* @__PURE__ */ jsx(
           Separator,
           {
@@ -69567,7 +69408,7 @@ var NavbarSimpleLinks = ({
   const renderNavItems = useMemo(() => {
     if (navItemsSlot) return navItemsSlot;
     if (!navItems || navItems.length === 0) return null;
-    return navItems.map((item) => /* @__PURE__ */ jsx(React25.Fragment, { children: /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+    return navItems.map((item) => /* @__PURE__ */ jsx(React28.Fragment, { children: /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
       NavigationMenuLink,
       {
         "data-nav-item": item.name,
@@ -74596,7 +74437,7 @@ function PricingFullComparison({
           resolvedPlanIds[index]
         ))
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: categories.map((category) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+      /* @__PURE__ */ jsx("tbody", { children: categories.map((category) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
         /* @__PURE__ */ jsx("tr", { className: cn(getNestedCardBg(background), getNestedCardTextColor(background), categoryRowClassName), children: /* @__PURE__ */ jsx(
           "td",
           {
@@ -79197,9 +79038,9 @@ function ProcessStickySteps({
   );
 }
 var usePrevious = (value) => {
-  const [prev, setPrev] = React25.useState(void 0);
-  const ref = React25.useRef(value);
-  React25.useEffect(() => {
+  const [prev, setPrev] = React28.useState(void 0);
+  const ref = React28.useRef(value);
+  React28.useEffect(() => {
     setPrev(ref.current);
     ref.current = value;
   }, [value]);
@@ -79212,12 +79053,12 @@ var ProcessCard = ({
   itemClassName,
   background
 }) => {
-  const ref = React25.useRef(null);
+  const ref = React28.useRef(null);
   const itemInView = useInView(ref, {
     amount: 0,
     margin: "0px 0px -60% 0px"
   });
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (itemInView) {
       setActive(index);
     }
@@ -79267,7 +79108,7 @@ function ProcessScrollImage({
   ctaText,
   ctaUrl
 }) {
-  const [active, setActive] = React25.useState(0);
+  const [active, setActive] = React28.useState(0);
   const previousActive = usePrevious(active);
   const resolvedHeading = title ?? heading;
   const resolvedActions = actions ?? (ctaText && ctaUrl ? [
@@ -79451,7 +79292,7 @@ var ProcessCard2 = ({
   hoverImageClassName,
   background
 }) => {
-  const [isHovered, setIsHovered] = React25.useState(false);
+  const [isHovered, setIsHovered] = React28.useState(false);
   const titleText = typeof step.title === "string" ? step.title : `Step ${index + 1}`;
   return /* @__PURE__ */ jsxs(
     "li",
@@ -79775,7 +79616,7 @@ function ProcessExpandableTimeline({
   // Backwards compatibility
   title
 }) {
-  const [expandedIndex, setExpandedIndex] = React25.useState(null);
+  const [expandedIndex, setExpandedIndex] = React28.useState(null);
   const resolvedHeading = title ?? heading;
   const toggleExpand = (index) => {
     setExpandedIndex(expandedIndex === index ? null : index);
@@ -84546,7 +84387,7 @@ function ListAchievementsShowcase({
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", itemsClassName), children: [
       /* @__PURE__ */ jsx(Separator, {}),
-      items.map((item, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+      items.map((item, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -84666,7 +84507,7 @@ function ListCareerTimeline({
   const renderExperiences = useMemo(() => {
     if (experiencesSlot) return experiencesSlot;
     if (!experiences || experiences.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: experiencesClassName, children: experiences.map((experience, idx) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+    return /* @__PURE__ */ jsx("div", { className: experiencesClassName, children: experiences.map((experience, idx) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
       /* @__PURE__ */ jsx(Separator, {}),
       /* @__PURE__ */ jsxs(
         "div",
@@ -84687,7 +84528,7 @@ function ListCareerTimeline({
   const renderAwards = useMemo(() => {
     if (awardsSlot) return awardsSlot;
     if (!awards || awards.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: awardsClassName, children: awards.map((award, idx) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+    return /* @__PURE__ */ jsx("div", { className: awardsClassName, children: awards.map((award, idx) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
       /* @__PURE__ */ jsx(Separator, {}),
       /* @__PURE__ */ jsxs(
         "div",
@@ -84822,7 +84663,7 @@ function ListMetricsDashboard({
   activeCategory: controlledActiveCategory,
   onActiveCategoryChange
 }) {
-  const [internalActiveTab, setInternalActiveTab] = React25.useState("all");
+  const [internalActiveTab, setInternalActiveTab] = React28.useState("all");
   const activeTab = controlledActiveCategory ?? internalActiveTab;
   const handleTabChange = (value) => {
     if (onActiveCategoryChange) {
@@ -85306,7 +85147,7 @@ function ListSearchableGrid({
   searchTerm: controlledSearchTerm,
   onSearchTermChange
 }) {
-  const [internalSearchTerm, setInternalSearchTerm] = React25.useState("");
+  const [internalSearchTerm, setInternalSearchTerm] = React28.useState("");
   const searchTerm = controlledSearchTerm ?? internalSearchTerm;
   const handleSearchChange = (value) => {
     if (onSearchTermChange) {
@@ -85315,7 +85156,7 @@ function ListSearchableGrid({
       setInternalSearchTerm(value);
     }
   };
-  const filteredItems = React25.useMemo(() => {
+  const filteredItems = React28.useMemo(() => {
     if (!searchTerm) {
       return items ?? [];
     }
@@ -85478,7 +85319,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo445 } = React25;
+var { useMemo: useMemo445 } = React28;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -85627,7 +85468,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo446 } = React25;
+var { useMemo: useMemo446 } = React28;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -85916,7 +85757,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo447 } = React25;
+var { useMemo: useMemo447 } = React28;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -86665,10 +86506,10 @@ function ProjectDetailSidebarNavigation(props) {
     heroImageClassName,
     metadataClassName
   } = props;
-  const [activeSection, setActiveSection] = React25.useState(
+  const [activeSection, setActiveSection] = React28.useState(
     sections?.[0]?.id || ""
   );
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const handleScroll = () => {
       const sectionElements = sections?.map(
         (section) => document.getElementById(section.id)
@@ -89528,7 +89369,7 @@ function ProjectDetailTabbedCaseStudy(props) {
     testimonialClassName,
     toolsClassName
   } = props;
-  const [activeTab, setActiveTab] = React25.useState(tabs?.[0]?.id || "");
+  const [activeTab, setActiveTab] = React28.useState(tabs?.[0]?.id || "");
   const renderedBackAction = useMemo(() => {
     if (backActionSlot) return backActionSlot;
     if (!backAction) return null;
@@ -89916,7 +89757,7 @@ function RevealImage({
   index,
   optixFlowConfig
 }) {
-  const ref = React25.useRef(null);
+  const ref = React28.useRef(null);
   const { scrollYProgress } = useScroll({
     target: ref,
     offset: ["start end", "end start"]
@@ -90111,7 +89952,7 @@ function ParallaxSection({
   index,
   optixFlowConfig
 }) {
-  const ref = React25.useRef(null);
+  const ref = React28.useRef(null);
   const { scrollYProgress } = useScroll({
     target: ref,
     offset: ["start end", "end start"]
@@ -90184,7 +90025,7 @@ function ProjectDetailParallaxScroll(props) {
     heroImageClassName,
     sectionsClassName
   } = props;
-  const heroRef = React25.useRef(null);
+  const heroRef = React28.useRef(null);
   const { scrollYProgress } = useScroll({
     target: heroRef,
     offset: ["start start", "end start"]
@@ -90722,7 +90563,7 @@ function IndustriesExpandableShowcase({
   patternClassName,
   optixFlowConfig
 }) {
-  const [activeContractor, setActiveContractor] = React25.useState(
+  const [activeContractor, setActiveContractor] = React28.useState(
     contractors?.[0]?.id || ""
   );
   const handleContractorHover = (contractorId) => {
@@ -91375,7 +91216,7 @@ function ResourceDetailDocumentSidebar({
 }) {
   const renderedBreadcrumbs = useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
-    return /* @__PURE__ */ jsx(Breadcrumb, { className: breadcrumbsClassName, children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+    return /* @__PURE__ */ jsx(Breadcrumb, { className: breadcrumbsClassName, children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: !crumb.href ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: typeof crumb.label === "string" ? crumb.label : crumb.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { href: crumb.href, children: index === 0 ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/home", size: 16 }) : typeof crumb.label === "string" ? crumb.label : crumb.label }) }),
       index < (breadcrumbs?.length || 0) - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
     ] }, index)) }) });
@@ -94776,8 +94617,8 @@ function ServicesListTableHover({
   patternOpacity,
   optixFlowConfig
 }) {
-  const [hoveredIndex, setHoveredIndex] = React25.useState(null);
-  const [mousePosition, setMousePosition] = React25.useState({ x: 0, y: 0 });
+  const [hoveredIndex, setHoveredIndex] = React28.useState(null);
+  const [mousePosition, setMousePosition] = React28.useState({ x: 0, y: 0 });
   const handleMouseMove = (e) => {
     setMousePosition({ x: e.clientX, y: e.clientY });
   };
@@ -95027,7 +94868,7 @@ function ServicesListStickyImage({
   patternOpacity,
   optixFlowConfig
 }) {
-  const [activeIndex, setActiveIndex] = React25.useState(0);
+  const [activeIndex, setActiveIndex] = React28.useState(0);
   const renderServices = () => {
     if (servicesSlot) return servicesSlot;
     if (!services || services.length === 0) return null;
@@ -95279,8 +95120,8 @@ function ServicesListVideoShowcase({
   patternOpacity,
   optixFlowConfig
 }) {
-  const [playingIndex, setPlayingIndex] = React25.useState(null);
-  const videoRefs = React25.useRef([]);
+  const [playingIndex, setPlayingIndex] = React28.useState(null);
+  const videoRefs = React28.useRef([]);
   const handleMouseEnter = (index) => {
     setPlayingIndex(index);
     videoRefs.current[index]?.play();
@@ -98573,7 +98414,7 @@ function StatsCircularProgress({
   statInfoClassName
 }) {
   const effectiveDefaultCategory = defaultCategory || (categories && categories.length > 0 ? categories[0].id : "");
-  const [category, setCategory] = React25.useState(effectiveDefaultCategory);
+  const [category, setCategory] = React28.useState(effectiveDefaultCategory);
   const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
@@ -98866,8 +98707,8 @@ function StatsCardGroup({
   );
 }
 function useAnimatedCounter(endValue, duration = 2e3, isVisible) {
-  const [count, setCount] = React25.useState(0);
-  React25.useEffect(() => {
+  const [count, setCount] = React28.useState(0);
+  React28.useEffect(() => {
     if (!isVisible) return;
     let startTime = null;
     let animationFrame;
@@ -98955,9 +98796,9 @@ function StatsAnimatedCounter({
   statLabelClassName,
   statIconClassName
 }) {
-  const [isVisible, setIsVisible] = React25.useState(false);
-  const sectionRef = React25.useRef(null);
-  React25.useEffect(() => {
+  const [isVisible, setIsVisible] = React28.useState(false);
+  const sectionRef = React28.useRef(null);
+  React28.useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -99045,8 +98886,8 @@ function StatsAnimatedCounter({
   );
 }
 function useNumberTicker(endValue, duration = 2500, isVisible, decimals = 0) {
-  const [displayValue, setDisplayValue] = React25.useState("0");
-  React25.useEffect(() => {
+  const [displayValue, setDisplayValue] = React28.useState("0");
+  React28.useEffect(() => {
     if (!isVisible) return;
     let startTime = null;
     let animationFrame;
@@ -99161,9 +99002,9 @@ function StatsNumberTicker({
   statLabelClassName,
   statDescriptionClassName
 }) {
-  const [isVisible, setIsVisible] = React25.useState(false);
-  const sectionRef = React25.useRef(null);
-  React25.useEffect(() => {
+  const [isVisible, setIsVisible] = React28.useState(false);
+  const sectionRef = React28.useRef(null);
+  React28.useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -99422,9 +99263,9 @@ function StatsBarComparison({
   barValueClassName,
   barTrackClassName
 }) {
-  const [isVisible, setIsVisible] = React25.useState(!animate);
-  const sectionRef = React25.useRef(null);
-  React25.useEffect(() => {
+  const [isVisible, setIsVisible] = React28.useState(!animate);
+  const sectionRef = React28.useRef(null);
+  React28.useEffect(() => {
     if (!animate) return;
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -99602,7 +99443,7 @@ function TimelineVerticalIconDashed({
             "mx-auto flex flex-col items-center justify-center text-center sm:max-w-xl",
             stepsClassName
           ),
-          children: steps.map((step, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+          children: steps.map((step, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", stepClassName), children: [
               /* @__PURE__ */ jsx(
                 "span",
@@ -99869,7 +99710,7 @@ function TimelineTwoColumnFeatured({
   style,
   optixFlowConfig
 }) {
-  const renderActions = React25.useMemo(() => {
+  const renderActions = React28.useMemo(() => {
     if (actionsSlot) {
       return actionsSlot;
     }
@@ -99997,7 +99838,7 @@ function TimelineTwoColumnFeatured({
     }
   );
 }
-var DiagonalPattern = React25.memo(({
+var DiagonalPattern = React28.memo(({
   className,
   patternOpacity = 0.15
 }) => {
@@ -100036,7 +99877,7 @@ function TimelineAlternatingDiagonal({
   style,
   optixFlowConfig
 }) {
-  const renderedBadge = React25.useMemo(() => {
+  const renderedBadge = React28.useMemo(() => {
     if (badgeSlot) {
       return badgeSlot;
     }
@@ -100414,7 +100255,7 @@ function TimelineProductivityList({
     }
   );
 }
-var ProcessBar = React25.memo(({ currentStep, steps }) => /* @__PURE__ */ jsx("div", { className: "relative w-full scale-75", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: steps.map((step, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+var ProcessBar = React28.memo(({ currentStep, steps }) => /* @__PURE__ */ jsx("div", { className: "relative w-full scale-75", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: steps.map((step, index) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
   /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsx(
     motion.div,
     {
@@ -100441,7 +100282,7 @@ var ProcessBar = React25.memo(({ currentStep, steps }) => /* @__PURE__ */ jsx("d
     )
   ] })
 ] }, index)) }) }));
-var StepperContent = React25.memo(({ step, optixFlowConfig, imageClassName, descriptionClassName, background }) => {
+var StepperContent = React28.memo(({ step, optixFlowConfig, imageClassName, descriptionClassName, background }) => {
   return /* @__PURE__ */ jsxs("div", { className: cn("my-4 flex min-h-[400px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl p-6 text-center", getNestedCardBg(background), getNestedCardTextColor(background)), children: [
     /* @__PURE__ */ jsx(
       motion.div,
@@ -100474,7 +100315,7 @@ var StepperContent = React25.memo(({ step, optixFlowConfig, imageClassName, desc
     )
   ] });
 });
-var NavButtons = React25.memo(({ handlePrev, handleNext }) => /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-end gap-3 tracking-tight", children: [
+var NavButtons = React28.memo(({ handlePrev, handleNext }) => /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-end gap-3 tracking-tight", children: [
   /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -100525,10 +100366,10 @@ function TimelineStepperAnimated({
 }) {
   const safeInitialStep = (steps?.length ?? 0) > 0 ? Math.max(0, Math.min(initialStep ?? 0, (steps?.length ?? 1) - 1)) : 0;
   const [currentStep, setCurrentStep] = useState(safeInitialStep);
-  const handleNext = React25.useCallback(() => {
+  const handleNext = React28.useCallback(() => {
     setCurrentStep((prev) => Math.min(prev + 1, (steps?.length ?? 1) - 1));
   }, [steps?.length]);
-  const handlePrev = React25.useCallback(() => {
+  const handlePrev = React28.useCallback(() => {
     setCurrentStep((prev) => Math.max(prev - 1, 0));
   }, []);
   const safeCurrentStep = (steps?.length ?? 0) > 0 ? Math.max(0, Math.min(currentStep, (steps?.length ?? 1) - 1)) : 0;
@@ -101237,7 +101078,7 @@ function TimelineTabbedPhases({
   style,
   optixFlowConfig
 }) {
-  const renderDownloadButton = React25.useMemo(() => {
+  const renderDownloadButton = React28.useMemo(() => {
     if (downloadSlot) {
       return downloadSlot;
     }
@@ -101457,7 +101298,7 @@ function TimelineProductLaunch({
   id,
   style
 }) {
-  const renderCta = React25.useMemo(() => {
+  const renderCta = React28.useMemo(() => {
     if (ctaSlot) {
       return ctaSlot;
     }
@@ -101922,9 +101763,9 @@ function LinkTreeBlock({
 }) {
   const resolvedBackground = background;
   const resolvedPattern = pattern ?? backgroundPattern;
-  const [lightboxOpen, setLightboxOpen] = React25.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React25.useState(0);
-  const lightboxItems = React25.useMemo(() => {
+  const [lightboxOpen, setLightboxOpen] = React28.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React28.useState(0);
+  const lightboxItems = React28.useMemo(() => {
     if (!mediaGallery || mediaGallery.length === 0) return [];
     return mediaGallery.slice(0, mediaGalleryLimit).map((item, index) => ({
       id: item.id ?? `media-${index}`,
@@ -101936,11 +101777,11 @@ function LinkTreeBlock({
       share: true
     }));
   }, [mediaGallery, mediaGalleryLimit]);
-  const handleMediaClick = React25.useCallback((index) => {
+  const handleMediaClick = React28.useCallback((index) => {
     setLightboxIndex(index);
     setLightboxOpen(true);
   }, []);
-  const handleLightboxClose = React25.useCallback(() => {
+  const handleLightboxClose = React28.useCallback(() => {
     setLightboxOpen(false);
   }, []);
   const resolveImage = (value, fallbackAlt) => {
@@ -101952,7 +101793,7 @@ function LinkTreeBlock({
   };
   const nameForAlt = typeof brandName === "string" ? brandName : "Brand avatar";
   const resolvedAvatar = resolveImage(brandAvatar || brandLogo, nameForAlt) || resolveImage(blockBrandedIconsAndPlaceholders.avatar1, nameForAlt);
-  const renderBrandHeader = React25.useMemo(() => {
+  const renderBrandHeader = React28.useMemo(() => {
     if (brandSlot) return brandSlot;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -102039,7 +101880,7 @@ function LinkTreeBlock({
     brandTagline,
     taglineClassName
   ]);
-  const renderLinks = React25.useMemo(() => {
+  const renderLinks = React28.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-3", linksClassName), children: links.map((link, index) => {
@@ -102156,7 +101997,7 @@ function LinkTreeBlock({
     linkBadgeClassName,
     linkChevronClassName
   ]);
-  const renderMediaGallery = React25.useMemo(() => {
+  const renderMediaGallery = React28.useMemo(() => {
     if (mediaGallerySlot) return mediaGallerySlot;
     if (!mediaGallery || mediaGallery.length === 0) return null;
     const items = mediaGallery.slice(0, mediaGalleryLimit);
@@ -102270,7 +102111,7 @@ function LinkTreeBlock({
     mediaGalleryOverlayClassName,
     mediaGalleryPlayIconClassName
   ]);
-  const renderSocialLinks = React25.useMemo(() => {
+  const renderSocialLinks = React28.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -102316,7 +102157,7 @@ function LinkTreeBlock({
     socialIconClassName,
     socialLinkClassName
   ]);
-  const renderFooter = React25.useMemo(() => {
+  const renderFooter = React28.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
     const resolvedFooterAction = footerAction;
@@ -105215,11 +105056,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 +105166,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 +105217,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 +105249,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 +105351,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()
   },