@opensite/ui 0.4.8 → 0.5.0

package/dist/stats-timeline-tabs.cjs

@@ -1,13 +1,13 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var TabsPrimitive = require('@radix-ui/react-tabs');
-var React = require('react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -27,10 +27,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 
-// lib/utils.ts
+// components/blocks/stats/stats-timeline-tabs.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -524,7 +524,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -548,11 +549,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -579,13 +582,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -599,7 +609,7 @@ function StatsTimelineTabs({
   description,
   periods,
   tabsSlot,
-  defaultPeriod = "monthly",
+  defaultPeriod,
   background = "white",
   spacing = "lg",
   pattern,
@@ -616,15 +626,16 @@ function StatsTimelineTabs({
   statsGridClassName,
   statCardClassName
 }) {
-  const renderBadge = () => {
+  const effectiveDefaultPeriod = defaultPeriod || (periods && periods.length > 0 ? periods[0].id : "");
+  const badgeContent = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-2", badgeClassName), children: badge });
-  };
-  const renderTabs = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const tabsContent = React.useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!periods || periods.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: defaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: effectiveDefaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
       periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: period.id, className: cn("mt-4", period.className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: period.stats.map((stat, index) => {
         const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
@@ -638,7 +649,7 @@ function StatsTimelineTabs({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
+                stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
@@ -651,7 +662,7 @@ function StatsTimelineTabs({
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
+              stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
@@ -674,7 +685,7 @@ function StatsTimelineTabs({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
+                stat.previousLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
                   "vs ",
                   stat.previousLabel
                 ] })
@@ -685,7 +696,9 @@ function StatsTimelineTabs({
         );
       }) }) }, period.id))
     ] });
-  };
+  }, [tabsSlot, periods, effectiveDefaultPeriod, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
+  const hasTabsContent = !!(tabsSlot || periods && periods.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -696,12 +709,12 @@ function StatsTimelineTabs({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("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 }))
         ] }),
-        renderTabs()
+        hasTabsContent && tabsContent
       ] }) })
     }
   );

package/dist/stats-timeline-tabs.d.cts

@@ -2,13 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import './blocks-CJYRLpXR.cjs';
+import './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**
- * A single stat entry with value, change, and trend
+ * A single stat entry with value, change, and trend.
+ * Used to display metrics with trend indicators and comparison periods.
  */
 interface TimelineStat {
     /**
@@ -41,7 +42,8 @@ interface TimelineStat {
     className?: string;
 }
 /**
- * A time period with its associated stats
+ * A time period with its associated stats.
+ * Groups metrics by time range for tabbed display.
  */
 interface TimePeriod {
     /**
@@ -62,7 +64,8 @@ interface TimePeriod {
     className?: string;
 }
 /**
- * Props for the StatsTimelineTabs component
+ * Props for the StatsTimelineTabs component.
+ * A tabbed stats display showing metrics across different time periods with color-coded trend indicators.
  */
 interface StatsTimelineTabsProps {
     /**

package/dist/stats-timeline-tabs.d.ts

@@ -2,13 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import './blocks-BWc_7JNA.js';
+import './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 /**
- * A single stat entry with value, change, and trend
+ * A single stat entry with value, change, and trend.
+ * Used to display metrics with trend indicators and comparison periods.
  */
 interface TimelineStat {
     /**
@@ -41,7 +42,8 @@ interface TimelineStat {
     className?: string;
 }
 /**
- * A time period with its associated stats
+ * A time period with its associated stats.
+ * Groups metrics by time range for tabbed display.
  */
 interface TimePeriod {
     /**
@@ -62,7 +64,8 @@ interface TimePeriod {
     className?: string;
 }
 /**
- * Props for the StatsTimelineTabs component
+ * Props for the StatsTimelineTabs component.
+ * A tabbed stats display showing metrics across different time periods with color-coded trend indicators.
  */
 interface StatsTimelineTabsProps {
     /**

package/dist/stats-timeline-tabs.js

@@ -1,14 +1,14 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
-import React__default from 'react';
 
-// lib/utils.ts
+// components/blocks/stats/stats-timeline-tabs.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -502,7 +502,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -526,11 +527,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -557,13 +560,20 @@ var Section = React__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -577,7 +587,7 @@ function StatsTimelineTabs({
   description,
   periods,
   tabsSlot,
-  defaultPeriod = "monthly",
+  defaultPeriod,
   background = "white",
   spacing = "lg",
   pattern,
@@ -594,15 +604,16 @@ function StatsTimelineTabs({
   statsGridClassName,
   statCardClassName
 }) {
-  const renderBadge = () => {
+  const effectiveDefaultPeriod = defaultPeriod || (periods && periods.length > 0 ? periods[0].id : "");
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-2", badgeClassName), children: badge });
-  };
-  const renderTabs = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const tabsContent = useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!periods || periods.length === 0) return null;
-    return /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
+    return /* @__PURE__ */ jsxs(Tabs, { defaultValue: effectiveDefaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
       /* @__PURE__ */ jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
       periods.map((period) => /* @__PURE__ */ jsx(TabsContent, { value: period.id, className: cn("mt-4", period.className), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: period.stats.map((stat, index) => {
         const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
@@ -616,7 +627,7 @@ function StatsTimelineTabs({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: stat.label }),
+                stat.label && /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: stat.label }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsx(
                     DynamicIcon,
@@ -629,7 +640,7 @@ function StatsTimelineTabs({
                   /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
+              stat.value && /* @__PURE__ */ jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
               /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center", children: [
                 /* @__PURE__ */ jsxs(
                   "div",
@@ -652,7 +663,7 @@ function StatsTimelineTabs({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
+                stat.previousLabel && /* @__PURE__ */ jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
                   "vs ",
                   stat.previousLabel
                 ] })
@@ -663,7 +674,9 @@ function StatsTimelineTabs({
         );
       }) }) }, period.id))
     ] });
-  };
+  }, [tabsSlot, periods, effectiveDefaultPeriod, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
+  const hasTabsContent = !!(tabsSlot || periods && periods.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -674,12 +687,12 @@ function StatsTimelineTabs({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: 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 }))
         ] }),
-        renderTabs()
+        hasTabsContent && tabsContent
       ] }) })
     }
   );

package/dist/team-media-showcase.cjs

@@ -326,7 +326,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -350,11 +351,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -381,13 +384,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );

package/dist/team-media-showcase.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/team-media-showcase.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/team-media-showcase.js

@@ -305,7 +305,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -329,11 +330,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -360,13 +363,20 @@ var Section = React__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );

package/dist/testimonial-carousel-cards.cjs

@@ -1016,7 +1016,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -1040,11 +1041,13 @@ var Section = React4__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -1071,13 +1074,20 @@ var Section = React4__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );

package/dist/testimonial-carousel-cards.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/testimonial-carousel-cards.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 /**