@opensite/ui 1.1.9 → 1.2.0

package/dist/blur-vignette-grid.cjs

@@ -7,7 +7,6 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
 var jsxRuntime = require('react/jsx-runtime');
-var lightbox = require('@page-speed/lightbox');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -379,7 +378,7 @@ var Section = React__default.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -398,7 +397,7 @@ function BlurVignette({
   radius = "24px",
   inset = "16px",
   transitionLength = "32px",
-  blur = "21px"
+  blur = "8px"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
@@ -414,7 +413,7 @@ function BlurVignette({
         y: 0
       },
       viewport: { once: true, amount: 0.2 },
-      className: `group relative cursor-pointer overflow-hidden ${className}`,
+      className: `group relative cursor-pointer overflow-hidden rounded-[2.5rem] ${className}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
           .blur-vignette {
@@ -476,6 +475,10 @@ function BlurVignette({
   );
 }
 function BlurVignetteGrid({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   vignetteConfig,
@@ -492,32 +495,12 @@ function BlurVignetteGrid({
   patternClassName,
   optixFlowConfig
 }) {
-  const [lightboxOpen, setLightboxOpen] = React.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React.useState(0);
   const {
     radius = "24px",
     inset = "10px",
     transitionLength = "100px",
-    blur = "15px"
+    blur = "8px"
   } = vignetteConfig || {};
-  const lightboxItems = React.useMemo(
-    () => (images ?? []).map((img, index) => ({
-      id: `vignette-image-${index}`,
-      type: "image",
-      src: img.src,
-      alt: img.alt,
-      download: true,
-      share: true
-    })),
-    [images]
-  );
-  const handleImageClick = React.useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const imagesContent = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -529,40 +512,24 @@ function BlurVignetteGrid({
         transitionLength,
         blur,
         className: cn(
-          `col-span-${image.colSpan}`,
+          `md:col-span-${image.colSpan}`,
           image.height,
-          "rounded-[2.5rem] cursor-pointer",
           image.className,
           itemClassName
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          img.Img,
           {
-            onClick: () => handleImageClick(index),
-            role: "button",
-            tabIndex: 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleImageClick(index);
-              }
-            },
-            "aria-label": `View ${image.alt} in lightbox`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                width: 200,
-                height: 200,
-                className: cn(
-                  "size-full rounded-[2.5rem] object-cover",
-                  imageClassName
-                ),
-                src: image.src,
-                alt: image.alt,
-                loading: "lazy",
-                optixFlowConfig
-              }
-            )
+            width: 200,
+            height: 200,
+            className: cn(
+              "size-full rounded-[2.5rem] object-cover",
+              imageClassName
+            ),
+            src: image.src,
+            alt: image.alt,
+            loading: "lazy",
+            optixFlowConfig
           }
         )
       },
@@ -577,8 +544,7 @@ function BlurVignetteGrid({
     blur,
     itemClassName,
     imageClassName,
-    optixFlowConfig,
-    handleImageClick
+    optixFlowConfig
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -590,33 +556,43 @@ function BlurVignetteGrid({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName),
+            className: cn(`grid grid-cols-1 md:grid-cols-${gridColumns}`, gridGap, gridClassName),
             children: imagesContent
           }
-        ),
-        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          lightbox.Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
         )
       ]
     }

package/dist/blur-vignette-grid.d.cts

@@ -57,6 +57,22 @@ interface BlurVignetteConfig {
     blur?: string;
 }
 interface BlurVignetteGridProps {
+    /**
+     * Main title content
+     */
+    title?: React.ReactNode;
+    /**
+     * Description text below title
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Array of images to display in the grid
      */
@@ -141,6 +157,6 @@ interface BlurVignetteGridProps {
  * />
  * ```
  */
-declare function BlurVignetteGrid({ images, imagesSlot, vignetteConfig, gridColumns, gridGap, className, gridClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: BlurVignetteGridProps): React.JSX.Element;
+declare function BlurVignetteGrid({ title, description, titleClassName, descriptionClassName, images, imagesSlot, vignetteConfig, gridColumns, gridGap, className, gridClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: BlurVignetteGridProps): React.JSX.Element;
 
 export { BlurVignetteGrid, type BlurVignetteGridImage, type BlurVignetteGridProps };

package/dist/blur-vignette-grid.d.ts

@@ -57,6 +57,22 @@ interface BlurVignetteConfig {
     blur?: string;
 }
 interface BlurVignetteGridProps {
+    /**
+     * Main title content
+     */
+    title?: React.ReactNode;
+    /**
+     * Description text below title
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Array of images to display in the grid
      */
@@ -141,6 +157,6 @@ interface BlurVignetteGridProps {
  * />
  * ```
  */
-declare function BlurVignetteGrid({ images, imagesSlot, vignetteConfig, gridColumns, gridGap, className, gridClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: BlurVignetteGridProps): React.JSX.Element;
+declare function BlurVignetteGrid({ title, description, titleClassName, descriptionClassName, images, imagesSlot, vignetteConfig, gridColumns, gridGap, className, gridClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: BlurVignetteGridProps): React.JSX.Element;
 
 export { BlurVignetteGrid, type BlurVignetteGridImage, type BlurVignetteGridProps };

package/dist/blur-vignette-grid.js

@@ -1,11 +1,10 @@
 "use client";
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/gallery/blur-vignette-grid.tsx
 function cn(...inputs) {
@@ -373,7 +372,7 @@ var Section = React.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -392,7 +391,7 @@ function BlurVignette({
   radius = "24px",
   inset = "16px",
   transitionLength = "32px",
-  blur = "21px"
+  blur = "8px"
 }) {
   return /* @__PURE__ */ jsxs(
     motion.div,
@@ -408,7 +407,7 @@ function BlurVignette({
         y: 0
       },
       viewport: { once: true, amount: 0.2 },
-      className: `group relative cursor-pointer overflow-hidden ${className}`,
+      className: `group relative cursor-pointer overflow-hidden rounded-[2.5rem] ${className}`,
       children: [
         /* @__PURE__ */ jsx("style", { children: `
           .blur-vignette {
@@ -470,6 +469,10 @@ function BlurVignette({
   );
 }
 function BlurVignetteGrid({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   vignetteConfig,
@@ -486,32 +489,12 @@ function BlurVignetteGrid({
   patternClassName,
   optixFlowConfig
 }) {
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
   const {
     radius = "24px",
     inset = "10px",
     transitionLength = "100px",
-    blur = "15px"
+    blur = "8px"
   } = vignetteConfig || {};
-  const lightboxItems = useMemo(
-    () => (images ?? []).map((img, index) => ({
-      id: `vignette-image-${index}`,
-      type: "image",
-      src: img.src,
-      alt: img.alt,
-      download: true,
-      share: true
-    })),
-    [images]
-  );
-  const handleImageClick = useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -523,40 +506,24 @@ function BlurVignetteGrid({
         transitionLength,
         blur,
         className: cn(
-          `col-span-${image.colSpan}`,
+          `md:col-span-${image.colSpan}`,
           image.height,
-          "rounded-[2.5rem] cursor-pointer",
           image.className,
           itemClassName
         ),
         children: /* @__PURE__ */ jsx(
-          "div",
+          Img,
           {
-            onClick: () => handleImageClick(index),
-            role: "button",
-            tabIndex: 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleImageClick(index);
-              }
-            },
-            "aria-label": `View ${image.alt} in lightbox`,
-            children: /* @__PURE__ */ jsx(
-              Img,
-              {
-                width: 200,
-                height: 200,
-                className: cn(
-                  "size-full rounded-[2.5rem] object-cover",
-                  imageClassName
-                ),
-                src: image.src,
-                alt: image.alt,
-                loading: "lazy",
-                optixFlowConfig
-              }
-            )
+            width: 200,
+            height: 200,
+            className: cn(
+              "size-full rounded-[2.5rem] object-cover",
+              imageClassName
+            ),
+            src: image.src,
+            alt: image.alt,
+            loading: "lazy",
+            optixFlowConfig
           }
         )
       },
@@ -571,8 +538,7 @@ function BlurVignetteGrid({
     blur,
     itemClassName,
     imageClassName,
-    optixFlowConfig,
-    handleImageClick
+    optixFlowConfig
   ]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -584,33 +550,43 @@ function BlurVignetteGrid({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName),
+            className: cn(`grid grid-cols-1 md:grid-cols-${gridColumns}`, gridGap, gridClassName),
             children: imagesContent
           }
-        ),
-        lightboxOpen && /* @__PURE__ */ jsx(
-          Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
         )
       ]
     }

package/dist/carousel-animated-sections.cjs

@@ -928,7 +928,7 @@ var Section = React6__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-animated-sections.js

@@ -907,7 +907,7 @@ var Section = React6__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-auto-progress-slides.cjs

@@ -948,7 +948,7 @@ var Section = React__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-auto-progress-slides.js

@@ -927,7 +927,7 @@ var Section = React__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-autoplay-progress.cjs

@@ -949,7 +949,7 @@ var Section = React6__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-autoplay-progress.js

@@ -924,7 +924,7 @@ var Section = React6__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-badge-cards.cjs

@@ -1113,7 +1113,7 @@ var Section = React4__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -1177,7 +1177,7 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6 w-full",
+              "group flex flex-col justify-between rounded-xl p-6 w-full h-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,

package/dist/carousel-badge-cards.js

@@ -1089,7 +1089,7 @@ var Section = React4__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -1153,7 +1153,7 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6 w-full",
+              "group flex flex-col justify-between rounded-xl p-6 w-full h-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,

package/dist/carousel-demo-link.cjs

@@ -1050,7 +1050,7 @@ var Section = React4__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-demo-link.js

@@ -1026,7 +1026,7 @@ var Section = React4__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-feature-badge.cjs

@@ -998,7 +998,7 @@ var Section = React6__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-feature-badge.js

@@ -974,7 +974,7 @@ var Section = React6__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-fullscreen-scroll-fx.cjs

@@ -812,7 +812,7 @@ var Section = React5__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-fullscreen-scroll-fx.js

@@ -791,7 +791,7 @@ var Section = React5__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-gallery-thumbnails.cjs

@@ -927,7 +927,7 @@ var Section = React__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children