@opensite/ui 3.2.5 → 3.2.7

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

@@ -113,15 +113,15 @@ interface ProcessIconTimelineProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessIconTimeline - A process section with icon-based timeline steps.
  */
-declare function ProcessIconTimeline({ sectionId, heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, stepCardClassName, stepBadgeClassName, background, spacing, pattern, patternOpacity, title, }: ProcessIconTimelineProps): React.JSX.Element;
+declare function ProcessIconTimeline({ sectionId, heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, stepCardClassName, stepBadgeClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessIconTimelineProps): React.JSX.Element;
 
 export { ProcessIconTimeline, type ProcessIconTimelineProps };

package/dist/process-icon-timeline.js

@@ -10,84 +10,6 @@ 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 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 DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
@@ -491,10 +413,9 @@ function ProcessIconTimeline({
   spacing,
   pattern,
   patternOpacity,
-  // Backwards compatibility
-  title
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const resolvedHeading = title ?? heading;
+  const resolvedHeading = heading;
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -530,14 +451,13 @@ function ProcessIconTimeline({
                 {
                   className: cn(
                     "rounded-lg border p-6 shadow-sm",
-                    getNestedCardBg(background, "card"),
-                    getNestedCardTextColor(background),
+                    "bg-card text-card-foreground",
                     index % 2 === 0 ? "lg:mr-12" : "lg:ml-12",
                     stepCardClassName
                   ),
                   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: cn("mb-4", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description })),
+                    step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4"), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4"), children: step.description })),
                     step.highlights?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -550,8 +470,7 @@ function ProcessIconTimeline({
                           {
                             className: cn(
                               "rounded-full px-3 py-1 text-xs font-medium",
-                              getNestedCardBg(background, "muted"),
-                              getNestedCardTextColor(background)
+                              "bg-primary text-primary-foreground"
                             ),
                             children: highlight
                           },
@@ -579,6 +498,7 @@ function ProcessIconTimeline({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-16 max-w-2xl", headerClassName), children: [
           resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx(
@@ -590,18 +510,8 @@ function ProcessIconTimeline({
               ),
               children: resolvedHeading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          ) : resolvedHeading),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : description)
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn("relative", timelineClassName), children: [
           /* @__PURE__ */ jsx(
@@ -609,7 +519,7 @@ function ProcessIconTimeline({
             {
               className: cn(
                 "absolute left-6 top-0 bottom-0 w-px lg:left-1/2 lg:-translate-x-1/2",
-                getBorderColor(background, "default"),
+                "border-border border",
                 timelineLineClassName
               )
             }

package/dist/process-mission-principles.cjs

@@ -14,66 +14,6 @@ var React__default = /*#__PURE__*/_interopDefault(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";
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -473,10 +413,9 @@ function ProcessMissionPrinciples({
   spacing,
   pattern,
   patternOpacity,
-  // Backwards compatibility
-  missionTitle
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const resolvedMissionHeading = missionTitle ?? missionHeading;
+  const resolvedMissionHeading = missionHeading;
   const renderPrinciples = React.useMemo(() => {
     if (principlesSlot) return principlesSlot;
     if (!principles?.length) return null;
@@ -492,8 +431,7 @@ function ProcessMissionPrinciples({
           {
             className: cn(
               "group relative rounded-lg border p-6 transition-shadow hover:shadow-md",
-              getNestedCardBg(background, "card"),
-              getNestedCardTextColor(background),
+              "bg-card text-card-foreground",
               principleCardClassName,
               principle.className
             ),
@@ -510,7 +448,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: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }))
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed"), children: principle.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-relaxed"), children: principle.description }))
               ] })
             ]
           },
@@ -535,6 +473,7 @@ function ProcessMissionPrinciples({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-20 max-w-3xl", missionClassName), children: [
           missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -542,7 +481,6 @@ function ProcessMissionPrinciples({
             {
               className: cn(
                 "mb-4 inline-block text-sm font-semibold uppercase tracking-wider",
-                getAccentColor(background),
                 missionLabelClassName
               ),
               children: missionLabel

package/dist/process-mission-principles.d.cts

@@ -117,15 +117,15 @@ interface ProcessMissionPrinciplesProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `missionHeading` instead
+     * Additional CSS classes for the container
      */
-    missionTitle?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessMissionPrinciples - A mission statement and principles section.
  */
-declare function ProcessMissionPrinciples({ sectionId, missionLabel, missionHeading, missionDescription, principlesLabel, principles, principlesSlot, className, contentClassName, missionClassName, missionLabelClassName, missionHeadingClassName, missionDescriptionClassName, principlesSectionClassName, principlesLabelClassName, principlesGridClassName, principleCardClassName, principleBadgeClassName, background, spacing, pattern, patternOpacity, missionTitle, }: ProcessMissionPrinciplesProps): React.JSX.Element;
+declare function ProcessMissionPrinciples({ sectionId, missionLabel, missionHeading, missionDescription, principlesLabel, principles, principlesSlot, className, contentClassName, missionClassName, missionLabelClassName, missionHeadingClassName, missionDescriptionClassName, principlesSectionClassName, principlesLabelClassName, principlesGridClassName, principleCardClassName, principleBadgeClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessMissionPrinciplesProps): React.JSX.Element;
 
 export { ProcessMissionPrinciples, type ProcessMissionPrinciplesProps };

package/dist/process-mission-principles.d.ts

@@ -117,15 +117,15 @@ interface ProcessMissionPrinciplesProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `missionHeading` instead
+     * Additional CSS classes for the container
      */
-    missionTitle?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessMissionPrinciples - A mission statement and principles section.
  */
-declare function ProcessMissionPrinciples({ sectionId, missionLabel, missionHeading, missionDescription, principlesLabel, principles, principlesSlot, className, contentClassName, missionClassName, missionLabelClassName, missionHeadingClassName, missionDescriptionClassName, principlesSectionClassName, principlesLabelClassName, principlesGridClassName, principleCardClassName, principleBadgeClassName, background, spacing, pattern, patternOpacity, missionTitle, }: ProcessMissionPrinciplesProps): React.JSX.Element;
+declare function ProcessMissionPrinciples({ sectionId, missionLabel, missionHeading, missionDescription, principlesLabel, principles, principlesSlot, className, contentClassName, missionClassName, missionLabelClassName, missionHeadingClassName, missionDescriptionClassName, principlesSectionClassName, principlesLabelClassName, principlesGridClassName, principleCardClassName, principleBadgeClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessMissionPrinciplesProps): React.JSX.Element;
 
 export { ProcessMissionPrinciples, type ProcessMissionPrinciplesProps };

package/dist/process-mission-principles.js

@@ -8,66 +8,6 @@ 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";
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -467,10 +407,9 @@ function ProcessMissionPrinciples({
   spacing,
   pattern,
   patternOpacity,
-  // Backwards compatibility
-  missionTitle
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const resolvedMissionHeading = missionTitle ?? missionHeading;
+  const resolvedMissionHeading = missionHeading;
   const renderPrinciples = useMemo(() => {
     if (principlesSlot) return principlesSlot;
     if (!principles?.length) return null;
@@ -486,8 +425,7 @@ function ProcessMissionPrinciples({
           {
             className: cn(
               "group relative rounded-lg border p-6 transition-shadow hover:shadow-md",
-              getNestedCardBg(background, "card"),
-              getNestedCardTextColor(background),
+              "bg-card text-card-foreground",
               principleCardClassName,
               principle.className
             ),
@@ -504,7 +442,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: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: principle.description }))
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed"), children: principle.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed"), children: principle.description }))
               ] })
             ]
           },
@@ -529,6 +467,7 @@ function ProcessMissionPrinciples({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-20 max-w-3xl", missionClassName), children: [
           missionLabel && (typeof missionLabel === "string" ? /* @__PURE__ */ jsx(
@@ -536,7 +475,6 @@ function ProcessMissionPrinciples({
             {
               className: cn(
                 "mb-4 inline-block text-sm font-semibold uppercase tracking-wider",
-                getAccentColor(background),
                 missionLabelClassName
               ),
               children: missionLabel

package/dist/process-numbered-services.cjs

@@ -32,88 +32,6 @@ 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 DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
@@ -517,10 +435,9 @@ function ProcessNumberedServices({
   spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
-  // Backwards compatibility
-  title
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const resolvedHeading = title ?? heading;
+  const resolvedHeading = heading;
   const renderServiceAction = React.useMemo(() => {
     return (service) => {
       if (service.actionSlot) return service.actionSlot;
@@ -538,11 +455,19 @@ function ProcessNumberedServices({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { asButton: true, className: cn(actionClassName), ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon,
-        label,
-        iconAfter && iconAfter
-      ] }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        pressable.Pressable,
+        {
+          asButton: true,
+          className: cn(actionClassName, "mt-4"),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter && iconAfter
+          ] })
+        }
+      );
     };
   }, []);
   const renderServices = React.useMemo(() => {
@@ -561,9 +486,7 @@ function ProcessNumberedServices({
             "div",
             {
               className: cn(
-                "flex size-16 items-center justify-center rounded-full border-2 text-xl font-bold transition-colors",
-                getBorderColor(background, "accent"),
-                getAccentColor(background),
+                "flex size-16 items-center justify-center rounded-full border-2 border-primary text-primary text-xl font-bold transition-colors",
                 "bg-primary/5 group-hover:bg-primary group-hover:text-primary-foreground",
                 serviceBadgeClassName
               ),
@@ -571,8 +494,8 @@ 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: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description })),
+            service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : service.title),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed"), children: service.description }) : service.description),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -587,18 +510,10 @@ function ProcessNumberedServices({
                 {
                   className: cn(
                     "flex items-center gap-3 rounded-lg px-4 py-3",
-                    getNestedCardBg(background, "muted"),
-                    getNestedCardTextColor(background)
+                    "bg-muted text-muted-foreground"
                   ),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/check-circle-2",
-                        size: 18,
-                        className: getAccentColor(background)
-                      }
-                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 18 }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: capability })
                   ]
                 },
@@ -629,6 +544,7 @@ function ProcessNumberedServices({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 max-w-2xl", headerClassName), children: [
           resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -641,17 +557,7 @@ function ProcessNumberedServices({
               children: resolvedHeading
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : description)
         ] }),
         renderServices
       ] })

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

@@ -121,15 +121,15 @@ interface ProcessNumberedServicesProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessNumberedServices - A numbered services section with capabilities grid.
  */
-declare function ProcessNumberedServices({ sectionId, heading, description, services, servicesSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, background, spacing, pattern, patternOpacity, title, }: ProcessNumberedServicesProps): React.JSX.Element;
+declare function ProcessNumberedServices({ sectionId, heading, description, services, servicesSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessNumberedServicesProps): React.JSX.Element;
 
 export { ProcessNumberedServices, type ProcessNumberedServicesProps };