@opensite/ui 0.4.2 → 0.4.4

package/dist/project-featured-carousel.cjs

@@ -813,6 +813,7 @@ var Section = React6__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -832,7 +833,7 @@ var Section = React6__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1162,11 +1163,14 @@ function ProjectFeaturedCarousel({
   const renderProjects = () => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
-    return projects.map((project, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      CarouselItem,
+    return projects.map((project, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "pl-4 md:basis-1/2 lg:basis-1/3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        className: "pl-4 md:basis-1/2 lg:basis-1/3",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("group h-full overflow-hidden rounded-xl border bg-card", cardClassName), children: [
+        className: cn(
+          "group h-full overflow-hidden rounded-xl border bg-card",
+          cardClassName
+        ),
+        children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-square overflow-hidden", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
@@ -1198,10 +1202,9 @@ function ProjectFeaturedCarousel({
               }
             )
           ] })
-        ] })
-      },
-      index
-    ));
+        ]
+      }
+    ) }, index));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -1211,27 +1214,54 @@ function ProjectFeaturedCarousel({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center md:mb-16", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground mx-auto max-w-3xl text-lg", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Carousel,
-          {
-            opts: {
-              align: "start",
-              loop: true
-            },
-            className: cn("w-full", carouselClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "-ml-4", children: renderProjects() }),
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "-left-4 md:-left-6" }),
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "-right-4 md:-right-6" })
-            ]
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "container mx-auto px-4 md:px-6 2xl:max-w-[1400px]",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center md:mb-16", headerClassName), children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground mx-auto max-w-3xl text-lg",
+                    subheadingClassName
+                  ),
+                  children: subheading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Carousel,
+              {
+                opts: {
+                  align: "start",
+                  loop: true
+                },
+                className: cn("w-full", carouselClassName),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "-ml-4", children: renderProjects() }),
+                  /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "-left-4 md:-left-6" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "-right-4 md:-right-6" })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

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

@@ -2,9 +2,10 @@ 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 './blocks-CJYRLpXR.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectFeaturedCarouselItem {
@@ -48,7 +49,7 @@ interface ProjectFeaturedCarouselProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

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

@@ -2,9 +2,10 @@ 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 './blocks-BWc_7JNA.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectFeaturedCarouselItem {
@@ -48,7 +49,7 @@ interface ProjectFeaturedCarouselProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-featured-carousel.js

@@ -789,6 +789,7 @@ var Section = React6__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -808,7 +809,7 @@ var Section = React6__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1138,11 +1139,14 @@ function ProjectFeaturedCarousel({
   const renderProjects = () => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
-    return projects.map((project, index) => /* @__PURE__ */ jsx(
-      CarouselItem,
+    return projects.map((project, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "pl-4 md:basis-1/2 lg:basis-1/3", children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        className: "pl-4 md:basis-1/2 lg:basis-1/3",
-        children: /* @__PURE__ */ jsxs("div", { className: cn("group h-full overflow-hidden rounded-xl border bg-card", cardClassName), children: [
+        className: cn(
+          "group h-full overflow-hidden rounded-xl border bg-card",
+          cardClassName
+        ),
+        children: [
           /* @__PURE__ */ jsxs("div", { className: "relative aspect-square overflow-hidden", children: [
             /* @__PURE__ */ jsx(
               Img,
@@ -1174,10 +1178,9 @@ function ProjectFeaturedCarousel({
               }
             )
           ] })
-        ] })
-      },
-      index
-    ));
+        ]
+      }
+    ) }, index));
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -1187,27 +1190,54 @@ function ProjectFeaturedCarousel({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center md:mb-16", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground mx-auto max-w-3xl text-lg", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsxs(
-          Carousel,
-          {
-            opts: {
-              align: "start",
-              loop: true
-            },
-            className: cn("w-full", carouselClassName),
-            children: [
-              /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-4", children: renderProjects() }),
-              /* @__PURE__ */ jsx(CarouselPrevious, { className: "-left-4 md:-left-6" }),
-              /* @__PURE__ */ jsx(CarouselNext, { className: "-right-4 md:-right-6" })
-            ]
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "container mx-auto px-4 md:px-6 2xl:max-w-[1400px]",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center md:mb-16", headerClassName), children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground mx-auto max-w-3xl text-lg",
+                    subheadingClassName
+                  ),
+                  children: subheading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Carousel,
+              {
+                opts: {
+                  align: "start",
+                  loop: true
+                },
+                className: cn("w-full", carouselClassName),
+                children: [
+                  /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-4", children: renderProjects() }),
+                  /* @__PURE__ */ jsx(CarouselPrevious, { className: "-left-4 md:-left-6" }),
+                  /* @__PURE__ */ jsx(CarouselNext, { className: "-right-4 md:-right-6" })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/project-filterable-gallery.cjs

@@ -342,6 +342,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -361,7 +362,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -421,7 +422,10 @@ function ProjectFilterableGallery({
           duration: 0.2,
           ease: "easeInOut"
         },
-        className: cn("group relative cursor-pointer overflow-hidden rounded-lg", cardClassName),
+        className: cn(
+          "group relative cursor-pointer overflow-hidden rounded-lg",
+          cardClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-4/3 h-96 w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
@@ -451,20 +455,39 @@ function ProjectFilterableGallery({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-16 flex flex-wrap justify-center gap-8", filtersClassName), children: categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: () => handleFilterChange(category),
             className: cn(
-              "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
-              activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
-              filterButtonClassName
+              "mb-16 flex flex-wrap justify-center gap-8",
+              filtersClassName
             ),
-            children: category
-          },
-          category
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { layout: true, className: cn("grid grid-cols-1 gap-8 md:grid-cols-2", gridClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: renderProjects() }) }),
+            children: categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => handleFilterChange(category),
+                className: cn(
+                  "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
+                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
+                  filterButtonClassName
+                ),
+                children: category
+              },
+              category
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            layout: true,
+            className: cn(
+              "grid grid-cols-1 gap-8 md:grid-cols-2",
+              gridClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: renderProjects() })
+          }
+        ),
         filteredItems?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {

package/dist/project-filterable-gallery.d.cts

@@ -2,9 +2,10 @@ 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 './blocks-CJYRLpXR.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectFilterableGalleryItem {
@@ -43,7 +44,7 @@ interface ProjectFilterableGalleryProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-filterable-gallery.d.ts

@@ -2,9 +2,10 @@ 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 './blocks-BWc_7JNA.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectFilterableGalleryItem {
@@ -43,7 +44,7 @@ interface ProjectFilterableGalleryProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-filterable-gallery.js

@@ -336,6 +336,7 @@ var Section = React.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -355,7 +356,7 @@ var Section = React.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -415,7 +416,10 @@ function ProjectFilterableGallery({
           duration: 0.2,
           ease: "easeInOut"
         },
-        className: cn("group relative cursor-pointer overflow-hidden rounded-lg", cardClassName),
+        className: cn(
+          "group relative cursor-pointer overflow-hidden rounded-lg",
+          cardClassName
+        ),
         children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-4/3 h-96 w-full", children: [
           /* @__PURE__ */ jsx(
             Img,
@@ -445,20 +449,39 @@ function ProjectFilterableGallery({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mb-16 flex flex-wrap justify-center gap-8", filtersClassName), children: categories?.map((category) => /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: () => handleFilterChange(category),
             className: cn(
-              "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
-              activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
-              filterButtonClassName
+              "mb-16 flex flex-wrap justify-center gap-8",
+              filtersClassName
             ),
-            children: category
-          },
-          category
-        )) }),
-        /* @__PURE__ */ jsx(motion.div, { layout: true, className: cn("grid grid-cols-1 gap-8 md:grid-cols-2", gridClassName), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: renderProjects() }) }),
+            children: categories?.map((category) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleFilterChange(category),
+                className: cn(
+                  "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
+                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
+                  filterButtonClassName
+                ),
+                children: category
+              },
+              category
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            className: cn(
+              "grid grid-cols-1 gap-8 md:grid-cols-2",
+              gridClassName
+            ),
+            children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: renderProjects() })
+          }
+        ),
         filteredItems?.length === 0 && /* @__PURE__ */ jsx(
           motion.div,
           {

package/dist/project-filterable-three-column.cjs

@@ -342,6 +342,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -361,7 +362,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -421,7 +422,10 @@ function ProjectFilterableThreeColumn({
           duration: 0.2,
           ease: "easeInOut"
         },
-        className: cn("group relative cursor-pointer overflow-hidden rounded-lg", cardClassName),
+        className: cn(
+          "group relative cursor-pointer overflow-hidden rounded-lg",
+          cardClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-4/3 h-96 w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
@@ -451,20 +455,39 @@ function ProjectFilterableThreeColumn({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-16 flex flex-wrap justify-center gap-8", filterClassName), children: categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: () => handleFilterChange(category),
             className: cn(
-              "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
-              activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
-              filterButtonClassName
+              "mb-16 flex flex-wrap justify-center gap-8",
+              filterClassName
             ),
-            children: category
-          },
-          category
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { layout: true, className: cn("grid grid-cols-1 gap-8 md:grid-cols-3", gridClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: renderProjects() }) }),
+            children: categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => handleFilterChange(category),
+                className: cn(
+                  "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
+                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
+                  filterButtonClassName
+                ),
+                children: category
+              },
+              category
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            layout: true,
+            className: cn(
+              "grid grid-cols-1 gap-8 md:grid-cols-3",
+              gridClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: renderProjects() })
+          }
+        ),
         (filteredItems?.length ?? 0) === 0 && /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {

package/dist/project-filterable-three-column.d.cts

@@ -2,9 +2,10 @@ 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 './blocks-CJYRLpXR.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectFilterableThreeColumnItem {
@@ -43,7 +44,7 @@ interface ProjectFilterableThreeColumnProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-filterable-three-column.d.ts

@@ -2,9 +2,10 @@ 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 './blocks-BWc_7JNA.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ProjectFilterableThreeColumnItem {
@@ -43,7 +44,7 @@ interface ProjectFilterableThreeColumnProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */