@opensite/ui 0.4.1 → 0.4.3

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,9 +1,8 @@
 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-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 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,9 +1,8 @@
 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-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 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,9 +1,8 @@
 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-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 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)
      */

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

@@ -1,9 +1,8 @@
 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-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 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)
      */

package/dist/process-hover-cards.js

@@ -337,6 +337,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -356,7 +357,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -373,7 +374,13 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var ProcessCard = ({ step, index, optixFlowConfig, itemClassName, hoverImageClassName }) => {
+var ProcessCard = ({
+  step,
+  index,
+  optixFlowConfig,
+  itemClassName,
+  hoverImageClassName
+}) => {
   const [isHovered, setIsHovered] = React.useState(false);
   const titleText = typeof step.title === "string" ? step.title : `Step ${index + 1}`;
   return /* @__PURE__ */ jsxs(
@@ -467,8 +474,26 @@ function ProcessHoverCards({
       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-5xl font-semibold tracking-tight lg:text-7xl", 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-5xl font-semibold tracking-tight lg:text-7xl",
+                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 }))
         ] }),
         renderSteps()
       ] })

package/dist/process-icon-timeline.cjs

@@ -461,6 +461,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -480,7 +481,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -598,11 +599,37 @@ function ProcessIconTimeline({
       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 lg:left-1/2 lg:-translate-x-1/2", timelineLineClassName) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute left-6 top-0 bottom-0 w-px bg-border lg:left-1/2 lg:-translate-x-1/2",
+                timelineLineClassName
+              )
+            }
+          ),
           renderSteps()
         ] })
       ] })

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

@@ -1,9 +1,8 @@
 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-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -105,7 +104,7 @@ interface ProcessIconTimelineProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

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

@@ -1,9 +1,8 @@
 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-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -105,7 +104,7 @@ interface ProcessIconTimelineProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/process-icon-timeline.js

@@ -440,6 +440,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -459,7 +460,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -577,11 +578,37 @@ function ProcessIconTimeline({
       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 lg:left-1/2 lg:-translate-x-1/2", timelineLineClassName) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute left-6 top-0 bottom-0 w-px bg-border lg:left-1/2 lg:-translate-x-1/2",
+                timelineLineClassName
+              )
+            }
+          ),
           renderSteps()
         ] })
       ] })

package/dist/process-mission-principles.cjs

@@ -340,6 +340,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -359,7 +360,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -405,27 +406,42 @@ function ProcessMissionPrinciples({
   const renderPrinciples = () => {
     if (principlesSlot) return principlesSlot;
     if (!principles || principles.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", principlesGridClassName), children: principles.map((principle, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cn(
-          "group relative rounded-lg border bg-card p-6 transition-shadow hover:shadow-md",
-          principleCardClassName,
-          principle.className
+          "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          principlesGridClassName
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-            "absolute -top-3 -left-3 flex size-10 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground",
-            principleBadgeClassName
-          ), children: principle.number ?? `0${index + 1}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4", children: [
-            principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title })),
-            principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/50 leading-relaxed", children: principle.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50 leading-relaxed", children: principle.description }))
-          ] })
-        ]
-      },
-      index
-    )) });
+        children: principles.map((principle, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "group relative rounded-lg border bg-card p-6 transition-shadow hover:shadow-md",
+              principleCardClassName,
+              principle.className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "absolute -top-3 -left-3 flex size-10 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground",
+                    principleBadgeClassName
+                  ),
+                  children: principle.number ?? `0${index + 1}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4", children: [
+                principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title })),
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/50 leading-relaxed", children: principle.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50 leading-relaxed", children: principle.description }))
+              ] })
+            ]
+          },
+          index
+        ))
+      }
+    );
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -437,12 +453,48 @@ function ProcessMissionPrinciples({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-20 max-w-3xl", missionClassName), children: [
-          missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-4 inline-block text-sm font-semibold uppercase tracking-wider text-primary", missionLabelClassName), children: missionLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionLabelClassName, children: missionLabel })),
-          resolvedMissionHeading && (typeof resolvedMissionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl font-semibold tracking-tight lg:text-5xl", missionHeadingClassName), children: resolvedMissionHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionHeadingClassName, children: resolvedMissionHeading })),
-          missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-foreground/50 leading-relaxed", missionDescriptionClassName), children: missionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionDescriptionClassName, children: missionDescription }))
+          missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                missionLabelClassName
+              ),
+              children: missionLabel
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionLabelClassName, children: missionLabel })),
+          resolvedMissionHeading && (typeof resolvedMissionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-6 text-4xl font-semibold tracking-tight lg:text-5xl",
+                missionHeadingClassName
+              ),
+              children: resolvedMissionHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionHeadingClassName, children: resolvedMissionHeading })),
+          missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg text-foreground/50 leading-relaxed",
+                missionDescriptionClassName
+              ),
+              children: missionDescription
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionDescriptionClassName, children: missionDescription }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: principlesSectionClassName, children: [
-          principlesLabel && (typeof principlesLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 inline-block text-sm font-semibold uppercase tracking-wider text-primary", principlesLabelClassName), children: principlesLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: principlesLabelClassName, children: principlesLabel })),
+          principlesLabel && (typeof principlesLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                principlesLabelClassName
+              ),
+              children: principlesLabel
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: principlesLabelClassName, children: principlesLabel })),
           renderPrinciples()
         ] })
       ] })