@opensite/ui 2.8.4 → 2.8.5

package/dist/registry.js

@@ -45153,7 +45153,8 @@ function TestimonialsSimpleGrid({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -45167,49 +45168,70 @@ function TestimonialsSimpleGrid({
     if (typeof testimonial.author === "string") return testimonial.author;
     return "";
   }, []);
-  const getAvatarSrc = useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAvatarSrc = useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
   const renderedTestimonials = useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", gridCols[effectiveColumns], gridClassName), children: testimonials.map((testimonial, index) => {
-      const authorName = getAuthorName(testimonial);
-      const avatarSrc = getAvatarSrc(testimonial);
-      return /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
-        testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
-          "p",
-          {
-            className: cn(
-              "mb-6 text-sm leading-relaxed text-muted-foreground",
-              quoteClassName
-            ),
-            children: [
-              "\u201C",
-              testimonial.quote,
-              "\u201D"
-            ]
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", quoteClassName), children: testimonial.quote })),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-          /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
-            /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-            /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-              testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : null),
-              testimonial.company && (typeof testimonial.company === "string" ? `, ${testimonial.company}` : null)
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("grid gap-6", gridCols[effectiveColumns], gridClassName),
+        children: testimonials.map((testimonial, index) => {
+          const authorName = getAuthorName(testimonial);
+          const avatarSrc = getAvatarSrc(testimonial);
+          return /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
+            testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: cn(
+                  "mb-6 text-sm leading-relaxed ",
+                  quoteClassName
+                ),
+                children: [
+                  "\u201C",
+                  testimonial.quote,
+                  "\u201D"
+                ]
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", quoteClassName), children: testimonial.quote })),
+            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
+              /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
+                /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs ", children: [
+                  testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : null),
+                  testimonial.company && (typeof testimonial.company === "string" ? `, ${testimonial.company}` : null)
+                ] })
+              ] })
             ] })
-          ] })
-        ] })
-      ] }) }, index);
-    }) });
-  }, [testimonialsSlot, gridCols, effectiveColumns, gridClassName, testimonials, cardClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
+          ] }) }, index);
+        })
+      }
+    );
+  }, [
+    testimonialsSlot,
+    gridCols,
+    effectiveColumns,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -45218,6 +45240,7 @@ function TestimonialsSimpleGrid({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -45234,16 +45257,7 @@ function TestimonialsSimpleGrid({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
             ]
           }
         ),
@@ -45263,7 +45277,8 @@ function TestimonialsSliderMinimal({
   avatarClassName,
   dotsClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -45295,9 +45310,12 @@ function TestimonialsSliderMinimal({
     if (typeof testimonial.author === "string") return testimonial.author;
     return "";
   }, []);
-  const getAvatarSrc = useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAvatarSrc = useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -45342,7 +45360,7 @@ function TestimonialsSliderMinimal({
                 ] }),
                 /* @__PURE__ */ jsxs("div", { children: [
                   current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: current.author }) : current.author),
-                  current.role && (typeof current.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: current.role }) : current.role)
+                  current.role && (typeof current.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm ", children: current.role }) : current.role)
                 ] })
               ]
             }
@@ -45350,7 +45368,17 @@ function TestimonialsSliderMinimal({
         ]
       }
     );
-  }, [testimonialsSlot, isTransitioning, current, quoteClassName, authorClassName, avatarClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    isTransitioning,
+    current,
+    quoteClassName,
+    authorClassName,
+    avatarClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -45359,6 +45387,7 @@ function TestimonialsSliderMinimal({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", contentClassName), children: [
         renderedTestimonial,
         testimonials && testimonials.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex justify-center gap-2", dotsClassName), children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
@@ -45367,7 +45396,7 @@ function TestimonialsSliderMinimal({
             onClick: () => goToSlide(index),
             className: cn(
               "size-2 rounded-full transition-all",
-              index === currentIndex ? "w-6 bg-primary" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+              index === currentIndex ? "w-6 bg-primary text-primary-foreground" : ""
             ),
             "aria-label": `Go to testimonial ${index + 1}`
           },
@@ -45391,7 +45420,8 @@ function TestimonialsSplitImage({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -45446,7 +45476,7 @@ function TestimonialsSplitImage({
             ] }),
             /* @__PURE__ */ jsxs("div", { children: [
               testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: testimonial.author }) : testimonial.author),
-              (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+              (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxs("p", { className: "text-sm ", children: [
                 testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role),
                 testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company)
               ] })
@@ -45455,7 +45485,18 @@ function TestimonialsSplitImage({
         ]
       }
     );
-  }, [testimonialSlot, effectiveImagePosition, contentClassName, quoteIconClassName, testimonial, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialSlot,
+    effectiveImagePosition,
+    contentClassName,
+    quoteIconClassName,
+    testimonial,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -45464,6 +45505,7 @@ function TestimonialsSplitImage({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -45513,7 +45555,8 @@ function TestimonialsStatsHeader({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -45521,9 +45564,12 @@ function TestimonialsStatsHeader({
     if (typeof testimonial.author === "string") return testimonial.author;
     return "";
   }, []);
-  const getAvatarSrc = useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAvatarSrc = useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -45604,7 +45650,17 @@ function TestimonialsStatsHeader({
         })
       }
     );
-  }, [testimonialsSlot, testimonialsGridClassName, testimonials, cardClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    testimonialsGridClassName,
+    testimonials,
+    cardClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -45613,6 +45669,7 @@ function TestimonialsStatsHeader({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -45662,17 +45719,24 @@ function TestimonialsWallCompact({
   authorClassName,
   quoteClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
-  const getAuthorName = useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
-  const getAvatarSrc = useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAuthorName = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
+  const getAvatarSrc = useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -45714,7 +45778,7 @@ function TestimonialsWallCompact({
                         ] }),
                         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                           testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                          testimonial.handle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: testimonial.handle })
+                          testimonial.handle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs ", children: testimonial.handle })
                         ] })
                       ] }),
                       testimonial.badge && (typeof testimonial.badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0 text-xs", children: testimonial.badge }) : testimonial.badge)
@@ -45729,7 +45793,17 @@ function TestimonialsWallCompact({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, authorClassName, quoteClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    authorClassName,
+    quoteClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -45738,6 +45812,7 @@ function TestimonialsWallCompact({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -45754,16 +45829,7 @@ function TestimonialsWallCompact({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
             ]
           }
         ),
@@ -46489,15 +46555,19 @@ function TestimonialsScrollingColumns({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  const getAuthorName = useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
+  const getAuthorName = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
   const renderedTestimonials = useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
@@ -46571,7 +46641,16 @@ function TestimonialsScrollingColumns({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, optixFlowConfig, quoteClassName, authorClassName, getAuthorName]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    optixFlowConfig,
+    quoteClassName,
+    authorClassName,
+    getAuthorName
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -46580,6 +46659,7 @@ function TestimonialsScrollingColumns({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -46596,16 +46676,7 @@ function TestimonialsScrollingColumns({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
             ]
           }
         ),

package/dist/testimonials-scrolling-columns.cjs

@@ -450,15 +450,19 @@ function TestimonialsScrollingColumns({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  const getAuthorName = React.useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
+  const getAuthorName = React.useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
   const renderedTestimonials = React.useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
@@ -532,7 +536,16 @@ function TestimonialsScrollingColumns({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, optixFlowConfig, quoteClassName, authorClassName, getAuthorName]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    optixFlowConfig,
+    quoteClassName,
+    authorClassName,
+    getAuthorName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -541,6 +554,7 @@ function TestimonialsScrollingColumns({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -557,16 +571,7 @@ function TestimonialsScrollingColumns({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg ", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
             ]
           }
         ),

package/dist/testimonials-scrolling-columns.d.cts

@@ -85,6 +85,10 @@ interface TestimonialsScrollingColumnsProps {
      * OptixFlow image optimization config
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsScrollingColumns - An animated testimonial section with staggered card
@@ -111,6 +115,6 @@ interface TestimonialsScrollingColumnsProps {
  * />
  * ```
  */
-declare function TestimonialsScrollingColumns({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsScrollingColumnsProps): React.JSX.Element;
+declare function TestimonialsScrollingColumns({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsScrollingColumnsProps): React.JSX.Element;
 
 export { type ScrollingColumnTestimonialItem, TestimonialsScrollingColumns, type TestimonialsScrollingColumnsProps };

package/dist/testimonials-scrolling-columns.d.ts

@@ -85,6 +85,10 @@ interface TestimonialsScrollingColumnsProps {
      * OptixFlow image optimization config
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsScrollingColumns - An animated testimonial section with staggered card
@@ -111,6 +115,6 @@ interface TestimonialsScrollingColumnsProps {
  * />
  * ```
  */
-declare function TestimonialsScrollingColumns({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsScrollingColumnsProps): React.JSX.Element;
+declare function TestimonialsScrollingColumns({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsScrollingColumnsProps): React.JSX.Element;
 
 export { type ScrollingColumnTestimonialItem, TestimonialsScrollingColumns, type TestimonialsScrollingColumnsProps };

package/dist/testimonials-scrolling-columns.js

@@ -429,15 +429,19 @@ function TestimonialsScrollingColumns({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  const getAuthorName = useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
+  const getAuthorName = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
   const renderedTestimonials = useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
@@ -511,7 +515,16 @@ function TestimonialsScrollingColumns({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, optixFlowConfig, quoteClassName, authorClassName, getAuthorName]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    optixFlowConfig,
+    quoteClassName,
+    authorClassName,
+    getAuthorName
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -520,6 +533,7 @@ function TestimonialsScrollingColumns({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -536,16 +550,7 @@ function TestimonialsScrollingColumns({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
             ]
           }
         ),