@opensite/ui 1.2.0 → 1.2.1

package/dist/registry.js

@@ -30142,72 +30142,56 @@ function ExpandableCaseStudyCards({
           "a",
           {
             href: item.href,
-            className: "relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card",
+            className: "relative block h-full w-full overflow-hidden rounded-xl",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: 'absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm', children: [
-                /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-clip rounded-xl", children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: item.image,
-                    alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
-                    className: cn(
-                      "h-full w-full object-cover object-center",
-                      imageClassName
-                    ),
-                    loading: "lazy",
-                    optixFlowConfig
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: 'absolute inset-0 lg:group-data-[state="closed"]:blur-sm lg:transition-[filter] lg:duration-500', children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: item.image,
+                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[70%] bg-linear-to-t from-black/90 from-30% to-transparent" }),
+              /* @__PURE__ */ jsxs("div", { className: 'absolute inset-0 flex flex-col justify-end p-4 pb-5 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: [
+                item.badges && item.badges.length > 0 && /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: cn(
-                      "absolute top-[50%] left-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full max-lg:hidden",
-                      getNestedCardBg(background, "accent"),
-                      getNestedCardTextColor(background)
+                      "mb-3 flex flex-wrap items-center gap-2",
+                      badgesClassName
                     ),
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/plus", size: 32 })
+                    children: item.badges.map((badge, idx) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:inset-x-[50%] md:max-lg:w-[50%]", children: [
-                /* @__PURE__ */ jsx("div", { className: 'flex flex-col gap-3 p-4 pt-6 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
                     item.logo && /* @__PURE__ */ jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsx(
                       Img,
                       {
                         src: item.logo,
                         alt: item.logoAlt || item.company || "Logo",
-                        className: cn("h-6 max-w-[120px] object-contain object-left lg:h-8 lg:max-w-[150px]", logoClassName),
+                        className: cn("h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]", logoClassName),
                         loading: "lazy",
                         optixFlowConfig
                       }
                     ) }),
-                    /* @__PURE__ */ jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
-                    item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-foreground/70", children: item.description })
+                    /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-white lg:text-lg", children: item.title }),
+                    item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-white/80", children: item.description })
                   ] }),
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: cn(
-                        "flex size-8 shrink-0 items-center justify-center rounded-full text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
-                        getNestedCardBg(background, "card")
-                      ),
+                      className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
                       children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
                     }
                   )
-                ] }) }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      'flex h-20 items-center gap-2 px-4 pb-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0',
-                      badgesClassName
-                    ),
-                    children: item.badges?.map((badge, idx) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
-                  }
-                )
+                ] })
               ] })
             ]
           }
@@ -30368,7 +30352,7 @@ function CarouselBadgeCards({
           "div",
           {
             className: cn(
-              "mb-8 flex items-end justify-between md:mb-14 lg:mb-16",
+              "mb-8 flex items-end justify-between md:mb-14 lg:mb-16 px-6 md:px-0",
               headerClassName
             ),
             children: [
@@ -30632,7 +30616,7 @@ function CarouselGradientOverlay({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full -mx-4", children: [
           /* @__PURE__ */ jsx(
             Carousel,
             {
@@ -30942,13 +30926,13 @@ function AutoScrollCarousel({
       className: actionClass,
       ...pressableProps
     } = action;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "flex text-left", children: /* @__PURE__ */ jsx(
       Pressable,
       {
         variant: "link",
         asButton: true,
         className: cn(
-          "font-medium flex items-center",
+          "font-medium flex items-center text-xl",
           actionClass,
           actionClassName
         ),
@@ -30966,7 +30950,7 @@ function AutoScrollCarousel({
           )
         ] })
       }
-    );
+    ) });
   }, [actionSlot, action, actionClassName]);
   const imagesContent = useMemo$1(() => {
     if (imagesSlot) return imagesSlot;
@@ -31006,7 +30990,7 @@ function AutoScrollCarousel({
             ),
             children: [
               /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 md:gap-12", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
+                "h2",
                 {
                   className: cn(
                     "text-3xl font-bold md:text-4xl",
@@ -31332,11 +31316,11 @@ function CarouselIconTabs({
       "div",
       {
         className: cn(
-          "mb-20 flex flex-col items-center justify-center gap-8",
+          "mb-8 md:mb-20 flex flex-col items-center justify-center gap-8",
           headerClassName
         ),
         children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
           badge && /* @__PURE__ */ jsx(
             Badge,
             {
@@ -31348,7 +31332,14 @@ function CarouselIconTabs({
         ]
       }
     );
-  }, [headerSlot, headerClassName, heading, headingClassName, badge, badgeClassName]);
+  }, [
+    headerSlot,
+    headerClassName,
+    heading,
+    headingClassName,
+    badge,
+    badgeClassName
+  ]);
   const sectionsContent = useMemo$1(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
@@ -31363,7 +31354,7 @@ function CarouselIconTabs({
               src: item.img,
               alt: typeof item.title === "string" ? item.title : item.alt || "Tab image",
               className: cn(
-                "aspect-square h-full w-full object-cover md:aspect-2/1 cursor-pointer transition-transform hover:scale-[1.02]",
+                "aspect-square h-full w-full object-cover md:aspect-2/1 cursor-pointer rounded-xl shadow-xl",
                 imageClassName
               ),
               loading: "lazy",
@@ -31388,7 +31379,14 @@ function CarouselIconTabs({
       },
       index
     ));
-  }, [sectionsSlot, sections, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    sectionsSlot,
+    sections,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   const tabsContent = useMemo$1(() => {
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -31556,16 +31554,7 @@ function TestimonialCarouselCards({
                 children: heading
               }
             ),
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-lg text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            )
+            /* @__PURE__ */ jsx("p", { className: cn("text-md", descriptionClassName), children: description })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -31646,23 +31635,10 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "relative flex h-[460px] w-[400px] flex-col items-start justify-end rounded-2xl p-8",
-                testimonial.bgColor,
-                quotePanelClassName
+                "relative bg-background text-foreground flex h-[460px] w-[400px] flex-col items-start justify-end rounded-2xl p-8"
               ),
               children: [
-                /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    className: cn(
-                      "mb-auto bg-background px-4 py-2",
-                      badgeClassName
-                    ),
-                    children: testimonial.username
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "-rotate-[4deg] text-7xl leading-none", children: '"' }),
-                /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold", children: testimonial.quote }),
+                /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: testimonial.quote }),
                 /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg font-medium", children: testimonial.author })
               ]
             }
@@ -31689,7 +31665,8 @@ function TestimonialCarouselCards({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-6 px-4 lg:flex-row lg:px-10", children: [
+      containerClassName: "px-4",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-4 lg:flex-row ", children: [
         sidebarContent,
         /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden pb-12 lg:flex-1", children: [
           /* @__PURE__ */ jsx(
@@ -31730,10 +31707,14 @@ function TestimonialCarouselCards({
   );
 }
 function CarouselIconSidebar({
+  title,
+  description,
   items,
   itemsSlot,
   sidebarSlot,
   className,
+  sectionTitleClassName,
+  sectionDescriptionClassName,
   sidebarClassName,
   iconClassName,
   titleClassName,
@@ -31851,13 +31832,13 @@ function CarouselIconSidebar({
   const itemsContent = useMemo$1(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("h-full", itemClassName), children: /* @__PURE__ */ jsx("div", { className: cn("aspect-2/1 h-full w-full", image.className), children: /* @__PURE__ */ jsx(
+    return items.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("h-full", itemClassName), children: /* @__PURE__ */ jsx("div", { className: cn("h-full w-full", image.className), children: /* @__PURE__ */ jsx(
       Img,
       {
         src: image.src,
         alt: typeof image.title === "string" ? image.title : image.alt || "Carousel image",
         className: cn(
-          "h-full w-full rounded-lg object-cover cursor-pointer transition-transform hover:scale-[1.02]",
+          "h-full w-full rounded-lg object-cover cursor-pointer",
           imageClassName
         ),
         loading: "lazy",
@@ -31873,7 +31854,14 @@ function CarouselIconSidebar({
         }
       }
     ) }) }, index));
-  }, [itemsSlot, items, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -31884,6 +31872,25 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                sectionTitleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: sectionTitleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", sectionDescriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", sectionDescriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-5", children: [
           /* @__PURE__ */ jsx("div", { className: "md:col-span-2", children: sidebarContent }),
           /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) })
@@ -32608,33 +32615,21 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 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(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(
-                "max-w-lg text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))
@@ -32808,12 +32803,12 @@ function CarouselScaleFocus({
       className: cn("overflow-hidden", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "md:px-45", children: [
-          title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsx(
               "h2",
               {
                 className: cn(
-                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                   titleClassName
                 ),
                 children: title
@@ -32822,19 +32817,13 @@ function CarouselScaleFocus({
             description && (typeof description === "string" ? /* @__PURE__ */ jsx(
               "p",
               {
-                className: cn(
-                  "max-w-lg text-muted-foreground",
-                  descriptionClassName
-                ),
+                className: cn("max-w-lg text-balance", descriptionClassName),
                 children: description
               }
             ) : /* @__PURE__ */ jsx(
               "div",
               {
-                className: cn(
-                  "max-w-lg text-muted-foreground",
-                  descriptionClassName
-                ),
+                className: cn("max-w-lg text-balance", descriptionClassName),
                 children: description
               }
             ))
@@ -33138,33 +33127,21 @@ function MasonryMotionGrid({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 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(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(
-                "max-w-lg text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))
@@ -33232,9 +33209,9 @@ function BlurVignette({
             --r: max(var(--transition-length), calc(var(--radius) - var(--inset)));
             --corner-size: calc(var(--r) + var(--inset)) calc(var(--r) + var(--inset));
             --corner-gradient: transparent 0px,
-              transparent calc(var(--r) - var(--transition-length)), 
+              transparent calc(var(--r) - var(--transition-length)),
               black var(--r);
-            --fill-gradient: black, 
+            --fill-gradient: black,
               black var(--inset),
               transparent calc(var(--inset) + var(--transition-length)),
               transparent calc(100% - var(--transition-length) - var(--inset)),
@@ -33247,21 +33224,21 @@ function BlurVignette({
               radial-gradient(at bottom left, var(--corner-gradient)),
               radial-gradient(at top left, var(--corner-gradient)),
               radial-gradient(at top right, var(--corner-gradient));
-            -webkit-mask-size: 100% var(--fill-narrow-size), 
+            -webkit-mask-size: 100% var(--fill-narrow-size),
               var(--fill-narrow-size) 100%,
-              var(--corner-size), 
-              var(--corner-size), 
+              var(--corner-size),
+              var(--corner-size),
               var(--corner-size),
               var(--corner-size);
-            -webkit-mask-position: 0 var(--fill-farther-position), 
+            -webkit-mask-position: 0 var(--fill-farther-position),
               var(--fill-farther-position) 0,
-              0 0, 
-              100% 0, 
-              100% 100%, 
+              0 0,
+              100% 0,
+              100% 100%,
               0 100%;
             -webkit-mask-repeat: no-repeat;
             opacity: 0;
-            transition: opacity 0.3s ease;    
+            transition: opacity 0.3s ease;
         }
 
         .blur-vignette.active {
@@ -33360,33 +33337,21 @@ function BlurVignetteGrid({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 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(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(
-                "max-w-lg text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))
@@ -33394,7 +33359,11 @@ function BlurVignetteGrid({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(`grid grid-cols-1 md:grid-cols-${gridColumns}`, gridGap, gridClassName),
+            className: cn(
+              `grid grid-cols-1 md:grid-cols-${gridColumns}`,
+              gridGap,
+              gridClassName
+            ),
             children: imagesContent
           }
         )
@@ -33520,27 +33489,24 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        heading || descriptionContent ? /* @__PURE__ */ jsxs("div", { className: "mb-10", children: [
-          heading && /* @__PURE__ */ jsx(
+        heading || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
               className: cn(
-                "mb-4 text-center text-4xl font-semibold",
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
                 headingClassName
               ),
               children: heading
             }
-          ),
-          descriptionContent && /* @__PURE__ */ jsx(
-            "p",
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          descriptionContent && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: descriptionContent }) : /* @__PURE__ */ jsx(
+            "div",
             {
-              className: cn(
-                "text-center text-sm text-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: descriptionContent
             }
-          )
+          ))
         ] }) : null,
         /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
           Carousel,