@opensite/ui 0.5.7 → 0.5.9

package/dist/hero-welcome-asymmetric-images.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem } from './blocks-k17uluAz.js';
+import { A as ActionConfig, I as ImageItem } from './blocks-MliqP3QH.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-An3w_HDN.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-BmOlmOJa.js';
 import 'class-variance-authority/types';
 import 'react/jsx-runtime';
 

package/dist/image-slider.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { O as OptixFlowConfig } from './blocks-qOnR4WhL.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-BmOlmOJa.cjs';
 import 'class-variance-authority/types';
 
 type ImageSliderDirection = "up" | "down";

package/dist/image-slider.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { O as OptixFlowConfig } from './blocks-MliqP3QH.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-BmOlmOJa.js';
 import 'class-variance-authority/types';
 
 type ImageSliderDirection = "up" | "down";

package/dist/index.cjs

@@ -1604,13 +1604,13 @@ function AboutSplitHero({
   imageSrc,
   imageAlt,
   imageClassName,
+  contentClassName,
   className,
-  containerClassName,
   optixFlowConfig,
-  background,
-  spacing,
+  background = "dark",
   pattern,
-  patternOpacity
+  patternOpacity,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) {
   const ctaContent = React4.useMemo(() => {
     if (ctaSlot) return ctaSlot;
@@ -1623,7 +1623,7 @@ function AboutSplitHero({
         variant: ctaAction.variant || "default",
         size: ctaAction.size || "lg",
         asButton: true,
-        className: cn("mt-10 flex h-fit items-center gap-2.5 rounded-xl px-5 py-4 font-bold", ctaClassName),
+        className: cn("inline-flex items-center gap-2.5 font-semibold", ctaClassName),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: ctaAction.label }),
           /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
@@ -1631,40 +1631,55 @@ function AboutSplitHero({
       }
     );
   }, [ctaSlot, ctaAction, ctaClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Section,
-    {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn(className),
-      containerClassName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container my-10 flex w-[500px] flex-col gap-24", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("text-4xl text-foreground", brandTextClassName), children: [
-            brandText,
-            " ",
-            brandHighlight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("bg-gradient-to-tr from-foreground to-muted bg-clip-text text-transparent", brandHighlightClassName), children: brandHighlight })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl text-foreground lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2.5 text-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2.5", descriptionClassName), children: description })),
-            ctaContent
-          ] })
-        ] }),
-        imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
+  const bgColorClass = React4.useMemo(() => {
+    switch (background) {
+      case "dark":
+        return "bg-gray-900 text-white";
+      case "gray":
+        return "bg-gray-100 text-gray-900";
+      case "white":
+        return "bg-white text-gray-900";
+      default:
+        return "bg-background text-foreground";
+    }
+  }, [background]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const contentArea = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex w-full items-center lg:w-1/2", bgColorClass, contentClassName), children: [
+    pattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+      (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-xl font-semibold uppercase tracking-wider sm:text-2xl", brandTextClassName), children: [
+        brandText,
+        brandText && brandHighlight && " ",
+        brandHighlight && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            src: imageSrc,
-            alt: imageAlt || "",
-            className: cn("hidden h-screen w-1/2 object-cover lg:block", imageClassName),
-            optixFlowConfig
+            className: cn(
+              "bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+              brandHighlightClassName
+            ),
+            children: brandHighlight
           }
         )
-      ]
+      ] }),
+      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base leading-relaxed opacity-90 sm:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+      ctaContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: ctaContent })
+    ] }) })
+  ] });
+  const imageArea = imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    img.Img,
+    {
+      src: imageSrc,
+      alt: imageAlt || "",
+      className: cn("h-full w-full object-cover", imageClassName),
+      optixFlowConfig
     }
-  );
+  ) }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-[600px]", mobileOrder, desktopOrder), children: [
+    contentArea,
+    imageArea
+  ] }) });
 }
 function AboutMissionPrinciples({
   badgeText,
@@ -1724,7 +1739,7 @@ function AboutMissionPrinciples({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", principlesClassName), children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "relative rounded-lg border p-6 transition-colors hover:bg-accent/50",
+        className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
         children: [
           principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
@@ -1781,10 +1796,10 @@ function AboutMissionPrinciples({
           ] }),
           principlesContent
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-24 rounded-lg bg-accent p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-24 rounded-lg bg-muted p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
             visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", visionHeadingClassName), children: visionHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
-            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-muted-foreground", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
+            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-foreground/80", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
         ] }) })
@@ -1841,7 +1856,7 @@ function AboutExpandableValues({
   const valuesContent = React4.useMemo(() => {
     if (valuesSlot) return valuesSlot;
     if (!values || values.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", valuesClassName), children: values.map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-6 mt-8", valuesClassName), children: values.map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
@@ -1857,7 +1872,7 @@ function AboutExpandableValues({
               type: "button",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                     value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold", children: value.title }) : value.title),
                     value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: value.shortDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: value.shortDescription }))
@@ -1869,7 +1884,7 @@ function AboutExpandableValues({
                     name: "lucide/chevron-down",
                     size: 20,
                     className: cn(
-                      "mt-1 flex-shrink-0 text-muted-foreground transition-transform duration-300",
+                      "mt-1 shrink-0 text-muted-foreground transition-transform duration-300",
                       expandedValue === value.id ? "rotate-180" : ""
                     )
                   }
@@ -1882,7 +1897,7 @@ function AboutExpandableValues({
             value.examples && value.examples.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-2 text-sm font-semibold text-muted-foreground", children: "How we put this into practice:" }),
               /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: value.examples.map((example, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex-shrink-0 rounded-full bg-primary/10 p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
                     name: "lucide/check",
@@ -1890,7 +1905,7 @@ function AboutExpandableValues({
                     className: "text-primary"
                   }
                 ) }),
-                typeof example === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: example }) : example
+                typeof example === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm pt-2", children: example }) : example
               ] }, index)) })
             ] })
           ] })
@@ -1909,17 +1924,68 @@ function AboutExpandableValues({
       className: cn(className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight", headingClassName), 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 }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto max-w-3xl space-y-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                    badgeClassName
+                  ),
+                  children: badgeText
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              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 }))
+            ]
+          }
+        ),
         valuesContent,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative mt-8 rounded-lg bg-accent/50 p-8", ctaClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center", children: [
-          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaHeadingClassName, children: ctaHeading })),
-          ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),
-          actionsContent
-        ] }) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative mt-8 rounded-lg bg-accent/50 p-8",
+              ctaClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center", children: [
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaHeadingClassName, children: ctaHeading })),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn("text-muted-foreground", ctaDescriptionClassName),
+                  children: ctaDescription
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),
+              actionsContent
+            ] })
+          }
+        )
       ]
     }
   );
@@ -2014,24 +2080,33 @@ function CommunityInitiatives({
     categories?.[0]?.id || ""
   );
   const currentCategory = categories?.find((category) => category.id === activeCategory) || categories?.[0];
-  const handleCategoryChange = React4.useCallback((e) => {
-    setActiveCategory(e.target.value);
-  }, []);
+  const handleCategoryChange = React4.useCallback(
+    (e) => {
+      setActiveCategory(e.target.value);
+    },
+    []
+  );
   const actionsContent = React4.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap justify-center gap-4", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant || "default",
-        size: action.size || "lg",
-        asButton: true,
-        children: action.label
-      },
-      idx
-    )) });
+        className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
+        children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            href: action.href,
+            onClick: action.onClick,
+            variant: action.variant || "default",
+            size: action.size || "lg",
+            asButton: true,
+            children: action.label
+          },
+          idx
+        ))
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const categoriesContent = React4.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
@@ -2045,7 +2120,7 @@ function CommunityInitiatives({
         className: cn("space-y-8", tabsClassName),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 w-full md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0 md:mb-6 w-full md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
               "select",
               {
                 value: activeCategory,
@@ -2064,7 +2139,7 @@ function CommunityInitiatives({
               category.id
             )) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: currentCategory?.description }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
             TabsContent,
             {
@@ -2157,7 +2232,16 @@ function CommunityInitiatives({
         ]
       }
     );
-  }, [categoriesSlot, categories, activeCategory, setActiveCategory, tabsClassName, handleCategoryChange, currentCategory, optixFlowConfig]);
+  }, [
+    categoriesSlot,
+    categories,
+    activeCategory,
+    setActiveCategory,
+    tabsClassName,
+    handleCategoryChange,
+    currentCategory,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -2168,16 +2252,58 @@ function CommunityInitiatives({
       className: cn(className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-16 max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), 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 }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-8 md:mb-16 max-w-3xl space-y-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                    badgeClassName
+                  ),
+                  children: badgeText
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl",
+                    headingClassName
+                  ),
+                  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 }))
+            ]
+          }
+        ),
         categoriesContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
           ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 inline-flex items-center justify-center rounded-full bg-muted 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 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
-          ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-muted-foreground", ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName), children: ctaDescription })),
+          ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mb-8 max-w-2xl text-muted-foreground",
+                ctaDescriptionClassName
+              ),
+              children: ctaDescription
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
+              children: ctaDescription
+            }
+          )),
           actionsContent
         ] })
       ]

package/dist/index.d.cts

@@ -10,7 +10,7 @@ export { Popover, PopoverContent, PopoverTrigger } from './popover.cjs';
 export { DynamicIcon } from './dynamic-icon.cjs';
 export { Pressable, PressableProps } from './pressable.cjs';
 export { AlternatingBlocks } from './alternating-blocks.cjs';
-export { c as AboutCultureTabs, p as AboutCultureTabsProps, b as AboutExpandableValues, n as AboutExpandableValuesProps, a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps, A as AboutSplitHero, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, C as CommunityInitiatives, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, F as FeatureShowcaseItem, s as FeatureShowcaseProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
+export { c as AboutCultureTabs, p as AboutCultureTabsProps, b as AboutExpandableValues, n as AboutExpandableValuesProps, a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps, A as AboutSplitHero, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, C as CommunityInitiatives, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, D as DirectionConfig, F as FeatureShowcaseItem, s as FeatureShowcaseProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives--V294d8T.cjs';
 export { MediaHoverCtas } from './media-hover-ctas.cjs';
 export { FooterLinksGrid } from './footer-links-grid.cjs';
 export { FooterSocialNewsletter } from './footer-social-newsletter.cjs';
@@ -27,11 +27,11 @@ export { FooterCtaSocial } from './footer-cta-social.cjs';
 export { FooterNavSocial } from './footer-nav-social.cjs';
 export { LinkType, UseNavigationArgs, UseNavigationReturn, useNavigation } from './use-navigation.cjs';
 export { cn } from './utils.cjs';
-export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-Cohq4eio.cjs';
+export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-qOnR4WhL.cjs';
 import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-BmOlmOJa.cjs';
 import 'class-variance-authority/types';
 import '@radix-ui/react-popover';
 import './pattern-background-a7gKHzHy.cjs';

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { Popover, PopoverContent, PopoverTrigger } from './popover.js';
 export { DynamicIcon } from './dynamic-icon.js';
 export { Pressable, PressableProps } from './pressable.js';
 export { AlternatingBlocks } from './alternating-blocks.js';
-export { c as AboutCultureTabs, p as AboutCultureTabsProps, b as AboutExpandableValues, n as AboutExpandableValuesProps, a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps, A as AboutSplitHero, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, C as CommunityInitiatives, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, F as FeatureShowcaseItem, s as FeatureShowcaseProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
+export { c as AboutCultureTabs, p as AboutCultureTabsProps, b as AboutExpandableValues, n as AboutExpandableValuesProps, a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps, A as AboutSplitHero, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, C as CommunityInitiatives, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, D as DirectionConfig, F as FeatureShowcaseItem, s as FeatureShowcaseProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-An3w_HDN.js';
 export { MediaHoverCtas } from './media-hover-ctas.js';
 export { FooterLinksGrid } from './footer-links-grid.js';
 export { FooterSocialNewsletter } from './footer-social-newsletter.js';
@@ -27,11 +27,11 @@ export { FooterCtaSocial } from './footer-cta-social.js';
 export { FooterNavSocial } from './footer-nav-social.js';
 export { LinkType, UseNavigationArgs, UseNavigationReturn, useNavigation } from './use-navigation.js';
 export { cn } from './utils.js';
-export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-k17uluAz.js';
+export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-MliqP3QH.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-BmOlmOJa.js';
 import 'class-variance-authority/types';
 import '@radix-ui/react-popover';
 import './pattern-background-a7gKHzHy.js';