@opensite/ui 0.8.9 → 0.9.1

package/dist/faq-profile-sidebar.js

@@ -12,6 +12,32 @@ import { cva } from 'class-variance-authority';
 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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1029,7 +1055,7 @@ function FaqProfileSidebar({
             AccordionContent,
             {
               className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-              children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground lg:text-lg", children: item.answer })
+              children: /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
             }
           )
         ]
@@ -1042,7 +1068,8 @@ function FaqProfileSidebar({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   const profileSectionContent = useMemo(() => {
     if (profileSlot) return profileSlot;
@@ -1066,7 +1093,8 @@ function FaqProfileSidebar({
             "p",
             {
               className: cn(
-                "text-muted-foreground text-sm",
+                getTextColor(background, "muted"),
+                "text-sm",
                 profileRoleClassName
               ),
               children: profileRole
@@ -1078,7 +1106,8 @@ function FaqProfileSidebar({
         "p",
         {
           className: cn(
-            "text-muted-foreground mt-4 text-sm",
+            getTextColor(background, "muted"),
+            "mt-4 text-sm",
             profileDescriptionClassName
           ),
           children: profileDescription
@@ -1122,7 +1151,8 @@ function FaqProfileSidebar({
     profileRoleClassName,
     profileDescriptionClassName,
     contactSectionClassName,
-    optixFlowConfig
+    optixFlowConfig,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -1157,7 +1187,7 @@ function FaqProfileSidebar({
                   "p",
                   {
                     className: cn(
-                      "text-muted-foreground",
+                      getTextColor(background, "muted"),
                       descriptionClassName
                     ),
                     children: description

package/dist/faq-sidebar-navigation.cjs

@@ -32,6 +32,32 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -645,7 +671,7 @@ function FaqSidebarNavigation({
                   AccordionContent,
                   {
                     className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground lg:text-lg", children: item.answer })
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
                   }
                 )
               ]
@@ -656,7 +682,7 @@ function FaqSidebarNavigation({
       },
       category.id
     )) });
-  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -689,7 +715,8 @@ function FaqSidebarNavigation({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-sidebar-navigation.js

@@ -10,6 +10,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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -623,7 +649,7 @@ function FaqSidebarNavigation({
                   AccordionContent,
                   {
                     className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                    children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground lg:text-lg", children: item.answer })
+                    children: /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
                   }
                 )
               ]
@@ -634,7 +660,7 @@ function FaqSidebarNavigation({
       },
       category.id
     )) });
-  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -667,7 +693,8 @@ function FaqSidebarNavigation({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-simple-accordion.cjs

@@ -32,6 +32,32 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -611,7 +637,7 @@ function FaqSimpleAccordion({
           /* @__PURE__ */ jsxRuntime.jsx(
             AccordionContent,
             {
-              className: cn("text-muted-foreground", accordionContentClassName),
+              className: cn(getTextColor(background, "muted"), accordionContentClassName),
               children: item.answer
             }
           )
@@ -625,7 +651,8 @@ function FaqSimpleAccordion({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,

package/dist/faq-simple-accordion.js

@@ -10,6 +10,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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -589,7 +615,7 @@ function FaqSimpleAccordion({
           /* @__PURE__ */ jsx(
             AccordionContent,
             {
-              className: cn("text-muted-foreground", accordionContentClassName),
+              className: cn(getTextColor(background, "muted"), accordionContentClassName),
               children: item.answer
             }
           )
@@ -603,7 +629,8 @@ function FaqSimpleAccordion({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,

package/dist/feature-accordion-image.cjs

@@ -33,6 +33,32 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -603,7 +629,7 @@ function FeatureAccordionImage({
     if (!items || items.length === 0) return null;
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: `item-${index}`, className: item.className, children: [
       item.title && /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
-      item.content && /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
+      item.content && /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn(getTextColor(background, "muted"), item.contentClassName), children: item.content })
     ] }, index));
   }, [itemsSlot, items]);
   const imageContent = React.useMemo(() => {
@@ -633,7 +659,7 @@ function FeatureAccordionImage({
       children: [
         (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }))
         ] }),
         (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(

package/dist/feature-accordion-image.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -581,7 +607,7 @@ function FeatureAccordionImage({
     if (!items || items.length === 0) return null;
     return items.map((item, index) => /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${index}`, className: item.className, children: [
       item.title && /* @__PURE__ */ jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
-      item.content && /* @__PURE__ */ jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
+      item.content && /* @__PURE__ */ jsx(AccordionContent, { className: cn(getTextColor(background, "muted"), item.contentClassName), children: item.content })
     ] }, index));
   }, [itemsSlot, items]);
   const imageContent = useMemo(() => {
@@ -611,7 +637,7 @@ function FeatureAccordionImage({
       children: [
         (title || description) && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4 lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }))
         ] }),
         (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
           /* @__PURE__ */ jsx(

package/dist/feature-badge-grid-six.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1016,7 +1042,7 @@ function FeatureBadgeGridSix({
             iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12", children: iconContent }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
-              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
             ] })
           ]
         },

package/dist/feature-badge-grid-six.js

@@ -11,6 +11,32 @@ import { cva } from 'class-variance-authority';
 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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -995,7 +1021,7 @@ function FeatureBadgeGridSix({
             iconContent && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12", children: iconContent }),
             /* @__PURE__ */ jsxs("div", { children: [
               feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
-              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
             ] })
           ]
         },

package/dist/feature-bento-image-grid.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1077,7 +1103,7 @@ function FeatureBentoImageGrid({
       containerClassName,
       children: [
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-muted-foreground", descriptionClassName), children: description })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0", gridClassName), children: itemsContent })
       ]
     }

package/dist/feature-bento-image-grid.js

@@ -11,6 +11,32 @@ import { Img } from '@page-speed/img';
 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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1056,7 +1082,7 @@ function FeatureBentoImageGrid({
       containerClassName,
       children: [
         title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-muted-foreground", descriptionClassName), children: description })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
         /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0", gridClassName), children: itemsContent })
       ]
     }