@opensite/ui 0.8.4 → 0.8.5

package/dist/feature-tabbed-content-image.cjs

@@ -1009,31 +1009,57 @@ function FeatureTabbedContentImage({
   contentGridClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatures = React__namespace.useCallback((slide) => {
-    if (slide.featuresSlot) return slide.featuresSlot;
-    if (!slide.features || slide.features.length === 0) return null;
-    return slide.features.map((feature, index) => {
-      const isString = typeof feature === "string";
-      const content = isString ? feature : feature.content;
-      const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }) : feature.icon ?? (feature.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }));
-      const itemClassName = isString ? void 0 : feature.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-2", itemClassName), children: [
-        iconElement,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: content })
-      ] }, index);
-    });
-  }, []);
-  const renderActions = React__namespace.useCallback((slide) => {
-    if (slide.actionsSlot) return slide.actionsSlot;
-    if (!slide.actions || slide.actions.length === 0) return null;
-    return slide.actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
+  const renderFeatures = React__namespace.useCallback(
+    (slide) => {
+      if (slide.featuresSlot) return slide.featuresSlot;
+      if (!slide.features || slide.features.length === 0) return null;
+      return slide.features.map((feature, index) => {
+        const isString = typeof feature === "string";
+        const content = isString ? feature : feature.content;
+        const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }) : feature.icon ?? (feature.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }));
+        const itemClassName = isString ? void 0 : feature.className;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            className: cn("flex items-center gap-2", itemClassName),
+            children: [
+              iconElement,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: content })
+            ]
+          },
+          index
+        );
+      });
+    },
+    []
+  );
+  const renderActions = React__namespace.useCallback(
+    (slide) => {
+      if (slide.actionsSlot) return slide.actionsSlot;
+      if (!slide.actions || slide.actions.length === 0) return null;
+      return slide.actions.map((action, index) => {
+        if (action.children) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: action.href,
+              onClick: action.onClick,
+              variant: action.variant,
+              size: action.size,
+              className: cn("mt-8", action.className),
+              "aria-label": action["aria-label"],
+              asButton: true,
+              children: action.children
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(
           Pressable,
           {
             href: action.href,
@@ -1043,46 +1069,39 @@ function FeatureTabbedContentImage({
             className: cn("mt-8", action.className),
             "aria-label": action["aria-label"],
             asButton: true,
-            children: action.children
+            children: [
+              action.icon,
+              action.label,
+              action.iconAfter
+            ]
           },
           index
         );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        Pressable,
+      });
+    },
+    []
+  );
+  const renderImage = React__namespace.useCallback(
+    (slide) => {
+      if (slide.imageSlot) return slide.imageSlot;
+      if (!slide.image) return null;
+      const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
         {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-8", action.className),
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
+          src: slide.image,
+          alt: imageAlt,
+          className: cn(
+            "order-first max-h-[400px] w-full rounded-lg object-cover md:order-last",
+            slide.imageClassName
+          ),
+          loading: "lazy",
+          optixFlowConfig
+        }
       );
-    });
-  }, []);
-  const renderImage = React__namespace.useCallback((slide) => {
-    if (slide.imageSlot) return slide.imageSlot;
-    if (!slide.image) return null;
-    const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: slide.image,
-        alt: imageAlt,
-        className: cn("order-first max-h-[400px] w-full rounded-lg object-cover md:order-last", slide.imageClassName),
-        loading: "lazy",
-        optixFlowConfig
-      }
-    );
-  }, [optixFlowConfig]);
+    },
+    [optixFlowConfig]
+  );
   const slidesContent = React.useMemo(() => {
     if (slidesSlot) return slidesSlot;
     if (!slides || slides.length === 0) return null;
@@ -1091,7 +1110,10 @@ function FeatureTabbedContentImage({
         TabsTrigger,
         {
           value: slide.id.toString(),
-          className: cn("text-sm hover:bg-background md:text-base", tabTriggerClassName),
+          className: cn(
+            "text-sm hover:bg-background md:text-base",
+            tabTriggerClassName
+          ),
           children: slide.tabName
         },
         slide.id
@@ -1101,20 +1123,85 @@ function FeatureTabbedContentImage({
         {
           value: slide.id.toString(),
           className: cn("max-w-5xl", tabContentClassName),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-1 items-center gap-10 md:grid-cols-2", contentGridClassName, slide.className), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-2xl font-semibold lg:text-4xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-2xl font-semibold lg:text-4xl", slide.titleClassName), children: slide.title })),
-              slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-xl", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground lg:text-xl", slide.descriptionClassName), children: slide.description })),
-              slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2", slide.featuresClassName), children: renderFeatures(slide) }) : null,
-              renderActions(slide)
-            ] }),
-            renderImage(slide)
-          ] })
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-1 items-center gap-10 md:grid-cols-2",
+                contentGridClassName,
+                slide.className
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        slide.titleClassName
+                      ),
+                      children: slide.title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        slide.titleClassName
+                      ),
+                      children: slide.title
+                    }
+                  )),
+                  slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-muted-foreground lg:text-xl",
+                        slide.descriptionClassName
+                      ),
+                      children: slide.description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "text-muted-foreground lg:text-xl",
+                        slide.descriptionClassName
+                      ),
+                      children: slide.description
+                    }
+                  )),
+                  slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2",
+                        slide.featuresClassName
+                      ),
+                      children: renderFeatures(slide)
+                    }
+                  ) : null,
+                  renderActions(slide)
+                ] }),
+                renderImage(slide)
+              ]
+            }
+          )
         },
         slide.id
       ))
     ] });
-  }, [slidesSlot, slides, tabsListClassName, tabTriggerClassName, tabContentClassName, contentGridClassName, renderFeatures, renderActions, renderImage]);
+  }, [
+    slidesSlot,
+    slides,
+    tabsListClassName,
+    tabTriggerClassName,
+    tabContentClassName,
+    contentGridClassName,
+    renderFeatures,
+    renderActions,
+    renderImage
+  ]);
   const effectiveDefaultTab = React.useMemo(() => {
     if (defaultTab) return defaultTab;
     if (slides && slides.length > 0) return slides[0].id.toString();
@@ -1131,15 +1218,63 @@ function FeatureTabbedContentImage({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-6", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-6",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-center text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-center text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ),
         (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           Tabs,
           {
             defaultValue: effectiveDefaultTab,
-            className: cn("mx-auto flex w-fit flex-col items-center gap-8 md:gap-12", tabsClassName),
+            className: cn(
+              "mx-auto flex w-fit flex-col items-center gap-8 md:gap-12",
+              tabsClassName
+            ),
             children: slidesContent
           }
         ) })

package/dist/feature-tabbed-content-image.js

@@ -987,31 +987,57 @@ function FeatureTabbedContentImage({
   contentGridClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatures = React.useCallback((slide) => {
-    if (slide.featuresSlot) return slide.featuresSlot;
-    if (!slide.features || slide.features.length === 0) return null;
-    return slide.features.map((feature, index) => {
-      const isString = typeof feature === "string";
-      const content = isString ? feature : feature.content;
-      const iconElement = isString ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }) : feature.icon ?? (feature.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }));
-      const itemClassName = isString ? void 0 : feature.className;
-      return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center gap-2", itemClassName), children: [
-        iconElement,
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: content })
-      ] }, index);
-    });
-  }, []);
-  const renderActions = React.useCallback((slide) => {
-    if (slide.actionsSlot) return slide.actionsSlot;
-    if (!slide.actions || slide.actions.length === 0) return null;
-    return slide.actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsx(
+  const renderFeatures = React.useCallback(
+    (slide) => {
+      if (slide.featuresSlot) return slide.featuresSlot;
+      if (!slide.features || slide.features.length === 0) return null;
+      return slide.features.map((feature, index) => {
+        const isString = typeof feature === "string";
+        const content = isString ? feature : feature.content;
+        const iconElement = isString ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }) : feature.icon ?? (feature.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }));
+        const itemClassName = isString ? void 0 : feature.className;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn("flex items-center gap-2", itemClassName),
+            children: [
+              iconElement,
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: content })
+            ]
+          },
+          index
+        );
+      });
+    },
+    []
+  );
+  const renderActions = React.useCallback(
+    (slide) => {
+      if (slide.actionsSlot) return slide.actionsSlot;
+      if (!slide.actions || slide.actions.length === 0) return null;
+      return slide.actions.map((action, index) => {
+        if (action.children) {
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: action.href,
+              onClick: action.onClick,
+              variant: action.variant,
+              size: action.size,
+              className: cn("mt-8", action.className),
+              "aria-label": action["aria-label"],
+              asButton: true,
+              children: action.children
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ jsxs(
           Pressable,
           {
             href: action.href,
@@ -1021,46 +1047,39 @@ function FeatureTabbedContentImage({
             className: cn("mt-8", action.className),
             "aria-label": action["aria-label"],
             asButton: true,
-            children: action.children
+            children: [
+              action.icon,
+              action.label,
+              action.iconAfter
+            ]
           },
           index
         );
-      }
-      return /* @__PURE__ */ jsxs(
-        Pressable,
+      });
+    },
+    []
+  );
+  const renderImage = React.useCallback(
+    (slide) => {
+      if (slide.imageSlot) return slide.imageSlot;
+      if (!slide.image) return null;
+      const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
+      return /* @__PURE__ */ jsx(
+        Img,
         {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-8", action.className),
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
+          src: slide.image,
+          alt: imageAlt,
+          className: cn(
+            "order-first max-h-[400px] w-full rounded-lg object-cover md:order-last",
+            slide.imageClassName
+          ),
+          loading: "lazy",
+          optixFlowConfig
+        }
       );
-    });
-  }, []);
-  const renderImage = React.useCallback((slide) => {
-    if (slide.imageSlot) return slide.imageSlot;
-    if (!slide.image) return null;
-    const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
-    return /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: slide.image,
-        alt: imageAlt,
-        className: cn("order-first max-h-[400px] w-full rounded-lg object-cover md:order-last", slide.imageClassName),
-        loading: "lazy",
-        optixFlowConfig
-      }
-    );
-  }, [optixFlowConfig]);
+    },
+    [optixFlowConfig]
+  );
   const slidesContent = useMemo(() => {
     if (slidesSlot) return slidesSlot;
     if (!slides || slides.length === 0) return null;
@@ -1069,7 +1088,10 @@ function FeatureTabbedContentImage({
         TabsTrigger,
         {
           value: slide.id.toString(),
-          className: cn("text-sm hover:bg-background md:text-base", tabTriggerClassName),
+          className: cn(
+            "text-sm hover:bg-background md:text-base",
+            tabTriggerClassName
+          ),
           children: slide.tabName
         },
         slide.id
@@ -1079,20 +1101,85 @@ function FeatureTabbedContentImage({
         {
           value: slide.id.toString(),
           className: cn("max-w-5xl", tabContentClassName),
-          children: /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 items-center gap-10 md:grid-cols-2", contentGridClassName, slide.className), children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-2xl font-semibold lg:text-4xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-2xl font-semibold lg:text-4xl", slide.titleClassName), children: slide.title })),
-              slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground lg:text-xl", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground lg:text-xl", slide.descriptionClassName), children: slide.description })),
-              slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsx("ul", { className: cn("mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2", slide.featuresClassName), children: renderFeatures(slide) }) : null,
-              renderActions(slide)
-            ] }),
-            renderImage(slide)
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-1 items-center gap-10 md:grid-cols-2",
+                contentGridClassName,
+                slide.className
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        slide.titleClassName
+                      ),
+                      children: slide.title
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        slide.titleClassName
+                      ),
+                      children: slide.title
+                    }
+                  )),
+                  slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-muted-foreground lg:text-xl",
+                        slide.descriptionClassName
+                      ),
+                      children: slide.description
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "text-muted-foreground lg:text-xl",
+                        slide.descriptionClassName
+                      ),
+                      children: slide.description
+                    }
+                  )),
+                  slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2",
+                        slide.featuresClassName
+                      ),
+                      children: renderFeatures(slide)
+                    }
+                  ) : null,
+                  renderActions(slide)
+                ] }),
+                renderImage(slide)
+              ]
+            }
+          )
         },
         slide.id
       ))
     ] });
-  }, [slidesSlot, slides, tabsListClassName, tabTriggerClassName, tabContentClassName, contentGridClassName, renderFeatures, renderActions, renderImage]);
+  }, [
+    slidesSlot,
+    slides,
+    tabsListClassName,
+    tabTriggerClassName,
+    tabContentClassName,
+    contentGridClassName,
+    renderFeatures,
+    renderActions,
+    renderImage
+  ]);
   const effectiveDefaultTab = useMemo(() => {
     if (defaultTab) return defaultTab;
     if (slides && slides.length > 0) return slides[0].id.toString();
@@ -1109,15 +1196,63 @@ function FeatureTabbedContentImage({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-6", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-6",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-center text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-center text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ),
         (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsx(
           Tabs,
           {
             defaultValue: effectiveDefaultTab,
-            className: cn("mx-auto flex w-fit flex-col items-center gap-8 md:gap-12", tabsClassName),
+            className: cn(
+              "mx-auto flex w-fit flex-col items-center gap-8 md:gap-12",
+              tabsClassName
+            ),
             children: slidesContent
           }
         ) })