@opensite/ui 0.4.1 → 0.4.3

package/dist/project-table-list.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
             }
           ),
@@ -399,30 +400,57 @@ function ProjectTableList({
           rowClassName
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4 text-xl font-medium tracking-tighter uppercase lg:w-1/4", infoColumnClassName), children: [
-            /* @__PURE__ */ jsxs("p", { className: "", children: [
-              "0",
-              index + 1
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx("p", { children: project.title }),
-              /* @__PURE__ */ jsxs("p", { children: [
-                "(",
-                project.launchDate,
-                ")"
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: cn("text-2xl lg:w-2/4 lg:text-3xl", descriptionColumnClassName), children: project.description }),
-          /* @__PURE__ */ jsx("div", { className: cn("w-full text-right text-sm text-foreground/50 uppercase lg:h-30 lg:w-1/4 lg:pl-20 lg:text-base", galleryColumnClassName), children: /* @__PURE__ */ jsx(
-            Img,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex gap-4 text-xl font-medium tracking-tighter uppercase lg:w-1/4",
+                infoColumnClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("p", { className: "", children: [
+                  "0",
+                  index + 1
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("p", { children: project.title }),
+                  /* @__PURE__ */ jsxs("p", { children: [
+                    "(",
+                    project.launchDate,
+                    ")"
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              src: project.image,
-              alt: project.title,
-              className: "h-full w-full object-cover",
-              optixFlowConfig
+              className: cn(
+                "text-2xl lg:w-2/4 lg:text-3xl",
+                descriptionColumnClassName
+              ),
+              children: project.description
             }
-          ) })
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "w-full text-right text-sm text-foreground/50 uppercase lg:h-30 lg:w-1/4 lg:pl-20 lg:text-base",
+                galleryColumnClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: project.image,
+                  alt: project.title,
+                  className: "h-full w-full object-cover",
+                  optixFlowConfig
+                }
+              )
+            }
+          )
         ]
       },
       project.id
@@ -437,11 +465,20 @@ function ProjectTableList({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("ul", { className: cn("relative w-full", listClassName), children: [
-        /* @__PURE__ */ jsxs("li", { className: cn("hidden justify-between gap-10 border-b pt-15 pb-2 text-sm tracking-tight text-foreground/40 uppercase lg:flex lg:text-base", headerClassName), children: [
-          /* @__PURE__ */ jsx("p", { className: "w-1/4", children: "PROJECTS" }),
-          /* @__PURE__ */ jsx("p", { className: "w-2/4", children: "DESCRIPTION" }),
-          /* @__PURE__ */ jsx("p", { className: "w-1/4 text-right", children: "GALLERY" })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(
+              "hidden justify-between gap-10 border-b pt-15 pb-2 text-sm tracking-tight text-foreground/40 uppercase lg:flex lg:text-base",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "w-1/4", children: "PROJECTS" }),
+              /* @__PURE__ */ jsx("p", { className: "w-2/4", children: "DESCRIPTION" }),
+              /* @__PURE__ */ jsx("p", { className: "w-1/4 text-right", children: "GALLERY" })
+            ]
+          }
+        ),
         renderProjects()
       ] }) })
     }

package/dist/project-video-carousel.cjs

@@ -467,6 +467,7 @@ var Section = React6__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -486,7 +487,7 @@ var Section = React6__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1203,7 +1204,10 @@ function ProjectVideoCarousel({
     return videoSections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
-        className: cn("pl-2 md:basis-4/5 md:pl-4 lg:basis-3/4 xl:basis-2/3", cardClassName),
+        className: cn(
+          "pl-2 md:basis-4/5 md:pl-4 lg:basis-3/4 xl:basis-2/3",
+          cardClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
           VideoSection,
           {
@@ -1228,9 +1232,27 @@ function ProjectVideoCarousel({
       className: cn(className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-16", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-left text-foreground", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mr-4 text-sm font-medium tracking-wider uppercase opacity-80", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
+            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mr-4 text-sm font-medium tracking-wider uppercase opacity-80",
+                  subheadingClassName
+                ),
+                children: subheading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
           ] })
         ] }) }),

package/dist/project-video-carousel.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -45,7 +46,7 @@ interface ProjectVideoCarouselProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-video-carousel.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -45,7 +46,7 @@ interface ProjectVideoCarouselProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-video-carousel.js

@@ -443,6 +443,7 @@ var Section = React6__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -462,7 +463,7 @@ var Section = React6__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1179,7 +1180,10 @@ function ProjectVideoCarousel({
     return videoSections.map((section, index) => /* @__PURE__ */ jsx(
       CarouselItem,
       {
-        className: cn("pl-2 md:basis-4/5 md:pl-4 lg:basis-3/4 xl:basis-2/3", cardClassName),
+        className: cn(
+          "pl-2 md:basis-4/5 md:pl-4 lg:basis-3/4 xl:basis-2/3",
+          cardClassName
+        ),
         children: /* @__PURE__ */ jsx(
           VideoSection,
           {
@@ -1204,9 +1208,27 @@ function ProjectVideoCarousel({
       className: cn(className),
       children: [
         /* @__PURE__ */ jsx("div", { className: cn("container py-16", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("text-left text-foreground", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mr-4 text-sm font-medium tracking-wider uppercase opacity-80", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading })),
+            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mr-4 text-sm font-medium tracking-wider uppercase opacity-80",
+                  subheadingClassName
+                ),
+                children: subheading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading })),
             /* @__PURE__ */ jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
           ] })
         ] }) }),

package/dist/project-video-hover-bento.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
             }
           ),
@@ -608,16 +609,40 @@ function ProjectVideoHoverBento({
       pattern,
       patternOpacity,
       className: cn("min-h-screen", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-[50vh] md:h-[60vh]", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 max-w-1/2 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mr-4 text-sm font-medium tracking-wider uppercase opacity-80", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
-          ] })
-        ] }) }) }),
-        renderVideoSections()
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-[50vh] md:h-[60vh]", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-4 max-w-1/2 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mr-4 text-sm font-medium tracking-wider uppercase opacity-80",
+                      subheadingClassName
+                    ),
+                    children: subheading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
+              ] })
+            ] }) }) }),
+            renderVideoSections()
+          ]
+        }
+      )
     }
   );
 }

package/dist/project-video-hover-bento.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -45,7 +46,7 @@ interface ProjectVideoHoverBentoProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-video-hover-bento.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -45,7 +46,7 @@ interface ProjectVideoHoverBentoProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-video-hover-bento.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
             }
           ),
@@ -587,16 +588,40 @@ function ProjectVideoHoverBento({
       pattern,
       patternOpacity,
       className: cn("min-h-screen", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: cn("relative h-[50vh] md:h-[60vh]", headerClassName), children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 max-w-1/2 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mr-4 text-sm font-medium tracking-wider uppercase opacity-80", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading })),
-            /* @__PURE__ */ jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
-          ] })
-        ] }) }) }),
-        renderVideoSections()
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: cn("relative h-[50vh] md:h-[60vh]", headerClassName), children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-4 max-w-1/2 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mr-4 text-sm font-medium tracking-wider uppercase opacity-80",
+                      subheadingClassName
+                    ),
+                    children: subheading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading })),
+                /* @__PURE__ */ jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
+              ] })
+            ] }) }) }),
+            renderVideoSections()
+          ]
+        }
+      )
     }
   );
 }

package/dist/project-video-hover-grid.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,14 +611,47 @@ function ProjectVideoHoverGrid({
       patternOpacity,
       className: cn("min-h-screen", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-[50vh]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 bottom-12 flex items-end", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mr-4 text-sm font-medium tracking-wider uppercase opacity-80", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
-          ] })
-        ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName), children: renderVideoSections() })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-[50vh]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 bottom-12 flex items-end",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mr-4 text-sm font-medium tracking-wider uppercase opacity-80",
+                      subheadingClassName
+                    ),
+                    children: subheading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
+              ] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName),
+            children: renderVideoSections()
+          }
+        )
       ]
     }
   );

package/dist/project-video-hover-grid.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -45,7 +46,7 @@ interface ProjectVideoHoverGridProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-video-hover-grid.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -45,7 +46,7 @@ interface ProjectVideoHoverGridProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-video-hover-grid.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,14 +590,47 @@ function ProjectVideoHoverGrid({
       patternOpacity,
       className: cn("min-h-screen", className),
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("relative h-[50vh]", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 bottom-12 flex items-end", headerClassName), children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mr-4 text-sm font-medium tracking-wider uppercase opacity-80", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading })),
-            /* @__PURE__ */ jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
-          ] })
-        ] }) }) }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName), children: renderVideoSections() })
+        /* @__PURE__ */ jsx("div", { className: cn("relative h-[50vh]", containerClassName), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 bottom-12 flex items-end",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mr-4 text-sm font-medium tracking-wider uppercase opacity-80",
+                      subheadingClassName
+                    ),
+                    children: subheading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading })),
+                /* @__PURE__ */ jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
+              ] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName),
+            children: renderVideoSections()
+          }
+        )
       ]
     }
   );