@opensite/ui 0.8.8 → 0.9.0

package/dist/pressable.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { b as buttonVariants } from './button-variants-lRElsmTc.cjs';
+import { b as buttonVariants } from './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 type FallbackComponentType = "span" | "div" | "button";

package/dist/pressable.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { b as buttonVariants } from './button-variants-lRElsmTc.js';
+import { b as buttonVariants } from './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 type FallbackComponentType = "span" | "div" | "button";

package/dist/process-expandable-timeline.cjs

@@ -31,6 +31,88 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -582,7 +664,8 @@ function ProcessExpandableTimeline({
         {
           onClick: () => toggleExpand(index),
           className: cn(
-            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors hover:bg-muted/30",
+            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors",
+            `hover:${getNestedCardBg(background, "muted")}/30`,
             stepItemClassName
           ),
           children: [
@@ -590,27 +673,28 @@ function ProcessExpandableTimeline({
               "div",
               {
                 className: cn(
-                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 bg-background transition-colors",
-                  expandedIndex === index ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground group-hover:border-primary",
+                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
+                  getNestedCardBg(background, "card"),
+                  expandedIndex === index ? cn(getBorderColor(background, "accent"), "bg-primary text-primary-foreground") : cn(getBorderColor(background, "default"), getTextColor(background, "muted"), `group-hover:${getBorderColor(background, "accent")}`),
                   stepBadgeClassName
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: String(index + 1).padStart(2, "0") })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(CornerConnector, { className: "absolute right-4 top-4 text-muted-foreground/30" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CornerConnector, { className: cn("absolute right-4 top-4", getTextColor(background, "muted"), "opacity-30") }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pr-12", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title })),
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title })),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
                     name: expandedIndex === index ? "lucide/chevron-up" : "lucide/chevron-down",
                     size: 20,
-                    className: "text-muted-foreground"
+                    className: getTextColor(background, "muted")
                   }
                 )
               ] }),
-              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-muted-foreground", children: step.description }))
+              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }))
             ] })
           ]
         }
@@ -627,16 +711,18 @@ function ProcessExpandableTimeline({
             "div",
             {
               className: cn(
-                "border-b bg-muted/20 py-6 pl-16 pr-6",
+                "border-b py-6 pl-16 pr-6",
+                getNestedCardBg(background, "muted"),
+                getNestedCardTextColor(background),
                 expandedContentClassName
               ),
-              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: step.expandedContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: step.expandedContent })
+              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: step.expandedContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: step.expandedContent })
             }
           )
         }
       ) })
     ] }, index)) });
-  }, [stepsSlot, steps, stepItemClassName, stepBadgeClassName, expandedContentClassName, expandedIndex, toggleExpand]);
+  }, [stepsSlot, steps, background, stepItemClassName, stepBadgeClassName, expandedContentClassName, expandedIndex, toggleExpand]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -661,7 +747,8 @@ function ProcessExpandableTimeline({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -673,7 +760,8 @@ function ProcessExpandableTimeline({
             "div",
             {
               className: cn(
-                "absolute left-6 top-0 bottom-0 w-px bg-border",
+                "absolute left-6 top-0 bottom-0 w-px",
+                getBorderColor(background, "default"),
                 timelineLineClassName
               )
             }

package/dist/process-expandable-timeline.d.cts

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

package/dist/process-expandable-timeline.d.ts

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

package/dist/process-expandable-timeline.js

@@ -10,6 +10,88 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -561,7 +643,8 @@ function ProcessExpandableTimeline({
         {
           onClick: () => toggleExpand(index),
           className: cn(
-            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors hover:bg-muted/30",
+            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors",
+            `hover:${getNestedCardBg(background, "muted")}/30`,
             stepItemClassName
           ),
           children: [
@@ -569,27 +652,28 @@ function ProcessExpandableTimeline({
               "div",
               {
                 className: cn(
-                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 bg-background transition-colors",
-                  expandedIndex === index ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground group-hover:border-primary",
+                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
+                  getNestedCardBg(background, "card"),
+                  expandedIndex === index ? cn(getBorderColor(background, "accent"), "bg-primary text-primary-foreground") : cn(getBorderColor(background, "default"), getTextColor(background, "muted"), `group-hover:${getBorderColor(background, "accent")}`),
                   stepBadgeClassName
                 ),
                 children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: String(index + 1).padStart(2, "0") })
               }
             ),
-            /* @__PURE__ */ jsx(CornerConnector, { className: "absolute right-4 top-4 text-muted-foreground/30" }),
+            /* @__PURE__ */ jsx(CornerConnector, { className: cn("absolute right-4 top-4", getTextColor(background, "muted"), "opacity-30") }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 pr-12", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "text-xl font-semibold tracking-tight transition-colors group-hover:text-primary", children: step.title })),
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title })),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: expandedIndex === index ? "lucide/chevron-up" : "lucide/chevron-down",
                     size: 20,
-                    className: "text-muted-foreground"
+                    className: getTextColor(background, "muted")
                   }
                 )
               ] }),
-              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1 text-muted-foreground", children: step.description }))
+              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }))
             ] })
           ]
         }
@@ -606,16 +690,18 @@ function ProcessExpandableTimeline({
             "div",
             {
               className: cn(
-                "border-b bg-muted/20 py-6 pl-16 pr-6",
+                "border-b py-6 pl-16 pr-6",
+                getNestedCardBg(background, "muted"),
+                getNestedCardTextColor(background),
                 expandedContentClassName
               ),
-              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: step.expandedContent }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: step.expandedContent })
+              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: step.expandedContent }) : /* @__PURE__ */ jsx("div", { className: getTextColor(background, "muted"), children: step.expandedContent })
             }
           )
         }
       ) })
     ] }, index)) });
-  }, [stepsSlot, steps, stepItemClassName, stepBadgeClassName, expandedContentClassName, expandedIndex, toggleExpand]);
+  }, [stepsSlot, steps, background, stepItemClassName, stepBadgeClassName, expandedContentClassName, expandedIndex, toggleExpand]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -640,7 +726,8 @@ function ProcessExpandableTimeline({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -652,7 +739,8 @@ function ProcessExpandableTimeline({
             "div",
             {
               className: cn(
-                "absolute left-6 top-0 bottom-0 w-px bg-border",
+                "absolute left-6 top-0 bottom-0 w-px",
+                getBorderColor(background, "default"),
                 timelineLineClassName
               )
             }

package/dist/process-hover-cards.cjs

@@ -32,6 +32,36 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -412,7 +442,8 @@ var ProcessCard = ({
   index,
   optixFlowConfig,
   itemClassName,
-  hoverImageClassName
+  hoverImageClassName,
+  background
 }) => {
   const [isHovered, setIsHovered] = React__namespace.useState(false);
   const titleText = typeof step.title === "string" ? step.title : `Step ${index + 1}`;
@@ -450,10 +481,10 @@ var ProcessCard = ({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-fit items-center justify-center font-mono text-sm tracking-tighter text-muted-foreground", children: step.step ?? `0${index + 1}` }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-fit items-center justify-center font-mono text-sm tracking-tighter", getTextColor(background, "muted")), children: step.step ?? `0${index + 1}` }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-2xl font-semibold tracking-tighter transition-colors group-hover:text-primary lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-md text-muted-foreground", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-2xl font-semibold tracking-tighter transition-colors lg:text-3xl", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-md", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-md", getTextColor(background, "muted")), children: step.description }))
           ] })
         ] }) })
       ]
@@ -492,7 +523,8 @@ function ProcessHoverCards({
         index,
         optixFlowConfig,
         itemClassName: stepItemClassName,
-        hoverImageClassName
+        hoverImageClassName,
+        background
       },
       index
     )) });
@@ -521,7 +553,8 @@ function ProcessHoverCards({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description

package/dist/process-hover-cards.d.cts

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

package/dist/process-hover-cards.d.ts

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

package/dist/process-hover-cards.js

@@ -11,6 +11,36 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -391,7 +421,8 @@ var ProcessCard = ({
   index,
   optixFlowConfig,
   itemClassName,
-  hoverImageClassName
+  hoverImageClassName,
+  background
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   const titleText = typeof step.title === "string" ? step.title : `Step ${index + 1}`;
@@ -429,10 +460,10 @@ var ProcessCard = ({
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex w-fit items-center justify-center font-mono text-sm tracking-tighter text-muted-foreground", children: step.step ?? `0${index + 1}` }),
+          /* @__PURE__ */ jsx("div", { className: cn("flex w-fit items-center justify-center font-mono text-sm tracking-tighter", getTextColor(background, "muted")), children: step.step ?? `0${index + 1}` }),
           /* @__PURE__ */ jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-semibold tracking-tighter transition-colors group-hover:text-primary lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "max-w-md text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "max-w-md text-muted-foreground", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-2xl font-semibold tracking-tighter transition-colors lg:text-3xl", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-md", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-md", getTextColor(background, "muted")), children: step.description }))
           ] })
         ] }) })
       ]
@@ -471,7 +502,8 @@ function ProcessHoverCards({
         index,
         optixFlowConfig,
         itemClassName: stepItemClassName,
-        hoverImageClassName
+        hoverImageClassName,
+        background
       },
       index
     )) });
@@ -500,7 +532,8 @@ function ProcessHoverCards({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description