@opensite/ui 0.6.6 → 0.6.8

package/dist/banner-survey-incentive.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { A as ActionConfig } from './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/banner-survey-incentive.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { A as ActionConfig } from './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/{blocks-Cohq4eio.d.cts → blocks-B53JjGZ5.d.cts}

@@ -1,6 +1,6 @@
 import { ReactNode, MouseEventHandler } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { b as buttonVariants } from './button-variants-lRElsmTc.cjs';
+import { b as buttonVariants } from './button-variants-CfOeYrR-.cjs';
 
 /**
  * Action configuration for semantic UI blocks.

package/dist/{blocks-k17uluAz.d.ts → blocks-CyUmnmEM.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode, MouseEventHandler } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { b as buttonVariants } from './button-variants-lRElsmTc.js';
+import { b as buttonVariants } from './button-variants-CfOeYrR-.js';
 
 /**
  * Action configuration for semantic UI blocks.

package/dist/blog-cards-read-time.cjs

@@ -1112,11 +1112,11 @@ function BlogCardsReadTime({
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center",
+              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center px-8 md:px-0",
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "gap-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
@@ -1138,7 +1138,16 @@ function BlogCardsReadTime({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
             ]
           }
         ),
@@ -1146,7 +1155,7 @@ function BlogCardsReadTime({
           "div",
           {
             className: cn(
-              "mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+              "mt-6 md:mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
               postsClassName
             ),
             children: renderedPosts

package/dist/blog-cards-read-time.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-CODGexkN.cjs';
-import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.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 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface BlogCardsReadTimeProps {

package/dist/blog-cards-read-time.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-31vhKBa1.js';
-import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.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 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface BlogCardsReadTimeProps {

package/dist/blog-cards-read-time.js

@@ -1089,11 +1089,11 @@ function BlogCardsReadTime({
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center",
+              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center px-8 md:px-0",
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
+              badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "gap-1", children: [
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
@@ -1115,7 +1115,16 @@ function BlogCardsReadTime({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
             ]
           }
         ),
@@ -1123,7 +1132,7 @@ function BlogCardsReadTime({
           "div",
           {
             className: cn(
-              "mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+              "mt-6 md:mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
               postsClassName
             ),
             children: renderedPosts

package/dist/blog-cards-tagline-cta.cjs

@@ -1133,30 +1133,39 @@ function BlogCardsTaglineCta({
             containerClassName
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("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-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-              ctaActionContent
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "text-center flex flex-col items-center px-6 md:px-0",
+                  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-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                  ctaActionContent
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {

package/dist/blog-cards-tagline-cta.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-CODGexkN.cjs';
-import { A as ActionConfig, e as BlogPostItem, O as OptixFlowConfig } from './blocks-Cohq4eio.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 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface BlogCardsTaglineCtaProps {

package/dist/blog-cards-tagline-cta.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-31vhKBa1.js';
-import { A as ActionConfig, e as BlogPostItem, O as OptixFlowConfig } from './blocks-k17uluAz.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 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface BlogCardsTaglineCtaProps {

package/dist/blog-cards-tagline-cta.js

@@ -1112,30 +1112,39 @@ function BlogCardsTaglineCta({
             containerClassName
           ),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("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-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              ctaActionContent
-            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "text-center flex flex-col items-center px-6 md:px-0",
+                  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-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                  ctaActionContent
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(
               "div",
               {

package/dist/blog-carousel-apple.cjs

@@ -617,7 +617,7 @@ var AppleCarousel = ({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20",
+            className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-4 [scrollbar-width:none] md:py-10",
             ref: carouselRef,
             onScroll: checkScrollability,
             children: [
@@ -668,33 +668,21 @@ var AppleCarousel = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
-              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50",
+              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
               onClick: scrollLeftHandler,
               disabled: !canScrollLeft,
               asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-left",
-                  className: "h-6 w-6 text-gray-500"
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", className: "h-6 w-6" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
-              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50",
+              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
               onClick: scrollRightHandler,
               disabled: !canScrollRight,
               asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-right",
-                  className: "h-6 w-6 text-gray-500"
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", className: "h-6 w-6" })
             }
           )
         ] })
@@ -1235,8 +1223,8 @@ function BlogCarouselAppleComponent({
     {
       title,
       subtitle,
-      background: background || "white",
-      spacing: spacing || "lg",
+      background,
+      spacing,
       pattern,
       patternOpacity,
       className: cn(className),

package/dist/blog-carousel-apple.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-CODGexkN.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
+import { O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface BlogCarouselApplePost {

package/dist/blog-carousel-apple.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-31vhKBa1.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
+import { O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface BlogCarouselApplePost {

package/dist/blog-carousel-apple.js

@@ -596,7 +596,7 @@ var AppleCarousel = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20",
+            className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-4 [scrollbar-width:none] md:py-10",
             ref: carouselRef,
             onScroll: checkScrollability,
             children: [
@@ -647,33 +647,21 @@ var AppleCarousel = ({
           /* @__PURE__ */ jsx(
             Pressable,
             {
-              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50",
+              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
               onClick: scrollLeftHandler,
               disabled: !canScrollLeft,
               asButton: true,
-              children: /* @__PURE__ */ jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-left",
-                  className: "h-6 w-6 text-gray-500"
-                }
-              )
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", className: "h-6 w-6" })
             }
           ),
           /* @__PURE__ */ jsx(
             Pressable,
             {
-              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50",
+              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
               onClick: scrollRightHandler,
               disabled: !canScrollRight,
               asButton: true,
-              children: /* @__PURE__ */ jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-right",
-                  className: "h-6 w-6 text-gray-500"
-                }
-              )
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", className: "h-6 w-6" })
             }
           )
         ] })
@@ -1214,8 +1202,8 @@ function BlogCarouselAppleComponent({
     {
       title,
       subtitle,
-      background: background || "white",
-      spacing: spacing || "lg",
+      background,
+      spacing,
       pattern,
       patternOpacity,
       className: cn(className),

package/dist/blog-category-overlay.cjs

@@ -1034,9 +1034,9 @@ function BlogCategoryOverlay({
           (post.category || post.label) && /* @__PURE__ */ jsxRuntime.jsx(
             Badge,
             {
-              variant: "secondary",
+              variant: "default",
               className: cn(
-                "absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm",
+                "absolute top-4 right-4 px-3 py-1 text-sm backdrop-blur-sm",
                 categoryBadgeClassName
               ),
               children: post.category || post.label
@@ -1093,7 +1093,7 @@ function BlogCategoryOverlay({
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center",
+              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center px-8 md:px-0",
               headerClassName
             ),
             children: [
@@ -1108,7 +1108,16 @@ function BlogCategoryOverlay({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
               viewAllActionContent
             ]
           }
@@ -1117,7 +1126,7 @@ function BlogCategoryOverlay({
           "div",
           {
             className: cn(
-              "mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              "mt-6 md:mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
               postsClassName
             ),
             children: postsContent

package/dist/blog-category-overlay.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-CODGexkN.cjs';
-import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.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 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface BlogCategoryOverlayProps {

package/dist/blog-category-overlay.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-31vhKBa1.js';
-import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.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 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface BlogCategoryOverlayProps {

package/dist/blog-category-overlay.js

@@ -1013,9 +1013,9 @@ function BlogCategoryOverlay({
           (post.category || post.label) && /* @__PURE__ */ jsx(
             Badge,
             {
-              variant: "secondary",
+              variant: "default",
               className: cn(
-                "absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm",
+                "absolute top-4 right-4 px-3 py-1 text-sm backdrop-blur-sm",
                 categoryBadgeClassName
               ),
               children: post.category || post.label
@@ -1072,7 +1072,7 @@ function BlogCategoryOverlay({
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center",
+              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center px-8 md:px-0",
               headerClassName
             ),
             children: [
@@ -1087,7 +1087,16 @@ function BlogCategoryOverlay({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
               viewAllActionContent
             ]
           }
@@ -1096,7 +1105,7 @@ function BlogCategoryOverlay({
           "div",
           {
             className: cn(
-              "mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              "mt-6 md:mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
               postsClassName
             ),
             children: postsContent