@opensite/ui 0.4.8 → 0.5.0

package/dist/navbar-tabbed-sections.js

@@ -832,7 +832,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",
@@ -856,11 +857,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;
@@ -887,13 +890,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -1189,6 +1199,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     ),
     // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
     // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
@@ -1199,8 +1210,12 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     ),
     // Navigation wrapper classes (for border and shadow)
     navWrapperClasses: cn(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -1389,6 +1404,8 @@ var NavbarTabbedSections = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -1399,10 +1416,15 @@ var NavbarTabbedSections = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -1452,7 +1474,7 @@ var NavbarTabbedSections = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };

package/dist/navbar-transparent-overlay.cjs

@@ -852,7 +852,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",
@@ -876,11 +877,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;
@@ -907,13 +910,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -1034,6 +1044,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     ),
     // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
     // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
@@ -1044,8 +1055,12 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     ),
     // Navigation wrapper classes (for border and shadow)
     navWrapperClasses: cn(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -1218,6 +1233,8 @@ var NavbarTransparentOverlay = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1228,16 +1245,19 @@ var NavbarTransparentOverlay = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
           "nav",
           {
             className: cn(
               "fixed top-0 left-0 z-50 w-full transition-all duration-300",
               isScrolled ? "bg-background/95 shadow-sm backdrop-blur-sm" : "bg-transparent",
+              navWrapperClasses,
               navClassName
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between", children: [
               renderLogo(),
               /* @__PURE__ */ jsxRuntime.jsx(
                 NavigationMenu,
@@ -1295,9 +1315,9 @@ var NavbarTransparentOverlay = ({
                   ]
                 }
               )
-            ] })
+            ] }) })
           }
-        ) }) }),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {

package/dist/navbar-transparent-overlay.d.cts

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface NavItem {

package/dist/navbar-transparent-overlay.d.ts

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface NavItem {

package/dist/navbar-transparent-overlay.js

@@ -830,7 +830,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",
@@ -854,11 +855,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;
@@ -885,13 +888,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -1012,6 +1022,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     ),
     // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
     // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
@@ -1022,8 +1033,12 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     ),
     // Navigation wrapper classes (for border and shadow)
     navWrapperClasses: cn(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -1196,6 +1211,8 @@ var NavbarTransparentOverlay = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -1206,16 +1223,19 @@ var NavbarTransparentOverlay = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx(
           "nav",
           {
             className: cn(
               "fixed top-0 left-0 z-50 w-full transition-all duration-300",
               isScrolled ? "bg-background/95 shadow-sm backdrop-blur-sm" : "bg-transparent",
+              navWrapperClasses,
               navClassName
             ),
-            children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
+            children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
               renderLogo(),
               /* @__PURE__ */ jsx(
                 NavigationMenu,
@@ -1273,9 +1293,9 @@ var NavbarTransparentOverlay = ({
                   ]
                 }
               )
-            ] })
+            ] }) })
           }
-        ) }) }),
+        ) }),
         /* @__PURE__ */ jsx(
           "div",
           {

package/dist/page-hero-banner.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PageHeroBannerProps } from './types.cjs';
 import 'react';
 import './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';
 
 /**

package/dist/page-hero-banner.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PageHeroBannerProps } from './types.js';
 import 'react';
 import './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';
 
 /**

package/dist/pressable.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { b as buttonVariants } from './button-variants-DJbzb6lO.cjs';
+import { b as buttonVariants } from './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 type FallbackComponentType = "span" | "div" | "button";

package/dist/pressable.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { b as buttonVariants } from './button-variants-DJbzb6lO.js';
+import { b as buttonVariants } from './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 type FallbackComponentType = "span" | "div" | "button";

package/dist/process-expandable-timeline.cjs

@@ -431,7 +431,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",
@@ -455,11 +456,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;
@@ -486,13 +489,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/process-expandable-timeline.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/process-expandable-timeline.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';
 
 /**

package/dist/process-expandable-timeline.js

@@ -410,7 +410,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",
@@ -434,11 +435,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;
@@ -465,13 +468,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/process-hover-cards.cjs

@@ -327,7 +327,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",
@@ -351,11 +352,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;
@@ -382,13 +385,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/process-hover-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/process-hover-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';
 
 /**