@opensite/ui 2.3.2 → 2.3.4

package/dist/about-startup-team.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-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 { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface SidebarLinkItem {
@@ -125,6 +125,6 @@ interface AboutStartupTeamProps {
      */
     allTabLabel?: React.ReactNode;
 }
-declare function AboutStartupTeam({ className, containerClassName, title, titleClassName, description, descriptionClassName, sidebarLinks, sidebarSlot, sidebarClassName, teamTitle, teamTitleClassName, teamMembers, teamMembersSlot, teamMembersClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, defaultActiveTab, onTabChange, allTabLabel, }: AboutStartupTeamProps): React.JSX.Element;
+declare function AboutStartupTeam({ className, title, titleClassName, description, descriptionClassName, sidebarLinks, sidebarSlot, sidebarClassName, teamTitle, teamTitleClassName, teamMembers, teamMembersSlot, teamMembersClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, defaultActiveTab, onTabChange, allTabLabel, }: AboutStartupTeamProps): React.JSX.Element;
 
 export { AboutStartupTeam, type AboutStartupTeamProps };

package/dist/about-startup-team.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface SidebarLinkItem {
@@ -125,6 +125,6 @@ interface AboutStartupTeamProps {
      */
     allTabLabel?: React.ReactNode;
 }
-declare function AboutStartupTeam({ className, containerClassName, title, titleClassName, description, descriptionClassName, sidebarLinks, sidebarSlot, sidebarClassName, teamTitle, teamTitleClassName, teamMembers, teamMembersSlot, teamMembersClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, defaultActiveTab, onTabChange, allTabLabel, }: AboutStartupTeamProps): React.JSX.Element;
+declare function AboutStartupTeam({ className, title, titleClassName, description, descriptionClassName, sidebarLinks, sidebarSlot, sidebarClassName, teamTitle, teamTitleClassName, teamMembers, teamMembersSlot, teamMembersClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, defaultActiveTab, onTabChange, allTabLabel, }: AboutStartupTeamProps): React.JSX.Element;
 
 export { AboutStartupTeam, type AboutStartupTeamProps };

package/dist/about-startup-team.js

@@ -872,7 +872,6 @@ Section.displayName = "Section";
 var ALL_TAB_VALUE = "__all__";
 function AboutStartupTeam({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -887,7 +886,8 @@ function AboutStartupTeam({
   teamMembersClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   defaultActiveTab,
@@ -939,10 +939,7 @@ function AboutStartupTeam({
         onClick: () => handleTabChange(link.value),
         className: cn(
           "block w-full text-left rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(
-            getTextColor(background, "muted"),
-            "hover:bg-muted"
-          )
+          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(getTextColor(background, "muted"), "hover:bg-muted")
         ),
         children: link.label
       },
@@ -975,18 +972,24 @@ function AboutStartupTeam({
               className: "mx-auto h-24 w-24 rounded-full object-cover",
               optixFlowConfig
             }
-          ) : /* @__PURE__ */ jsx("div", { className: cn(
-            "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: /* @__PURE__ */ jsx(
-            DynamicIcon,
+          ) : /* @__PURE__ */ jsx(
+            "div",
             {
-              name: "lucide/user",
-              size: 40,
-              className: cn(getTextColor(background, "muted"))
+              className: cn(
+                "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
+                getNestedCardBg(background),
+                getNestedCardTextColor(background)
+              ),
+              children: /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/user",
+                  size: 40,
+                  className: cn(getTextColor(background, "muted"))
+                }
+              )
             }
-          ) }),
+          ),
           member.name && (typeof member.name === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-4 font-semibold", children: member.name }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: member.name })),
           member.role && (typeof member.role === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: member.role }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: member.role })),
           member.socialLinks && member.socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center gap-3", children: member.socialLinks.map((link, linkIdx) => /* @__PURE__ */ jsx(
@@ -1040,8 +1043,9 @@ function AboutStartupTeam({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn(containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
         /* @__PURE__ */ jsx(
           "aside",
           {

package/dist/about-stats-showcase.cjs

@@ -448,7 +448,6 @@ var Section = React__default.default.forwardRef(
 Section.displayName = "Section";
 function AboutStatsShowcase({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -473,7 +472,8 @@ function AboutStatsShowcase({
   benefitsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -511,10 +511,7 @@ function AboutStatsShowcase({
   const logosContent = React.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-      "py-24",
-      getNestedCardBg(background, "subtle")
-    ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-24", getNestedCardBg(background, "subtle")), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
       logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
@@ -583,15 +580,21 @@ function AboutStatsShowcase({
                 optixFlowConfig
               }
             ),
-            benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-              "flex flex-col justify-center rounded-xl p-8",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background)
-            ), children: [
-              benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
-              benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
-              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
-            ] }),
+            benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col justify-center rounded-xl p-8",
+                  getNestedCardBg(background),
+                  getNestedCardTextColor(background)
+                ),
+                children: [
+                  benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
+                  benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
+                  benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
+                ]
+              }
+            ),
             benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
                 benefit.testimonial.logo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -611,7 +614,16 @@ function AboutStatsShowcase({
                   benefit.testimonial.author,
                   ","
                 ] }) : benefit.testimonial.author),
-                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: benefit.testimonial.role }) : benefit.testimonial.role)
+                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm",
+                      getTextColor(background, "muted")
+                    ),
+                    children: benefit.testimonial.role
+                  }
+                ) : benefit.testimonial.role)
               ] })
             ] })
           ] }, idx))

package/dist/about-stats-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-r_NhxVet.cjs';
-import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ShowcaseImageItem {
@@ -159,6 +159,6 @@ interface AboutStatsShowcaseProps {
      */
     patternOpacity?: number;
 }
-declare function AboutStatsShowcase({ className, containerClassName, title, titleClassName, description, descriptionClassName, images, imagesSlot, imagesClassName, statsTitle, statsTitleClassName, stats, statsSlot, statsClassName, logosTitle, logosTitleClassName, logos, logosSlot, logosClassName, benefitsTitle, benefitsTitleClassName, benefits, benefitsSlot, benefitsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: AboutStatsShowcaseProps): React.JSX.Element;
+declare function AboutStatsShowcase({ className, title, titleClassName, description, descriptionClassName, images, imagesSlot, imagesClassName, statsTitle, statsTitleClassName, stats, statsSlot, statsClassName, logosTitle, logosTitleClassName, logos, logosSlot, logosClassName, benefitsTitle, benefitsTitleClassName, benefits, benefitsSlot, benefitsClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: AboutStatsShowcaseProps): React.JSX.Element;
 
 export { AboutStatsShowcase, type AboutStatsShowcaseProps };

package/dist/about-stats-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-DmVsuoHE.js';
-import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ShowcaseImageItem {
@@ -159,6 +159,6 @@ interface AboutStatsShowcaseProps {
      */
     patternOpacity?: number;
 }
-declare function AboutStatsShowcase({ className, containerClassName, title, titleClassName, description, descriptionClassName, images, imagesSlot, imagesClassName, statsTitle, statsTitleClassName, stats, statsSlot, statsClassName, logosTitle, logosTitleClassName, logos, logosSlot, logosClassName, benefitsTitle, benefitsTitleClassName, benefits, benefitsSlot, benefitsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: AboutStatsShowcaseProps): React.JSX.Element;
+declare function AboutStatsShowcase({ className, title, titleClassName, description, descriptionClassName, images, imagesSlot, imagesClassName, statsTitle, statsTitleClassName, stats, statsSlot, statsClassName, logosTitle, logosTitleClassName, logos, logosSlot, logosClassName, benefitsTitle, benefitsTitleClassName, benefits, benefitsSlot, benefitsClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: AboutStatsShowcaseProps): React.JSX.Element;
 
 export { AboutStatsShowcase, type AboutStatsShowcaseProps };

package/dist/about-stats-showcase.js

@@ -442,7 +442,6 @@ var Section = React.forwardRef(
 Section.displayName = "Section";
 function AboutStatsShowcase({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -467,7 +466,8 @@ function AboutStatsShowcase({
   benefitsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -505,10 +505,7 @@ function AboutStatsShowcase({
   const logosContent = useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn(
-      "py-24",
-      getNestedCardBg(background, "subtle")
-    ), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("py-24", getNestedCardBg(background, "subtle")), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
       logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsx(
         "p",
         {
@@ -577,15 +574,21 @@ function AboutStatsShowcase({
                 optixFlowConfig
               }
             ),
-            benefit.stat && /* @__PURE__ */ jsxs("div", { className: cn(
-              "flex flex-col justify-center rounded-xl p-8",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background)
-            ), children: [
-              benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: benefit.stat.value })),
-              benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.stat.label })),
-              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
-            ] }),
+            benefit.stat && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col justify-center rounded-xl p-8",
+                  getNestedCardBg(background),
+                  getNestedCardTextColor(background)
+                ),
+                children: [
+                  benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: benefit.stat.value })),
+                  benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.stat.label })),
+                  benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
+                ]
+              }
+            ),
             benefit.testimonial && /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-background p-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
                 benefit.testimonial.logo && /* @__PURE__ */ jsx(
@@ -605,7 +608,16 @@ function AboutStatsShowcase({
                   benefit.testimonial.author,
                   ","
                 ] }) : benefit.testimonial.author),
-                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: benefit.testimonial.role }) : benefit.testimonial.role)
+                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm",
+                      getTextColor(background, "muted")
+                    ),
+                    children: benefit.testimonial.role
+                  }
+                ) : benefit.testimonial.role)
               ] })
             ] })
           ] }, idx))

package/dist/about-stats-sidebar.cjs

@@ -453,36 +453,61 @@ function AboutStatsSidebar({
   features,
   featuresSlot,
   className,
-  containerClassName,
   sidebarClassName,
   titleClassName,
   descriptionClassName,
   statsClassName,
   featuresClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
   const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-      "rounded-xl border p-6",
-      getNestedCardBg(background, "card"),
-      getNestedCardTextColor(background)
-    ), children: [
-      stat.icon,
-      typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: stat.value }),
-      typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.description }))
-    ] }, idx)) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl border p-6",
+          getNestedCardBg(background, "card"),
+          getNestedCardTextColor(background)
+        ),
+        children: [
+          stat.icon,
+          typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: stat.value }),
+          typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: stat.label }),
+          stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: stat.description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.description }))
+        ]
+      },
+      idx
+    )) });
   }, [statsSlot, stats, statsClassName]);
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10", feature.iconBgClass), children: feature.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            feature.iconBgClass
+          ),
+          children: feature.icon
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
         feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
@@ -499,10 +524,35 @@ function AboutStatsSidebar({
       className: cn(className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
           (statsSlot || stats && stats.length > 0) && statsContent,
           (featuresSlot || features && features.length > 0) && featuresContent

package/dist/about-stats-sidebar.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { S as StatItem, F as FeatureItem } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
+import { S as StatItem, F as FeatureItem } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ExtendedStatItem extends StatItem {
@@ -79,6 +79,6 @@ interface AboutStatsSidebarProps {
      */
     patternOpacity?: number;
 }
-declare function AboutStatsSidebar({ title, description, stats, statsSlot, features, featuresSlot, className, containerClassName, sidebarClassName, titleClassName, descriptionClassName, statsClassName, featuresClassName, background, spacing, pattern, patternOpacity, }: AboutStatsSidebarProps): React.JSX.Element;
+declare function AboutStatsSidebar({ title, description, stats, statsSlot, features, featuresSlot, className, sidebarClassName, titleClassName, descriptionClassName, statsClassName, featuresClassName, background, containerClassName, spacing, pattern, patternOpacity, }: AboutStatsSidebarProps): React.JSX.Element;
 
 export { AboutStatsSidebar, type AboutStatsSidebarProps };

package/dist/about-stats-sidebar.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { S as StatItem, F as FeatureItem } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import { S as StatItem, F as FeatureItem } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ExtendedStatItem extends StatItem {
@@ -79,6 +79,6 @@ interface AboutStatsSidebarProps {
      */
     patternOpacity?: number;
 }
-declare function AboutStatsSidebar({ title, description, stats, statsSlot, features, featuresSlot, className, containerClassName, sidebarClassName, titleClassName, descriptionClassName, statsClassName, featuresClassName, background, spacing, pattern, patternOpacity, }: AboutStatsSidebarProps): React.JSX.Element;
+declare function AboutStatsSidebar({ title, description, stats, statsSlot, features, featuresSlot, className, sidebarClassName, titleClassName, descriptionClassName, statsClassName, featuresClassName, background, containerClassName, spacing, pattern, patternOpacity, }: AboutStatsSidebarProps): React.JSX.Element;
 
 export { AboutStatsSidebar, type AboutStatsSidebarProps };

package/dist/about-stats-sidebar.js

@@ -447,36 +447,61 @@ function AboutStatsSidebar({
   features,
   featuresSlot,
   className,
-  containerClassName,
   sidebarClassName,
   titleClassName,
   descriptionClassName,
   statsClassName,
   featuresClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
   const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: cn(
-      "rounded-xl border p-6",
-      getNestedCardBg(background, "card"),
-      getNestedCardTextColor(background)
-    ), children: [
-      stat.icon,
-      typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: stat.value }),
-      typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.description }))
-    ] }, idx)) });
+    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl border p-6",
+          getNestedCardBg(background, "card"),
+          getNestedCardTextColor(background)
+        ),
+        children: [
+          stat.icon,
+          typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: stat.value }),
+          typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: stat.label }),
+          stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: stat.description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.description }))
+        ]
+      },
+      idx
+    )) });
   }, [statsSlot, stats, statsClassName]);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-12 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10", feature.iconBgClass), children: feature.icon }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            feature.iconBgClass
+          ),
+          children: feature.icon
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
         feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
@@ -493,10 +518,35 @@ function AboutStatsSidebar({
       className: cn(className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
           (statsSlot || stats && stats.length > 0) && statsContent,
           (featuresSlot || features && features.length > 0) && featuresContent

package/dist/about-story-expertise.cjs

@@ -916,7 +916,8 @@ function AboutStoryExpertise({
   expertiseSectionClassName,
   className,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -1006,6 +1007,7 @@ function AboutStoryExpertise({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(