@opensite/ui 0.8.9 → 0.9.0

package/dist/process-hover-cards.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-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

package/dist/process-icon-timeline.cjs

@@ -60,6 +60,54 @@ 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 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,
@@ -604,7 +652,7 @@ function ProcessIconTimeline({
                   ),
                   children: [
                     step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: step.title })),
-                    step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-muted-foreground", children: step.description })),
+                    step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description })),
                     step.highlights?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
@@ -661,7 +709,8 @@ function ProcessIconTimeline({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -673,7 +722,8 @@ function ProcessIconTimeline({
             "div",
             {
               className: cn(
-                "absolute left-6 top-0 bottom-0 w-px bg-border lg:left-1/2 lg:-translate-x-1/2",
+                "absolute left-6 top-0 bottom-0 w-px lg:left-1/2 lg:-translate-x-1/2",
+                getBorderColor(background, "default"),
                 timelineLineClassName
               )
             }

package/dist/process-icon-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-icon-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-icon-timeline.js

@@ -39,6 +39,54 @@ 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 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,
@@ -583,7 +631,7 @@ function ProcessIconTimeline({
                   ),
                   children: [
                     step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: step.title })),
-                    step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4 text-muted-foreground", children: step.description })),
+                    step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description })),
                     step.highlights?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -640,7 +688,8 @@ function ProcessIconTimeline({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -652,7 +701,8 @@ function ProcessIconTimeline({
             "div",
             {
               className: cn(
-                "absolute left-6 top-0 bottom-0 w-px bg-border lg:left-1/2 lg:-translate-x-1/2",
+                "absolute left-6 top-0 bottom-0 w-px lg:left-1/2 lg:-translate-x-1/2",
+                getBorderColor(background, "default"),
                 timelineLineClassName
               )
             }

package/dist/process-mission-principles.cjs

@@ -44,6 +44,36 @@ 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";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -452,7 +482,7 @@ function ProcessMissionPrinciples({
       "div",
       {
         className: cn(
-          "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          "grid gap-6 md:grid-cols-2 lg:grid-cols-3 px-4 md:px-0",
           principlesGridClassName
         ),
         children: principles.map((principle, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -478,7 +508,7 @@ function ProcessMissionPrinciples({
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title })),
-                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground leading-relaxed", children: principle.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground leading-relaxed", children: principle.description }))
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }))
               ] })
             ]
           },
@@ -486,7 +516,14 @@ function ProcessMissionPrinciples({
         ))
       }
     );
-  }, [principlesSlot, principles, background, principlesGridClassName, principleCardClassName, principleBadgeClassName]);
+  }, [
+    principlesSlot,
+    principles,
+    background,
+    principlesGridClassName,
+    principleCardClassName,
+    principleBadgeClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -501,7 +538,8 @@ function ProcessMissionPrinciples({
             "span",
             {
               className: cn(
-                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider",
+                getAccentColor(background),
                 missionLabelClassName
               ),
               children: missionLabel
@@ -521,7 +559,7 @@ function ProcessMissionPrinciples({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground leading-relaxed",
+                "text-lg leading-relaxed",
                 missionDescriptionClassName
               ),
               children: missionDescription
@@ -533,7 +571,7 @@ function ProcessMissionPrinciples({
             "span",
             {
               className: cn(
-                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider",
                 principlesLabelClassName
               ),
               children: principlesLabel

package/dist/process-mission-principles.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-mission-principles.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-mission-principles.js

@@ -38,6 +38,36 @@ 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";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -446,7 +476,7 @@ function ProcessMissionPrinciples({
       "div",
       {
         className: cn(
-          "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          "grid gap-6 md:grid-cols-2 lg:grid-cols-3 px-4 md:px-0",
           principlesGridClassName
         ),
         children: principles.map((principle, index) => /* @__PURE__ */ jsxs(
@@ -472,7 +502,7 @@ function ProcessMissionPrinciples({
               ),
               /* @__PURE__ */ jsxs("div", { className: "pt-4", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: principle.title })),
-                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground leading-relaxed", children: principle.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground leading-relaxed", children: principle.description }))
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }))
               ] })
             ]
           },
@@ -480,7 +510,14 @@ function ProcessMissionPrinciples({
         ))
       }
     );
-  }, [principlesSlot, principles, background, principlesGridClassName, principleCardClassName, principleBadgeClassName]);
+  }, [
+    principlesSlot,
+    principles,
+    background,
+    principlesGridClassName,
+    principleCardClassName,
+    principleBadgeClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -495,7 +532,8 @@ function ProcessMissionPrinciples({
             "span",
             {
               className: cn(
-                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                "mb-4 inline-block text-sm font-semibold uppercase tracking-wider",
+                getAccentColor(background),
                 missionLabelClassName
               ),
               children: missionLabel
@@ -515,7 +553,7 @@ function ProcessMissionPrinciples({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground leading-relaxed",
+                "text-lg leading-relaxed",
                 missionDescriptionClassName
               ),
               children: missionDescription
@@ -527,7 +565,7 @@ function ProcessMissionPrinciples({
             "span",
             {
               className: cn(
-                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider text-primary",
+                "mb-8 inline-block text-sm font-semibold uppercase tracking-wider",
                 principlesLabelClassName
               ),
               children: principlesLabel

package/dist/process-numbered-services.cjs

@@ -61,6 +61,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:")) {
@@ -974,7 +1026,7 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   // Backwards compatibility
@@ -998,22 +1050,11 @@ function ProcessNumberedServices({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-          ] })
-        }
-      );
+      return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: cn(actionClassName), ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter && iconAfter
+      ] }) });
     };
   }, []);
   const renderServices = React.useMemo(() => {
@@ -1032,7 +1073,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}`
@@ -1040,7 +1084,7 @@ function ProcessNumberedServices({
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-4", children: [
             service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title })),
-            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground leading-relaxed", children: service.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground leading-relaxed", children: service.description })),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description })),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1064,7 +1108,7 @@ function ProcessNumberedServices({
                       {
                         name: "lucide/check-circle-2",
                         size: 18,
-                        className: "text-primary"
+                        className: getAccentColor(background)
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: capability })
@@ -1078,7 +1122,16 @@ function ProcessNumberedServices({
       },
       index
     )) });
-  }, [servicesSlot, services, background, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, renderServiceAction]);
+  }, [
+    servicesSlot,
+    services,
+    background,
+    servicesClassName,
+    serviceItemClassName,
+    serviceBadgeClassName,
+    capabilitiesClassName,
+    renderServiceAction
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1103,7 +1156,8 @@ function ProcessNumberedServices({
             "p",
             {
               className: cn(
-                "text-lg text-muted-foreground",
+                "text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description