@opensite/ui 3.2.6 → 3.2.7

package/dist/about-developer-story.cjs

@@ -643,7 +643,13 @@ function AboutDeveloperStory({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ContentGroup, { items: contentItems }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ContentGroup,
+            {
+              items: contentItems,
+              className: "flex flex-col justify-center items-center gap-6"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             BlockActions,
             {

package/dist/about-developer-story.js

@@ -622,7 +622,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,
             {

package/dist/hero-overlay-cta-grid.cjs

@@ -418,6 +418,70 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    pressable.Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function HeroOverlayCtaGrid({
   sectionId = "hero-overlay-cta-grid",
   badgeText,
@@ -425,9 +489,9 @@ function HeroOverlayCtaGrid({
   badgeSlot,
   heading,
   description,
-  primaryCta,
-  secondaryCta,
+  actions,
   actionsSlot,
+  actionsClassName,
   cards,
   cardsSlot,
   backgroundImage,
@@ -452,24 +516,16 @@ function HeroOverlayCtaGrid({
       badgeText
     ] });
   }, [badgeSlot, badgeText, badgeIcon]);
-  const renderActions = React.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!primaryCta && !secondaryCta) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row", children: [
-      primaryCta && /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
-      secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: secondaryCta.href, size: "lg", variant: "secondary", children: secondaryCta.label })
-    ] });
-  }, [actionsSlot, primaryCta, secondaryCta]);
   const renderCards = React.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
       pressable.Pressable,
       {
         href: card.href,
         className: "group flex items-center gap-4 px-6 py-6 transition-colors",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          card.icon ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
@@ -477,19 +533,19 @@ function HeroOverlayCtaGrid({
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.icon, size: 22 })
             }
-          ),
+          ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold ", children: card.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-black"), children: card.subtitle })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold text-card-foreground", children: card.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-card-foreground"), children: card.subtitle })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          card.href ? /* @__PURE__ */ jsxRuntime.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
@@ -574,7 +630,14 @@ function HeroOverlayCtaGrid({
                     children: description
                   }
                 )),
-                renderActions
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsSlot,
+                    actionsClassName
+                  }
+                )
               ]
             }
           ),

package/dist/hero-overlay-cta-grid.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
+import { ActionConfig } from '@page-speed/maps/components/geo-map';
 import './blocks-DCvdF54D.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -46,23 +47,17 @@ interface HeroOverlayCtaGridProps {
      */
     description?: React.ReactNode;
     /**
-     * Primary call-to-action config
+     * Array of action configurations
      */
-    primaryCta?: {
-        label: string;
-        href: string;
-    };
+    actions?: ActionConfig[];
     /**
-     * Secondary call-to-action config
+     * Custom slot for rendering actions (overrides actions array)
      */
-    secondaryCta?: {
-        label: string;
-        href: string;
-    };
+    actionsSlot?: React.ReactNode;
     /**
-     * Custom slot for actions (overrides primaryCta and secondaryCta)
+     * Additional CSS classes for the actions container
      */
-    actionsSlot?: React.ReactNode;
+    actionsClassName?: string;
     /**
      * CTA cards displayed beneath the hero copy
      */
@@ -134,6 +129,6 @@ interface HeroOverlayCtaGridProps {
  * and a supporting grid of icon cards. Ideal for service-focused landing pages that
  * need a strong hero statement plus quick navigation to top offerings.
  */
-declare function HeroOverlayCtaGrid({ sectionId, badgeText, badgeIcon, badgeSlot, heading, description, primaryCta, secondaryCta, actionsSlot, cards, cardsSlot, backgroundImage, backgroundAlt, backgroundSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroOverlayCtaGridProps): React.JSX.Element;
+declare function HeroOverlayCtaGrid({ sectionId, badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, actionsClassName, cards, cardsSlot, backgroundImage, backgroundAlt, backgroundSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroOverlayCtaGridProps): React.JSX.Element;
 
 export { HeroOverlayCtaGrid, type HeroOverlayCtaGridProps };

package/dist/hero-overlay-cta-grid.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
+import { ActionConfig } from '@page-speed/maps/components/geo-map';
 import './blocks-DCvdF54D.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -46,23 +47,17 @@ interface HeroOverlayCtaGridProps {
      */
     description?: React.ReactNode;
     /**
-     * Primary call-to-action config
+     * Array of action configurations
      */
-    primaryCta?: {
-        label: string;
-        href: string;
-    };
+    actions?: ActionConfig[];
     /**
-     * Secondary call-to-action config
+     * Custom slot for rendering actions (overrides actions array)
      */
-    secondaryCta?: {
-        label: string;
-        href: string;
-    };
+    actionsSlot?: React.ReactNode;
     /**
-     * Custom slot for actions (overrides primaryCta and secondaryCta)
+     * Additional CSS classes for the actions container
      */
-    actionsSlot?: React.ReactNode;
+    actionsClassName?: string;
     /**
      * CTA cards displayed beneath the hero copy
      */
@@ -134,6 +129,6 @@ interface HeroOverlayCtaGridProps {
  * and a supporting grid of icon cards. Ideal for service-focused landing pages that
  * need a strong hero statement plus quick navigation to top offerings.
  */
-declare function HeroOverlayCtaGrid({ sectionId, badgeText, badgeIcon, badgeSlot, heading, description, primaryCta, secondaryCta, actionsSlot, cards, cardsSlot, backgroundImage, backgroundAlt, backgroundSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroOverlayCtaGridProps): React.JSX.Element;
+declare function HeroOverlayCtaGrid({ sectionId, badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, actionsClassName, cards, cardsSlot, backgroundImage, backgroundAlt, backgroundSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroOverlayCtaGridProps): React.JSX.Element;
 
 export { HeroOverlayCtaGrid, type HeroOverlayCtaGridProps };

package/dist/hero-overlay-cta-grid.js

@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Pressable } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-overlay-cta-grid.tsx
@@ -397,6 +397,70 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function HeroOverlayCtaGrid({
   sectionId = "hero-overlay-cta-grid",
   badgeText,
@@ -404,9 +468,9 @@ function HeroOverlayCtaGrid({
   badgeSlot,
   heading,
   description,
-  primaryCta,
-  secondaryCta,
+  actions,
   actionsSlot,
+  actionsClassName,
   cards,
   cardsSlot,
   backgroundImage,
@@ -431,24 +495,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(
@@ -456,19 +512,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
@@ -553,7 +609,14 @@ function HeroOverlayCtaGrid({
                     children: description
                   }
                 )),
-                renderActions
+                /* @__PURE__ */ jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsSlot,
+                    actionsClassName
+                  }
+                )
               ]
             }
           ),

package/dist/process-expandable-timeline.cjs

@@ -487,7 +487,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
           ),
@@ -604,7 +604,6 @@ function ProcessExpandableTimeline({
             {
               className: cn(
                 "absolute left-6 top-0 bottom-0 w-px",
-                "border-2 border-dashed",
                 timelineLineClassName
               )
             }

package/dist/process-expandable-timeline.js

@@ -466,7 +466,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
           ),
@@ -583,7 +583,6 @@ function ProcessExpandableTimeline({
             {
               className: cn(
                 "absolute left-6 top-0 bottom-0 w-px",
-                "border-2 border-dashed",
                 timelineLineClassName
               )
             }

package/dist/process-icon-timeline.cjs

@@ -31,84 +31,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 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,
@@ -512,10 +434,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 = React.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -551,14 +472,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__ */ 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: cn("mb-4", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", getTextColor(background, "muted")), children: step.description })),
+                    step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4"), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4"), children: step.description })),
                     step.highlights?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
@@ -571,8 +491,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
                           },
@@ -600,6 +519,7 @@ function ProcessIconTimeline({
       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(
@@ -611,18 +531,8 @@ function ProcessIconTimeline({
               ),
               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 }))
+          ) : resolvedHeading),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : description)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", timelineClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -630,7 +540,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-icon-timeline.d.cts

@@ -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.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 };