@opensite/ui 3.2.7 → 3.2.9

package/dist/badge.d.cts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/community-initiatives.cjs

@@ -658,20 +658,26 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
-              TabsTrigger,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TabsList,
               {
-                value: category.id,
-                className: cn(
-                  "px-3 py-2.5 cursor-pointer",
-                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
-                  "hover:bg-muted hover:text-muted-foreground",
-                  "transition-all duration-500"
-                ),
-                children: category.title
-              },
-              category.id
-            )) })
+                className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
+                children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+                  TabsTrigger,
+                  {
+                    value: category.id,
+                    className: cn(
+                      "px-3 py-2.5 cursor-pointer",
+                      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                      "hover:bg-muted hover:text-muted-foreground",
+                      "transition-all duration-500"
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -748,7 +754,7 @@ function CommunityInitiatives({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
+                                /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -824,29 +830,15 @@ function CommunityInitiatives({
           {
             className: cn(
               "mt-10 md:mt-24 p-6 md:p-16",
-              "text-center flex flex-col items-center",
-              "bg-muted text-muted-foreground",
+              "text-center flex flex-col items-center justify-center gap-6",
+              "bg-card text-card-foreground",
               "rounded-2xl shadow-lg",
               ctaClassName
             ),
             children: [
-              ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-                }
-              ),
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-                  children: ctaDescription
-                }
-              ) : ctaDescription),
+              ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: ctaBadgeText }) }),
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {

package/dist/community-initiatives.js

@@ -636,20 +636,26 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
-              TabsTrigger,
+            /* @__PURE__ */ jsx(
+              TabsList,
               {
-                value: category.id,
-                className: cn(
-                  "px-3 py-2.5 cursor-pointer",
-                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
-                  "hover:bg-muted hover:text-muted-foreground",
-                  "transition-all duration-500"
-                ),
-                children: category.title
-              },
-              category.id
-            )) })
+                className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
+                children: categories.map((category) => /* @__PURE__ */ jsx(
+                  TabsTrigger,
+                  {
+                    value: category.id,
+                    className: cn(
+                      "px-3 py-2.5 cursor-pointer",
+                      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                      "hover:bg-muted hover:text-muted-foreground",
+                      "transition-all duration-500"
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsx(
@@ -726,7 +732,7 @@ function CommunityInitiatives({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
+                                /* @__PURE__ */ jsx(Badge, { className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -802,29 +808,15 @@ function CommunityInitiatives({
           {
             className: cn(
               "mt-10 md:mt-24 p-6 md:p-16",
-              "text-center flex flex-col items-center",
-              "bg-muted text-muted-foreground",
+              "text-center flex flex-col items-center justify-center gap-6",
+              "bg-card text-card-foreground",
               "rounded-2xl shadow-lg",
               ctaClassName
             ),
             children: [
-              ctaBadgeText && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
-                  ),
-                  children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-                }
-              ),
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-                  children: ctaDescription
-                }
-              ) : ctaDescription),
+              ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsx(Badge, { children: ctaBadgeText }) }),
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {

package/dist/components.cjs

@@ -2273,20 +2273,26 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
-              TabsTrigger,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TabsList,
               {
-                value: category.id,
-                className: cn(
-                  "px-3 py-2.5 cursor-pointer",
-                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
-                  "hover:bg-muted hover:text-muted-foreground",
-                  "transition-all duration-500"
-                ),
-                children: category.title
-              },
-              category.id
-            )) })
+                className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
+                children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+                  TabsTrigger,
+                  {
+                    value: category.id,
+                    className: cn(
+                      "px-3 py-2.5 cursor-pointer",
+                      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                      "hover:bg-muted hover:text-muted-foreground",
+                      "transition-all duration-500"
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2363,7 +2369,7 @@ function CommunityInitiatives({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
+                                /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -2439,29 +2445,15 @@ function CommunityInitiatives({
           {
             className: cn(
               "mt-10 md:mt-24 p-6 md:p-16",
-              "text-center flex flex-col items-center",
-              "bg-muted text-muted-foreground",
+              "text-center flex flex-col items-center justify-center gap-6",
+              "bg-card text-card-foreground",
               "rounded-2xl shadow-lg",
               ctaClassName
             ),
             children: [
-              ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-                }
-              ),
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-                  children: ctaDescription
-                }
-              ) : ctaDescription),
+              ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: ctaBadgeText }) }),
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {

package/dist/components.js

@@ -2250,20 +2250,26 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
-              TabsTrigger,
+            /* @__PURE__ */ jsx(
+              TabsList,
               {
-                value: category.id,
-                className: cn(
-                  "px-3 py-2.5 cursor-pointer",
-                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
-                  "hover:bg-muted hover:text-muted-foreground",
-                  "transition-all duration-500"
-                ),
-                children: category.title
-              },
-              category.id
-            )) })
+                className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
+                children: categories.map((category) => /* @__PURE__ */ jsx(
+                  TabsTrigger,
+                  {
+                    value: category.id,
+                    className: cn(
+                      "px-3 py-2.5 cursor-pointer",
+                      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                      "hover:bg-muted hover:text-muted-foreground",
+                      "transition-all duration-500"
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsx(
@@ -2340,7 +2346,7 @@ function CommunityInitiatives({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
+                                /* @__PURE__ */ jsx(Badge, { className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -2416,29 +2422,15 @@ function CommunityInitiatives({
           {
             className: cn(
               "mt-10 md:mt-24 p-6 md:p-16",
-              "text-center flex flex-col items-center",
-              "bg-muted text-muted-foreground",
+              "text-center flex flex-col items-center justify-center gap-6",
+              "bg-card text-card-foreground",
               "rounded-2xl shadow-lg",
               ctaClassName
             ),
             children: [
-              ctaBadgeText && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
-                  ),
-                  children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-                }
-              ),
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-                  children: ctaDescription
-                }
-              ) : ctaDescription),
+              ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsx(Badge, { children: ctaBadgeText }) }),
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {

package/dist/index.cjs

@@ -2334,20 +2334,26 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
-              TabsTrigger,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TabsList,
               {
-                value: category.id,
-                className: cn(
-                  "px-3 py-2.5 cursor-pointer",
-                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
-                  "hover:bg-muted hover:text-muted-foreground",
-                  "transition-all duration-500"
-                ),
-                children: category.title
-              },
-              category.id
-            )) })
+                className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
+                children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+                  TabsTrigger,
+                  {
+                    value: category.id,
+                    className: cn(
+                      "px-3 py-2.5 cursor-pointer",
+                      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                      "hover:bg-muted hover:text-muted-foreground",
+                      "transition-all duration-500"
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2424,7 +2430,7 @@ function CommunityInitiatives({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
+                                /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -2500,29 +2506,15 @@ function CommunityInitiatives({
           {
             className: cn(
               "mt-10 md:mt-24 p-6 md:p-16",
-              "text-center flex flex-col items-center",
-              "bg-muted text-muted-foreground",
+              "text-center flex flex-col items-center justify-center gap-6",
+              "bg-card text-card-foreground",
               "rounded-2xl shadow-lg",
               ctaClassName
             ),
             children: [
-              ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-                }
-              ),
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-                  children: ctaDescription
-                }
-              ) : ctaDescription),
+              ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: ctaBadgeText }) }),
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {

package/dist/index.js

@@ -2312,20 +2312,26 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
-              TabsTrigger,
+            /* @__PURE__ */ jsx(
+              TabsList,
               {
-                value: category.id,
-                className: cn(
-                  "px-3 py-2.5 cursor-pointer",
-                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
-                  "hover:bg-muted hover:text-muted-foreground",
-                  "transition-all duration-500"
-                ),
-                children: category.title
-              },
-              category.id
-            )) })
+                className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
+                children: categories.map((category) => /* @__PURE__ */ jsx(
+                  TabsTrigger,
+                  {
+                    value: category.id,
+                    className: cn(
+                      "px-3 py-2.5 cursor-pointer",
+                      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                      "hover:bg-muted hover:text-muted-foreground",
+                      "transition-all duration-500"
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsx(
@@ -2402,7 +2408,7 @@ function CommunityInitiatives({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
+                                /* @__PURE__ */ jsx(Badge, { className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -2478,29 +2484,15 @@ function CommunityInitiatives({
           {
             className: cn(
               "mt-10 md:mt-24 p-6 md:p-16",
-              "text-center flex flex-col items-center",
-              "bg-muted text-muted-foreground",
+              "text-center flex flex-col items-center justify-center gap-6",
+              "bg-card text-card-foreground",
               "rounded-2xl shadow-lg",
               ctaClassName
             ),
             children: [
-              ctaBadgeText && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
-                  ),
-                  children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-                }
-              ),
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-                  children: ctaDescription
-                }
-              ) : ctaDescription),
+              ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsx(Badge, { children: ctaBadgeText }) }),
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {

package/dist/process-numbered-services.cjs

@@ -432,7 +432,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"

package/dist/process-numbered-services.js

@@ -411,7 +411,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"

package/dist/process-sticky-steps.cjs

@@ -416,6 +416,70 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    pressable.Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 var CornerIllustration = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -469,47 +533,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = React.useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              pressable.Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = React.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -522,7 +550,15 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            pressable.Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -534,8 +570,8 @@ function ProcessStickySteps({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -573,7 +609,14 @@ function ProcessStickySteps({
                 )
               ] }),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
-              renderActions()
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]

package/dist/process-sticky-steps.d.cts

@@ -26,6 +26,10 @@ interface ProcessStickyStepItem {
      * Additional CSS classes for the step item
      */
     className?: string;
+    /**
+     * Optional URL
+     */
+    href?: string;
 }
 interface ProcessStickyStepsProps {
     /**

package/dist/process-sticky-steps.d.ts

@@ -26,6 +26,10 @@ interface ProcessStickyStepItem {
      * Additional CSS classes for the step item
      */
     className?: string;
+    /**
+     * Optional URL
+     */
+    href?: string;
 }
 interface ProcessStickyStepsProps {
     /**

package/dist/process-sticky-steps.js

@@ -395,6 +395,70 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 var CornerIllustration = (props) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -448,47 +512,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -501,7 +529,15 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -513,8 +549,8 @@ function ProcessStickySteps({
             }
           ),
           /* @__PURE__ */ jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -552,7 +588,14 @@ function ProcessStickySteps({
                 )
               ] }),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
-              renderActions()
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]

package/dist/registry.cjs

@@ -2068,20 +2068,26 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
-              TabsTrigger,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TabsList,
               {
-                value: category.id,
-                className: cn(
-                  "px-3 py-2.5 cursor-pointer",
-                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
-                  "hover:bg-muted hover:text-muted-foreground",
-                  "transition-all duration-500"
-                ),
-                children: category.title
-              },
-              category.id
-            )) })
+                className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
+                children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+                  TabsTrigger,
+                  {
+                    value: category.id,
+                    className: cn(
+                      "px-3 py-2.5 cursor-pointer",
+                      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                      "hover:bg-muted hover:text-muted-foreground",
+                      "transition-all duration-500"
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2158,7 +2164,7 @@ function CommunityInitiatives({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
+                                /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -2234,29 +2240,15 @@ function CommunityInitiatives({
           {
             className: cn(
               "mt-10 md:mt-24 p-6 md:p-16",
-              "text-center flex flex-col items-center",
-              "bg-muted text-muted-foreground",
+              "text-center flex flex-col items-center justify-center gap-6",
+              "bg-card text-card-foreground",
               "rounded-2xl shadow-lg",
               ctaClassName
             ),
             children: [
-              ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-                }
-              ),
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-                  children: ctaDescription
-                }
-              ) : ctaDescription),
+              ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: ctaBadgeText }) }),
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {
@@ -78270,47 +78262,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = React30.useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              pressable.Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = React30.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -78323,7 +78279,15 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            pressable.Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -78335,8 +78299,8 @@ function ProcessStickySteps({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -78374,7 +78338,14 @@ function ProcessStickySteps({
                 )
               ] }),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
-              renderActions()
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]
@@ -79562,7 +79533,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"

package/dist/registry.js

@@ -2028,20 +2028,26 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
-              TabsTrigger,
+            /* @__PURE__ */ jsx(
+              TabsList,
               {
-                value: category.id,
-                className: cn(
-                  "px-3 py-2.5 cursor-pointer",
-                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
-                  "hover:bg-muted hover:text-muted-foreground",
-                  "transition-all duration-500"
-                ),
-                children: category.title
-              },
-              category.id
-            )) })
+                className: `hidden h-auto grid-cols-${categories.length} p-1 md:grid ring-2 ring-primary`,
+                children: categories.map((category) => /* @__PURE__ */ jsx(
+                  TabsTrigger,
+                  {
+                    value: category.id,
+                    className: cn(
+                      "px-3 py-2.5 cursor-pointer",
+                      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                      "hover:bg-muted hover:text-muted-foreground",
+                      "transition-all duration-500"
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsx(
@@ -2118,7 +2124,7 @@ function CommunityInitiatives({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
+                                /* @__PURE__ */ jsx(Badge, { className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -2194,29 +2200,15 @@ function CommunityInitiatives({
           {
             className: cn(
               "mt-10 md:mt-24 p-6 md:p-16",
-              "text-center flex flex-col items-center",
-              "bg-muted text-muted-foreground",
+              "text-center flex flex-col items-center justify-center gap-6",
+              "bg-card text-card-foreground",
               "rounded-2xl shadow-lg",
               ctaClassName
             ),
             children: [
-              ctaBadgeText && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
-                  ),
-                  children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-                }
-              ),
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-                  children: ctaDescription
-                }
-              ) : ctaDescription),
+              ctaBadgeText && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-1"), children: /* @__PURE__ */ jsx(Badge, { children: ctaBadgeText }) }),
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName, "text-balance"), children: ctaDescription }) : ctaDescription),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {
@@ -78230,47 +78222,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -78283,7 +78239,15 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -78295,8 +78259,8 @@ function ProcessStickySteps({
             }
           ),
           /* @__PURE__ */ jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -78334,7 +78298,14 @@ function ProcessStickySteps({
                 )
               ] }),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
-              renderActions()
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]
@@ -79522,7 +79493,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   pattern,
   patternOpacity,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.2.7",
+  "version": "3.2.9",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",