@opensite/ui 0.6.3 → 0.6.5

package/dist/blog-masonry-featured.js

@@ -815,8 +815,8 @@ function BlogMasonryFeaturedComponent({
   featuredImageClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -826,59 +826,85 @@ function BlogMasonryFeaturedComponent({
     if (featuredSlot) return featuredSlot;
     if (!featuredPost) return null;
     const postHref = featuredPost.href || featuredPost.url || featuredPost.link || "#";
-    return /* @__PURE__ */ jsx("div", { className: cn("relative md:row-span-2 lg:col-span-2", featuredClassName), children: /* @__PURE__ */ jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        href: postHref,
-        className: "block h-fit rounded-lg p-3 md:top-0",
-        children: [
-          featuredPost.image && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: featuredPost.image,
-              alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured content",
-              className: cn("h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96", featuredImageClassName),
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
-            /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
-              (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsx("time", { children: featuredPost.date || featuredPost.published }),
-              (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
-              featuredPost.author && /* @__PURE__ */ jsx("span", { children: featuredPost.author })
-            ] }),
-            featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
-            (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4 text-muted-foreground", children: featuredPost.description || featuredPost.summary })
-          ] })
-        ]
+        className: cn(
+          "relative md:row-span-2 lg:col-span-2",
+          featuredClassName
+        ),
+        children: /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            href: postHref,
+            className: "block h-fit rounded-lg p-3 md:top-0",
+            children: [
+              featuredPost.image && /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: featuredPost.image,
+                  alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured content",
+                  className: cn(
+                    "h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96",
+                    featuredImageClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                  (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsx("time", { children: featuredPost.date || featuredPost.published }),
+                  (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
+                  featuredPost.author && /* @__PURE__ */ jsx("span", { children: featuredPost.author })
+                ] }),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4 text-muted-foreground", children: featuredPost.description || featuredPost.summary })
+              ] })
+            ]
+          }
+        )
       }
-    ) });
-  }, [featuredSlot, featuredPost, featuredClassName, featuredImageClassName, optixFlowConfig]);
+    );
+  }, [
+    featuredSlot,
+    featuredPost,
+    featuredClassName,
+    featuredImageClassName,
+    optixFlowConfig
+  ]);
   const otherPostsContent = React.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!otherPosts || otherPosts.length === 0) return null;
     return otherPosts.map((post) => {
       const postHref = post.href || post.url || post.link || "#";
       const postId = post.id || String(post.title) || Math.random().toString();
-      return /* @__PURE__ */ jsxs(Pressable, { href: postHref, className: cn("rounded-lg p-3", postCardClassName), children: [
-        post.image && /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: post.image,
-            alt: typeof post.title === "string" ? post.title : "Content item",
-            className: "h-48 w-full rounded-lg object-cover hover:opacity-80",
-            optixFlowConfig
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
-            (post.date || post.published) && /* @__PURE__ */ jsx("time", { children: post.date || post.published }),
-            (post.date || post.published) && post.author && "\xB7",
-            post.author && /* @__PURE__ */ jsx("span", { children: post.author })
-          ] }),
-          post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg", children: post.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: post.title }))
-        ] })
-      ] }, postId);
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          href: postHref,
+          className: cn("rounded-lg p-3", postCardClassName),
+          children: [
+            post.image && /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: post.image,
+                alt: typeof post.title === "string" ? post.title : "Content item",
+                className: "h-48 w-full rounded-lg object-cover hover:opacity-80",
+                optixFlowConfig
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                (post.date || post.published) && /* @__PURE__ */ jsx("time", { children: post.date || post.published }),
+                (post.date || post.published) && post.author && "\xB7",
+                post.author && /* @__PURE__ */ jsx("span", { children: post.author })
+              ] }),
+              post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg", children: post.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: post.title }))
+            ] })
+          ]
+        },
+        postId
+      );
     });
   }, [postsSlot, otherPosts, postCardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
@@ -890,11 +916,29 @@ function BlogMasonryFeaturedComponent({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-12 text-center text-4xl font-medium md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        /* @__PURE__ */ jsxs("div", { className: cn("xs:grid-cols-1 mt-24 grid gap-4 sm:grid-cols-2 lg:grid-cols-4", postsClassName), children: [
-          featuredPostContent,
-          otherPostsContent
-        ] })
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-12 text-center text-4xl font-medium md:text-7xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "xs:grid-cols-1 mt-24 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+              postsClassName
+            ),
+            children: [
+              featuredPostContent,
+              otherPostsContent
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/blog-related-articles.cjs

@@ -835,20 +835,31 @@ function BlogRelatedArticles({
   seeAllClassName,
   articlesClassName,
   articleCardClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedSeeAllAction = React__namespace.useMemo(() => {
     if (seeAllSlot) return seeAllSlot;
     if (!seeAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = seeAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = seeAllAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
         asButton: true,
-        className: cn("md:h-10 md:px-4 md:py-2", actionClassName, seeAllClassName),
+        className: cn(
+          "md:h-10 md:px-4 md:py-2",
+          actionClassName,
+          seeAllClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -889,11 +900,38 @@ function BlogRelatedArticles({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 flex flex-wrap items-center justify-between gap-1", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-2xl font-semibold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          renderedSeeAllAction
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10", articlesClassName), children: renderedArticles })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex flex-wrap items-center justify-between gap-1",
+              headerClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-2xl font-semibold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              renderedSeeAllAction
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10",
+              articlesClassName
+            ),
+            children: renderedArticles
+          }
+        )
       ] })
     }
   );

package/dist/blog-related-articles.js

@@ -814,20 +814,31 @@ function BlogRelatedArticles({
   seeAllClassName,
   articlesClassName,
   articleCardClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedSeeAllAction = React.useMemo(() => {
     if (seeAllSlot) return seeAllSlot;
     if (!seeAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = seeAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = seeAllAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
         asButton: true,
-        className: cn("md:h-10 md:px-4 md:py-2", actionClassName, seeAllClassName),
+        className: cn(
+          "md:h-10 md:px-4 md:py-2",
+          actionClassName,
+          seeAllClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
           icon,
@@ -868,11 +879,38 @@ function BlogRelatedArticles({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-8 flex flex-wrap items-center justify-between gap-1", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-2xl font-semibold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          renderedSeeAllAction
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10", articlesClassName), children: renderedArticles })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex flex-wrap items-center justify-between gap-1",
+              headerClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-2xl font-semibold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              renderedSeeAllAction
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10",
+              articlesClassName
+            ),
+            children: renderedArticles
+          }
+        )
       ] })
     }
   );

package/dist/blog-tech-insights.cjs

@@ -875,20 +875,31 @@ function BlogTechInsights({
   secondaryPostsClassName,
   secondaryPostItemClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const readMoreActionContent = React.useMemo(() => {
     if (readMoreSlot) return readMoreSlot;
     if (!readMoreAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = readMoreAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = readMoreAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
         asButton: true,
-        className: cn("ml-auto rounded-full border-foreground text-foreground", actionClassName, readMoreClassName),
+        className: cn(
+          "ml-auto rounded-full border-foreground text-foreground",
+          actionClassName,
+          readMoreClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -905,7 +916,10 @@ function BlogTechInsights({
       featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
-          className: cn("w-full rounded-lg object-cover", featuredImageClassName),
+          className: cn(
+            "w-full rounded-lg object-cover",
+            featuredImageClassName
+          ),
           src: featuredPost.image,
           alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured item",
           optixFlowConfig
@@ -920,7 +934,13 @@ function BlogTechInsights({
         ] })
       ] })
     ] });
-  }, [featuredSlot, featuredPost, featuredClassName, featuredImageClassName, optixFlowConfig]);
+  }, [
+    featuredSlot,
+    featuredPost,
+    featuredClassName,
+    featuredImageClassName,
+    optixFlowConfig
+  ]);
   const secondaryPostsContent = React.useMemo(() => {
     if (secondaryPostsSlot) return secondaryPostsSlot;
     if (!secondaryPosts || secondaryPosts.length === 0) return null;
@@ -929,7 +949,10 @@ function BlogTechInsights({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: cn("flex items-start gap-4 border-b pb-6 last:border-b-0", secondaryPostItemClassName),
+          className: cn(
+            "flex items-start gap-4 border-b pb-6 last:border-b-0",
+            secondaryPostItemClassName
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/4 shrink-0 md:w-1/5", children: post.image && /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
@@ -946,7 +969,12 @@ function BlogTechInsights({
         postId
       );
     });
-  }, [secondaryPostsSlot, secondaryPosts, secondaryPostItemClassName, optixFlowConfig]);
+  }, [
+    secondaryPostsSlot,
+    secondaryPosts,
+    secondaryPostItemClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -957,16 +985,52 @@ function BlogTechInsights({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold text-foreground md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-3xl font-bold text-foreground md:text-4xl lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-start", children: [
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-2 block text-sm text-muted-foreground md:text-base", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "mt-2 block text-sm text-muted-foreground md:text-base",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             readMoreActionContent
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12", contentClassName), children: [
-          featuredPostContent,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6 text-foreground md:space-y-8", secondaryPostsClassName), children: secondaryPostsContent })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              featuredPostContent,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "space-y-6 text-foreground md:space-y-8",
+                    secondaryPostsClassName
+                  ),
+                  children: secondaryPostsContent
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/blog-tech-insights.js

@@ -853,20 +853,31 @@ function BlogTechInsights({
   secondaryPostsClassName,
   secondaryPostItemClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const readMoreActionContent = useMemo(() => {
     if (readMoreSlot) return readMoreSlot;
     if (!readMoreAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = readMoreAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = readMoreAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
         asButton: true,
-        className: cn("ml-auto rounded-full border-foreground text-foreground", actionClassName, readMoreClassName),
+        className: cn(
+          "ml-auto rounded-full border-foreground text-foreground",
+          actionClassName,
+          readMoreClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
           icon,
@@ -883,7 +894,10 @@ function BlogTechInsights({
       featuredPost.image && /* @__PURE__ */ jsx(
         Img,
         {
-          className: cn("w-full rounded-lg object-cover", featuredImageClassName),
+          className: cn(
+            "w-full rounded-lg object-cover",
+            featuredImageClassName
+          ),
           src: featuredPost.image,
           alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured item",
           optixFlowConfig
@@ -898,7 +912,13 @@ function BlogTechInsights({
         ] })
       ] })
     ] });
-  }, [featuredSlot, featuredPost, featuredClassName, featuredImageClassName, optixFlowConfig]);
+  }, [
+    featuredSlot,
+    featuredPost,
+    featuredClassName,
+    featuredImageClassName,
+    optixFlowConfig
+  ]);
   const secondaryPostsContent = useMemo(() => {
     if (secondaryPostsSlot) return secondaryPostsSlot;
     if (!secondaryPosts || secondaryPosts.length === 0) return null;
@@ -907,7 +927,10 @@ function BlogTechInsights({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn("flex items-start gap-4 border-b pb-6 last:border-b-0", secondaryPostItemClassName),
+          className: cn(
+            "flex items-start gap-4 border-b pb-6 last:border-b-0",
+            secondaryPostItemClassName
+          ),
           children: [
             /* @__PURE__ */ jsx("div", { className: "w-1/4 shrink-0 md:w-1/5", children: post.image && /* @__PURE__ */ jsx(
               Img,
@@ -924,7 +947,12 @@ function BlogTechInsights({
         postId
       );
     });
-  }, [secondaryPostsSlot, secondaryPosts, secondaryPostItemClassName, optixFlowConfig]);
+  }, [
+    secondaryPostsSlot,
+    secondaryPosts,
+    secondaryPostItemClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -935,16 +963,52 @@ function BlogTechInsights({
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-8", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-3xl font-bold text-foreground md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-3xl font-bold text-foreground md:text-4xl lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-start", children: [
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("span", { className: cn("mt-2 block text-sm text-muted-foreground md:text-base", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mt-2 block text-sm text-muted-foreground md:text-base",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             readMoreActionContent
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12", contentClassName), children: [
-          featuredPostContent,
-          /* @__PURE__ */ jsx("div", { className: cn("space-y-6 text-foreground md:space-y-8", secondaryPostsClassName), children: secondaryPostsContent })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              featuredPostContent,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "space-y-6 text-foreground md:space-y-8",
+                    secondaryPostsClassName
+                  ),
+                  children: secondaryPostsContent
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );