@opensite/ui 0.8.6 → 0.8.8

package/dist/faq-simple-accordion.cjs

@@ -165,7 +165,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,

package/dist/faq-simple-accordion.js

@@ -143,7 +143,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,

package/dist/faq-split-help.cjs

@@ -33,6 +33,36 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 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" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -166,7 +196,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -1045,7 +1075,7 @@ function FaqSplitHelp({
                 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: " lg:text-lg", children: item.answer })
                 }
               )
             ]
@@ -1068,15 +1098,17 @@ function FaqSplitHelp({
       "div",
       {
         className: cn(
-          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           helpSectionClassName
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             helpHeading && (typeof helpHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: helpHeading }) : helpHeading),
-            helpDescription && (typeof helpDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: helpDescription }) : helpDescription)
+            helpDescription && (typeof helpDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1", children: helpDescription }) : helpDescription)
           ] }),
-          helpAction && /* @__PURE__ */ jsxRuntime.jsx(
+          helpAction && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
               href: helpAction.href,
@@ -1084,7 +1116,12 @@ function FaqSplitHelp({
               variant: helpAction.variant,
               size: helpAction.size,
               className: helpAction.className,
-              children: helpAction.children ?? helpAction.label
+              asButton: helpAction.asButton,
+              children: [
+                helpAction.children ?? helpAction.label,
+                helpAction.icon && helpAction.icon,
+                helpAction.iconAfter && helpAction.iconAfter
+              ]
             }
           )
         ]
@@ -1095,7 +1132,8 @@ function FaqSplitHelp({
     helpHeading,
     helpDescription,
     helpAction,
-    helpSectionClassName
+    helpSectionClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -1119,16 +1157,7 @@ function FaqSplitHelp({
                 children: heading
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-muted-foreground lg:text-lg",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           itemsContent
         ] }),

package/dist/faq-split-help.js

@@ -11,6 +11,36 @@ import { cva } from 'class-variance-authority';
 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" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -144,7 +174,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -1023,7 +1053,7 @@ function FaqSplitHelp({
                 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: " lg:text-lg", children: item.answer })
                 }
               )
             ]
@@ -1046,15 +1076,17 @@ function FaqSplitHelp({
       "div",
       {
         className: cn(
-          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           helpSectionClassName
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { children: [
             helpHeading && (typeof helpHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: helpHeading }) : helpHeading),
-            helpDescription && (typeof helpDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: helpDescription }) : helpDescription)
+            helpDescription && (typeof helpDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1", children: helpDescription }) : helpDescription)
           ] }),
-          helpAction && /* @__PURE__ */ jsx(
+          helpAction && /* @__PURE__ */ jsxs(
             Pressable,
             {
               href: helpAction.href,
@@ -1062,7 +1094,12 @@ function FaqSplitHelp({
               variant: helpAction.variant,
               size: helpAction.size,
               className: helpAction.className,
-              children: helpAction.children ?? helpAction.label
+              asButton: helpAction.asButton,
+              children: [
+                helpAction.children ?? helpAction.label,
+                helpAction.icon && helpAction.icon,
+                helpAction.iconAfter && helpAction.iconAfter
+              ]
             }
           )
         ]
@@ -1073,7 +1110,8 @@ function FaqSplitHelp({
     helpHeading,
     helpDescription,
     helpAction,
-    helpSectionClassName
+    helpSectionClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -1097,16 +1135,7 @@ function FaqSplitHelp({
                 children: heading
               }
             ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-muted-foreground lg:text-lg",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           itemsContent
         ] }),

package/dist/faq-split-hero.cjs

@@ -166,7 +166,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -491,13 +491,13 @@ function FaqSplitHero({
   const bgColorClass = React.useMemo(() => {
     switch (background) {
       case "dark":
-        return "bg-gray-900 text-white";
+        return "bg-foreground text-background";
       case "gray":
-        return "bg-gray-100 text-gray-900";
+        return "bg-muted/30";
       case "white":
-        return "bg-white text-gray-900";
+        return "bg-background";
       default:
-        return "bg-background text-foreground";
+        return "bg-background";
     }
   }, [background]);
   const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";

package/dist/faq-split-hero.js

@@ -144,7 +144,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -469,13 +469,13 @@ function FaqSplitHero({
   const bgColorClass = useMemo(() => {
     switch (background) {
       case "dark":
-        return "bg-gray-900 text-white";
+        return "bg-foreground text-background";
       case "gray":
-        return "bg-gray-100 text-gray-900";
+        return "bg-muted/30";
       case "white":
-        return "bg-white text-gray-900";
+        return "bg-background";
       default:
-        return "bg-background text-foreground";
+        return "bg-background";
     }
   }, [background]);
   const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";

package/dist/faq-static-list.cjs

@@ -411,7 +411,7 @@ function FaqStaticList({
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-8", itemsWrapperClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border-b pb-6", itemClassName), children: [
       typeof item.question === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 font-semibold", questionClassName), children: item.question }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: questionClassName, children: item.question }),
-      typeof item.answer === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", answerClassName), children: item.answer }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: answerClassName, children: item.answer })
+      typeof item.answer === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-snug", answerClassName), children: item.answer }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: answerClassName, children: item.answer })
     ] }, index)) });
   }, [
     itemsSlot,

package/dist/faq-static-list.js

@@ -405,7 +405,7 @@ function FaqStaticList({
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-8", itemsWrapperClassName), children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: cn("border-b pb-6", itemClassName), children: [
       typeof item.question === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-2 font-semibold", questionClassName), children: item.question }) : /* @__PURE__ */ jsx("div", { className: questionClassName, children: item.question }),
-      typeof item.answer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", answerClassName), children: item.answer }) : /* @__PURE__ */ jsx("div", { className: answerClassName, children: item.answer })
+      typeof item.answer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-snug", answerClassName), children: item.answer }) : /* @__PURE__ */ jsx("div", { className: answerClassName, children: item.answer })
     ] }, index)) });
   }, [
     itemsSlot,

package/dist/feature-accordion-image.cjs

@@ -166,7 +166,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,

package/dist/feature-accordion-image.js

@@ -144,7 +144,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,

package/dist/feature-bento-utilities.cjs

@@ -669,7 +669,7 @@ function FeatureBentoUtilities({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-gray-50 dark:bg-background", className),
+      className: cn("bg-muted/60", className),
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
         (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [

package/dist/feature-bento-utilities.js

@@ -647,7 +647,7 @@ function FeatureBentoUtilities({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-gray-50 dark:bg-background", className),
+      className: cn("bg-muted/60", className),
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
         (labelIconElement || label) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [

package/dist/feature-capabilities-grid.cjs

@@ -587,28 +587,28 @@ function FeatureCapabilitiesGrid({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Card,
         {
-          className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
+          className: cn("group relative overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20", cardClassName, item.className),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-background/10 via-background/5 to-transparent" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-background/0 to-background/0 transition-colors group-hover:from-background/3 group-hover:to-background/6" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-background" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-background" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-background" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-background" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
-              iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: iconContent }),
+              iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5", item.iconClassName), children: iconContent }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
-                item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
+                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-medium", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-medium", item.titleClassName), children: item.title })),
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none text-muted-foreground", item.badgeClassName), children: item.badge })
               ] }) })
             ] }),
-            item.description && /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
+            item.description && /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-muted-foreground", item.descriptionClassName), children: item.description }),
             /* @__PURE__ */ jsxRuntime.jsx(
               framerMotion.motion.div,
               {
-                className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
+                className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-border/0",
                 initial: { opacity: 0 },
                 whileHover: { opacity: 1 },
                 transition: { duration: 0.25 }
@@ -628,7 +628,7 @@ function FeatureCapabilitiesGrid({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-foreground py-16 text-background", className),
+      className,
       containerClassName,
       children: [
         eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow })),

package/dist/feature-capabilities-grid.js

@@ -566,28 +566,28 @@ function FeatureCapabilitiesGrid({
       return /* @__PURE__ */ jsxs(
         Card,
         {
-          className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
+          className: cn("group relative overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20", cardClassName, item.className),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
-            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-background/10 via-background/5 to-transparent" }) }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-background/0 to-background/0 transition-colors group-hover:from-background/3 group-hover:to-background/6" }),
             /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
-              /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
-              /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
-              /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
+              /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-background" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-background" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-background" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-background" })
             ] }),
             /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
-              iconContent && /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: iconContent }),
+              iconContent && /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5", item.iconClassName), children: iconContent }),
               /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
-                item.badge && /* @__PURE__ */ jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
+                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(CardTitle, { className: cn("text-lg font-medium", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-medium", item.titleClassName), children: item.title })),
+                item.badge && /* @__PURE__ */ jsx("span", { className: cn("rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none text-muted-foreground", item.badgeClassName), children: item.badge })
               ] }) })
             ] }),
-            item.description && /* @__PURE__ */ jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
+            item.description && /* @__PURE__ */ jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-muted-foreground", item.descriptionClassName), children: item.description }),
             /* @__PURE__ */ jsx(
               motion.div,
               {
-                className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
+                className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-border/0",
                 initial: { opacity: 0 },
                 whileHover: { opacity: 1 },
                 transition: { duration: 0.25 }
@@ -607,7 +607,7 @@ function FeatureCapabilitiesGrid({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-foreground py-16 text-background", className),
+      className,
       containerClassName,
       children: [
         eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx("div", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow })),

package/dist/feature-icon-grid-muted.cjs

@@ -539,7 +539,7 @@ function FeatureIconGridMuted({
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-2.5 rounded-xl border bg-background p-7", cardClassName, feature.className),
+        className: cn("flex flex-col gap-2.5 rounded-xl border p-7", cardClassName, feature.className),
         children: [
           (feature.icon || feature.iconName) && renderFeatureIcon(feature),
           feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-semibold", feature.titleClassName), children: feature.title })),
@@ -557,7 +557,7 @@ function FeatureIconGridMuted({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-muted/60", className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [
         (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [

package/dist/feature-icon-grid-muted.js

@@ -518,7 +518,7 @@ function FeatureIconGridMuted({
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-2.5 rounded-xl border bg-background p-7", cardClassName, feature.className),
+        className: cn("flex flex-col gap-2.5 rounded-xl border p-7", cardClassName, feature.className),
         children: [
           (feature.icon || feature.iconName) && renderFeatureIcon(feature),
           feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-semibold", feature.titleClassName), children: feature.title })),
@@ -536,7 +536,7 @@ function FeatureIconGridMuted({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-muted/60", className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
         (title || description) && /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [

package/dist/feature-icon-tabs-content.cjs

@@ -1134,7 +1134,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 tabTriggerClassName,
                 tab.className
               ),
@@ -1151,7 +1151,7 @@ function FeatureIconTabsContent({
         "div",
         {
           className: cn(
-            "mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16",
+            "mx-auto mt-8 max-w-7xl rounded-2xl p-6 lg:p-16",
             contentWrapperClassName
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
@@ -1184,7 +1184,7 @@ function FeatureIconTabsContent({
                       {
                         variant: "outline",
                         className: cn(
-                          "w-fit bg-background",
+                          "w-fit",
                           content.badgeClassName
                         ),
                         children: content.badge

package/dist/feature-icon-tabs-content.js

@@ -1112,7 +1112,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 tabTriggerClassName,
                 tab.className
               ),
@@ -1129,7 +1129,7 @@ function FeatureIconTabsContent({
         "div",
         {
           className: cn(
-            "mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16",
+            "mx-auto mt-8 max-w-7xl rounded-2xl p-6 lg:p-16",
             contentWrapperClassName
           ),
           children: /* @__PURE__ */ jsx("div", { className: "relative", children: tabs.map((tab) => {
@@ -1162,7 +1162,7 @@ function FeatureIconTabsContent({
                       {
                         variant: "outline",
                         className: cn(
-                          "w-fit bg-background",
+                          "w-fit",
                           content.badgeClassName
                         ),
                         children: content.badge

package/dist/feature-image-cards-three-column.cjs

@@ -1021,7 +1021,7 @@ function FeatureImageCardsThreeColumn({
                 {
                   className: cn(
                     "ml-auto flex w-fit items-center gap-2 text-sm font-semibold",
-                    card.avatarSrc ? "rounded-full bg-background/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-background",
+                    card.avatarSrc ? "rounded-full bg-foreground/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-primary-foreground",
                     card.badgeClassName
                   ),
                   children: [
@@ -1030,7 +1030,7 @@ function FeatureImageCardsThreeColumn({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
                 card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title })),
                 card.linkText && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("flex items-center gap-1 font-medium", card.linkClassName), children: [
                   card.linkText,

package/dist/feature-image-cards-three-column.js

@@ -999,7 +999,7 @@ function FeatureImageCardsThreeColumn({
                 {
                   className: cn(
                     "ml-auto flex w-fit items-center gap-2 text-sm font-semibold",
-                    card.avatarSrc ? "rounded-full bg-background/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-background",
+                    card.avatarSrc ? "rounded-full bg-foreground/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-primary-foreground",
                     card.badgeClassName
                   ),
                   children: [
@@ -1008,7 +1008,7 @@ function FeatureImageCardsThreeColumn({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
                 card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title })),
                 card.linkText && /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 font-medium", card.linkClassName), children: [
                   card.linkText,