@opensite/ui 1.7.8 → 1.7.9

package/dist/registry.cjs

@@ -8380,8 +8380,8 @@ function ContactFloatingBanner({
   badgeText,
   message,
   buttonText,
-  buttonIcon = "lucide/arrow-right",
-  buttonHref = "#",
+  buttonIcon,
+  buttonHref,
   actions,
   actionsSlot,
   className,
@@ -8389,13 +8389,24 @@ function ContactFloatingBanner({
   bannerContentClassName,
   messageClassName,
   badgeClassName,
-  background = "default"
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  pattern,
+  patternOpacity
 }) {
   const actionsContent = React57__namespace.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 {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -8414,35 +8425,73 @@ function ContactFloatingBanner({
     }
     return null;
   }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "lg", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8", bannerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("pointer-events-auto flex items-center justify-between gap-x-6 bg-primary px-6 py-2.5 sm:rounded-xl sm:py-3 sm:pl-4 sm:pr-3.5", bannerContentClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-sm leading-6 text-primary-foreground", messageClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", badgeClassName), children: badgeText }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          viewBox: "0 0 2 2",
-          className: "mx-2 inline h-0.5 w-0.5 fill-current",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 })
+          className: cn(
+            "pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8",
+            bannerClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "pointer-events-auto flex items-center justify-between gap-x-6 bg-primary px-6 py-2.5 sm:rounded-xl sm:py-3 sm:pl-4 sm:pr-3.5",
+                bannerContentClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "p",
+                  {
+                    className: cn(
+                      "text-sm leading-6 text-primary-foreground",
+                      messageClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", badgeClassName), children: badgeText }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          viewBox: "0 0 2 2",
+                          className: "mx-2 inline h-0.5 w-0.5 fill-current",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 })
+                        }
+                      ),
+                      message
+                    ]
+                  }
+                ),
+                actionsSlot || actions ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
+                  Pressable,
+                  {
+                    href: buttonHref,
+                    variant: "secondary",
+                    size: "sm",
+                    className: "flex items-center gap-x-1",
+                    asButton: true,
+                    children: [
+                      buttonText,
+                      typeof buttonIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: buttonIcon, size: 16 }) : buttonIcon
+                    ]
+                  }
+                )
+              ]
+            }
+          )
         }
-      ),
-      message
-    ] }),
-    actionsSlot || actions ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: buttonHref,
-        variant: "secondary",
-        size: "sm",
-        className: "flex items-center gap-x-1",
-        asButton: true,
-        children: [
-          buttonText,
-          typeof buttonIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: buttonIcon, size: 16 }) : buttonIcon
-        ]
-      }
-    )
-  ] }) }) });
+      )
+    }
+  );
 }
 function Label({
   className,
@@ -9572,7 +9621,8 @@ function ContactCatering({
   actions,
   actionsSlot,
   className,
-  containerClassName,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -9580,10 +9630,9 @@ function ContactCatering({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -9663,7 +9712,14 @@ function ContactCatering({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -9689,11 +9745,30 @@ function ContactCatering({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -9941,23 +10016,16 @@ function ContactCatering({
                       onCheckedChange: (checked) => form.setFieldValue("tasting", checked === true)
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "tasting", className: "cursor-pointer font-normal", children: "I'm interested in scheduling a tasting" })
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Label,
+                    {
+                      htmlFor: "tasting",
+                      className: "cursor-pointer font-normal",
+                      children: "I'm interested in scheduling a tasting"
+                    }
+                  )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-lg border p-4", getNestedCardBg(background, "subtle"), getNestedCardTextColor(background)), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DynamicIcon,
-                  {
-                    name: "lucide/chef-hat",
-                    size: 20,
-                    className: "mt-0.5 text-muted-foreground"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Custom Menus Available" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "We'll work with you to create a custom menu that perfectly fits your event and budget. Our team will contact you within 24 hours to discuss options." })
-                ] })
-              ] }) }),
               actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                 Pressable,
                 {
@@ -9967,7 +10035,14 @@ function ContactCatering({
                   asButton: true,
                   disabled: form.isSubmitting,
                   children: [
-                    buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/utensils", size: 16, className: "mr-2" }),
+                    buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/utensils",
+                        size: 16,
+                        className: "mr-2"
+                      }
+                    ),
                     buttonText
                   ]
                 }
@@ -10008,7 +10083,6 @@ function ContactConsultation({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -10016,10 +10090,11 @@ function ContactConsultation({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background,
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -10083,7 +10158,14 @@ function ContactConsultation({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -10109,11 +10191,30 @@ function ContactConsultation({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -10262,20 +10363,6 @@ function ContactConsultation({
                   )
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-lg border p-4", getNestedCardBg(background, "subtle"), getNestedCardTextColor(background)), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DynamicIcon,
-                  {
-                    name: "lucide/info",
-                    size: 20,
-                    className: "mt-0.5 text-muted-foreground"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "What happens next?" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "We'll review your request and contact you within 24 hours to schedule your consultation at a time that works for you." })
-                ] })
-              ] }) }),
               actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                 Pressable,
                 {
@@ -10285,7 +10372,14 @@ function ContactConsultation({
                   asButton: true,
                   disabled: form.isSubmitting,
                   children: [
-                    buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/calendar-check", size: 16, className: "mr-2" }),
+                    buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/calendar-check",
+                        size: 16,
+                        className: "mr-2"
+                      }
+                    ),
                     buttonText
                   ]
                 }
@@ -15139,7 +15233,11 @@ function ContactDark({
 }
 var USE_CASES = [
   { value: "automation", label: "Workflow Automation", icon: "lucide/zap" },
-  { value: "analytics", label: "Analytics & Reporting", icon: "lucide/bar-chart-3" },
+  {
+    value: "analytics",
+    label: "Analytics & Reporting",
+    icon: "lucide/bar-chart-3"
+  },
   { value: "collaboration", label: "Team Collaboration", icon: "lucide/users" }
 ];
 var TEAM_SIZES = [
@@ -15163,7 +15261,6 @@ function ContactDemo({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -15171,10 +15268,11 @@ function ContactDemo({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background,
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -15239,7 +15337,14 @@ function ContactDemo({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -15265,11 +15370,21 @@ function ContactDemo({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -15431,12 +15546,18 @@ function ContactDemo({
                   asButton: true,
                   disabled: form.isSubmitting,
                   children: [
-                    buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/calendar", size: 16, className: "mr-2" }),
+                    buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/calendar",
+                        size: 16,
+                        className: "mr-2"
+                      }
+                    ),
                     buttonText
                   ]
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xs text-muted-foreground", children: "We'll contact you within 24 hours to schedule your personalized demo." })
+              )
             ]
           }
         ) }) })
@@ -15472,7 +15593,6 @@ function ContactEmergency({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -15480,10 +15600,11 @@ function ContactEmergency({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background,
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -15539,14 +15660,21 @@ function ContactEmergency({
     }
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const selectedPriority = PRIORITIES.find(
+  PRIORITIES.find(
     (p) => p.value === form.values.priority
   );
   const actionsContent = React57__namespace.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 {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -15572,11 +15700,21 @@ function ContactEmergency({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-0", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           forms.Form,
@@ -15588,14 +15726,7 @@ function ContactEmergency({
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b p-6 md:border-b-0 md:border-r", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/alert-triangle",
-                      size: 20,
-                      className: "text-muted-foreground"
-                    }
-                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/alert-triangle", size: 20 }),
                   /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: "Priority Level" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "priority", children: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: PRIORITIES.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -15643,32 +15774,18 @@ function ContactEmergency({
                 /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-6" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border p-4", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/phone",
-                        size: 20,
-                        className: "text-muted-foreground"
-                      }
-                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/phone", size: 20 }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Call for Critical Issues" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "+1 (555) 911-0000" })
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm ", children: "+1 (555) 911-0000" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Available 24/7 for critical emergencies only" })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs", children: "Available 24/7 for critical emergencies only" })
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/send",
-                      size: 20,
-                      className: "text-muted-foreground"
-                    }
-                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/send", size: 20 }),
                   /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: "Describe Your Issue" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -15743,10 +15860,6 @@ function ContactEmergency({
                     )
                   ] }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Expected response:" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: selectedPriority?.response })
-                  ] }),
                   actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                     Pressable,
                     {
@@ -15779,7 +15892,6 @@ function ContactEvent({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -15787,10 +15899,11 @@ function ContactEvent({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -15849,7 +15962,14 @@ function ContactEvent({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -15875,11 +15995,30 @@ function ContactEvent({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -16343,7 +16482,6 @@ function ContactFeedback({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -16351,10 +16489,11 @@ function ContactFeedback({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -16407,7 +16546,14 @@ function ContactFeedback({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -16433,11 +16579,30 @@ function ContactFeedback({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -16505,7 +16670,6 @@ function ContactFitness({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -16513,10 +16677,11 @@ function ContactFitness({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -16575,7 +16740,14 @@ function ContactFitness({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -16601,11 +16773,30 @@ function ContactFitness({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -16715,7 +16906,6 @@ function ContactGuest({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -16723,10 +16913,11 @@ function ContactGuest({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -16785,7 +16976,14 @@ function ContactGuest({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -16811,11 +17009,21 @@ function ContactGuest({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -16925,7 +17133,6 @@ function ContactImage({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -16933,10 +17140,11 @@ function ContactImage({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -16995,7 +17203,14 @@ function ContactImage({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -17021,11 +17236,21 @@ function ContactImage({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed ", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -17135,7 +17360,6 @@ function ContactInsurance({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -17143,10 +17367,11 @@ function ContactInsurance({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -17205,7 +17430,14 @@ function ContactInsurance({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -17231,11 +17463,30 @@ function ContactInsurance({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -17345,7 +17596,6 @@ function ContactInterview({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -17353,10 +17603,11 @@ function ContactInterview({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -17415,12 +17666,28 @@ function ContactInterview({
     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__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
+        const {
           label,
-          iconAfter
-        ] }) }, index);
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            asButton: true,
+            className: actionClassName,
+            ...pressableProps,
+            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              icon,
+              label,
+              iconAfter
+            ] })
+          },
+          index
+        );
       });
     }
     return null;
@@ -17432,11 +17699,30 @@ function ContactInterview({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -17546,7 +17832,6 @@ function ContactLocations({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -17554,10 +17839,11 @@ function ContactLocations({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -17616,12 +17902,28 @@ function ContactLocations({
     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__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
+        const {
           label,
-          iconAfter
-        ] }) }, index);
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            asButton: true,
+            className: actionClassName,
+            ...pressableProps,
+            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              icon,
+              label,
+              iconAfter
+            ] })
+          },
+          index
+        );
       });
     }
     return null;
@@ -17633,11 +17935,30 @@ function ContactLocations({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-relaxed text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -22370,13 +22691,13 @@ function ContactHelpCenter({
   description,
   cardTitle,
   contactItems,
-  background = "white",
-  spacing = "lg",
+  background,
   pattern,
   patternOpacity,
   className,
   contactItemsSlot,
-  containerClassName,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   leftColumnClassName,
   eyebrowClassName,
@@ -22393,12 +22714,12 @@ function ContactHelpCenter({
       Pressable,
       {
         href: item.href,
-        className: "flex items-start gap-4 rounded-lg p-4 transition-colors hover:bg-muted/40",
+        className: "flex items-start gap-4 rounded-lg p-4 ",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: item.title }),
-            item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: item.subtitle }) : null
+            item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: item.subtitle }) : null
           ] })
         ]
       },
@@ -22413,71 +22734,45 @@ function ContactHelpCenter({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Container, { className: cn("", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "rounded-3xl bg-linear-to-br from-primary/5 via-background to-background p-8 md:p-12",
-            contentClassName
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-5", leftColumnClassName), children: [
-              eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-sm font-semibold uppercase tracking-[0.2em] text-primary",
-                    eyebrowClassName
-                  ),
-                  children: eyebrow
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: eyebrowClassName, children: eyebrow })),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-3xl font-bold md:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn(
-                  "rounded-2xl bg-background p-8 shadow-lg",
-                  cardPanelClassName
-                ),
-                children: [
-                  cardTitle ? typeof cardTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "h3",
-                    {
-                      className: cn(
-                        "text-xl font-bold",
-                        cardTitleClassName
-                      ),
-                      children: cardTitle
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardTitleClassName, children: cardTitle }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 space-y-4", contactItemsClassName), children: renderContactItems() })
-                ]
-              }
-            )
-          ] })
-        }
-      ) })
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-3xl p-8 md:p-12", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-5", leftColumnClassName), children: [
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm font-semibold uppercase tracking-[0.2em]",
+                eyebrowClassName
+              ),
+              children: eyebrow
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: eyebrowClassName, children: eyebrow })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "rounded-2xl bg-background p-8 shadow-lg",
+              cardPanelClassName
+            ),
+            children: [
+              cardTitle ? typeof cardTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-bold", cardTitleClassName), children: cardTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardTitleClassName, children: cardTitle }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 space-y-4", contactItemsClassName), children: renderContactItems() })
+            ]
+          }
+        )
+      ] }) }) })
     }
   );
 }
@@ -53806,12 +54101,12 @@ function HeroPremiumSplitAvatars({
   socialProofText,
   image,
   imageSlot,
-  background,
-  pattern,
-  patternOpacity,
   className,
   spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background,
+  pattern,
+  patternOpacity,
   contentClassName,
   headingClassName,
   descriptionClassName,