@opensite/ui 0.6.3 → 0.6.5

package/dist/blog-filtered-results.cjs

@@ -1062,7 +1062,11 @@ var Section = React6__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 var POSTS_PER_PAGE = 6;
-var BlogCard = React6__namespace.memo(function BlogCard2({ post, optixFlowConfig, className }) {
+var BlogCard = React6__namespace.memo(function BlogCard2({
+  post,
+  optixFlowConfig,
+  className
+}) {
   const postHref = post.href || post.url || post.link || "#";
   const postImage = post.thumbnail || post.image;
   const postTitle = typeof post.title === "string" ? post.title : "Content item";
@@ -1096,28 +1100,36 @@ var FilterForm = React6__namespace.memo(function FilterForm2({
   onCategoryChange,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-wrap items-center gap-2.5", className), children: categories.map((category) => {
-    const isChecked = selectedCategories.includes(category.value);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Label,
-      {
-        className: "flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: category.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Checkbox,
-            {
-              checked: isChecked,
-              onCheckedChange: (checked) => onCategoryChange(category.value, !!checked)
-            }
-          )
-        ]
-      },
-      category.value
-    );
-  }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex w-full flex-wrap items-center gap-2.5", className),
+      children: categories.map((category) => {
+        const isChecked = selectedCategories.includes(category.value);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          Label,
+          {
+            className: "flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: category.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Checkbox,
+                {
+                  checked: isChecked,
+                  onCheckedChange: (checked) => onCategoryChange(category.value, !!checked)
+                }
+              )
+            ]
+          },
+          category.value
+        );
+      })
+    }
+  );
 });
-var BreadcrumbBlog = React6__namespace.memo(function BreadcrumbBlog2({ breadcrumb }) {
+var BreadcrumbBlog = React6__namespace.memo(function BreadcrumbBlog2({
+  breadcrumb
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumb.map((item, i) => {
     const labelKey = typeof item.label === "string" ? item.label : `breadcrumb-${i}`;
     return /* @__PURE__ */ jsxRuntime.jsxs(React6.Fragment, { children: [
@@ -1153,8 +1165,8 @@ function BlogFilteredResultsComponent({
   postCardClassName,
   loadMoreClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -1205,7 +1217,14 @@ function BlogFilteredResultsComponent({
   const primaryPostContent = React6__namespace.useMemo(() => {
     if (primaryPostSlot) return primaryPostSlot;
     if (!primaryPost) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(BlogCard, { post: primaryPost, optixFlowConfig, className: postCardClassName });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BlogCard,
+      {
+        post: primaryPost,
+        optixFlowConfig,
+        className: postCardClassName
+      }
+    );
   }, [primaryPostSlot, primaryPost, optixFlowConfig, postCardClassName]);
   const categoriesContent = React6__namespace.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
@@ -1219,7 +1238,13 @@ function BlogFilteredResultsComponent({
         className: categoriesClassName
       }
     );
-  }, [categoriesSlot, categories, selectedCategories, handleCategoryChange, categoriesClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    selectedCategories,
+    handleCategoryChange,
+    categoriesClassName
+  ]);
   const postsContent = React6__namespace.useMemo(() => {
     if (postsSlot) return postsSlot;
     return postsToDisplay.slice(0, visibleCount).map((post) => {
@@ -1234,11 +1259,24 @@ function BlogFilteredResultsComponent({
         postKey
       );
     });
-  }, [postsSlot, postsToDisplay, visibleCount, optixFlowConfig, postCardClassName]);
+  }, [
+    postsSlot,
+    postsToDisplay,
+    visibleCount,
+    optixFlowConfig,
+    postCardClassName
+  ]);
   const loadMoreContent = React6__namespace.useMemo(() => {
     if (loadMoreSlot) return loadMoreSlot;
     if (!loadMoreAction || !hasMore) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = loadMoreAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = loadMoreAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -1263,22 +1301,67 @@ function BlogFilteredResultsComponent({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-muted bg-size-[3.125rem_3.125rem] bg-repeat", heroClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-between gap-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-xl flex-col gap-8", children: [
-            breadcrumbContent,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-5", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-[1.2] font-semibold md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl leading-[1.4] text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "bg-muted bg-size-[3.125rem_3.125rem] bg-repeat",
+              heroClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-between gap-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-xl flex-col gap-8", children: [
+                breadcrumbContent,
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-5", children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-[2.5rem] leading-[1.2] font-semibold md:text-5xl lg:text-6xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-xl leading-[1.4] text-muted-foreground",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+                ] })
+              ] }) }),
+              (primaryPostSlot || primaryPost) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-110", primaryPostClassName), children: primaryPostContent })
             ] })
-          ] }) }),
-          (primaryPostSlot || primaryPost) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-110", primaryPostClassName), children: primaryPostContent })
-        ] }) }),
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-20", allContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-8", children: [
-          allContentHeading && (typeof allContentHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-[1.75rem] leading-none font-medium md:text-[2.25rem] lg:text-[2rem]", allContentHeadingClassName), children: allContentHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: allContentHeadingClassName, children: allContentHeading })),
+          allContentHeading && (typeof allContentHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-[1.75rem] leading-none font-medium md:text-[2.25rem] lg:text-[2rem]",
+                allContentHeadingClassName
+              ),
+              children: allContentHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: allContentHeadingClassName, children: allContentHeading })),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             categoriesContent,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-4 py-8 lg:gap-8", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-10 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: postsContent }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid gap-10 md:grid-cols-2 lg:grid-cols-3",
+                    postsClassName
+                  ),
+                  children: postsContent
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center", loadMoreClassName), children: loadMoreContent })
             ] })
           ] })

package/dist/blog-filtered-results.js

@@ -1038,7 +1038,11 @@ var Section = React6__default.forwardRef(
 );
 Section.displayName = "Section";
 var POSTS_PER_PAGE = 6;
-var BlogCard = React6.memo(function BlogCard2({ post, optixFlowConfig, className }) {
+var BlogCard = React6.memo(function BlogCard2({
+  post,
+  optixFlowConfig,
+  className
+}) {
   const postHref = post.href || post.url || post.link || "#";
   const postImage = post.thumbnail || post.image;
   const postTitle = typeof post.title === "string" ? post.title : "Content item";
@@ -1072,28 +1076,36 @@ var FilterForm = React6.memo(function FilterForm2({
   onCategoryChange,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-wrap items-center gap-2.5", className), children: categories.map((category) => {
-    const isChecked = selectedCategories.includes(category.value);
-    return /* @__PURE__ */ jsxs(
-      Label,
-      {
-        className: "flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5",
-        children: [
-          /* @__PURE__ */ jsx("div", { children: category.label }),
-          /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: isChecked,
-              onCheckedChange: (checked) => onCategoryChange(category.value, !!checked)
-            }
-          )
-        ]
-      },
-      category.value
-    );
-  }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex w-full flex-wrap items-center gap-2.5", className),
+      children: categories.map((category) => {
+        const isChecked = selectedCategories.includes(category.value);
+        return /* @__PURE__ */ jsxs(
+          Label,
+          {
+            className: "flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5",
+            children: [
+              /* @__PURE__ */ jsx("div", { children: category.label }),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isChecked,
+                  onCheckedChange: (checked) => onCategoryChange(category.value, !!checked)
+                }
+              )
+            ]
+          },
+          category.value
+        );
+      })
+    }
+  );
 });
-var BreadcrumbBlog = React6.memo(function BreadcrumbBlog2({ breadcrumb }) {
+var BreadcrumbBlog = React6.memo(function BreadcrumbBlog2({
+  breadcrumb
+}) {
   return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumb.map((item, i) => {
     const labelKey = typeof item.label === "string" ? item.label : `breadcrumb-${i}`;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1129,8 +1141,8 @@ function BlogFilteredResultsComponent({
   postCardClassName,
   loadMoreClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -1181,7 +1193,14 @@ function BlogFilteredResultsComponent({
   const primaryPostContent = React6.useMemo(() => {
     if (primaryPostSlot) return primaryPostSlot;
     if (!primaryPost) return null;
-    return /* @__PURE__ */ jsx(BlogCard, { post: primaryPost, optixFlowConfig, className: postCardClassName });
+    return /* @__PURE__ */ jsx(
+      BlogCard,
+      {
+        post: primaryPost,
+        optixFlowConfig,
+        className: postCardClassName
+      }
+    );
   }, [primaryPostSlot, primaryPost, optixFlowConfig, postCardClassName]);
   const categoriesContent = React6.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
@@ -1195,7 +1214,13 @@ function BlogFilteredResultsComponent({
         className: categoriesClassName
       }
     );
-  }, [categoriesSlot, categories, selectedCategories, handleCategoryChange, categoriesClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    selectedCategories,
+    handleCategoryChange,
+    categoriesClassName
+  ]);
   const postsContent = React6.useMemo(() => {
     if (postsSlot) return postsSlot;
     return postsToDisplay.slice(0, visibleCount).map((post) => {
@@ -1210,11 +1235,24 @@ function BlogFilteredResultsComponent({
         postKey
       );
     });
-  }, [postsSlot, postsToDisplay, visibleCount, optixFlowConfig, postCardClassName]);
+  }, [
+    postsSlot,
+    postsToDisplay,
+    visibleCount,
+    optixFlowConfig,
+    postCardClassName
+  ]);
   const loadMoreContent = React6.useMemo(() => {
     if (loadMoreSlot) return loadMoreSlot;
     if (!loadMoreAction || !hasMore) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = loadMoreAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = loadMoreAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1239,22 +1277,67 @@ function BlogFilteredResultsComponent({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("bg-muted bg-size-[3.125rem_3.125rem] bg-repeat", heroClassName), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-between gap-12", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xl flex-col gap-8", children: [
-            breadcrumbContent,
-            /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-5", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-[1.2] font-semibold md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl leading-[1.4] text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-muted bg-size-[3.125rem_3.125rem] bg-repeat",
+              heroClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-between gap-12", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xl flex-col gap-8", children: [
+                breadcrumbContent,
+                /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-5", children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-[2.5rem] leading-[1.2] font-semibold md:text-5xl lg:text-6xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-xl leading-[1.4] text-muted-foreground",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+                ] })
+              ] }) }),
+              (primaryPostSlot || primaryPost) && /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-110", primaryPostClassName), children: primaryPostContent })
             ] })
-          ] }) }),
-          (primaryPostSlot || primaryPost) && /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-110", primaryPostClassName), children: primaryPostContent })
-        ] }) }),
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: cn("py-20", allContentClassName), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col gap-8", children: [
-          allContentHeading && (typeof allContentHeading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-[1.75rem] leading-none font-medium md:text-[2.25rem] lg:text-[2rem]", allContentHeadingClassName), children: allContentHeading }) : /* @__PURE__ */ jsx("div", { className: allContentHeadingClassName, children: allContentHeading })),
+          allContentHeading && (typeof allContentHeading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-[1.75rem] leading-none font-medium md:text-[2.25rem] lg:text-[2rem]",
+                allContentHeadingClassName
+              ),
+              children: allContentHeading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: allContentHeadingClassName, children: allContentHeading })),
           /* @__PURE__ */ jsxs("div", { children: [
             categoriesContent,
             /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4 py-8 lg:gap-8", children: [
-              /* @__PURE__ */ jsx("div", { className: cn("grid gap-10 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: postsContent }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid gap-10 md:grid-cols-2 lg:grid-cols-3",
+                    postsClassName
+                  ),
+                  children: postsContent
+                }
+              ),
               /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", loadMoreClassName), children: loadMoreContent })
             ] })
           ] })

package/dist/blog-grid-author-cards.cjs

@@ -919,15 +919,22 @@ function BlogGridAuthorCardsComponent({
   postCardClassName,
   viewAllClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const viewAllActionContent = React__namespace.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -994,11 +1001,38 @@ function BlogGridAuthorCardsComponent({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         (heading || description) && /* @__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: postsContent }),
-        (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-col items-center py-2 md:hidden", viewAllClassName), children: viewAllActionContent })
+        /* @__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: postsContent
+          }
+        ),
+        (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex flex-col items-center py-2 md:hidden",
+              viewAllClassName
+            ),
+            children: viewAllActionContent
+          }
+        )
       ] })
     }
   );

package/dist/blog-grid-author-cards.js

@@ -897,15 +897,22 @@ function BlogGridAuthorCardsComponent({
   postCardClassName,
   viewAllClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const viewAllActionContent = React.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -972,11 +979,38 @@ function BlogGridAuthorCardsComponent({
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         (heading || description) && /* @__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: postsContent }),
-        (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-col items-center py-2 md:hidden", viewAllClassName), children: viewAllActionContent })
+        /* @__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: postsContent
+          }
+        ),
+        (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex flex-col items-center py-2 md:hidden",
+              viewAllClassName
+            ),
+            children: viewAllActionContent
+          }
+        )
       ] })
     }
   );

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