@opensite/ui 0.8.9 → 0.9.0

package/dist/process-numbered-services.d.cts

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

package/dist/process-numbered-services.d.ts

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

package/dist/process-numbered-services.js

@@ -40,6 +40,58 @@ 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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -953,7 +1005,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   // Backwards compatibility
@@ -977,22 +1029,11 @@ function ProcessNumberedServices({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: cn(
-            "mt-4 inline-flex items-center gap-2 p-0 text-primary hover:text-primary/80",
-            actionClassName
-          ),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-          ] })
-        }
-      );
+      return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: cn(actionClassName), ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter && iconAfter
+      ] }) });
     };
   }, []);
   const renderServices = useMemo(() => {
@@ -1011,7 +1052,10 @@ function ProcessNumberedServices({
             "div",
             {
               className: cn(
-                "flex size-16 items-center justify-center rounded-full border-2 border-primary bg-primary/5 text-xl font-bold text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+                "flex size-16 items-center justify-center rounded-full border-2 text-xl font-bold transition-colors",
+                getBorderColor(background, "accent"),
+                getAccentColor(background),
+                "bg-primary/5 group-hover:bg-primary group-hover:text-primary-foreground",
                 serviceBadgeClassName
               ),
               children: service.number ?? `0${index + 1}`
@@ -1019,7 +1063,7 @@ function ProcessNumberedServices({
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "lg:col-span-4", children: [
             service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title })),
-            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground leading-relaxed", children: service.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground leading-relaxed", children: service.description })),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description })),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsx(
@@ -1043,7 +1087,7 @@ function ProcessNumberedServices({
                       {
                         name: "lucide/check-circle-2",
                         size: 18,
-                        className: "text-primary"
+                        className: getAccentColor(background)
                       }
                     ),
                     /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: capability })
@@ -1057,7 +1101,16 @@ function ProcessNumberedServices({
       },
       index
     )) });
-  }, [servicesSlot, services, background, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, renderServiceAction]);
+  }, [
+    servicesSlot,
+    services,
+    background,
+    servicesClassName,
+    serviceItemClassName,
+    serviceBadgeClassName,
+    capabilitiesClassName,
+    renderServiceAction
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1082,7 +1135,8 @@ function ProcessNumberedServices({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description

package/dist/process-roadmap-timeline.cjs

@@ -60,6 +60,58 @@ 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,
@@ -548,17 +600,17 @@ var StatusBadge = ({
   const config = {
     completed: {
       label: "Completed",
-      badgeClassName: "bg-success/10 text-success",
+      badgeClassName: cn(getNestedCardBg(background, "muted"), "text-success"),
       icon: "lucide/check-circle-2"
     },
     "in-progress": {
       label: "In Progress",
-      badgeClassName: "bg-primary/10 text-primary",
+      badgeClassName: cn(getNestedCardBg(background, "muted"), getAccentColor(background)),
       icon: "lucide/loader-2"
     },
     upcoming: {
       label: "Upcoming",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), getNestedCardTextColor(background)),
+      badgeClassName: cn(getNestedCardBg(background, "muted"), getTextColor(background, "muted")),
       icon: "lucide/clock"
     }
   };
@@ -638,13 +690,13 @@ function ProcessRoadmapTimeline({
                           index % 2 === 0 ? "justify-end" : "justify-start"
                         ),
                         children: [
-                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-muted-foreground", children: milestone.date })),
+                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date })),
                           /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: milestone.status, background })
                         ]
                       }
                     ),
                     milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title })),
-                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-muted-foreground", children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
@@ -675,8 +727,9 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2 bg-background",
-                milestone.status === "completed" ? "border-success bg-success text-background" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground",
+                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2",
+                getNestedCardBg(background, "card"),
+                milestone.status === "completed" ? "border-success bg-success text-white" : milestone.status === "in-progress" ? cn("border-primary bg-primary", getNestedCardTextColor(background)) : cn(getBorderColor(background, "default"), getTextColor(background, "muted")),
                 milestoneNodeClassName
               ),
               children: milestone.status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
@@ -712,7 +765,8 @@ function ProcessRoadmapTimeline({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-muted-foreground",
+                "mx-auto max-w-2xl text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -724,7 +778,7 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border",
+                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border/50",
                 timelineLineClassName
               )
             }

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.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-roadmap-timeline.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.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-roadmap-timeline.js

@@ -39,6 +39,58 @@ 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,
@@ -527,17 +579,17 @@ var StatusBadge = ({
   const config = {
     completed: {
       label: "Completed",
-      badgeClassName: "bg-success/10 text-success",
+      badgeClassName: cn(getNestedCardBg(background, "muted"), "text-success"),
       icon: "lucide/check-circle-2"
     },
     "in-progress": {
       label: "In Progress",
-      badgeClassName: "bg-primary/10 text-primary",
+      badgeClassName: cn(getNestedCardBg(background, "muted"), getAccentColor(background)),
       icon: "lucide/loader-2"
     },
     upcoming: {
       label: "Upcoming",
-      badgeClassName: cn(getNestedCardBg(background, "muted"), getNestedCardTextColor(background)),
+      badgeClassName: cn(getNestedCardBg(background, "muted"), getTextColor(background, "muted")),
       icon: "lucide/clock"
     }
   };
@@ -617,13 +669,13 @@ function ProcessRoadmapTimeline({
                           index % 2 === 0 ? "justify-end" : "justify-start"
                         ),
                         children: [
-                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: milestone.date }) : /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: milestone.date })),
+                          milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: milestone.date })),
                           /* @__PURE__ */ jsx(StatusBadge, { status: milestone.status, background })
                         ]
                       }
                     ),
                     milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title })),
-                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4 text-muted-foreground", children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -654,8 +706,9 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2 bg-background",
-                milestone.status === "completed" ? "border-success bg-success text-background" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground",
+                "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2",
+                getNestedCardBg(background, "card"),
+                milestone.status === "completed" ? "border-success bg-success text-white" : milestone.status === "in-progress" ? cn("border-primary bg-primary", getNestedCardTextColor(background)) : cn(getBorderColor(background, "default"), getTextColor(background, "muted")),
                 milestoneNodeClassName
               ),
               children: milestone.status === "completed" ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
@@ -691,7 +744,8 @@ function ProcessRoadmapTimeline({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-muted-foreground",
+                "mx-auto max-w-2xl text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -703,7 +757,7 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border",
+                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border/50",
                 timelineLineClassName
               )
             }

package/dist/process-scroll-image.cjs

@@ -33,6 +33,36 @@ var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -944,7 +974,8 @@ var ProcessCard = ({
   step,
   index,
   setActive,
-  itemClassName
+  itemClassName,
+  background
 }) => {
   const ref = React6__namespace.useRef(null);
   const itemInView = framerMotion.useInView(ref, {
@@ -969,7 +1000,7 @@ var ProcessCard = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-9xl tracking-tighter", children: step.step ?? `0${index + 1}` }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: step.title })),
-          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: step.description }))
+          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: step.description }))
         ] })
       ]
     }
@@ -992,7 +1023,7 @@ function ProcessScrollImage({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig,
@@ -1014,7 +1045,7 @@ function ProcessScrollImage({
         {
           name: "lucide/corner-down-right",
           size: 20,
-          className: "text-primary"
+          className: getAccentColor(background)
         }
       )
     }
@@ -1023,33 +1054,39 @@ function ProcessScrollImage({
     return () => {
       if (actionsSlot) return actionsSlot;
       if (!resolvedActions?.length) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
-        const {
-          label,
-          icon,
-          iconAfter,
-          children,
-          className: actionClassName,
-          ...pressableProps
-        } = action;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: cn(
-              "flex items-center justify-start gap-2",
-              actionClassName
-            ),
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              icon,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
+          children: resolvedActions.map((action, index) => {
+            const {
               label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }) });
+              icon,
+              iconAfter,
+              children,
+              className: actionClassName,
+              ...pressableProps
+            } = action;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
+              {
+                asButton: true,
+                className: cn(
+                  "flex items-center justify-start gap-2",
+                  actionClassName
+                ),
+                ...pressableProps,
+                children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  icon,
+                  label,
+                  iconAfter
+                ] })
+              },
+              index
+            );
+          })
+        }
+      );
     };
   }, [actionsSlot, resolvedActions, actionsClassName]);
   const renderSteps = React6.useMemo(() => {
@@ -1061,7 +1098,8 @@ function ProcessScrollImage({
         step,
         index,
         setActive,
-        itemClassName: stepItemClassName
+        itemClassName: stepItemClassName,
+        background
       },
       index
     )) });
@@ -1109,7 +1147,8 @@ function ProcessScrollImage({
                     "p",
                     {
                       className: cn(
-                        "text-base text-muted-foreground",
+                        "text-base",
+                        getTextColor(background, "muted"),
                         descriptionClassName
                       ),
                       children: description

package/dist/process-scroll-image.d.cts

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

package/dist/process-scroll-image.d.ts

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