@opensite/ui 0.8.5 → 0.8.7

package/dist/faq-split-hero.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -129,7 +129,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -144,13 +144,19 @@ 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,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -170,34 +176,6 @@ function AccordionContent({
     }
   );
 }
-var maxWidthStyles = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-[1536px]",
-  full: "max-w-full"
-};
-var Container = React__default.forwardRef(
-  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
-    const Component = as;
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className: cn(
-          "mx-auto w-full px-2 sm:px-4 lg:px-8",
-          maxWidthStyles[maxWidth],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -464,87 +442,6 @@ function PatternBackground({
     }
   );
 }
-var backgroundStyles = {
-  default: "bg-background text-foreground",
-  white: "bg-white text-dark",
-  gray: "bg-muted/30 text-foreground",
-  dark: "bg-foreground text-background",
-  transparent: "bg-transparent text-foreground",
-  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  muted: "bg-muted text-muted-foreground"
-};
-var spacingStyles = {
-  none: "py-0 md:py-0",
-  sm: "py-12 md:py-16",
-  md: "py-16 md:py-24",
-  lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
-};
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
-var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
-  ({
-    id,
-    title,
-    subtitle,
-    children,
-    className,
-    style,
-    background = "default",
-    spacing = "lg",
-    pattern,
-    patternOpacity,
-    patternClassName,
-    containerClassName,
-    containerMaxWidth = "xl",
-    ...props
-  }, ref) => {
-    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        ref,
-        id,
-        className: cn(
-          "relative",
-          pattern ? "overflow-hidden" : null,
-          backgroundStyles[background],
-          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
-          className
-        ),
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            PatternBackground,
-            {
-              pattern,
-              opacity: effectivePatternOpacity,
-              className: patternClassName
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Container,
-            {
-              maxWidth: containerMaxWidth,
-              className: cn("relative z-10", containerClassName),
-              children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-                ] }),
-                children
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Section.displayName = "Section";
 function FaqSplitHero({
   heading,
   subheading,
@@ -553,14 +450,11 @@ function FaqSplitHero({
   imageSlot,
   imageSrc,
   imageAlt,
-  background,
-  spacing,
+  background = "dark",
   pattern,
   patternOpacity,
-  patternClassName,
   className,
-  contentWrapperClassName,
-  leftColumnClassName,
+  contentClassName,
   headerClassName,
   headingClassName,
   subheadingClassName,
@@ -569,8 +463,23 @@ function FaqSplitHero({
   accordionTriggerClassName,
   accordionContentClassName,
   imageClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) {
+  const bgColorClass = useMemo(() => {
+    switch (background) {
+      case "dark":
+        return "bg-foreground text-background";
+      case "gray":
+        return "bg-muted/30";
+      case "white":
+        return "bg-background";
+      default:
+        return "bg-background";
+    }
+  }, [background]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
   const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -584,13 +493,13 @@ function FaqSplitHero({
           AccordionItem,
           {
             value: item.id,
-            className: cn("border-b border-border/50", accordionItemClassName),
+            className: cn("border-b border-current/20", accordionItemClassName),
             children: [
               /* @__PURE__ */ jsx(
                 AccordionTrigger,
                 {
                   className: cn(
-                    "py-4 text-left text-base font-medium text-foreground transition-colors hover:text-primary hover:no-underline lg:text-lg",
+                    "py-4 text-left text-base font-medium transition-opacity hover:opacity-70 hover:no-underline lg:text-lg",
                     accordionTriggerClassName
                   ),
                   children: item.question
@@ -599,10 +508,7 @@ function FaqSplitHero({
               /* @__PURE__ */ jsx(
                 AccordionContent,
                 {
-                  className: cn(
-                    "pb-4 text-muted-foreground",
-                    accordionContentClassName
-                  ),
+                  className: cn("pb-4 opacity-80", accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -612,71 +518,65 @@ function FaqSplitHero({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
-  const imageContent = useMemo(() => {
-    if (imageSlot) return imageSlot;
-    if (!imageSrc) return null;
-    return /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: imageSrc,
-        alt: imageAlt || "FAQ section image",
-        className: cn(
-          "hidden h-screen w-1/2 object-cover lg:block",
-          imageClassName
-        ),
-        optixFlowConfig
-      }
-    );
-  }, [imageSlot, imageSrc, imageAlt, imageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsx(
-    Section,
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
+  const contentArea = /* @__PURE__ */ jsxs(
+    "div",
     {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      patternClassName,
-      className: cn("dark flex", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("flex", contentWrapperClassName), children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex w-full items-center justify-center bg-background lg:w-1/2",
-              leftColumnClassName
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: "container my-10 flex w-full max-w-[600px] flex-col gap-8 px-6 lg:px-10", children: [
-              /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", headerClassName), children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                  "h2",
-                  {
-                    className: cn(
-                      "text-3xl font-bold text-foreground lg:text-4xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "text-lg text-muted-foreground",
-                      subheadingClassName
-                    ),
-                    children: subheading
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
-              ] }),
-              itemsContent
-            ] })
-          }
-        ),
-        imageContent
-      ] })
+      className: cn(
+        "relative flex w-full items-center lg:w-1/2",
+        bgColorClass,
+        contentClassName
+      ),
+      children: [
+        pattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", headerClassName), children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-base leading-relaxed opacity-80 sm:text-lg",
+                  subheadingClassName
+                ),
+                children: subheading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
+          ] }),
+          itemsContent
+        ] }) })
+      ]
     }
   );
+  const imageArea = imageSlot ? /* @__PURE__ */ jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: imageSlot }) : imageSrc ? /* @__PURE__ */ jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsx(
+    Img,
+    {
+      src: imageSrc,
+      alt: imageAlt || "FAQ section image",
+      className: cn("h-full w-full object-cover", imageClassName),
+      optixFlowConfig
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-screen", mobileOrder, desktopOrder), children: [
+    contentArea,
+    imageArea
+  ] }) });
 }
 
 export { FaqSplitHero };

package/dist/faq-static-list.cjs

@@ -394,7 +394,7 @@ function FaqStaticList({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -411,9 +411,16 @@ 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, items, itemsWrapperClassName, itemClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    itemsWrapperClassName,
+    itemClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/faq-static-list.js

@@ -388,7 +388,7 @@ function FaqStaticList({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -405,9 +405,16 @@ 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, items, itemsWrapperClassName, itemClassName, questionClassName, answerClassName]);
+  }, [
+    itemsSlot,
+    items,
+    itemsWrapperClassName,
+    itemClassName,
+    questionClassName,
+    answerClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/feature-accordion-image.cjs

@@ -151,7 +151,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -166,13 +166,19 @@ 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,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });

package/dist/feature-accordion-image.js

@@ -129,7 +129,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -144,13 +144,19 @@ 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,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });

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: [