@opensite/ui 2.7.1 → 2.7.2

package/dist/registry.js

@@ -8727,7 +8727,10 @@ function AboutInteractiveTabs({
         "div",
         {
           className: cn(
-            "flex overflow-x-auto gap-2 border-b scrollbar-none -mx-4 px-4 sm:mx-0 sm:px-0 sm:justify-center",
+            "flex sm:justify-center",
+            "border-b border-border/50",
+            "-mx-4 px-4 sm:mx-0 sm:px-0",
+            "overflow-x-auto gap-2 scrollbar-none",
             tabsContainerClassName
           ),
           children: tabs.map((tab) => /* @__PURE__ */ jsx(
@@ -8735,7 +8738,8 @@ function AboutInteractiveTabs({
             {
               onClick: () => handleTabChange(tab.id),
               className: cn(
-                "shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
+                "shrink-0 whitespace-nowrap px-6 py-3",
+                "text-sm font-medium transition-colors rounded-t-lg",
                 activeTab === tab.id ? cn(
                   "border-b-2 border-primary",
                   "bg-primary text-primary-foreground",
@@ -8743,7 +8747,8 @@ function AboutInteractiveTabs({
                 ) : cn(
                   "border-b-2 border-muted",
                   "bg-muted text-muted-foreground",
-                  "hover:bg-primary hover:text-primary-foreground hover:border-primary"
+                  "hover:bg-primary hover:text-primary-foreground hover:border-primary",
+                  "cursor-pointer"
                 ),
                 tabButtonClassName
               ),
@@ -8762,20 +8767,14 @@ function AboutInteractiveTabs({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              typeof activeContent.title === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn("text-3xl font-bold", tabContentTitleClassName),
-                  children: activeContent.title
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: tabContentTitleClassName, children: activeContent.title }),
+              typeof activeContent.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("font-bold", tabContentTitleClassName), children: activeContent.title }) : activeContent.title,
               typeof activeContent.description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: cn("mt-4 text-lg", tabContentDescriptionClassName),
                   children: activeContent.description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", tabContentDescriptionClassName), children: activeContent.description })
+              ) : activeContent.description
             ] }),
             activeContent.image && /* @__PURE__ */ jsx(
               Img,
@@ -8783,7 +8782,8 @@ function AboutInteractiveTabs({
                 src: activeContent.image.src,
                 alt: activeContent.image.alt,
                 className: cn(
-                  "w-full h-auto rounded-2xl object-cover lg:h-full",
+                  "aspect-video w-full h-full",
+                  "rounded-2xl shadow-xl object-cover",
                   tabContentImageClassName
                 ),
                 optixFlowConfig
@@ -8977,7 +8977,7 @@ function AboutStoryExpertise({
   className,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "hero",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -8996,6 +8996,7 @@ function AboutStoryExpertise({
       "div",
       {
         className: cn(
+          "bg-card text-card-foreground",
           "rounded-2xl border border-border/60 p-6 shadow-xl",
           highlightClassName
         ),
@@ -9012,7 +9013,7 @@ function AboutStoryExpertise({
                   children: highlight.label
                 }
               ) : highlight.label),
-              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
+              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
             ] })
           ] }),
           highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm"), children: highlight.description }) : highlight.description)
@@ -9037,7 +9038,7 @@ function AboutStoryExpertise({
             whileInView: { opacity: 1, scale: 1 },
             viewport: { once: true, margin: "-50px" },
             transition: { duration: 0.3, delay: idx * 0.05 },
-            className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
+            className: "flex items-start gap-4 rounded-2xl bg-card text-card-foreground p-6 shadow-md transition-all duration-300 hover:shadow-xl",
             children: [
               /* @__PURE__ */ jsx(
                 "div",
@@ -9049,7 +9050,7 @@ function AboutStoryExpertise({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { children: [
-                area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsx("h4", { className: "text-lg font-bold", children: area.title }) : area.title),
+                area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-lg font-bold", children: area.title }) : area.title),
                 area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm"), children: area.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: area.description }))
               ] })
             ]
@@ -9064,7 +9065,7 @@ function AboutStoryExpertise({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
       containerClassName,
@@ -9089,7 +9090,7 @@ function AboutStoryExpertise({
                       ),
                       children: eyebrow
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  ) : eyebrow),
                   heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                     "h2",
                     {
@@ -9099,7 +9100,7 @@ function AboutStoryExpertise({
                       ),
                       children: heading
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
+                  ) : heading)
                 ] }),
                 storyContent,
                 /* @__PURE__ */ jsx(
@@ -9125,7 +9126,8 @@ function AboutStoryExpertise({
                 "div",
                 {
                   className: cn(
-                    "relative overflow-hidden rounded-3xl border border-border shadow-2xl",
+                    "relative overflow-hidden rounded-3xl",
+                    "border border-border shadow-2xl aspect-square",
                     imageClassName
                   ),
                   children: [
@@ -9155,7 +9157,6 @@ function AboutStoryExpertise({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]"), children: "Our Expertise" }),
                 expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsx(
                   "h3",
                   {
@@ -9165,7 +9166,7 @@ function AboutStoryExpertise({
                     ),
                     children: expertiseHeading
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", expertiseHeadingClassName), children: expertiseHeading })),
+                ) : expertiseHeading),
                 expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsx(
                   "p",
                   {
@@ -9175,16 +9176,7 @@ function AboutStoryExpertise({
                     ),
                     children: expertiseDescription
                   }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "mx-auto mt-3 max-w-2xl",
-                      expertiseDescriptionClassName
-                    ),
-                    children: expertiseDescription
-                  }
-                ))
+                ) : expertiseDescription)
               ] }),
               expertiseAreasContent
             ]
@@ -9224,12 +9216,14 @@ function AboutNetworkSpotlight({
   const highlightsContent = useMemo(() => {
     if (highlightsSlot) return highlightsSlot;
     if (!highlights || highlights.length === 0) return null;
-    return /* @__PURE__ */ jsx("ul", { className: cn("mt-6 space-y-3", highlightsClassName), children: highlights.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 text-background/80", children: [
+    return /* @__PURE__ */ jsx("ul", { className: cn("mt-6 space-y-6 md:space-y-3", highlightsClassName), children: highlights.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
       /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "mt-1 flex size-fit p-2 items-center justify-center rounded-full bg-primary text-primary-foreground"
+            "flex items-center justify-center shrink-0",
+            "bg-primary text-primary-foreground",
+            "size-fit p-2 rounded-full"
           ),
           children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 14 })
         }
@@ -9237,34 +9231,6 @@ function AboutNetworkSpotlight({
       /* @__PURE__ */ jsx("span", { children: item })
     ] }, index)) });
   }, [highlightsSlot, highlights, highlightsClassName]);
-  useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          className: actionClassName,
-          asButton: true,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   const spotlightCardContent = useMemo(() => {
     if (spotlightCardSlot) return spotlightCardSlot;
     if (!spotlightCard) return null;
@@ -9272,23 +9238,26 @@ function AboutNetworkSpotlight({
       "div",
       {
         className: cn(
-          "rounded-2xl border bg-foreground/80 p-5 backdrop-blur-sm",
+          "bg-card text-card-foreground",
+          "rounded-2xl border p-5 backdrop-blur-sm",
           spotlightCardClassName
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(
+            spotlightCard.icon && /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
-                  "flex size-fit p-2 items-center justify-center rounded-full bg-primary text-primary-foreground"
+                  "flex items-center justify-center shrink-0",
+                  "bg-primary text-primary-foreground",
+                  "size-fit p-2 rounded-full"
                 ),
                 children: spotlightCard.icon
               }
             ),
             /* @__PURE__ */ jsxs("div", { children: [
               typeof spotlightCard.label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-bold uppercase tracking-[0.2em]"), children: spotlightCard.label }) : spotlightCard.label,
-              typeof spotlightCard.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-background", children: spotlightCard.title }) : spotlightCard.title
+              typeof spotlightCard.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-lg font-bold text-background", children: spotlightCard.title }) : spotlightCard.title
             ] })
           ] }),
           typeof spotlightCard.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-background/80", children: spotlightCard.description }) : spotlightCard.description
@@ -9320,7 +9289,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 aspect-square md:aspect-auto", children: [
+                children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-3xl shadow-2xl aspect-square", children: [
                   /* @__PURE__ */ jsx(
                     Img,
                     {
@@ -21842,7 +21811,7 @@ function CarouselScrollingFeatureShowcase({
                 "div",
                 {
                   className: cn(
-                    "aspect-square overflow-hidden rounded-xl",
+                    "aspect-square overflow-hidden rounded-xl shadow-xl",
                     imageClassName
                   ),
                   children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsx(
@@ -21881,7 +21850,7 @@ function CarouselScrollingFeatureShowcase({
                     feature.className
                   ),
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-xl shadow-xl", children: /* @__PURE__ */ jsx(
                       Img,
                       {
                         src: feature.image,
@@ -21906,7 +21875,7 @@ function CarouselScrollingFeatureShowcase({
                       ),
                       /* @__PURE__ */ jsxs("div", { children: [
                         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl md:text-2xl font-semibold", children: feature.title }) : feature.title),
-                        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg", children: feature.description }) : feature.description)
+                        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-base md:text-lg", children: feature.description }) : feature.description)
                       ] })
                     ] })
                   ]
@@ -36046,7 +36015,6 @@ function BlogTechInsights({
   secondaryPosts,
   secondaryPostsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -36058,7 +36026,8 @@ function BlogTechInsights({
   secondaryPostItemClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
@@ -36077,11 +36046,7 @@ function BlogTechInsights({
       Pressable,
       {
         asButton: true,
-        className: cn(
-          "ml-auto rounded-full border-foreground",
-          actionClassName,
-          readMoreClassName
-        ),
+        className: cn("ml-auto", actionClassName, readMoreClassName),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
           icon,
@@ -36112,7 +36077,7 @@ function BlogTechInsights({
         /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 rounded-md md:h-12 md:w-12", children: featuredPost.authorAvatar && /* @__PURE__ */ jsx(AvatarImage, { src: featuredPost.authorAvatar }) }),
         /* @__PURE__ */ jsxs("span", { className: "text-sm md:text-base", children: [
           featuredPost.author && /* @__PURE__ */ jsx("span", { className: "block", children: featuredPost.author }),
-          featuredPost.authorRole && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground md:text-sm", children: featuredPost.authorRole })
+          featuredPost.authorRole && /* @__PURE__ */ jsx("span", { className: "text-xs md:text-sm", children: featuredPost.authorRole })
         ] })
       ] })
     ] });
@@ -36160,7 +36125,7 @@ function BlogTechInsights({
             ) }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
               post.title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-md line-clamp-2", children: post.title }),
-              truncatedDescription && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-snug text-muted-foreground md:text-base line-clamp-2", children: truncatedDescription })
+              truncatedDescription && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-snug md:text-base line-clamp-2", children: truncatedDescription })
             ] })
           ]
         }
@@ -36192,64 +36157,53 @@ function BlogTechInsights({
       className: cn("dark relative", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col items-center gap-8 md:gap-14",
-            containerClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("w-full", headerClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-3xl font-bold md:text-4xl lg:text-5xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-start", children: [
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "mt-2 block text-sm text-muted-foreground md:text-base",
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-                readMoreActionContent
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(
-              "div",
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8 md:gap-14"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("w-full", headerClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : heading),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-start", children: [
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "span",
               {
                 className: cn(
-                  "grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
-                  contentClassName
+                  "mt-2 block text-sm md:text-base",
+                  descriptionClassName
                 ),
-                children: [
-                  featuredPostContent,
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "space-y-6 md:space-y-8",
-                        secondaryPostsClassName
-                      ),
-                      children: secondaryPostsContent
-                    }
-                  )
-                ]
+                children: description
               }
-            )
-          ]
-        }
-      )
+            ) : description),
+            readMoreActionContent
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              featuredPostContent,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("space-y-6 md:space-y-8", secondaryPostsClassName),
+                  children: secondaryPostsContent
+                }
+              )
+            ]
+          }
+        )
+      ] })
     }
   );
 }
@@ -36856,7 +36810,7 @@ function BlogMasonryFeaturedComponent({
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -36897,7 +36851,7 @@ function BlogMasonryFeaturedComponent({
                   (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
                   featuredPost.author && /* @__PURE__ */ jsx("span", { children: featuredPost.author })
                 ] }),
-                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg", children: featuredPost.title }) : featuredPost.title),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold", children: featuredPost.title }) : featuredPost.title),
                 (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm font-normal", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
@@ -36939,7 +36893,7 @@ function BlogMasonryFeaturedComponent({
                 (post.date || post.published) && post.author && "\xB7",
                 post.author && /* @__PURE__ */ jsx("span", { children: post.author })
               ] }),
-              post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg", children: post.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: post.title }))
+              post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children: post.title }) : post.title)
             ] })
           ]
         },
@@ -36952,7 +36906,7 @@ function BlogMasonryFeaturedComponent({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
       containerClassName,
@@ -37317,9 +37271,8 @@ var AppleCarousel = ({
                 "div",
                 {
                   className: cn(
-                    "flex flex-row justify-start gap-4 pl-4",
-                    "mx-auto max-w-7xl",
-                    // remove max-w-4xl if you want the carousel to span the full width of its container
+                    "flex flex-row justify-start",
+                    "mx-auto gap-4 pl-4",
                     containerClassName
                   ),
                   children: items.map((item, index) => /* @__PURE__ */ jsx(
@@ -37396,7 +37349,9 @@ var AppleCarouselCard = ({
       "div",
       {
         className: cn(
-          "relative z-40 p-4 md:p-8 text-shadow-lg",
+          "text-left text-white text-shadow-lg",
+          "relative z-40 p-4 md:p-8",
+          "text-balance",
           contentClassName
         ),
         children: [
@@ -37404,7 +37359,7 @@ var AppleCarouselCard = ({
             motion$1.p,
             {
               layoutId: layout ? `category-${card.category}-${index}` : void 0,
-              className: "text-left font-sans text-sm font-medium text-white md:text-base",
+              className: "text-sm font-bold md:text-base tracking-tight uppercase",
               children: card.category
             }
           ),
@@ -37412,7 +37367,7 @@ var AppleCarouselCard = ({
             motion$1.p,
             {
               layoutId: layout ? `title-${card.title}-${index}` : void 0,
-              className: "mt-2 max-w-xs text-left font-sans text-lg font-semibold text-balance text-white md:text-2xl",
+              className: "mt-2 text-lg md:text-2xl font-semibold",
               children: card.title
             }
           )
@@ -37425,7 +37380,9 @@ var AppleCarouselCard = ({
         src: card.src,
         alt: card.title,
         className: cn(
-          "absolute inset-0 z-10 h-full w-full object-cover brightness-50",
+          "absolute inset-0 z-10",
+          "h-full w-full object-cover",
+          action.type !== "none" ? "cursor-pointer transition-all duration-500 brightness-75 hover:brightness-50" : "brightness-75",
           imageClassName
         ),
         optixFlowConfig
@@ -37546,7 +37503,7 @@ function BlogCarouselAppleComponent({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       children: /* @__PURE__ */ jsx(
         AppleCarousel,
         {
@@ -39757,12 +39714,12 @@ function FaqSplitHelp({
   helpAction,
   helpSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   leftColumnClassName,
   headingClassName,
   descriptionClassName,
@@ -39794,14 +39751,14 @@ function FaqSplitHelp({
                     "transition-opacity duration-200 hover:no-underline hover:opacity-60",
                     accordionTriggerClassName
                   ),
-                  children: /* @__PURE__ */ jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
+                  children: /* @__PURE__ */ jsx("div", { className: "font-medium py-1 md:py-2 text-lg", children: item.question })
                 }
               ),
               /* @__PURE__ */ jsx(
                 AccordionContent,
                 {
-                  className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                  children: /* @__PURE__ */ jsx("div", { className: " lg:text-lg", children: item.answer })
+                  className: cn("mb-1 md:mb-2", accordionContentClassName),
+                  children: /* @__PURE__ */ jsx("div", { className: "text-base md:text-lg", children: item.answer })
                 }
               )
             ]
@@ -39824,9 +39781,12 @@ function FaqSplitHelp({
       "div",
       {
         className: cn(
-          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background),
+          "flex flex-col items-center",
+          "md:flex-row md:justify-between",
+          "mt-8 md:mt-16 p-6 lg:p-8",
+          "gap-4 text-center md:text-left",
+          "rounded-lg shadow-lg",
+          "bg-card text-card-foreground",
           helpSectionClassName
         ),
         children: [
@@ -39870,20 +39830,22 @@ function FaqSplitHelp({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10 lg:flex-row lg:gap-20", children: [
           /* @__PURE__ */ jsxs("div", { className: cn("lg:w-1/3", leftColumnClassName), children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h2",
               {
                 className: cn(
-                  "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl",
+                  "text-3xl lg:text-4xl font-semibold",
+                  "mb-3  md:mb-4 lg:mb-6",
                   headingClassName
                 ),
                 children: heading
               }
-            ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ) : heading),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base md:text-lg", descriptionClassName), children: description }) : description)
           ] }),
           itemsContent
         ] }),
@@ -95032,14 +94994,7 @@ function StatsImpactGrid({
   const renderStatIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
-    return /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
-      DynamicIcon,
-      {
-        name: stat.icon,
-        size: 32,
-        className: stat.iconColor || "text-primary"
-      }
-    ) });
+    return /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 32, className: stat.iconColor }) });
   }, []);
   const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
@@ -95067,7 +95022,7 @@ function StatsImpactGrid({
                 stat.suffix && /* @__PURE__ */ jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
               ] }),
               stat.label && /* @__PURE__ */ jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
-              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: stat.description }))
+              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "opacity-75", children: stat.description }) : stat.description)
             ] })
           },
           stat.id
@@ -95089,56 +95044,45 @@ function StatsImpactGrid({
     if (comparisonSlot) return comparisonSlot;
     if (!hasComparisonContent) return null;
     const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "mb-16 rounded-xl p-8",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background),
-          comparisonClassName
-        ),
-        children: /* @__PURE__ */ jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: comparisonHeading })),
-            comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: comparisonDescription })),
-            hasProgressBars && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "h-full bg-muted-foreground",
-                    style: { width: `${baselinePercent}%` }
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "h-full bg-primary",
-                    style: { width: `${targetPercent}%` }
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
-              ] })
-            ] })
+    return /* @__PURE__ */ jsx("div", { className: cn("mb-16 rounded-xl p-8", comparisonClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : comparisonHeading),
+        comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : comparisonDescription),
+        hasProgressBars && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-muted-foreground",
+                style: { width: `${baselinePercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
           ] }),
-          (baselineValue || targetValue) && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            baselineValue && /* @__PURE__ */ jsxs("div", { children: [
-              baselineLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
-              /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: baselineValue })
-            ] }),
-            baselineValue && targetValue && /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
-            targetValue && /* @__PURE__ */ jsxs("div", { children: [
-              targetLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
-              /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
-            ] })
-          ] }) })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary",
+                style: { width: `${targetPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
+          ] })
         ] })
-      }
-    );
+      ] }),
+      (baselineValue || targetValue) && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        baselineValue && /* @__PURE__ */ jsxs("div", { children: [
+          baselineLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
+          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: baselineValue })
+        ] }),
+        baselineValue && targetValue && /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
+        targetValue && /* @__PURE__ */ jsxs("div", { children: [
+          targetLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
+          /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
+        ] })
+      ] }) })
+    ] }) });
   }, [
     comparisonSlot,
     hasComparisonContent,
@@ -95188,7 +95132,7 @@ function StatsImpactGrid({
     if (ctaSlot) return ctaSlot;
     if (!ctaHeading && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("text-center", ctaClassName), children: [
-      ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: ctaHeading })),
+      ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : ctaHeading),
       actionsContent
     ] });
   }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
@@ -95210,22 +95154,22 @@ function StatsImpactGrid({
             "h2",
             {
               className: cn(
-                "mb-4 text-3xl font-bold md:text-5xl",
+                "mb-4 text-3xl font-bold md:text-5xl text-balance",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
               className: cn(
-                "mx-auto max-w-3xl text-lg text-muted-foreground",
+                "mx-auto max-w-3xl text-lg text-balance",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          ) : description)
         ] }),
         statsContent,
         comparisonContent,