@opensite/ui 0.4.1 → 0.4.3

package/dist/timeline-tabbed-phases.cjs

@@ -965,6 +965,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -984,7 +985,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1041,7 +1042,10 @@ function TimelineTabbedPhases({
           variant: downloadAction.variant || "outline",
           size: downloadAction.size,
           asButton: true,
-          className: cn("mt-8 flex w-fit items-center gap-2 rounded-full border border-border px-4! py-2", downloadAction.className),
+          className: cn(
+            "mt-8 flex w-fit items-center gap-2 rounded-full border border-border px-4! py-2",
+            downloadAction.className
+          ),
           "aria-label": downloadAction["aria-label"],
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/download", size: 16 }),
@@ -1068,7 +1072,25 @@ function TimelineTabbedPhases({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col items-center justify-center", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-12 text-5xl font-semibold tracking-tighter lg:mb-25 lg:text-7xl", headingClassName), children: heading }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center",
+              containerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "mb-12 text-5xl font-semibold tracking-tighter lg:mb-25 lg:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )
+          }
+        )
       }
     );
   }
@@ -1083,57 +1105,121 @@ function TimelineTabbedPhases({
       patternOpacity,
       patternClassName,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-12 text-5xl font-semibold tracking-tighter lg:mb-25 lg:text-7xl", headingClassName), children: heading }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: phases[0]?.id || "phase1", className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: cn("grid w-full bg-transparent p-0", `grid-cols-${phases.length}`, tabsListClassName), children: phases.map((phase) => /* @__PURE__ */ jsxRuntime.jsxs(
-            TabsTrigger,
-            {
-              className: cn("text-md rounded-none border-b-2 pb-6 shadow-none! data-[state=active]:border-b-foreground", tabTriggerClassName),
-              value: phase.id,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden font-mono text-foreground/40 md:inline", children: phase.phase }),
-                phase.title
-              ]
-            },
-            phase.id
-          )) }),
-          phases.map((phase) => /* @__PURE__ */ jsxRuntime.jsxs(
-            TabsContent,
-            {
-              value: phase.id,
-              className: cn("mt-12 grid items-start gap-12 lg:grid-cols-2", tabContentClassName),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-1 flex flex-col gap-2 lg:max-w-lg lg:gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-mono text-sm font-semibold tracking-tight text-muted-foreground", dateClassName), children: phase.date }),
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium tracking-tighter text-foreground md:text-5xl", phaseHeadingClassName), children: phase.heading }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-normal tracking-tighter text-muted-foreground", descriptionClassName), children: phase.description }),
-                  renderDownloadButton()
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  framerMotion.motion.div,
-                  {
-                    initial: { opacity: 0, y: 50 },
-                    animate: { opacity: 100, y: 0 },
-                    transition: { ease: [0, 0.71, 0.2, 1.01], duration: 0.8 },
-                    className: "relative z-20 col-span-1",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "size-full rounded-2xl border-2 border-background bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      img.Img,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center justify-center",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "mb-12 text-5xl font-semibold tracking-tighter lg:mb-25 lg:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: phases[0]?.id || "phase1", className: "w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TabsList,
+                {
+                  className: cn(
+                    "grid w-full bg-transparent p-0",
+                    `grid-cols-${phases.length}`,
+                    tabsListClassName
+                  ),
+                  children: phases.map((phase) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    TabsTrigger,
+                    {
+                      className: cn(
+                        "text-md rounded-none border-b-2 pb-6 shadow-none! data-[state=active]:border-b-foreground",
+                        tabTriggerClassName
+                      ),
+                      value: phase.id,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden font-mono text-foreground/40 md:inline", children: phase.phase }),
+                        phase.title
+                      ]
+                    },
+                    phase.id
+                  ))
+                }
+              ),
+              phases.map((phase) => /* @__PURE__ */ jsxRuntime.jsxs(
+                TabsContent,
+                {
+                  value: phase.id,
+                  className: cn(
+                    "mt-12 grid items-start gap-12 lg:grid-cols-2",
+                    tabContentClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-1 flex flex-col gap-2 lg:max-w-lg lg:gap-4", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "font-mono text-sm font-semibold tracking-tight text-muted-foreground",
+                            dateClassName
+                          ),
+                          children: phase.date
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "h2",
+                        {
+                          className: cn(
+                            "text-3xl font-medium tracking-tighter text-foreground md:text-5xl",
+                            phaseHeadingClassName
+                          ),
+                          children: phase.heading
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "text-lg font-normal tracking-tighter text-muted-foreground",
+                            descriptionClassName
+                          ),
+                          children: phase.description
+                        }
+                      ),
+                      renderDownloadButton()
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      framerMotion.motion.div,
                       {
-                        src: phase.imageSrc,
-                        alt: phase.imageAlt,
-                        className: cn("size-full transition-all ease-in-out group-hover:scale-95", imageClassName),
-                        optixFlowConfig
+                        initial: { opacity: 0, y: 50 },
+                        animate: { opacity: 100, y: 0 },
+                        transition: { ease: [0, 0.71, 0.2, 1.01], duration: 0.8 },
+                        className: "relative z-20 col-span-1",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "size-full rounded-2xl border-2 border-background bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          img.Img,
+                          {
+                            src: phase.imageSrc,
+                            alt: phase.imageAlt,
+                            className: cn(
+                              "size-full transition-all ease-in-out group-hover:scale-95",
+                              imageClassName
+                            ),
+                            optixFlowConfig
+                          }
+                        ) }) })
                       }
-                    ) }) })
-                  }
-                )
-              ]
-            },
-            phase.id
-          ))
-        ] })
-      ] })
+                    )
+                  ]
+                },
+                phase.id
+              ))
+            ] })
+          ]
+        }
+      )
     }
   );
 }

package/dist/timeline-tabbed-phases.d.cts

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

package/dist/timeline-tabbed-phases.d.ts

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

package/dist/timeline-tabbed-phases.js

@@ -943,6 +943,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -962,7 +963,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1019,7 +1020,10 @@ function TimelineTabbedPhases({
           variant: downloadAction.variant || "outline",
           size: downloadAction.size,
           asButton: true,
-          className: cn("mt-8 flex w-fit items-center gap-2 rounded-full border border-border px-4! py-2", downloadAction.className),
+          className: cn(
+            "mt-8 flex w-fit items-center gap-2 rounded-full border border-border px-4! py-2",
+            downloadAction.className
+          ),
           "aria-label": downloadAction["aria-label"],
           children: [
             /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/download", size: 16 }),
@@ -1046,7 +1050,25 @@ function TimelineTabbedPhases({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center justify-center", containerClassName), children: /* @__PURE__ */ jsx("h1", { className: cn("mb-12 text-5xl font-semibold tracking-tighter lg:mb-25 lg:text-7xl", headingClassName), children: heading }) })
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center",
+              containerClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "mb-12 text-5xl font-semibold tracking-tighter lg:mb-25 lg:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )
+          }
+        )
       }
     );
   }
@@ -1061,57 +1083,121 @@ function TimelineTabbedPhases({
       patternOpacity,
       patternClassName,
       style,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center", containerClassName), children: [
-        /* @__PURE__ */ jsx("h1", { className: cn("mb-12 text-5xl font-semibold tracking-tighter lg:mb-25 lg:text-7xl", headingClassName), children: heading }),
-        /* @__PURE__ */ jsxs(Tabs, { defaultValue: phases[0]?.id || "phase1", className: "w-full", children: [
-          /* @__PURE__ */ jsx(TabsList, { className: cn("grid w-full bg-transparent p-0", `grid-cols-${phases.length}`, tabsListClassName), children: phases.map((phase) => /* @__PURE__ */ jsxs(
-            TabsTrigger,
-            {
-              className: cn("text-md rounded-none border-b-2 pb-6 shadow-none! data-[state=active]:border-b-foreground", tabTriggerClassName),
-              value: phase.id,
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "hidden font-mono text-foreground/40 md:inline", children: phase.phase }),
-                phase.title
-              ]
-            },
-            phase.id
-          )) }),
-          phases.map((phase) => /* @__PURE__ */ jsxs(
-            TabsContent,
-            {
-              value: phase.id,
-              className: cn("mt-12 grid items-start gap-12 lg:grid-cols-2", tabContentClassName),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "col-span-1 flex flex-col gap-2 lg:max-w-lg lg:gap-4", children: [
-                  /* @__PURE__ */ jsx("p", { className: cn("font-mono text-sm font-semibold tracking-tight text-muted-foreground", dateClassName), children: phase.date }),
-                  /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium tracking-tighter text-foreground md:text-5xl", phaseHeadingClassName), children: phase.heading }),
-                  /* @__PURE__ */ jsx("p", { className: cn("text-lg font-normal tracking-tighter text-muted-foreground", descriptionClassName), children: phase.description }),
-                  renderDownloadButton()
-                ] }),
-                /* @__PURE__ */ jsx(
-                  motion.div,
-                  {
-                    initial: { opacity: 0, y: 50 },
-                    animate: { opacity: 100, y: 0 },
-                    transition: { ease: [0, 0.71, 0.2, 1.01], duration: 0.8 },
-                    className: "relative z-20 col-span-1",
-                    children: /* @__PURE__ */ jsx(Card, { className: "group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none", children: /* @__PURE__ */ jsx(CardContent, { className: "size-full rounded-2xl border-2 border-background bg-muted", children: /* @__PURE__ */ jsx(
-                      Img,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center justify-center",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "mb-12 text-5xl font-semibold tracking-tighter lg:mb-25 lg:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ),
+            /* @__PURE__ */ jsxs(Tabs, { defaultValue: phases[0]?.id || "phase1", className: "w-full", children: [
+              /* @__PURE__ */ jsx(
+                TabsList,
+                {
+                  className: cn(
+                    "grid w-full bg-transparent p-0",
+                    `grid-cols-${phases.length}`,
+                    tabsListClassName
+                  ),
+                  children: phases.map((phase) => /* @__PURE__ */ jsxs(
+                    TabsTrigger,
+                    {
+                      className: cn(
+                        "text-md rounded-none border-b-2 pb-6 shadow-none! data-[state=active]:border-b-foreground",
+                        tabTriggerClassName
+                      ),
+                      value: phase.id,
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "hidden font-mono text-foreground/40 md:inline", children: phase.phase }),
+                        phase.title
+                      ]
+                    },
+                    phase.id
+                  ))
+                }
+              ),
+              phases.map((phase) => /* @__PURE__ */ jsxs(
+                TabsContent,
+                {
+                  value: phase.id,
+                  className: cn(
+                    "mt-12 grid items-start gap-12 lg:grid-cols-2",
+                    tabContentClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "col-span-1 flex flex-col gap-2 lg:max-w-lg lg:gap-4", children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "font-mono text-sm font-semibold tracking-tight text-muted-foreground",
+                            dateClassName
+                          ),
+                          children: phase.date
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "h2",
+                        {
+                          className: cn(
+                            "text-3xl font-medium tracking-tighter text-foreground md:text-5xl",
+                            phaseHeadingClassName
+                          ),
+                          children: phase.heading
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "text-lg font-normal tracking-tighter text-muted-foreground",
+                            descriptionClassName
+                          ),
+                          children: phase.description
+                        }
+                      ),
+                      renderDownloadButton()
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      motion.div,
                       {
-                        src: phase.imageSrc,
-                        alt: phase.imageAlt,
-                        className: cn("size-full transition-all ease-in-out group-hover:scale-95", imageClassName),
-                        optixFlowConfig
+                        initial: { opacity: 0, y: 50 },
+                        animate: { opacity: 100, y: 0 },
+                        transition: { ease: [0, 0.71, 0.2, 1.01], duration: 0.8 },
+                        className: "relative z-20 col-span-1",
+                        children: /* @__PURE__ */ jsx(Card, { className: "group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none", children: /* @__PURE__ */ jsx(CardContent, { className: "size-full rounded-2xl border-2 border-background bg-muted", children: /* @__PURE__ */ jsx(
+                          Img,
+                          {
+                            src: phase.imageSrc,
+                            alt: phase.imageAlt,
+                            className: cn(
+                              "size-full transition-all ease-in-out group-hover:scale-95",
+                              imageClassName
+                            ),
+                            optixFlowConfig
+                          }
+                        ) }) })
                       }
-                    ) }) })
-                  }
-                )
-              ]
-            },
-            phase.id
-          ))
-        ] })
-      ] })
+                    )
+                  ]
+                },
+                phase.id
+              ))
+            ] })
+          ]
+        }
+      )
     }
   );
 }

package/dist/timeline-two-column-featured.cjs

@@ -776,6 +776,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -795,7 +796,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -882,25 +883,86 @@ function TimelineTwoColumnFeatured({
       style,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-6xl mx-auto", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid gap-16 md:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "top-40 h-fit md:sticky", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mt-4 mb-6 text-4xl font-semibold md:text-5xl", headingClassName), children: heading }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground md:text-xl", descriptionClassName), children: description }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-col gap-4 lg:flex-row", actionsClassName), children: renderActions() })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-12 md:gap-20", featuresClassName), children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border p-2", featureClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
+            "h2",
             {
-              src: feature.image,
-              alt: feature.imageAlt || (typeof feature.title === "string" ? feature.title : `Feature ${index + 1}`),
-              className: cn("aspect-video w-full rounded-xl border border-dashed object-cover", imageClassName),
-              optixFlowConfig
+              className: cn(
+                "mt-4 mb-6 text-4xl font-semibold md:text-5xl",
+                headingClassName
+              ),
+              children: heading
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-1 text-2xl font-semibold", titleClassName), children: feature.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", featureDescriptionClassName), children: feature.description })
-          ] })
-        ] }, index)) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "font-medium text-muted-foreground md:text-xl",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mt-8 flex flex-col gap-4 lg:flex-row",
+                actionsClassName
+              ),
+              children: renderActions()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("flex flex-col gap-12 md:gap-20", featuresClassName),
+            children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn("rounded-xl border p-2", featureClassName),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: feature.image,
+                      alt: feature.imageAlt || (typeof feature.title === "string" ? feature.title : `Feature ${index + 1}`),
+                      className: cn(
+                        "aspect-video w-full rounded-xl border border-dashed object-cover",
+                        imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        className: cn(
+                          "mb-1 text-2xl font-semibold",
+                          titleClassName
+                        ),
+                        children: feature.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "text-muted-foreground",
+                          featureDescriptionClassName
+                        ),
+                        children: feature.description
+                      }
+                    )
+                  ] })
+                ]
+              },
+              index
+            ))
+          }
+        )
       ] }) })
     }
   );

package/dist/timeline-two-column-featured.d.cts

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

package/dist/timeline-two-column-featured.d.ts

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