@opensite/ui 0.6.4 → 0.6.6

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

@@ -919,15 +919,22 @@ function BlogGridNinePosts({
   postCardClassName,
   ctaClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedCtaAction = 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,
       {
@@ -993,11 +1000,38 @@ function BlogGridNinePosts({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 md:mb-14 lg:mb-16", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }) }),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-col items-center py-2 md:hidden", ctaClassName), children: renderedCtaAction })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex flex-col items-center py-2 md:hidden",
+              ctaClassName
+            ),
+            children: renderedCtaAction
+          }
+        )
       ] })
     }
   );

package/dist/blog-grid-nine-posts.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
-import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CODGexkN.cjs';
+import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface BlogGridNinePostsProps {

package/dist/blog-grid-nine-posts.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
-import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-31vhKBa1.js';
+import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface BlogGridNinePostsProps {

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.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
-import { A as ActionConfig, e as BlogPostItem, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CODGexkN.cjs';
+import { A as ActionConfig, e as BlogPostItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface BlogHorizontalCardsProps {

package/dist/blog-horizontal-cards.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
-import { A as ActionConfig, e as BlogPostItem, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-31vhKBa1.js';
+import { A as ActionConfig, e as BlogPostItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface BlogHorizontalCardsProps {

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.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
-import { e as BlogPostItem, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CODGexkN.cjs';
+import { e as BlogPostItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface BlogHorizontalTimelineProps {

package/dist/blog-horizontal-timeline.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
-import { e as BlogPostItem, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-31vhKBa1.js';
+import { e as BlogPostItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface BlogHorizontalTimelineProps {

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 })
       ] })
     }