@opensite/ui 1.1.8 → 1.2.0

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-e8Z-KfHF.js';
-import { O as OptixFlowConfig } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -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/{button-variants-BmOlmOJa.d.cts → button-variants-lRElsmTc.d.cts}

@@ -1,8 +1,8 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
 declare const buttonVariants: (props?: ({
-    variant?: "outline" | "link" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "md" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 export { buttonVariants as b };

package/dist/{button-variants-BmOlmOJa.d.ts → button-variants-lRElsmTc.d.ts}

@@ -1,8 +1,8 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
 declare const buttonVariants: (props?: ({
-    variant?: "outline" | "link" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "md" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 export { buttonVariants as b };

package/dist/button.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { b as buttonVariants } from './button-variants-BmOlmOJa.cjs';
+import { b as buttonVariants } from './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/button.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { b as buttonVariants } from './button-variants-BmOlmOJa.js';
+import { b as buttonVariants } from './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

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.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } from './community-initiatives-Cuk3GvML.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-animated-sections.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } from './community-initiatives-e8Z-KfHF.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

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.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Cuk3GvML.cjs';
-import { O as OptixFlowConfig } from './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-auto-progress-slides.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-e8Z-KfHF.js';
-import { O as OptixFlowConfig } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

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.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { EmblaOptionsType } from 'embla-carousel';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Cuk3GvML.cjs';
-import { O as OptixFlowConfig } from './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-autoplay-progress.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { EmblaOptionsType } from 'embla-carousel';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-e8Z-KfHF.js';
-import { O as OptixFlowConfig } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

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

@@ -9,7 +9,6 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var useEmblaCarousel = require('embla-carousel-react');
-var lightbox = require('@page-speed/lightbox');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1114,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
@@ -1152,8 +1151,6 @@ function CarouselBadgeCards({
   const [carouselApi, setCarouselApi] = React4.useState();
   const [canScrollPrev, setCanScrollPrev] = React4.useState(false);
   const [canScrollNext, setCanScrollNext] = React4.useState(false);
-  const [lightboxOpen, setLightboxOpen] = React4.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React4.useState(0);
   React4.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -1168,30 +1165,10 @@ function CarouselBadgeCards({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const lightboxItems = React4.useMemo(
-    () => (items ?? []).map((item, index) => ({
-      id: `badge-card-${index}`,
-      type: "image",
-      src: item.image,
-      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-      download: true,
-      share: true
-    })),
-    [items]
-  );
-  const handleImageClick = React4.useCallback((index, e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React4.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const itemsContent = React4.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -1200,42 +1177,26 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6",
+              "group flex flex-col justify-between rounded-xl p-6 w-full h-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
                 {
-                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
-                  onClick: (e) => handleImageClick(index, e),
-                  role: "button",
-                  tabIndex: 0,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleImageClick(index, e);
-                    }
-                  },
-                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: item.image,
-                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                      className: cn(
-                        "h-full w-full object-cover object-center",
-                        imageClassName
-                      ),
-                      loading: "lazy",
-                      optixFlowConfig
-                    }
-                  )
+                  src: item.image,
+                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
                 }
-              ) }) }) }),
+              ) }) }) }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: badgeClassName, children: item.label }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.description }),
@@ -1266,7 +1227,7 @@ function CarouselBadgeCards({
     imageClassName,
     optixFlowConfig,
     readMoreText,
-    handleImageClick
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1290,7 +1251,7 @@ function CarouselBadgeCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl",
+                    "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
                     headingClassName
                   ),
                   children: heading
@@ -1350,28 +1311,7 @@ function CarouselBadgeCards({
               }
             )
           }
-        ) }),
-        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/carousel-badge-cards.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Cuk3GvML.cjs';
-import { O as OptixFlowConfig } from './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-badge-cards.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-e8Z-KfHF.js';
-import { O as OptixFlowConfig } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**