@opensite/ui 0.8.8 → 0.9.0

package/dist/about-interactive-tabs.cjs

@@ -31,6 +31,58 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+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 getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -454,9 +506,14 @@ function AboutInteractiveTabs({
               className: cn(
                 "flex-shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
                 activeTab === tab.id ? cn(
-                  "border-b-2 border-primary text-primary",
+                  "border-b-2",
+                  getBorderColor(background, "accent"),
+                  getAccentColor(background),
                   activeTabClassName
-                ) : "text-muted-foreground hover:text-primary",
+                ) : cn(
+                  getTextColor(background, "muted"),
+                  `hover:${getAccentColor(background)}`
+                ),
                 tabButtonClassName
               ),
               children: tab.label
@@ -485,7 +542,8 @@ function AboutInteractiveTabs({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg text-muted-foreground",
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
                     tabContentDescriptionClassName
                   ),
                   children: activeContent.description
@@ -548,7 +606,8 @@ function AboutInteractiveTabs({
             "p",
             {
               className: cn(
-                "mt-4 text-lg text-muted-foreground text-balance",
+                "mt-4 text-lg text-balance",
+                getTextColor(background, "muted"),
                 subtitleClassName
               ),
               children: subtitle

package/dist/about-interactive-tabs.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface TabItem {

package/dist/about-interactive-tabs.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface TabItem {

package/dist/about-interactive-tabs.js

@@ -10,6 +10,58 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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 getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -433,9 +485,14 @@ function AboutInteractiveTabs({
               className: cn(
                 "flex-shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
                 activeTab === tab.id ? cn(
-                  "border-b-2 border-primary text-primary",
+                  "border-b-2",
+                  getBorderColor(background, "accent"),
+                  getAccentColor(background),
                   activeTabClassName
-                ) : "text-muted-foreground hover:text-primary",
+                ) : cn(
+                  getTextColor(background, "muted"),
+                  `hover:${getAccentColor(background)}`
+                ),
                 tabButtonClassName
               ),
               children: tab.label
@@ -464,7 +521,8 @@ function AboutInteractiveTabs({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg text-muted-foreground",
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
                     tabContentDescriptionClassName
                   ),
                   children: activeContent.description
@@ -527,7 +585,8 @@ function AboutInteractiveTabs({
             "p",
             {
               className: cn(
-                "mt-4 text-lg text-muted-foreground text-balance",
+                "mt-4 text-lg text-balance",
+                getTextColor(background, "muted"),
                 subtitleClassName
               ),
               children: subtitle

package/dist/about-location-info-hero.cjs

@@ -32,6 +32,32 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1106,11 +1132,11 @@ function AboutLocationInfoHero({
         }
       ) : section.label),
       section.hours && section.hours.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-sm", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: item.day }) : item.day),
+        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: getTextColor(background, "muted"), children: item.day }) : item.day),
         item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.time }) : item.time)
       ] }, itemIndex)) })
     ] }, sectionIndex)) });
-  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor]);
+  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor, background]);
   const imagesContent = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;

package/dist/about-location-info-hero.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface AboutLocationInfoHeroHours {

package/dist/about-location-info-hero.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface AboutLocationInfoHeroHours {

package/dist/about-location-info-hero.js

@@ -11,6 +11,32 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1085,11 +1111,11 @@ function AboutLocationInfoHero({
         }
       ) : section.label),
       section.hours && section.hours.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-sm", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.day }) : item.day),
+        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsx("span", { className: getTextColor(background, "muted"), children: item.day }) : item.day),
         item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsx("span", { children: item.time }) : item.time)
       ] }, itemIndex)) })
     ] }, sectionIndex)) });
-  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor]);
+  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor, background]);
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;

package/dist/about-minimal-story.cjs

@@ -15,6 +15,36 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+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",
@@ -421,13 +451,13 @@ function AboutMinimalStory({
           className: "h-16 w-16 rounded-full object-cover",
           optixFlowConfig
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary text-2xl font-bold text-primary-foreground", children: author.name.charAt(0) }),
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-primary-foreground", getAccentColor(background)), children: author.name.charAt(0) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: author.name }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: author.role })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: author.role })
       ] })
     ] });
-  }, [authorSlot, author, authorClassName, optixFlowConfig]);
+  }, [authorSlot, author, authorClassName, optixFlowConfig, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -453,7 +483,8 @@ function AboutMinimalStory({
           "p",
           {
             className: cn(
-              "mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line",
+              "mt-8 text-lg leading-relaxed whitespace-pre-line",
+              getTextColor(background, "muted"),
               bodyClassName
             ),
             children: content

package/dist/about-minimal-story.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface AboutMinimalStoryProps {

package/dist/about-minimal-story.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface AboutMinimalStoryProps {

package/dist/about-minimal-story.js

@@ -9,6 +9,36 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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",
@@ -415,13 +445,13 @@ function AboutMinimalStory({
           className: "h-16 w-16 rounded-full object-cover",
           optixFlowConfig
         }
-      ) : /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary text-2xl font-bold text-primary-foreground", children: author.name.charAt(0) }),
+      ) : /* @__PURE__ */ jsx("div", { className: cn("flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-primary-foreground", getAccentColor(background)), children: author.name.charAt(0) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "font-semibold", children: author.name }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: author.role })
+        /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: author.role })
       ] })
     ] });
-  }, [authorSlot, author, authorClassName, optixFlowConfig]);
+  }, [authorSlot, author, authorClassName, optixFlowConfig, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -447,7 +477,8 @@ function AboutMinimalStory({
           "p",
           {
             className: cn(
-              "mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line",
+              "mt-8 text-lg leading-relaxed whitespace-pre-line",
+              getTextColor(background, "muted"),
               bodyClassName
             ),
             children: content

package/dist/about-mission-dual-image.cjs

@@ -32,6 +32,32 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -908,7 +934,8 @@ function AboutMissionDualImage({
                   "p",
                   {
                     className: cn(
-                      "mt-4 text-lg text-muted-foreground",
+                      "mt-4 text-lg",
+                      getTextColor(background, "muted"),
                       missionContentClassName
                     ),
                     children: missionContent
@@ -930,7 +957,8 @@ function AboutMissionDualImage({
                   "p",
                   {
                     className: cn(
-                      "mt-4 text-lg text-muted-foreground",
+                      "mt-4 text-lg",
+                      getTextColor(background, "muted"),
                       visionContentClassName
                     ),
                     children: visionContent

package/dist/about-mission-dual-image.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface AboutMissionDualImageProps {

package/dist/about-mission-dual-image.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface AboutMissionDualImageProps {

package/dist/about-mission-dual-image.js

@@ -11,6 +11,32 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -887,7 +913,8 @@ function AboutMissionDualImage({
                   "p",
                   {
                     className: cn(
-                      "mt-4 text-lg text-muted-foreground",
+                      "mt-4 text-lg",
+                      getTextColor(background, "muted"),
                       missionContentClassName
                     ),
                     children: missionContent
@@ -909,7 +936,8 @@ function AboutMissionDualImage({
                   "p",
                   {
                     className: cn(
-                      "mt-4 text-lg text-muted-foreground",
+                      "mt-4 text-lg",
+                      getTextColor(background, "muted"),
                       visionContentClassName
                     ),
                     children: visionContent