@opensite/ui 3.2.6 → 3.2.8

package/dist/process-steps-grid.cjs

@@ -31,88 +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 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,
@@ -515,10 +433,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 = React.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps || steps.length === 0) return null;
@@ -533,30 +450,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative z-10", children: [
                 (step.iconSlot || step.icon) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: step.icon, size: 28 }))
                   }
                 ),
-                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title })),
-                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: step.description }))
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: step.title })),
+                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed"), children: step.description }) : step.description)
               ] })
             ]
           },
@@ -564,7 +489,14 @@ function ProcessStepsGrid({
         ))
       }
     );
-  }, [stepsSlot, steps, background, stepsGridClassName, stepCardClassName, stepIconClassName]);
+  }, [
+    stepsSlot,
+    steps,
+    background,
+    stepsGridClassName,
+    stepCardClassName,
+    stepIconClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -574,29 +506,29 @@ function ProcessStepsGrid({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
+          ) : resolvedHeading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ) : description)
         ] }),
         renderSteps
       ] })

package/dist/process-steps-grid.d.cts

@@ -101,15 +101,15 @@ interface ProcessStepsGridProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessStepsGrid - A grid-based process section with numbered step cards.
  */
-declare function ProcessStepsGrid({ sectionId, heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, stepsGridClassName, stepCardClassName, stepIconClassName, background, spacing, pattern, patternOpacity, title, }: ProcessStepsGridProps): React.JSX.Element;
+declare function ProcessStepsGrid({ sectionId, heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, stepsGridClassName, stepCardClassName, stepIconClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessStepsGridProps): React.JSX.Element;
 
 export { ProcessStepsGrid, type ProcessStepsGridProps };

package/dist/process-steps-grid.d.ts

@@ -101,15 +101,15 @@ interface ProcessStepsGridProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessStepsGrid - A grid-based process section with numbered step cards.
  */
-declare function ProcessStepsGrid({ sectionId, heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, stepsGridClassName, stepCardClassName, stepIconClassName, background, spacing, pattern, patternOpacity, title, }: ProcessStepsGridProps): React.JSX.Element;
+declare function ProcessStepsGrid({ sectionId, heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, stepsGridClassName, stepCardClassName, stepIconClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessStepsGridProps): React.JSX.Element;
 
 export { ProcessStepsGrid, type ProcessStepsGridProps };

package/dist/process-steps-grid.js

@@ -10,88 +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 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.memo(function DynamicIcon2({
   apiKey,
@@ -494,10 +412,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;
@@ -512,30 +429,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)
               ] })
             ]
           },
@@ -543,7 +468,14 @@ function ProcessStepsGrid({
         ))
       }
     );
-  }, [stepsSlot, steps, background, stepsGridClassName, stepCardClassName, stepIconClassName]);
+  }, [
+    stepsSlot,
+    steps,
+    background,
+    stepsGridClassName,
+    stepCardClassName,
+    stepIconClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -553,29 +485,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
       ] })

package/dist/process-sticky-steps.cjs

@@ -32,36 +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" : "";
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
@@ -446,6 +416,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
+      ] })
+    }
+  );
+}
 var CornerIllustration = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -499,46 +533,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 = React.useMemo(() => {
-    return () => {
-      if (actionsSlot) return actionsSlot;
-      if (!actions?.length) return null;
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              pressable.Pressable,
-              {
-                asButton: true,
-                className: cn(actionClassName),
-                ...pressableProps,
-                children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  icon,
-                  label,
-                  iconAfter
-                ] })
-              },
-              index
-            );
-          })
-        }
-      );
-    };
-  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = React.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -551,21 +550,28 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            pressable.Pressable,
+            {
+              href: step.href,
+              "aria-label": typeof step.title === "string" ? step.title : "View step",
+              className: "absolute top-4 right-0 inline-flex",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, {})
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: step.description }))
+            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: step.description }) : step.description)
           ] })
         ]
       },
@@ -581,6 +587,7 @@ function ProcessStickySteps({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -591,7 +598,7 @@ function ProcessStickySteps({
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : heading),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
@@ -601,8 +608,15 @@ function ProcessStickySteps({
                   }
                 )
               ] }),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-              renderActions()
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ] }),
             renderSteps
           ]