@opensite/ui 0.4.1 → 0.4.3

package/dist/timeline-productivity-list.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
             }
           ),
@@ -506,23 +507,62 @@ function TimelineProductivityList({
       patternOpacity,
       patternClassName,
       style,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: heading && /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl", headingClassName), children: heading }) }) }),
-        items && items.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("-mt-8 sm:-mt-12", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("relative flex flex-col justify-center overflow-hidden border-b py-8 shadow-none sm:py-12", itemClassName),
-            children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 sm:gap-6", children: [
-              /* @__PURE__ */ jsx("div", { className: cn("shrink-0", iconClassName), children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 48 }) }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h4", { className: cn("mb-2 text-2xl font-semibold text-primary sm:text-3xl", titleClassName), children: item.title }),
-                /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-sm text-muted-foreground sm:text-base", descriptionClassName), children: item.description })
-              ] })
-            ] })
-          },
-          index
-        )) })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: heading && /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) }) }),
+            items && items.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("-mt-8 sm:-mt-12", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "relative flex flex-col justify-center overflow-hidden border-b py-8 shadow-none sm:py-12",
+                  itemClassName
+                ),
+                children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 sm:gap-6", children: [
+                  /* @__PURE__ */ jsx("div", { className: cn("shrink-0", iconClassName), children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 48 }) }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "h4",
+                      {
+                        className: cn(
+                          "mb-2 text-2xl font-semibold text-primary sm:text-3xl",
+                          titleClassName
+                        ),
+                        children: item.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mt-6 text-sm text-muted-foreground sm:text-base",
+                          descriptionClassName
+                        ),
+                        children: item.description
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              index
+            )) })
+          ]
+        }
+      )
     }
   );
 }

package/dist/timeline-scroll-highlight.cjs

@@ -341,6 +341,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -360,7 +361,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -445,7 +446,16 @@ function TimelineScrollHighlight({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) })
       }
     );
   }
@@ -461,12 +471,30 @@ function TimelineScrollHighlight({
       patternClassName,
       style,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-16 lg:mt-28", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 z-10 border-y bg-background py-3.5", stickyHeaderClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4 text-2xl md:text-4xl", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-muted-foreground", children: String(safeActiveIndex + 1).padStart(2, "0") }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono", children: items[safeActiveIndex]?.date })
-          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "sticky top-0 z-10 border-y bg-background py-3.5",
+                stickyHeaderClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4 text-2xl md:text-4xl", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-muted-foreground", children: String(safeActiveIndex + 1).padStart(2, "0") }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono", children: items[safeActiveIndex]?.date })
+              ] }) })
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -484,13 +512,34 @@ function TimelineScrollHighlight({
                   {
                     src: item.image,
                     alt: item.imageAlt || (typeof item.title === "string" ? item.title : `Item ${index + 1}`),
-                    className: cn("aspect-16/12 rounded-lg border object-cover md:w-1/3 md:max-w-[440px]", imageClassName),
+                    className: cn(
+                      "aspect-16/12 rounded-lg border object-cover md:w-1/3 md:max-w-[440px]",
+                      imageClassName
+                    ),
                     optixFlowConfig
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-2xl font-medium md:mb-4 md:text-4xl", titleClassName), children: item.title }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground md:text-balance", descriptionClassName), children: item.description })
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mb-3 text-2xl font-medium md:mb-4 md:text-4xl",
+                        titleClassName
+                      ),
+                      children: item.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-muted-foreground md:text-balance",
+                        descriptionClassName
+                      ),
+                      children: item.description
+                    }
+                  )
                 ] })
               ]
             },

package/dist/timeline-scroll-highlight.d.cts

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

package/dist/timeline-scroll-highlight.d.ts

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

package/dist/timeline-scroll-highlight.js

@@ -335,6 +335,7 @@ var Section = React.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -354,7 +355,7 @@ var Section = React.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -439,7 +440,16 @@ function TimelineScrollHighlight({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) })
+        children: /* @__PURE__ */ jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) })
       }
     );
   }
@@ -455,12 +465,30 @@ function TimelineScrollHighlight({
       patternClassName,
       style,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) }),
+        /* @__PURE__ */ jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) }),
         /* @__PURE__ */ jsxs("div", { className: "relative mt-16 lg:mt-28", children: [
-          /* @__PURE__ */ jsx("div", { className: cn("sticky top-0 z-10 border-y bg-background py-3.5", stickyHeaderClassName), children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 text-2xl md:text-4xl", children: [
-            /* @__PURE__ */ jsx("p", { className: "font-mono text-muted-foreground", children: String(safeActiveIndex + 1).padStart(2, "0") }),
-            /* @__PURE__ */ jsx("p", { className: "font-mono", children: items[safeActiveIndex]?.date })
-          ] }) }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "sticky top-0 z-10 border-y bg-background py-3.5",
+                stickyHeaderClassName
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 text-2xl md:text-4xl", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-mono text-muted-foreground", children: String(safeActiveIndex + 1).padStart(2, "0") }),
+                /* @__PURE__ */ jsx("p", { className: "font-mono", children: items[safeActiveIndex]?.date })
+              ] }) })
+            }
+          ),
           /* @__PURE__ */ jsx("div", { className: "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsxs(
             "div",
             {
@@ -478,13 +506,34 @@ function TimelineScrollHighlight({
                   {
                     src: item.image,
                     alt: item.imageAlt || (typeof item.title === "string" ? item.title : `Item ${index + 1}`),
-                    className: cn("aspect-16/12 rounded-lg border object-cover md:w-1/3 md:max-w-[440px]", imageClassName),
+                    className: cn(
+                      "aspect-16/12 rounded-lg border object-cover md:w-1/3 md:max-w-[440px]",
+                      imageClassName
+                    ),
                     optixFlowConfig
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("h2", { className: cn("mb-3 text-2xl font-medium md:mb-4 md:text-4xl", titleClassName), children: item.title }),
-                  /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground md:text-balance", descriptionClassName), children: item.description })
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mb-3 text-2xl font-medium md:mb-4 md:text-4xl",
+                        titleClassName
+                      ),
+                      children: item.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-muted-foreground md:text-balance",
+                        descriptionClassName
+                      ),
+                      children: item.description
+                    }
+                  )
                 ] })
               ]
             },

package/dist/timeline-scroll-sticky-image.cjs

@@ -341,6 +341,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -360,7 +361,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -438,7 +439,16 @@ function TimelineScrollStickyImage({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-7xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-14 max-w-2xl text-4xl font-semibold text-balance md:text-5xl", headingClassName), children: heading }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-7xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-14 max-w-2xl text-4xl font-semibold text-balance md:text-5xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) })
       }
     );
   }
@@ -454,7 +464,16 @@ function TimelineScrollStickyImage({
       patternClassName,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-14 max-w-2xl text-4xl font-semibold text-balance md:text-5xl", headingClassName), children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-14 max-w-2xl text-4xl font-semibold text-balance md:text-5xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-between gap-20", sectionsClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-16 md:w-1/2", children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
@@ -462,54 +481,96 @@ function TimelineScrollStickyImage({
               ref: (el) => {
                 sectionRefs.current[index] = el;
               },
-              className: cn("flex flex-col gap-4 md:h-[50vh]", sectionClassName),
+              className: cn(
+                "flex flex-col gap-4 md:h-[50vh]",
+                sectionClassName
+              ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block rounded-2xl border bg-muted p-4 md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
                   img.Img,
                   {
                     src: section.image,
                     alt: section.imageAlt || (typeof section.title === "string" ? section.title : `Section ${index + 1}`),
-                    className: cn("h-full max-h-full w-full max-w-full rounded-2xl object-cover", imageClassName),
+                    className: cn(
+                      "h-full max-h-full w-full max-w-full rounded-2xl object-cover",
+                      imageClassName
+                    ),
                     optixFlowConfig
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-semibold text-muted-foreground md:text-base", subTitleClassName), children: section.subTitle }),
-                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-2xl font-semibold md:text-4xl", titleClassName), children: section.title }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: section.description })
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-sm font-semibold text-muted-foreground md:text-base",
+                      subTitleClassName
+                    ),
+                    children: section.subTitle
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-2xl font-semibold md:text-4xl",
+                      titleClassName
+                    ),
+                    children: section.title
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn("text-muted-foreground", descriptionClassName),
+                    children: section.description
+                  }
+                )
               ]
             },
             index
           )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("sticky top-56 right-0 hidden h-fit w-full items-center justify-center md:flex", stickyImageClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: sections[sections.length - 1].image,
-                alt: sections[sections.length - 1].imageAlt || (typeof sections[sections.length - 1].title === "string" ? sections[sections.length - 1].title : `Section ${sections.length}`),
-                className: "invisible h-full max-h-[550px] w-full max-w-full object-cover",
-                optixFlowConfig
-              }
-            ),
-            sections.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-0 flex h-full items-center justify-center rounded-2xl border bg-muted p-4 transition-opacity duration-200",
-                  index === safeActiveIndex ? "opacity-100" : "opacity-0"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "sticky top-56 right-0 hidden h-fit w-full items-center justify-center md:flex",
+                stickyImageClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
                   img.Img,
                   {
-                    src: item.image,
-                    alt: item.imageAlt || (typeof item.title === "string" ? item.title : `Item ${index + 1}`),
-                    className: cn("h-full max-h-full w-full max-w-full rounded-2xl border object-cover", imageClassName),
+                    src: sections[sections.length - 1].image,
+                    alt: sections[sections.length - 1].imageAlt || (typeof sections[sections.length - 1].title === "string" ? sections[sections.length - 1].title : `Section ${sections.length}`),
+                    className: "invisible h-full max-h-[550px] w-full max-w-full object-cover",
                     optixFlowConfig
                   }
-                )
-              },
-              index
-            ))
-          ] })
+                ),
+                sections.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 flex h-full items-center justify-center rounded-2xl border bg-muted p-4 transition-opacity duration-200",
+                      index === safeActiveIndex ? "opacity-100" : "opacity-0"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      img.Img,
+                      {
+                        src: item.image,
+                        alt: item.imageAlt || (typeof item.title === "string" ? item.title : `Item ${index + 1}`),
+                        className: cn(
+                          "h-full max-h-full w-full max-w-full rounded-2xl border object-cover",
+                          imageClassName
+                        ),
+                        optixFlowConfig
+                      }
+                    )
+                  },
+                  index
+                ))
+              ]
+            }
+          )
         ] })
       ] })
     }

package/dist/timeline-scroll-sticky-image.d.cts

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

package/dist/timeline-scroll-sticky-image.d.ts

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