@opensite/ui 0.4.2 → 0.4.4

package/dist/navbar-transparent-overlay.cjs

@@ -883,6 +883,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -902,7 +903,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -951,7 +952,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group flex flex-1 list-none items-center justify-center gap-6",
         className
       ),
       ...props
@@ -972,7 +973,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuViewport({
   className,
@@ -1007,7 +1008,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1120,7 +1121,15 @@ var NavbarTransparentOverlay = ({
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, variant, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        variant,
+        ...pressableProps
+      } = action;
       const isGhost = variant === "ghost";
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
@@ -1147,7 +1156,14 @@ var NavbarTransparentOverlay = ({
     if (mobileAuthActionsSlot) return mobileAuthActionsSlot;
     if (!mobileAuthActions || mobileAuthActions.length === 0) return null;
     return mobileAuthActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1184,8 +1200,23 @@ var NavbarTransparentOverlay = ({
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between", children: [
               renderLogo(),
-              /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: cn("hidden lg:flex", navigationMenuClassName), children: renderNavigation() }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden items-center gap-2 lg:flex", actionsClassName), children: renderAuthActions() }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavigationMenu,
+                {
+                  className: cn("hidden lg:flex", navigationMenuClassName),
+                  children: renderNavigation()
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderAuthActions()
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {

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

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
-import './patternSvgs-c5ZNVoTT.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface NavItem {
@@ -95,7 +94,7 @@ interface NavbarTransparentOverlayProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

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

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
-import './patternSvgs-c5ZNVoTT.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface NavItem {
@@ -95,7 +94,7 @@ interface NavbarTransparentOverlayProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/navbar-transparent-overlay.js

@@ -861,6 +861,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -880,7 +881,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -929,7 +930,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group flex flex-1 list-none items-center justify-center gap-6",
         className
       ),
       ...props
@@ -950,7 +951,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuViewport({
   className,
@@ -985,7 +986,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1098,7 +1099,15 @@ var NavbarTransparentOverlay = ({
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, variant, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        variant,
+        ...pressableProps
+      } = action;
       const isGhost = variant === "ghost";
       return /* @__PURE__ */ jsx(
         Pressable,
@@ -1125,7 +1134,14 @@ var NavbarTransparentOverlay = ({
     if (mobileAuthActionsSlot) return mobileAuthActionsSlot;
     if (!mobileAuthActions || mobileAuthActions.length === 0) return null;
     return mobileAuthActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1162,8 +1178,23 @@ var NavbarTransparentOverlay = ({
             ),
             children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
               renderLogo(),
-              /* @__PURE__ */ jsx(NavigationMenu, { className: cn("hidden lg:flex", navigationMenuClassName), children: renderNavigation() }),
-              /* @__PURE__ */ jsx("div", { className: cn("hidden items-center gap-2 lg:flex", actionsClassName), children: renderAuthActions() }),
+              /* @__PURE__ */ jsx(
+                NavigationMenu,
+                {
+                  className: cn("hidden lg:flex", navigationMenuClassName),
+                  children: renderNavigation()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderAuthActions()
+                }
+              ),
               /* @__PURE__ */ jsxs(
                 "button",
                 {

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

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PageHeroBannerProps } from './types.cjs';
 import 'react';
-import './blocks-CJYRLpXR.cjs';
+import './pattern-background-a7gKHzHy.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

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

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PageHeroBannerProps } from './types.js';
 import 'react';
-import './blocks-BWc_7JNA.js';
+import './pattern-background-a7gKHzHy.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/{pattern-background-BXRgbd05.d.cts → pattern-background-a7gKHzHy.d.cts}

@@ -1,5 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { p as patternSvgs } from './patternSvgs-c5ZNVoTT.cjs';
+
+declare const patternSvgs: {
+    squareAltGrid: string;
+    grid1: string;
+    noise: string;
+    dots: string;
+    dotPattern: string;
+    dotPattern2: string;
+    circles: string;
+    waves: string;
+    crossPattern: string;
+    architect: string;
+    tinyCheckers: string;
+    p6: string;
+};
 
 declare const patternOverlays: {
     circuitBoardBasic: () => react_jsx_runtime.JSX.Element;
@@ -49,6 +63,10 @@ declare const inlinePatternStyles: {
         background: string;
     };
 };
+/**
+ * General pattern name type that includes all pattern types
+ * Includes pattern overlays, SVG patterns, and inline pattern styles
+ */
 type PatternName = keyof typeof patternSvgs | keyof typeof patternOverlays | keyof typeof inlinePatternStyles;
 
 export type { PatternName as P };

package/dist/{pattern-background-z0e5HB0v.d.ts → pattern-background-a7gKHzHy.d.ts}

@@ -1,5 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { p as patternSvgs } from './patternSvgs-c5ZNVoTT.js';
+
+declare const patternSvgs: {
+    squareAltGrid: string;
+    grid1: string;
+    noise: string;
+    dots: string;
+    dotPattern: string;
+    dotPattern2: string;
+    circles: string;
+    waves: string;
+    crossPattern: string;
+    architect: string;
+    tinyCheckers: string;
+    p6: string;
+};
 
 declare const patternOverlays: {
     circuitBoardBasic: () => react_jsx_runtime.JSX.Element;
@@ -49,6 +63,10 @@ declare const inlinePatternStyles: {
         background: string;
     };
 };
+/**
+ * General pattern name type that includes all pattern types
+ * Includes pattern overlays, SVG patterns, and inline pattern styles
+ */
 type PatternName = keyof typeof patternSvgs | keyof typeof patternOverlays | keyof typeof inlinePatternStyles;
 
 export type { PatternName as P };

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-lRElsmTc.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-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 type FallbackComponentType = "span" | "div" | "button";

package/dist/process-expandable-timeline.cjs

@@ -462,6 +462,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -481,7 +482,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -610,7 +611,16 @@ function ProcessExpandableTimeline({
           exit: { height: 0, opacity: 0 },
           transition: { duration: 0.3 },
           className: "overflow-hidden",
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-b bg-muted/20 py-6 pl-16 pr-6", expandedContentClassName), children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/70", children: step.expandedContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/70", children: step.expandedContent }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "border-b bg-muted/20 py-6 pl-16 pr-6",
+                expandedContentClassName
+              ),
+              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/70", children: step.expandedContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/70", children: step.expandedContent })
+            }
+          )
         }
       ) })
     ] }, index)) });
@@ -625,11 +635,37 @@ function ProcessExpandableTimeline({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 max-w-2xl", headerClassName), children: [
-          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-4xl font-semibold tracking-tight lg:text-5xl", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                headingClassName
+              ),
+              children: resolvedHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg text-foreground/50",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", timelineClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-6 top-0 bottom-0 w-px bg-border", timelineLineClassName) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute left-6 top-0 bottom-0 w-px bg-border",
+                timelineLineClassName
+              )
+            }
+          ),
           renderSteps()
         ] })
       ] })

package/dist/process-expandable-timeline.d.cts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+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-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -97,7 +96,7 @@ interface ProcessExpandableTimelineProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/process-expandable-timeline.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+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-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -97,7 +96,7 @@ interface ProcessExpandableTimelineProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/process-expandable-timeline.js

@@ -441,6 +441,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -460,7 +461,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -589,7 +590,16 @@ function ProcessExpandableTimeline({
           exit: { height: 0, opacity: 0 },
           transition: { duration: 0.3 },
           className: "overflow-hidden",
-          children: /* @__PURE__ */ jsx("div", { className: cn("border-b bg-muted/20 py-6 pl-16 pr-6", expandedContentClassName), children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/70", children: step.expandedContent }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/70", children: step.expandedContent }) })
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "border-b bg-muted/20 py-6 pl-16 pr-6",
+                expandedContentClassName
+              ),
+              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/70", children: step.expandedContent }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/70", children: step.expandedContent })
+            }
+          )
         }
       ) })
     ] }, index)) });
@@ -604,11 +614,37 @@ function ProcessExpandableTimeline({
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-16 max-w-2xl", headerClassName), children: [
-          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-4xl font-semibold tracking-tight lg:text-5xl", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                headingClassName
+              ),
+              children: resolvedHeading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg text-foreground/50",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn("relative", timelineClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: cn("absolute left-6 top-0 bottom-0 w-px bg-border", timelineLineClassName) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute left-6 top-0 bottom-0 w-px bg-border",
+                timelineLineClassName
+              )
+            }
+          ),
           renderSteps()
         ] })
       ] })

package/dist/process-hover-cards.cjs

@@ -358,6 +358,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -377,7 +378,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -394,7 +395,13 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var ProcessCard = ({ step, index, optixFlowConfig, itemClassName, hoverImageClassName }) => {
+var ProcessCard = ({
+  step,
+  index,
+  optixFlowConfig,
+  itemClassName,
+  hoverImageClassName
+}) => {
   const [isHovered, setIsHovered] = React__namespace.useState(false);
   const titleText = typeof step.title === "string" ? step.title : `Step ${index + 1}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -488,8 +495,26 @@ function ProcessHoverCards({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 max-w-2xl", headerClassName), children: [
-          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-5xl font-semibold tracking-tight lg:text-7xl", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-4 text-5xl font-semibold tracking-tight lg:text-7xl",
+                headingClassName
+              ),
+              children: resolvedHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg text-foreground/50",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         renderSteps()
       ] })

package/dist/process-hover-cards.d.cts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+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-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -93,7 +92,7 @@ interface ProcessHoverCardsProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */