@opensite/ui 1.5.9 → 1.6.0

package/dist/services-list-vertical-tags.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
 import 'react/jsx-runtime';
-import './blocks-Cohq4eio.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/services-list-vertical-tags.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
 import 'react/jsx-runtime';
-import './blocks-k17uluAz.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/services-list-video-showcase.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/services-list-video-showcase.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/social-link-icon.d.cts

@@ -3,7 +3,7 @@ import { PressableProps } from './pressable.cjs';
 import { SocialPlatformName } from '@opensite/hooks/usePlatformFromUrl';
 export { SocialPlatformName } from '@opensite/hooks/usePlatformFromUrl';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -75,6 +75,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
  * />
  * ```
  */
-declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
+declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
 
 export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };

package/dist/social-link-icon.d.ts

@@ -3,7 +3,7 @@ import { PressableProps } from './pressable.js';
 import { SocialPlatformName } from '@opensite/hooks/usePlatformFromUrl';
 export { SocialPlatformName } from '@opensite/hooks/usePlatformFromUrl';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -75,6 +75,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
  * />
  * ```
  */
-declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
+declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
 
 export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };

package/dist/stats-animated-counter.cjs

@@ -586,12 +586,12 @@ function StatsAnimatedCounter({
   statsSlot,
   animationDuration = 2e3,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -651,47 +651,41 @@ function StatsAnimatedCounter({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: sectionRef,
-          className: cn("mx-auto max-w-5xl", containerClassName),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-4 text-3xl font-bold md:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mx-auto max-w-2xl text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
-            ] }),
-            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
-                  statsClassName
-                ),
-                children: statsContent
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: "relative", children: [
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+        ] }),
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+              statsClassName
+            ),
+            children: statsContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/stats-animated-counter.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -142,6 +142,6 @@ interface StatsAnimatedCounterProps {
  * />
  * ```
  */
-declare function StatsAnimatedCounter({ heading, description, stats, statsSlot, animationDuration, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, contentClassName, headingClassName, descriptionClassName, statsClassName, statValueClassName, statLabelClassName, statIconClassName, }: StatsAnimatedCounterProps): react_jsx_runtime.JSX.Element;
+declare function StatsAnimatedCounter({ heading, description, stats, statsSlot, animationDuration, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, statsClassName, statValueClassName, statLabelClassName, statIconClassName, }: StatsAnimatedCounterProps): react_jsx_runtime.JSX.Element;
 
 export { type AnimatedStat, StatsAnimatedCounter, type StatsAnimatedCounterProps };

package/dist/stats-animated-counter.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -142,6 +142,6 @@ interface StatsAnimatedCounterProps {
  * />
  * ```
  */
-declare function StatsAnimatedCounter({ heading, description, stats, statsSlot, animationDuration, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, contentClassName, headingClassName, descriptionClassName, statsClassName, statValueClassName, statLabelClassName, statIconClassName, }: StatsAnimatedCounterProps): react_jsx_runtime.JSX.Element;
+declare function StatsAnimatedCounter({ heading, description, stats, statsSlot, animationDuration, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, statsClassName, statValueClassName, statLabelClassName, statIconClassName, }: StatsAnimatedCounterProps): react_jsx_runtime.JSX.Element;
 
 export { type AnimatedStat, StatsAnimatedCounter, type StatsAnimatedCounterProps };

package/dist/stats-animated-counter.js

@@ -565,12 +565,12 @@ function StatsAnimatedCounter({
   statsSlot,
   animationDuration = 2e3,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -630,47 +630,41 @@ function StatsAnimatedCounter({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: sectionRef,
-          className: cn("mx-auto max-w-5xl", containerClassName),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-4 text-3xl font-bold md:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mx-auto max-w-2xl text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
-            ] }),
-            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
-                  statsClassName
-                ),
-                children: statsContent
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: "relative", children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+        ] }),
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+              statsClassName
+            ),
+            children: statsContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/stats-bar-comparison.cjs

@@ -478,12 +478,12 @@ function StatsBarComparison({
   comparisonsSlot,
   animate = true,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -593,39 +593,33 @@ function StatsBarComparison({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: sectionRef,
-          className: cn("mx-auto max-w-4xl", containerClassName),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-              badgeContent,
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-4 text-3xl font-bold md:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mx-auto max-w-2xl text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
-            ] }),
-            (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: "relative", children: [
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+        ] }),
+        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
+      ] })
     }
   );
 }

package/dist/stats-bar-comparison.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -177,6 +177,6 @@ interface StatsBarComparisonProps {
  * />
  * ```
  */
-declare function StatsBarComparison({ badge, badgeSlot, heading, description, comparisons, comparisonsSlot, animate, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, comparisonsClassName, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName, }: StatsBarComparisonProps): react_jsx_runtime.JSX.Element;
+declare function StatsBarComparison({ badge, badgeSlot, heading, description, comparisons, comparisonsSlot, animate, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, comparisonsClassName, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName, }: StatsBarComparisonProps): react_jsx_runtime.JSX.Element;
 
 export { type ComparisonBar, type ComparisonGroup, StatsBarComparison, type StatsBarComparisonProps };

package/dist/stats-bar-comparison.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -177,6 +177,6 @@ interface StatsBarComparisonProps {
  * />
  * ```
  */
-declare function StatsBarComparison({ badge, badgeSlot, heading, description, comparisons, comparisonsSlot, animate, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, comparisonsClassName, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName, }: StatsBarComparisonProps): react_jsx_runtime.JSX.Element;
+declare function StatsBarComparison({ badge, badgeSlot, heading, description, comparisons, comparisonsSlot, animate, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, comparisonsClassName, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName, }: StatsBarComparisonProps): react_jsx_runtime.JSX.Element;
 
 export { type ComparisonBar, type ComparisonGroup, StatsBarComparison, type StatsBarComparisonProps };

package/dist/stats-bar-comparison.js

@@ -457,12 +457,12 @@ function StatsBarComparison({
   comparisonsSlot,
   animate = true,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -572,39 +572,33 @@ function StatsBarComparison({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: sectionRef,
-          className: cn("mx-auto max-w-4xl", containerClassName),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-              badgeContent,
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-4 text-3xl font-bold md:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mx-auto max-w-2xl text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
-            ] }),
-            (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: "relative", children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+        ] }),
+        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
+      ] })
     }
   );
 }

package/dist/stats-card-group.cjs

@@ -547,12 +547,12 @@ function StatsCardGroup({
   avatars,
   avatarsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   cardClassName,
   statsClassName,
   statValueClassName,
@@ -597,14 +597,20 @@ function StatsCardGroup({
           },
           avatarIndex
         )),
-        avatars.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-          "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background text-xs font-medium",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background)
-        ), children: [
-          "+",
-          avatars.length - 4
-        ] })
+        avatars.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background text-xs font-medium",
+              getNestedCardBg(background, "muted"),
+              getNestedCardTextColor(background)
+            ),
+            children: [
+              "+",
+              avatars.length - 4
+            ]
+          }
+        )
       ] });
     },
     [avatarsSlot, avatars, background, avatarsClassName, optixFlowConfig]
@@ -655,12 +661,19 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-        "rounded-xl border p-8",
-        getNestedCardBg(background, "card"),
-        getNestedCardTextColor(background),
-        cardClassName
-      ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-xl border p-8",
+            getNestedCardBg(background, "card"),
+            getNestedCardTextColor(background),
+            cardClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent })
+        }
+      ) })
     }
   );
 }

package/dist/stats-card-group.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -149,6 +149,6 @@ interface StatsCardGroupProps {
  * />
  * ```
  */
-declare function StatsCardGroup({ stats, statsSlot, avatars, avatarsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, cardClassName, statsClassName, statValueClassName, statLabelClassName, statIconClassName, avatarsClassName, optixFlowConfig, }: StatsCardGroupProps): react_jsx_runtime.JSX.Element;
+declare function StatsCardGroup({ stats, statsSlot, avatars, avatarsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, cardClassName, statsClassName, statValueClassName, statLabelClassName, statIconClassName, avatarsClassName, optixFlowConfig, }: StatsCardGroupProps): react_jsx_runtime.JSX.Element;
 
 export { type CardGroupStat, StatsCardGroup, type StatsCardGroupProps };