@opensite/ui 3.7.8 → 3.8.0

package/dist/registry.cjs

@@ -15069,7 +15069,7 @@ function ContactDemo({
                   as: "h2",
                   text: heading,
                   className: cn(
-                    "text-5xl lg:text-6xl xl:text-7xl text-pretty font-bold text-left md:text-center",
+                    "justify-start text-left text-5xl font-bold text-pretty md:justify-center md:text-center lg:text-6xl xl:text-7xl",
                     headingClassName
                   ),
                   animateBy: "words",
@@ -35827,7 +35827,6 @@ function BlogCardsTaglineCta({
   postsSlot,
   readMoreText,
   className,
-  containerClassName,
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -35837,7 +35836,8 @@ function BlogCardsTaglineCta({
   postCardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
@@ -35881,7 +35881,7 @@ function BlogCardsTaglineCta({
         Card,
         {
           className: cn(
-            "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
+            "grid grid-rows-[auto_auto_1fr_auto] gap-4 overflow-hidden pt-0",
             postCardClassName
           ),
           children: [
@@ -35896,13 +35896,14 @@ function BlogCardsTaglineCta({
                     src: post.image,
                     alt: postTitle,
                     className: "h-full w-full object-cover object-center",
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 )
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, children: post.title }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: postSummary }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: post.image ? "pt-0" : "pt-6", children: post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, children: post.title }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-70 line-clamp-4", children: postSummary }) }),
             /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(
               pressable.Pressable,
               {
@@ -35936,60 +35937,52 @@ function BlogCardsTaglineCta({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "container mx-auto flex flex-col items-center gap-16 lg:px-16",
-            containerClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn(
-                  "text-center flex flex-col items-center px-4 md:px-0",
-                  headerClassName
-                ),
-                children: [
-                  badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "h2",
-                    {
-                      className: cn(
-                        "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
-                        headingClassName
-                      ),
-                      children: heading
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
-                        descriptionClassName
-                      ),
-                      children: description
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-                  ctaActionContent
-                ]
-              }
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex flex-col items-center gap-16 lg:px-16", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "text-center flex flex-col items-center px-4 md:px-0",
+              headerClassName
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
-                  postsClassName
-                ),
-                children: postsContent
-              }
-            )
-          ]
-        }
-      )
+            children: [
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-8 md:text-base max-w-full md:max-w-md lg:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              ctaActionContent
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
+              postsClassName
+            ),
+            children: postsContent
+          }
+        )
+      ] })
     }
   );
 }
@@ -36910,11 +36903,11 @@ function BlogHorizontalCards({
                 )
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm opacity-70", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-start items-center gap-3 md:gap-4 text-sm flex-wrap", children: [
                 postLabel && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: postLabel }),
-                post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.author }),
-                postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: postDate })
+                post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: post.author }),
+                postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: postDate })
               ] }),
               post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
               postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
@@ -36946,31 +36939,46 @@ function BlogHorizontalCards({
       pattern,
       patternOpacity,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
-          badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h2",
-            {
-              className: cn(
-                "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : description)
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-6 md:gap-12", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("max-w-full md:max-w-3xl text-left", headerClassName),
+            children: [
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "max-w-full md:max-w-3xl space-y-16 md:space-y-24",
+              postsClassName
+            ),
+            children: postsContent
+          }
+        ),
         (ctaSlot || ctaAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })
       ] })
     }
@@ -99686,7 +99694,7 @@ function StatsBarComparison({
   const badgeContent = React30.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
   }, [badgeSlot, badge, badgeClassName]);
   const comparisonsContent = React30.useMemo(() => {
     if (comparisonsSlot) return comparisonsSlot;
@@ -99695,9 +99703,7 @@ function StatsBarComparison({
       "div",
       {
         className: cn(
-          "rounded-xl border p-6",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background),
+          "rounded-xl border p-6 bg-card text-card-foreground",
           group.className,
           groupCardClassName
         ),
@@ -99708,7 +99714,7 @@ function StatsBarComparison({
               className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
               children: group.title
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
+          ) : group.title),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bar.className, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
@@ -99719,7 +99725,6 @@ function StatsBarComparison({
               {
                 className: cn(
                   "h-3 w-full overflow-hidden rounded-full",
-                  getNestedCardBg(background, "muted"),
                   barTrackClassName
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -99777,17 +99782,17 @@ function StatsBarComparison({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-muted-foreground",
+                "mx-auto max-w-full md:max-w-md text-balance opacity-70",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+          ) : description)
         ] }),
         (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
       ] })

package/dist/registry.js

@@ -15029,7 +15029,7 @@ function ContactDemo({
                   as: "h2",
                   text: heading,
                   className: cn(
-                    "text-5xl lg:text-6xl xl:text-7xl text-pretty font-bold text-left md:text-center",
+                    "justify-start text-left text-5xl font-bold text-pretty md:justify-center md:text-center lg:text-6xl xl:text-7xl",
                     headingClassName
                   ),
                   animateBy: "words",
@@ -35787,7 +35787,6 @@ function BlogCardsTaglineCta({
   postsSlot,
   readMoreText,
   className,
-  containerClassName,
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -35797,7 +35796,8 @@ function BlogCardsTaglineCta({
   postCardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
@@ -35841,7 +35841,7 @@ function BlogCardsTaglineCta({
         Card,
         {
           className: cn(
-            "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
+            "grid grid-rows-[auto_auto_1fr_auto] gap-4 overflow-hidden pt-0",
             postCardClassName
           ),
           children: [
@@ -35856,13 +35856,14 @@ function BlogCardsTaglineCta({
                     src: post.image,
                     alt: postTitle,
                     className: "h-full w-full object-cover object-center",
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 )
               }
             ) }),
-            /* @__PURE__ */ jsx(CardHeader, { children: post.title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, children: post.title }) }) }),
-            /* @__PURE__ */ jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: postSummary }) }),
+            /* @__PURE__ */ jsx(CardHeader, { className: post.image ? "pt-0" : "pt-6", children: post.title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, children: post.title }) }) }),
+            /* @__PURE__ */ jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsx("p", { className: "opacity-70 line-clamp-4", children: postSummary }) }),
             /* @__PURE__ */ jsx(CardFooter, { children: readMoreText && /* @__PURE__ */ jsxs(
               Pressable,
               {
@@ -35896,60 +35897,52 @@ function BlogCardsTaglineCta({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "container mx-auto flex flex-col items-center gap-16 lg:px-16",
-            containerClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "text-center flex flex-col items-center px-4 md:px-0",
-                  headerClassName
-                ),
-                children: [
-                  badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                    "h2",
-                    {
-                      className: cn(
-                        "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
-                        headingClassName
-                      ),
-                      children: heading
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
-                        descriptionClassName
-                      ),
-                      children: description
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-                  ctaActionContent
-                ]
-              }
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex flex-col items-center gap-16 lg:px-16", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "text-center flex flex-col items-center px-4 md:px-0",
+              headerClassName
             ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
-                  postsClassName
-                ),
-                children: postsContent
-              }
-            )
-          ]
-        }
-      )
+            children: [
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-8 md:text-base max-w-full md:max-w-md lg:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              ctaActionContent
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
+              postsClassName
+            ),
+            children: postsContent
+          }
+        )
+      ] })
     }
   );
 }
@@ -36870,11 +36863,11 @@ function BlogHorizontalCards({
                 )
               }
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm opacity-70", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-start items-center gap-3 md:gap-4 text-sm flex-wrap", children: [
                 postLabel && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: postLabel }),
-                post.author && /* @__PURE__ */ jsx("span", { children: post.author }),
-                postDate && /* @__PURE__ */ jsx("span", { children: postDate })
+                post.author && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: post.author }),
+                postDate && /* @__PURE__ */ jsx("span", { className: "opacity-70", children: postDate })
               ] }),
               post.title && /* @__PURE__ */ jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
               postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
@@ -36906,31 +36899,46 @@ function BlogHorizontalCards({
       pattern,
       patternOpacity,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
-          badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: cn(
-                "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : heading),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : description)
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 md:gap-12", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("max-w-full md:max-w-3xl text-left", headerClassName),
+            children: [
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "max-w-full md:max-w-3xl space-y-16 md:space-y-24",
+              postsClassName
+            ),
+            children: postsContent
+          }
+        ),
         (ctaSlot || ctaAction) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })
       ] })
     }
@@ -99646,7 +99654,7 @@ function StatsBarComparison({
   const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
-    return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
+    return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
   }, [badgeSlot, badge, badgeClassName]);
   const comparisonsContent = useMemo(() => {
     if (comparisonsSlot) return comparisonsSlot;
@@ -99655,9 +99663,7 @@ function StatsBarComparison({
       "div",
       {
         className: cn(
-          "rounded-xl border p-6",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background),
+          "rounded-xl border p-6 bg-card text-card-foreground",
           group.className,
           groupCardClassName
         ),
@@ -99668,7 +99674,7 @@ function StatsBarComparison({
               className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
               children: group.title
             }
-          ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
+          ) : group.title),
           /* @__PURE__ */ jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxs("div", { className: bar.className, children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
               /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
@@ -99679,7 +99685,6 @@ function StatsBarComparison({
               {
                 className: cn(
                   "h-3 w-full overflow-hidden rounded-full",
-                  getNestedCardBg(background, "muted"),
                   barTrackClassName
                 ),
                 children: /* @__PURE__ */ jsx(
@@ -99737,17 +99742,17 @@ function StatsBarComparison({
               ),
               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-2xl text-muted-foreground",
+                "mx-auto max-w-full md:max-w-md text-balance opacity-70",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+          ) : description)
         ] }),
         (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
       ] })