@opensite/ui 3.2.6 → 3.2.8

package/dist/registry.js

@@ -7531,7 +7531,13 @@ function AboutDeveloperStory({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
-          /* @__PURE__ */ jsx(ContentGroup, { items: contentItems }),
+          /* @__PURE__ */ jsx(
+            ContentGroup,
+            {
+              items: contentItems,
+              className: "flex flex-col justify-center items-center gap-6"
+            }
+          ),
           /* @__PURE__ */ jsx(
             BlockActions,
             {
@@ -49314,9 +49320,9 @@ function HeroOverlayCtaGrid({
   badgeSlot,
   heading,
   description,
-  primaryCta,
-  secondaryCta,
+  actions,
   actionsSlot,
+  actionsClassName,
   cards,
   cardsSlot,
   backgroundImage,
@@ -49341,24 +49347,16 @@ function HeroOverlayCtaGrid({
       badgeText
     ] });
   }, [badgeSlot, badgeText, badgeIcon]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!primaryCta && !secondaryCta) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row", children: [
-      primaryCta && /* @__PURE__ */ jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
-      secondaryCta && /* @__PURE__ */ jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "secondary", children: secondaryCta.label })
-    ] });
-  }, [actionsSlot, primaryCta, secondaryCta]);
   const renderCards = useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-white/95 shadow-2xl px-0", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-card shadow-2xl px-0", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxs(
       Pressable,
       {
         href: card.href,
         className: "group flex items-center gap-4 px-6 py-6 transition-colors",
         children: [
-          /* @__PURE__ */ jsx(
+          card.icon ? /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
@@ -49366,19 +49364,19 @@ function HeroOverlayCtaGrid({
               ),
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: card.icon, size: 22 })
             }
-          ),
+          ) : null,
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-base font-semibold ", children: card.label }),
-            /* @__PURE__ */ jsx("p", { className: cn("text-sm text-black"), children: card.subtitle })
+            /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-card-foreground", children: card.label }),
+            /* @__PURE__ */ jsx("p", { className: cn("text-sm text-card-foreground"), children: card.subtitle })
           ] }),
-          /* @__PURE__ */ jsx(
+          card.href ? /* @__PURE__ */ jsx(
             DynamicIcon,
             {
               name: "lucide/arrow-right",
               size: 18,
-              className: cn("ml-auto flex-none text-muted")
+              className: cn("ml-auto flex-none text-card-foreground")
             }
-          )
+          ) : null
         ]
       },
       card.label
@@ -49463,7 +49461,14 @@ function HeroOverlayCtaGrid({
                     children: description
                   }
                 )),
-                renderActions
+                /* @__PURE__ */ jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsSlot,
+                    actionsClassName
+                  }
+                )
               ]
             }
           ),
@@ -78225,46 +78230,11 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
   pattern,
-  patternOpacity
+  patternOpacity,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const renderActions = useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-wrap items-center gap-2", actionsClassName),
-          children: actions.map((action, index) => {
-            const {
-              label,
-              icon,
-              iconAfter,
-              children,
-              className: actionClassName,
-              ...pressableProps
-            } = action;
-            return /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -78277,21 +78247,28 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
                 "flex size-12 items-center justify-center px-4 py-1 tracking-tighter",
-                getNestedCardBg(background, "muted"),
-                getNestedCardTextColor(background)
+                "bg-muted text-muted-foreground"
               ),
               children: step.step ?? `0${index + 1}`
             }
           ),
           /* @__PURE__ */ jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -78307,6 +78284,7 @@ function ProcessStickySteps({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -78317,7 +78295,7 @@ function ProcessStickySteps({
           children: [
             /* @__PURE__ */ jsxs("div", { className: "top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", children: [
               /* @__PURE__ */ jsxs("div", { className: "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : heading),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
@@ -78327,8 +78305,15 @@ function ProcessStickySteps({
                   }
                 )
               ] }),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderActions()
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]
@@ -78373,10 +78358,10 @@ var ProcessCard = ({
         step.className
       ),
       children: [
-        /* @__PURE__ */ 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__ */ jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-5xl md:text-7xl tracking-tighter", children: step.step ?? `0${index + 1}` }),
         /* @__PURE__ */ jsxs("div", { children: [
           step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: step.title })),
-          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: step.description }) : /* @__PURE__ */ jsx("div", { className: getTextColor(background, "muted"), children: step.description }))
+          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { children: step.description }) : step.description)
         ] })
       ]
     }
@@ -78404,29 +78389,12 @@ function ProcessScrollImage({
   pattern,
   patternOpacity,
   optixFlowConfig,
-  // Backwards compatibility
-  title,
-  ctaText,
-  ctaUrl
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const [active, setActive] = React30.useState(0);
   const previousActive = usePrevious(active);
-  const resolvedHeading = title ?? heading;
-  const resolvedActions = actions ?? (ctaText && ctaUrl ? [
-    {
-      label: ctaText,
-      href: ctaUrl,
-      variant: "ghost",
-      icon: /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: "lucide/corner-down-right",
-          size: 20,
-          className: getAccentColor(background)
-        }
-      )
-    }
-  ] : []);
+  const resolvedHeading = heading;
+  const resolvedActions = actions || [];
   const renderActions = useMemo(() => {
     return () => {
       if (actionsSlot) return actionsSlot;
@@ -78495,6 +78463,7 @@ function ProcessScrollImage({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -78520,18 +78489,8 @@ function ProcessScrollImage({
                       ),
                       children: resolvedHeading
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "text-base",
-                        getTextColor(background, "muted"),
-                        descriptionClassName
-                      ),
-                      children: description
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                  ) : resolvedHeading),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base", descriptionClassName), children: description }) : description),
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -78770,10 +78729,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;
@@ -78809,14 +78767,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",
                       {
@@ -78829,8 +78786,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
                           },
@@ -78858,6 +78814,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(
@@ -78869,18 +78826,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(
@@ -78888,7 +78835,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
               )
             }
@@ -78970,7 +78917,7 @@ function ProcessExpandableTimeline({
           onClick: () => toggleExpand(index),
           className: cn(
             "group relative flex w-full items-start gap-6 border-b p-6 text-left transition-colors",
-            `hover:bg-card hover:text-card-foreground`,
+            "hover:bg-card hover:text-card-foreground",
             expandedIndex === index ? "bg-card text-card-foreground" : "",
             stepItemClassName
           ),
@@ -79087,7 +79034,6 @@ function ProcessExpandableTimeline({
             {
               className: cn(
                 "absolute left-6 top-0 bottom-0 w-px",
-                "border-2 border-dashed",
                 timelineLineClassName
               )
             }
@@ -79308,10 +79254,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;
@@ -79327,8 +79272,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
             ),
@@ -79345,7 +79289,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 }))
               ] })
             ]
           },
@@ -79370,6 +79314,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(
@@ -79377,7 +79322,6 @@ function ProcessMissionPrinciples({
             {
               className: cn(
                 "mb-4 inline-block text-sm font-semibold uppercase tracking-wider",
-                getAccentColor(background),
                 missionLabelClassName
               ),
               children: missionLabel
@@ -79439,10 +79383,9 @@ function ProcessStepsGrid({
   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 || steps.length === 0) return null;
@@ -79457,30 +79400,38 @@ function ProcessStepsGrid({
           "div",
           {
             className: cn(
-              "group relative overflow-hidden rounded-lg border p-8 transition-all hover:shadow-lg",
-              `hover:${getBorderColor(background, "accent")}/50`,
-              getNestedCardBg(background, "card"),
-              getNestedCardTextColor(background),
+              "group relative overflow-hidden rounded-lg p-8 transition-all hover:shadow-lg",
+              "border border-border hover:border-primary",
+              "bg-card text-card-foreground",
               stepCardClassName,
               step.className
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { className: cn("absolute -right-4 -top-4 text-[120px] font-bold leading-none transition-colors", getTextColor(background, "muted"), "opacity-20 group-hover:opacity-10", `group-hover:${getAccentColor(background)}`), children: String(index + 1).padStart(2, "0") }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "absolute -right-4 -top-4 text-[120px] font-bold leading-none transition-colors",
+                    "opacity-20 group-hover:opacity-100",
+                    "group-hover:text-primary"
+                  ),
+                  children: String(index + 1).padStart(2, "0")
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { className: "relative z-10", children: [
                 (step.iconSlot || step.icon) && /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: cn(
                       "mb-6 flex size-14 items-center justify-center rounded-lg transition-colors",
-                      getAccentColor(background),
                       "bg-primary/10 group-hover:bg-primary group-hover:text-primary-foreground",
                       stepIconClassName
                     ),
                     children: step.iconSlot ?? (step.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: step.icon, size: 28 }))
                   }
                 ),
-                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title })),
-                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: step.description }))
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3", children: step.title })),
+                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed"), children: step.description }) : step.description)
               ] })
             ]
           },
@@ -79488,7 +79439,14 @@ function ProcessStepsGrid({
         ))
       }
     );
-  }, [stepsSlot, steps, background, stepsGridClassName, stepCardClassName, stepIconClassName]);
+  }, [
+    stepsSlot,
+    steps,
+    background,
+    stepsGridClassName,
+    stepCardClassName,
+    stepIconClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -79498,29 +79456,29 @@ function ProcessStepsGrid({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
               className: cn(
-                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl text-pretty",
                 headingClassName
               ),
               children: resolvedHeading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
+          ) : resolvedHeading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg",
-                getTextColor(background, "muted"),
+                "mx-auto max-w-2xl text-lg text-balance",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          ) : description)
         ] }),
         renderSteps
       ] })
@@ -79543,13 +79501,12 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   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 = useMemo(() => {
     return (service) => {
       if (service.actionSlot) return service.actionSlot;
@@ -79567,11 +79524,19 @@ function ProcessNumberedServices({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: cn(actionClassName), ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        icon,
-        label,
-        iconAfter && iconAfter
-      ] }) });
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn(actionClassName, "mt-4"),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            icon,
+            label,
+            iconAfter && iconAfter
+          ] })
+        }
+      );
     };
   }, []);
   const renderServices = useMemo(() => {
@@ -79590,9 +79555,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
               ),
@@ -79600,8 +79563,8 @@ 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: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description })),
+            service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : service.title),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed"), children: service.description }) : service.description),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsx(
@@ -79616,18 +79579,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__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/check-circle-2",
-                        size: 18,
-                        className: getAccentColor(background)
-                      }
-                    ),
+                    /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 18 }),
                     /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: capability })
                   ]
                 },
@@ -79658,6 +79613,7 @@ function ProcessNumberedServices({
       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(
@@ -79670,17 +79626,7 @@ function ProcessNumberedServices({
               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 }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : description)
         ] }),
         renderServices
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.2.6",
+  "version": "3.2.8",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",