@opensite/ui 2.8.6 → 2.8.8

package/dist/testimonials-images-helpful.js

@@ -5,11 +5,11 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { cva } from 'class-variance-authority';
 import { Img } from '@page-speed/img';
+import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/testimonials/testimonials-images-helpful.tsx
 function cn(...inputs) {
@@ -23,10 +23,22 @@ var DynamicIcon = React2.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
-function AspectRatio({
-  ...props
+function StarRating({
+  rating,
+  size = 18,
+  className
 }) {
-  return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
+    DynamicIcon,
+    {
+      name: "icon-park-solid/star",
+      size,
+      className: cn(
+        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
+      )
+    },
+    star
+  )) });
 }
 function Avatar({
   className,
@@ -73,29 +85,6 @@ function AvatarFallback({
     }
   );
 }
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
 function Separator({
   className,
   orientation = "horizontal",
@@ -910,23 +899,11 @@ var Section = React2__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-function StarRating({ rating, size = 16 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
-    DynamicIcon,
-    {
-      name: "lucide/star",
-      size,
-      className: cn(
-        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
-      )
-    },
-    star
-  )) });
-}
 function TestimonialsImagesHelpful({
   reviews,
   reviewsSlot,
   heading,
+  verifiedPurchaseLabel,
   writeReviewLabel,
   reportButtonLabel,
   className,
@@ -938,12 +915,16 @@ function TestimonialsImagesHelpful({
   imagesClassName,
   onWriteReview,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
   const [helpfulClicked, setHelpfulClicked] = useState(/* @__PURE__ */ new Set());
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxItems, setLightboxItems] = useState([]);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
   const totalReviews = reviews?.length ?? 0;
   const averageRating = totalReviews > 0 ? (reviews?.reduce((sum, review) => sum + review.rating, 0) ?? 0) / totalReviews : 0;
   const handleHelpful = useCallback((reviewIndex) => {
@@ -957,6 +938,25 @@ function TestimonialsImagesHelpful({
       return newSet;
     });
   }, []);
+  const handleImageClick = useCallback(
+    (reviewImages, imageIndex) => {
+      const items = reviewImages.map((src, i) => ({
+        id: `review-image-${i}`,
+        type: "image",
+        src,
+        alt: `Review image ${i + 1}`,
+        download: true,
+        share: true
+      }));
+      setLightboxItems(items);
+      setLightboxIndex(imageIndex);
+      setLightboxOpen(true);
+    },
+    []
+  );
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const getAuthorName = useCallback((review) => {
     if (typeof review.author === "string") return review.author;
     return "";
@@ -970,54 +970,28 @@ function TestimonialsImagesHelpful({
     return /* @__PURE__ */ jsx("div", { className: "space-y-0", children: reviews.map((review, index) => {
       const authorName = getAuthorName(review);
       return /* @__PURE__ */ jsxs("div", { className: reviewClassName, children: [
-        index > 0 && /* @__PURE__ */ jsx(Separator, { className: "my-6" }),
-        /* @__PURE__ */ jsx(Card, { className: "border-0 p-0 shadow-none", children: /* @__PURE__ */ jsxs(CardContent, { className: cn("space-y-4 p-0", contentClassName), children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex items-start justify-between gap-4",
-                authorClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
-                    /* @__PURE__ */ jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-                    /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: review.author }) : review.author),
-                      review.verified && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 text-emerald-600", children: /* @__PURE__ */ jsx(
-                        DynamicIcon,
-                        {
-                          name: "lucide/badge-check",
-                          size: 16
-                        }
-                      ) })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-                      review.date && /* @__PURE__ */ jsx("span", { children: review.date }),
-                      review.variant && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { children: "\xB7" }),
-                        /* @__PURE__ */ jsx("span", { children: review.variant })
-                      ] })
-                    ] })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx(StarRating, { rating: review.rating, size: 16 })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { children: [
-            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-medium", children: review.title }) : review.title),
-            review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: review.content }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: review.content }))
+        index > 0 && /* @__PURE__ */ jsx(Separator, { className: "bg-border/50 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-12 md:my-16" }),
+        /* @__PURE__ */ jsxs("div", { className: cn("space-y-6 md:space-y-12", contentClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx(StarRating, { rating: review.rating, size: 22 }),
+            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-medium", children: review.title }) : review.title)
           ] }),
-          review.images && review.images.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", imagesClassName), children: review.images.map((image, imgIndex) => /* @__PURE__ */ jsx(
+          review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base md:text-lg leading-relaxed font-light", children: review.content }) : review.content),
+          review.images && review.images.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", imagesClassName), children: review.images.map((image, imgIndex) => /* @__PURE__ */ jsx(
             "div",
             {
-              className: "size-20 overflow-hidden rounded-lg sm:size-24",
-              children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, children: /* @__PURE__ */ jsx(
+              className: "size-20 cursor-pointer overflow-hidden rounded-lg sm:size-24 transition-transform duration-300 hover:scale-[1.03] shadow-sm hover:shadow-lg",
+              onClick: () => handleImageClick(review.images, imgIndex),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleImageClick(review.images, imgIndex);
+                }
+              },
+              "aria-label": `View review image ${imgIndex + 1} in lightbox`,
+              children: /* @__PURE__ */ jsx(
                 Img,
                 {
                   src: image,
@@ -1025,54 +999,85 @@ function TestimonialsImagesHelpful({
                   className: "size-full object-cover",
                   optixFlowConfig
                 }
-              ) })
+              )
             },
             imgIndex
           )) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between w-full"), children: [
             /* @__PURE__ */ jsxs(
-              Pressable,
+              "div",
               {
-                asButton: true,
-                variant: "ghost",
-                size: "sm",
-                className: cn(
-                  "h-8 gap-1.5 text-muted-foreground",
-                  helpfulClicked.has(index) && "text-foreground"
-                ),
-                onClick: () => handleHelpful(index),
+                className: cn("flex items-center gap-5", authorClassName),
                 children: [
-                  /* @__PURE__ */ jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/thumbs-up",
-                      size: 16,
-                      className: cn(
-                        helpfulClicked.has(index) && "fill-current"
-                      )
-                    }
-                  ),
-                  "Helpful",
-                  review.helpful !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-                    "(",
-                    review.helpful + (helpfulClicked.has(index) ? 1 : 0),
-                    ")"
+                  /* @__PURE__ */ jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
+                    /* @__PURE__ */ jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
+                    /* @__PURE__ */ jsx(AvatarFallback, { className: "text-md", children: getInitials(authorName) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: review.author }) : review.author),
+                      review.verified && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 18 }),
+                        verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
+                        !verifiedPurchaseLabel && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Verified Purchase" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+                      review.date && /* @__PURE__ */ jsx("span", { children: review.date }),
+                      review.variant && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { children: review.variant })
+                      ] })
+                    ] })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                asButton: true,
-                variant: "ghost",
-                size: "sm",
-                className: "h-8 text-muted-foreground",
-                children: reportButtonLabel ?? "Report"
-              }
-            )
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  asButton: true,
+                  variant: "ghost",
+                  size: "sm",
+                  className: cn(
+                    "h-8 gap-1.5",
+                    helpfulClicked.has(index) ? "text-foreground" : "text-muted-foreground"
+                  ),
+                  onClick: () => handleHelpful(index),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/thumbs-up",
+                        size: 16,
+                        className: cn(
+                          helpfulClicked.has(index) && "fill-current"
+                        )
+                      }
+                    ),
+                    "Helpful",
+                    review.helpful !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+                      "(",
+                      review.helpful + (helpfulClicked.has(index) ? 1 : 0),
+                      ")"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  asButton: true,
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-8 text-muted-foreground",
+                  children: reportButtonLabel ?? "Report"
+                }
+              )
+            ] })
           ] })
-        ] }) })
+        ] })
       ] }, index);
     }) });
   }, [
@@ -1085,11 +1090,13 @@ function TestimonialsImagesHelpful({
     helpfulClicked,
     optixFlowConfig,
     reportButtonLabel,
+    verifiedPurchaseLabel,
     getAuthorName,
     getInitials,
-    handleHelpful
+    handleHelpful,
+    handleImageClick
   ]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
@@ -1097,42 +1104,57 @@ function TestimonialsImagesHelpful({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
-              headerClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                  "h2",
-                  {
-                    className: cn(
-                      "text-2xl font-semibold tracking-tight md:text-3xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                totalReviews > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(StarRating, { rating: Math.round(averageRating), size: 20 }),
-                  /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: averageRating.toFixed(1) }),
-                  /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-                    "(",
-                    totalReviews,
-                    " reviews)"
-                  ] })
-                ] })
-              ] }),
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-full md:max-w-3xl", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("mb-12 md:mb-24 space-y-6", headerClassName), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-2xl font-semibold tracking-tight md:text-3xl lg:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
               (writeReviewLabel || onWriteReview) && /* @__PURE__ */ jsx(Pressable, { asButton: true, variant: "outline", onClick: onWriteReview, children: writeReviewLabel })
-            ]
+            ] }),
+            totalReviews > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(StarRating, { rating: Math.round(averageRating), size: 22 }),
+              /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+                averageRating.toFixed(1),
+                " out of 5 \xB7 ",
+                totalReviews,
+                " reviews"
+              ] })
+            ] })
+          ] }),
+          renderedReviews
+        ] }),
+        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
           }
-        ),
-        renderedReviews
-      ] })
+        )
+      ]
     }
   );
 }

package/dist/testimonials-large-quote.cjs

@@ -472,7 +472,8 @@ function TestimonialsLargeQuote({
   authorClassName,
   avatarClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -491,49 +492,78 @@ function TestimonialsLargeQuote({
     if (!testimonial) return null;
     const authorName = getAuthorName();
     const avatarSrc = getAvatarSrc();
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: "lucide/quote",
-          size: 64,
-          className: cn("mx-auto mb-8 text-primary/20", quoteIconClassName)
-        }
-      ),
-      testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-        "blockquote",
-        {
-          className: cn(
-            "text-2xl font-medium leading-relaxed md:text-3xl lg:text-4xl",
-            quoteClassName
-          ),
-          children: testimonial.quote
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: testimonial.quote })),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "mt-10 flex flex-col items-center gap-4",
-            authorClassName
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto max-full md:max-w-lg text-center",
+          contentClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: "mdi/comment-quote-outline",
+              size: 48,
+              className: cn("mx-auto mb-8 ", quoteIconClassName)
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn("size-16", avatarClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-lg", children: getInitials(authorName) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold", children: testimonial.author }) : testimonial.author),
-              (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
-                testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role),
-                testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company)
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] });
-  }, [testimonialSlot, contentClassName, quoteIconClassName, testimonial, quoteClassName, authorClassName, avatarClassName, getAuthorName, getAvatarSrc, getInitials]);
+          testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "blockquote",
+            {
+              className: cn(
+                "text-2xl font-light leading-relaxed md:text-3xl lg:text-4xl text-balance",
+                quoteClassName
+              ),
+              children: testimonial.quote
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: testimonial.quote })),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "mt-10 md:mt-16 flex flex-col items-center gap-4 md:gap-8",
+                authorClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Avatar,
+                  {
+                    className: cn(
+                      "relative flex shrink-0 overflow-hidden rounded-full size-16 ring-4 ring-primary shadow-lg",
+                      avatarClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-lg", children: getInitials(authorName) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+                  testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold", children: testimonial.author }) : testimonial.author),
+                  (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-normal opacity-75", children: testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm uppercase font-semibold opacity-75", children: testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company) })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }, [
+    testimonialSlot,
+    contentClassName,
+    quoteIconClassName,
+    testimonial,
+    quoteClassName,
+    authorClassName,
+    avatarClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -542,6 +572,7 @@ function TestimonialsLargeQuote({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: renderedTestimonial
     }
   );

package/dist/testimonials-large-quote.d.cts

@@ -56,6 +56,10 @@ interface TestimonialsLargeQuoteProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsLargeQuote - A centered, single testimonial section featuring an oversized
@@ -79,6 +83,6 @@ interface TestimonialsLargeQuoteProps {
  * />
  * ```
  */
-declare function TestimonialsLargeQuote({ testimonial, testimonialSlot, className, contentClassName, quoteIconClassName, quoteClassName, authorClassName, avatarClassName, background, spacing, pattern, patternOpacity, }: TestimonialsLargeQuoteProps): React.JSX.Element;
+declare function TestimonialsLargeQuote({ testimonial, testimonialSlot, className, contentClassName, quoteIconClassName, quoteClassName, authorClassName, avatarClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsLargeQuoteProps): React.JSX.Element;
 
 export { TestimonialsLargeQuote, type TestimonialsLargeQuoteProps };

package/dist/testimonials-large-quote.d.ts

@@ -56,6 +56,10 @@ interface TestimonialsLargeQuoteProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsLargeQuote - A centered, single testimonial section featuring an oversized
@@ -79,6 +83,6 @@ interface TestimonialsLargeQuoteProps {
  * />
  * ```
  */
-declare function TestimonialsLargeQuote({ testimonial, testimonialSlot, className, contentClassName, quoteIconClassName, quoteClassName, authorClassName, avatarClassName, background, spacing, pattern, patternOpacity, }: TestimonialsLargeQuoteProps): React.JSX.Element;
+declare function TestimonialsLargeQuote({ testimonial, testimonialSlot, className, contentClassName, quoteIconClassName, quoteClassName, authorClassName, avatarClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsLargeQuoteProps): React.JSX.Element;
 
 export { TestimonialsLargeQuote, type TestimonialsLargeQuoteProps };