@opensite/ui 0.6.3 → 0.6.5

package/dist/blog-grid-nine-posts.js

@@ -897,15 +897,22 @@ function BlogGridNinePosts({
   postCardClassName,
   ctaClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedCtaAction = React.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -971,11 +978,38 @@ function BlogGridNinePosts({
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-8 md:mb-14 lg:mb-16", headerClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })) }) }),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3", postsClassName), children: renderedPosts }),
-        (ctaSlot || ctaAction) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-col items-center py-2 md:hidden", ctaClassName), children: renderedCtaAction })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3",
+              postsClassName
+            ),
+            children: renderedPosts
+          }
+        ),
+        (ctaSlot || ctaAction) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex flex-col items-center py-2 md:hidden",
+              ctaClassName
+            ),
+            children: renderedCtaAction
+          }
+        )
       ] })
     }
   );

package/dist/blog-horizontal-cards.cjs

@@ -993,15 +993,22 @@ function BlogHorizontalCards({
   postCardClassName,
   ctaClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const ctaContent = React__namespace.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -1029,7 +1036,10 @@ function BlogHorizontalCards({
       return /* @__PURE__ */ jsxRuntime.jsx(
         Card,
         {
-          className: cn("overflow-hidden border-0 bg-transparent shadow-none", postCardClassName),
+          className: cn(
+            "overflow-hidden border-0 bg-transparent shadow-none",
+            postCardClassName
+          ),
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 sm:flex-row", children: [
             post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
               Pressable,
@@ -1091,8 +1101,26 @@ function BlogHorizontalCards({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
           badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-12 text-muted-foreground md:text-base lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mb-12 text-muted-foreground md:text-base lg:text-lg",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
         (ctaSlot || ctaAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })

package/dist/blog-horizontal-cards.js

@@ -972,15 +972,22 @@ function BlogHorizontalCards({
   postCardClassName,
   ctaClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const ctaContent = React.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1008,7 +1015,10 @@ function BlogHorizontalCards({
       return /* @__PURE__ */ jsx(
         Card,
         {
-          className: cn("overflow-hidden border-0 bg-transparent shadow-none", postCardClassName),
+          className: cn(
+            "overflow-hidden border-0 bg-transparent shadow-none",
+            postCardClassName
+          ),
           children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 sm:flex-row", children: [
             post.image && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
               Pressable,
@@ -1070,8 +1080,26 @@ function BlogHorizontalCards({
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
           badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-12 text-muted-foreground md:text-base lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mb-12 text-muted-foreground md:text-base lg:text-lg",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
         (ctaSlot || ctaAction) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })

package/dist/blog-horizontal-timeline.cjs

@@ -964,8 +964,8 @@ function BlogHorizontalTimelineComponent({
   postImageClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -981,17 +981,29 @@ function BlogHorizontalTimelineComponent({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: cn("flex flex-col items-center gap-16 md:flex-row", postItemClassName),
+          className: cn(
+            "flex flex-col items-center gap-16 md:flex-row",
+            postItemClassName
+          ),
           children: [
-            post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140", postImageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+            post.image && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                src: post.image,
-                className: "h-full w-full object-cover",
-                alt: postImageAlt,
-                optixFlowConfig
+                className: cn(
+                  "flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140",
+                  postImageClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: post.image,
+                    className: "h-full w-full object-cover",
+                    alt: postImageAlt,
+                    optixFlowConfig
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("border-none shadow-none", postCardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -1027,7 +1039,15 @@ function BlogHorizontalTimelineComponent({
         postId
       );
     });
-  }, [postsSlot, posts, postItemClassName, postImageClassName, postCardClassName, optixFlowConfig, readText]);
+  }, [
+    postsSlot,
+    posts,
+    postItemClassName,
+    postImageClassName,
+    postCardClassName,
+    optixFlowConfig,
+    readText
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1037,7 +1057,16 @@ function BlogHorizontalTimelineComponent({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight text-foreground md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight text-foreground md:text-7xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", postsClassName), children: renderPosts })
       ] })
     }

package/dist/blog-horizontal-timeline.js

@@ -943,8 +943,8 @@ function BlogHorizontalTimelineComponent({
   postImageClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -960,17 +960,29 @@ function BlogHorizontalTimelineComponent({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn("flex flex-col items-center gap-16 md:flex-row", postItemClassName),
+          className: cn(
+            "flex flex-col items-center gap-16 md:flex-row",
+            postItemClassName
+          ),
           children: [
-            post.image && /* @__PURE__ */ jsx("div", { className: cn("flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140", postImageClassName), children: /* @__PURE__ */ jsx(
-              Img,
+            post.image && /* @__PURE__ */ jsx(
+              "div",
               {
-                src: post.image,
-                className: "h-full w-full object-cover",
-                alt: postImageAlt,
-                optixFlowConfig
+                className: cn(
+                  "flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140",
+                  postImageClassName
+                ),
+                children: /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: post.image,
+                    className: "h-full w-full object-cover",
+                    alt: postImageAlt,
+                    optixFlowConfig
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsx(Card, { className: cn("border-none shadow-none", postCardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(
               "div",
               {
@@ -1006,7 +1018,15 @@ function BlogHorizontalTimelineComponent({
         postId
       );
     });
-  }, [postsSlot, posts, postItemClassName, postImageClassName, postCardClassName, optixFlowConfig, readText]);
+  }, [
+    postsSlot,
+    posts,
+    postItemClassName,
+    postImageClassName,
+    postCardClassName,
+    optixFlowConfig,
+    readText
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1016,7 +1036,16 @@ function BlogHorizontalTimelineComponent({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight text-foreground md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-12 max-w-lg font-sans text-5xl font-extrabold tracking-tight text-foreground md:text-7xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
         /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", postsClassName), children: renderPosts })
       ] })
     }

package/dist/blog-masonry-featured.cjs

@@ -836,8 +836,8 @@ function BlogMasonryFeaturedComponent({
   featuredImageClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -847,59 +847,85 @@ function BlogMasonryFeaturedComponent({
     if (featuredSlot) return featuredSlot;
     if (!featuredPost) return null;
     const postHref = featuredPost.href || featuredPost.url || featuredPost.link || "#";
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative md:row-span-2 lg:col-span-2", featuredClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        href: postHref,
-        className: "block h-fit rounded-lg p-3 md:top-0",
-        children: [
-          featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
-            img.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__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
-              (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: featuredPost.date || featuredPost.published }),
-              (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
-              featuredPost.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: featuredPost.author })
-            ] }),
-            featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
-            (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          Pressable,
+          {
+            href: postHref,
+            className: "block h-fit rounded-lg p-3 md:top-0",
+            children: [
+              featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
+                img.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__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                  (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: featuredPost.date || featuredPost.published }),
+                  (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
+                  featuredPost.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: featuredPost.author })
+                ] }),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.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__namespace.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__ */ jsxRuntime.jsxs(Pressable, { href: postHref, className: cn("rounded-lg p-3", postCardClassName), children: [
-        post.image && /* @__PURE__ */ jsxRuntime.jsx(
-          img.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__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
-            (post.date || post.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: post.date || post.published }),
-            (post.date || post.published) && post.author && "\xB7",
-            post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.author })
-          ] }),
-          post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg", children: post.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg", children: post.title }))
-        ] })
-      ] }, postId);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Pressable,
+        {
+          href: postHref,
+          className: cn("rounded-lg p-3", postCardClassName),
+          children: [
+            post.image && /* @__PURE__ */ jsxRuntime.jsx(
+              img.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__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                (post.date || post.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: post.date || post.published }),
+                (post.date || post.published) && post.author && "\xB7",
+                post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.author })
+              ] }),
+              post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg", children: post.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg", children: post.title }))
+            ] })
+          ]
+        },
+        postId
+      );
     });
   }, [postsSlot, otherPosts, postCardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -911,11 +937,29 @@ function BlogMasonryFeaturedComponent({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-12 text-center text-4xl font-medium md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-12 text-center text-4xl font-medium md:text-7xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        /* @__PURE__ */ jsxRuntime.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
+            ]
+          }
+        )
       ] })
     }
   );