@opensite/ui 0.8.5 → 0.8.7

package/dist/project-studio-hover-preview.js

@@ -455,14 +455,14 @@ function ProjectStudioHoverPreview({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg bg-black/0 transition-all duration-500 group-hover:bg-black/10" })
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg bg-foreground/0 transition-all duration-500 group-hover:bg-foreground/10" })
           ]
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between gap-0.5", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm leading-tight font-medium transition-colors duration-300 group-hover:text-neutral-800 md:text-base", children: project.title }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm leading-tight font-medium transition-colors duration-300 md:text-base", children: project.title }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600", children: project.year }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: project.year }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: project.type })
         ] })
       ] })
@@ -526,10 +526,10 @@ function ProjectStudioHoverPreview({
                   },
                   className: "pointer-events-none absolute top-0 left-0 z-9999 select-none",
                   children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10 bg-black/95 shadow-2xl shadow-black/30 backdrop-blur-md" }),
-                    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-white", children: [
+                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-xl border border-border/10 bg-foreground/95 shadow-2xl shadow-foreground/30 backdrop-blur-md" }),
+                    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-background", children: [
                       /* @__PURE__ */ jsx("span", { className: "text-base", children: tooltipLabel ?? "Explore" }),
-                      /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full border border-white/30 bg-white/10", children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full border border-border/30 bg-card/10", children: /* @__PURE__ */ jsx(
                         motion.span,
                         {
                           animate: { x: [0, 2, 0] },
@@ -543,7 +543,7 @@ function ProjectStudioHoverPreview({
                         }
                       ) })
                     ] }),
-                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 scale-105 rounded-2xl bg-white/5 blur-sm" })
+                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 scale-105 rounded-2xl bg-card/5 blur-sm" })
                   ] })
                 }
               ) })

package/dist/project-video-carousel.cjs

@@ -1183,8 +1183,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-carousel.js

@@ -1159,8 +1159,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-bento.cjs

@@ -573,8 +573,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-bento.js

@@ -552,8 +552,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-grid.cjs

@@ -573,8 +573,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-grid.js

@@ -552,8 +552,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-rounded.cjs

@@ -573,8 +573,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -623,7 +623,7 @@ function ProjectVideoHoverRounded({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-left text-foreground", headerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-left", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {

package/dist/project-video-hover-rounded.js

@@ -552,8 +552,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -602,7 +602,7 @@ function ProjectVideoHoverRounded({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-left text-foreground", headerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-left", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {

package/dist/project-video-hover-stack.cjs

@@ -573,8 +573,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -622,7 +622,7 @@ function ProjectVideoHoverStack({
       patternOpacity,
       className: cn("min-h-screen", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-[50vh]", 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: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-[50vh]", 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 sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {

package/dist/project-video-hover-stack.js

@@ -552,8 +552,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -601,7 +601,7 @@ function ProjectVideoHoverStack({
       patternOpacity,
       className: cn("min-h-screen", className),
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("relative h-[50vh]", 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: [
+        /* @__PURE__ */ jsx("div", { className: cn("relative h-[50vh]", headerClassName), children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {

package/dist/project-video-hover-two-by-two.cjs

@@ -574,8 +574,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -626,7 +626,7 @@ function ProjectVideoHoverTwoByTwo({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-left text-foreground", headerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-left", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {

package/dist/project-video-hover-two-by-two.js

@@ -553,8 +553,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -605,7 +605,7 @@ function ProjectVideoHoverTwoByTwo({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-left text-foreground", headerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-left", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {

package/dist/project-zigzag-layout.cjs

@@ -646,7 +646,7 @@ function ProjectZigzagLayout({
               Badge,
               {
                 variant: "secondary",
-                className: "bg-black/60 text-white backdrop-blur-sm",
+                className: "bg-foreground/60 text-background backdrop-blur-sm",
                 children: project.category
               }
             ) })

package/dist/project-zigzag-layout.js

@@ -624,7 +624,7 @@ function ProjectZigzagLayout({
               Badge,
               {
                 variant: "secondary",
-                className: "bg-black/60 text-white backdrop-blur-sm",
+                className: "bg-foreground/60 text-background backdrop-blur-sm",
                 children: project.category
               }
             ) })