@opensite/ui 2.3.4 → 2.3.6

package/dist/about-mission-features.cjs

@@ -15,66 +15,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -482,19 +422,18 @@ function AboutMissionFeatures({
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      feature.icon ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
-            "mb-5 flex size-12 items-center justify-center rounded-2xl text-primary-foreground",
-            getAccentColor(background),
+            "mb-5 flex size-12 items-center justify-center rounded-2xl",
             feature.iconBgClass
           ),
           children: feature.icon
         }
-      ),
+      ) : null,
       feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 mb-3 text-lg font-semibold", children: feature.title }) : feature.title),
-      feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
+      feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-md", children: feature.description }) : feature.description)
     ] }, idx));
   }, [featuresSlot, features, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -504,7 +443,7 @@ function AboutMissionFeatures({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
@@ -518,7 +457,7 @@ function AboutMissionFeatures({
               children: title
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xl text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xl text-xl", descriptionClassName), children: description }) : description)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
           mainImage && /* @__PURE__ */ jsxRuntime.jsx(
@@ -537,44 +476,36 @@ function AboutMissionFeatures({
             "div",
             {
               className: cn(
-                "relative flex flex-col justify-between gap-10 overflow-hidden rounded-2xl p-10",
-                getNestedCardBg(background),
-                getNestedCardTextColor(background),
+                "relative flex flex-col justify-between gap-10 overflow-hidden rounded-2xl p-10 text-white text-shadow-2xl",
                 missionSectionClassName
               ),
               children: [
-                missionBackgroundImage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: missionBackgroundImage.src,
-                      alt: missionBackgroundImage.alt,
-                      className: "absolute inset-0 size-full object-cover",
-                      optixFlowConfig
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-foreground/80 via-foreground/50 to-foreground/30" })
-                ] }),
+                missionBackgroundImage && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: missionBackgroundImage.src,
+                    alt: missionBackgroundImage.alt,
+                    className: "absolute inset-0 size-full object-cover brightness-50",
+                    optixFlowConfig
+                  }
+                ) }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "p",
                   {
                     className: cn(
-                      "text-sm font-semibold text-background",
+                      "text-sm font-bold uppercase",
                       missionLabelClassName
                     ),
                     children: missionLabel
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionLabelClassName, children: missionLabel })) }),
+                ) : missionLabel) }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: missionText && (typeof missionText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "p",
                   {
-                    className: cn(
-                      "text-lg font-medium text-background",
-                      missionTextClassName
-                    ),
+                    className: cn("text-lg font-medium", missionTextClassName),
                     children: missionText
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionTextClassName, children: missionText })) })
+                ) : missionText) })
               ]
             }
           )
@@ -590,18 +521,8 @@ function AboutMissionFeatures({
                 ),
                 children: featuresTitle
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuresTitleClassName, children: featuresTitle })),
-            featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-lg",
-                  getTextColor(background, "muted"),
-                  featuresDescriptionClassName
-                ),
-                children: featuresDescription
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuresDescriptionClassName, children: featuresDescription }))
+            ) : featuresTitle),
+            featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", featuresDescriptionClassName), children: featuresDescription }) : featuresDescription)
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-10 md:grid-cols-3", featuresClassName), children: featuresContent })
         ] })

package/dist/about-mission-features.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
-import { F as FeatureItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BtyAiPGZ.cjs';
+import { F as FeatureItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 interface AboutMissionFeaturesProps {

package/dist/about-mission-features.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
-import { F as FeatureItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BoJRCHbA.js';
+import { F as FeatureItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 interface AboutMissionFeaturesProps {

package/dist/about-mission-features.js

@@ -9,66 +9,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -476,19 +416,18 @@ function AboutMissionFeatures({
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(
+      feature.icon ? /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "mb-5 flex size-12 items-center justify-center rounded-2xl text-primary-foreground",
-            getAccentColor(background),
+            "mb-5 flex size-12 items-center justify-center rounded-2xl",
             feature.iconBgClass
           ),
           children: feature.icon
         }
-      ),
+      ) : null,
       feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-2 mb-3 text-lg font-semibold", children: feature.title }) : feature.title),
-      feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
+      feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm md:text-md", children: feature.description }) : feature.description)
     ] }, idx));
   }, [featuresSlot, features, background]);
   return /* @__PURE__ */ jsx(
@@ -498,7 +437,7 @@ function AboutMissionFeatures({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
@@ -512,7 +451,7 @@ function AboutMissionFeatures({
               children: title
             }
           ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xl text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xl text-xl", descriptionClassName), children: description }) : description)
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
           mainImage && /* @__PURE__ */ jsx(
@@ -531,44 +470,36 @@ function AboutMissionFeatures({
             "div",
             {
               className: cn(
-                "relative flex flex-col justify-between gap-10 overflow-hidden rounded-2xl p-10",
-                getNestedCardBg(background),
-                getNestedCardTextColor(background),
+                "relative flex flex-col justify-between gap-10 overflow-hidden rounded-2xl p-10 text-white text-shadow-2xl",
                 missionSectionClassName
               ),
               children: [
-                missionBackgroundImage && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    Img,
-                    {
-                      src: missionBackgroundImage.src,
-                      alt: missionBackgroundImage.alt,
-                      className: "absolute inset-0 size-full object-cover",
-                      optixFlowConfig
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-foreground/80 via-foreground/50 to-foreground/30" })
-                ] }),
+                missionBackgroundImage && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: missionBackgroundImage.src,
+                    alt: missionBackgroundImage.alt,
+                    className: "absolute inset-0 size-full object-cover brightness-50",
+                    optixFlowConfig
+                  }
+                ) }),
                 /* @__PURE__ */ jsx("div", { className: "relative z-10", children: missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsx(
                   "p",
                   {
                     className: cn(
-                      "text-sm font-semibold text-background",
+                      "text-sm font-bold uppercase",
                       missionLabelClassName
                     ),
                     children: missionLabel
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: missionLabelClassName, children: missionLabel })) }),
+                ) : missionLabel) }),
                 /* @__PURE__ */ jsx("div", { className: "relative z-10", children: missionText && (typeof missionText === "string" ? /* @__PURE__ */ jsx(
                   "p",
                   {
-                    className: cn(
-                      "text-lg font-medium text-background",
-                      missionTextClassName
-                    ),
+                    className: cn("text-lg font-medium", missionTextClassName),
                     children: missionText
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: missionTextClassName, children: missionText })) })
+                ) : missionText) })
               ]
             }
           )
@@ -584,18 +515,8 @@ function AboutMissionFeatures({
                 ),
                 children: featuresTitle
               }
-            ) : /* @__PURE__ */ jsx("div", { className: featuresTitleClassName, children: featuresTitle })),
-            featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-lg",
-                  getTextColor(background, "muted"),
-                  featuresDescriptionClassName
-                ),
-                children: featuresDescription
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: featuresDescriptionClassName, children: featuresDescription }))
+            ) : featuresTitle),
+            featuresDescription && (typeof featuresDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", featuresDescriptionClassName), children: featuresDescription }) : featuresDescription)
           ] }),
           /* @__PURE__ */ jsx("div", { className: cn("grid gap-10 md:grid-cols-3", featuresClassName), children: featuresContent })
         ] })

package/dist/about-mission-principles.cjs

@@ -7,6 +7,7 @@ var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,66 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -889,6 +830,38 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function AboutMissionPrinciples({
   badgeText,
   badgeClassName,
@@ -954,25 +927,21 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn(
-              "relative rounded-lg border p-6 transition-colors",
-              `hover:${getNestedCardBg(background, "muted")}`
-            ),
+            className: cn("relative rounded-lg border p-6 transition-colors"),
             children: [
               principle.number && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(
                     "absolute right-4 top-4 text-3xl font-bold",
-                    getAccentColor(background),
-                    "opacity-20"
+                    "opacity-50"
                   ),
                   children: principle.number
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
-                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: principle.description }) : principle.description)
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-pretty text-lg", children: principle.description }) : principle.description)
               ] })
             ]
           },
@@ -1019,17 +988,7 @@ function AboutMissionPrinciples({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-24", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 md:space-y-8", children: [
-            badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm",
-                  getAccentColor(background),
-                  badgeClassName
-                ),
-                children: badgeText
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
+            badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3", badgeClassName), children: badgeText }) : badgeText),
             missionHeading && (typeof missionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h2",
               {
@@ -1039,18 +998,8 @@ function AboutMissionPrinciples({
                 ),
                 children: missionHeading
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionHeadingClassName, children: missionHeading })),
-            missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-xl",
-                  getTextColor(background, "muted"),
-                  missionDescriptionClassName
-                ),
-                children: missionDescription
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: missionDescriptionClassName, children: missionDescription })),
+            ) : missionHeading),
+            missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl", missionDescriptionClassName), children: missionDescription }) : missionDescription),
             missionActionContent
           ] }),
           principlesContent
@@ -1059,9 +1008,9 @@ function AboutMissionPrinciples({
           "div",
           {
             className: cn(
-              "mt-6 md:mt-24 rounded-lg p-8 lg:p-12",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
+              "mt-6 md:mt-24 p-6 lg:p-12",
+              "bg-muted text-muted-foreground",
+              "rounded-xl shadow-lg border",
               visionClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
@@ -1075,18 +1024,8 @@ function AboutMissionPrinciples({
                     ),
                     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",
-                      getTextColor(background, "muted"),
-                      visionDescriptionClassName
-                    ),
-                    children: visionDescription
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
+                ) : visionHeading),
+                visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }) : visionDescription)
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
             ] })

package/dist/about-mission-principles.d.cts

@@ -1,7 +1,7 @@
-export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-BFOWojwp.cjs';
+export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-BtyAiPGZ.cjs';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-tmd_MRJv.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';

package/dist/about-mission-principles.d.ts

@@ -1,7 +1,7 @@
-export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-CUqiRX_E.js';
+export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-BoJRCHbA.js';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-DRE-f6cS.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';