@opensite/ui 0.8.9 → 0.9.1

package/dist/process-steps-grid.cjs

@@ -60,6 +60,58 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -575,27 +627,30 @@ function ProcessStepsGrid({
           "div",
           {
             className: cn(
-              "group relative overflow-hidden rounded-lg border p-8 transition-all hover:border-primary/50 hover:shadow-lg",
+              "group relative overflow-hidden rounded-lg border p-8 transition-all hover:shadow-lg",
+              `hover:${getBorderColor(background, "accent")}/50`,
               getNestedCardBg(background, "card"),
               getNestedCardTextColor(background),
               stepCardClassName,
               step.className
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -right-4 -top-4 text-[120px] font-bold leading-none text-muted/20 transition-colors group-hover:text-primary/10", 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", getTextColor(background, "muted"), "opacity-20 group-hover:opacity-10", `group-hover:${getAccentColor(background)}`), 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 bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+                      "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: "text-muted-foreground leading-relaxed", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground leading-relaxed", children: step.description }))
+                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 }))
               ] })
             ]
           },
@@ -628,7 +683,8 @@ function ProcessStepsGrid({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-muted-foreground",
+                "mx-auto max-w-2xl text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description

package/dist/process-steps-grid.js

@@ -39,6 +39,58 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -554,27 +606,30 @@ function ProcessStepsGrid({
           "div",
           {
             className: cn(
-              "group relative overflow-hidden rounded-lg border p-8 transition-all hover:border-primary/50 hover:shadow-lg",
+              "group relative overflow-hidden rounded-lg border p-8 transition-all hover:shadow-lg",
+              `hover:${getBorderColor(background, "accent")}/50`,
               getNestedCardBg(background, "card"),
               getNestedCardTextColor(background),
               stepCardClassName,
               step.className
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "absolute -right-4 -top-4 text-[120px] font-bold leading-none text-muted/20 transition-colors group-hover:text-primary/10", 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", getTextColor(background, "muted"), "opacity-20 group-hover:opacity-10", `group-hover:${getAccentColor(background)}`), 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 bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+                      "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: "text-muted-foreground leading-relaxed", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground leading-relaxed", children: step.description }))
+                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 }))
               ] })
             ]
           },
@@ -607,7 +662,8 @@ function ProcessStepsGrid({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-muted-foreground",
+                "mx-auto max-w-2xl text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description

package/dist/process-sticky-steps.cjs

@@ -1011,63 +1011,46 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
-  patternOpacity,
-  // Backwards compatibility
-  title,
-  ctaText,
-  ctaUrl
+  patternOpacity
 }) {
-  const resolvedHeading = title ?? heading;
-  const resolvedActions = actions ?? (ctaText && ctaUrl ? [
-    {
-      label: ctaText,
-      href: ctaUrl,
-      variant: "ghost",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: "lucide/corner-down-right",
-          size: 20,
-          className: "text-primary"
-        }
-      )
-    }
-  ] : []);
   const renderActions = React.useMemo(() => {
     return () => {
       if (actionsSlot) return actionsSlot;
-      if (!resolvedActions?.length) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
-        const {
-          label,
-          icon,
-          iconAfter,
-          children,
-          className: actionClassName,
-          ...pressableProps
-        } = action;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: cn(
-              "flex items-center justify-start gap-2",
-              actionClassName
-            ),
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              icon,
+      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,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }) });
+              icon,
+              iconAfter,
+              children,
+              className: actionClassName,
+              ...pressableProps
+            } = action;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
+              {
+                asButton: true,
+                className: cn(actionClassName),
+                ...pressableProps,
+                children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  icon,
+                  label,
+                  iconAfter
+                ] })
+              },
+              index
+            );
+          })
+        }
+      );
     };
-  }, [actionsSlot, resolvedActions, actionsClassName]);
+  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = React.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -1080,15 +1063,21 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, { className: "absolute top-4 right-0 text-primary" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "flex size-12 items-center justify-center px-4 py-1 tracking-tighter",
-            getNestedCardBg(background, "muted"),
-            getNestedCardTextColor(background)
-          ), children: step.step ?? `0${index + 1}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex size-12 items-center justify-center px-4 py-1 tracking-tighter",
+                getNestedCardBg(background, "muted"),
+                getNestedCardTextColor(background)
+              ),
+              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: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: step.description }))
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: step.description }))
           ] })
         ]
       },
@@ -1113,26 +1102,17 @@ 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: [
-                resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("w-fit", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
                     name: "lucide/asterisk",
                     size: 40,
-                    className: "absolute -top-2 -right-2 text-primary md:size-10 lg:-right-14"
+                    className: "absolute -top-2 -right-2 md:size-10 lg:-right-14"
                   }
                 )
               ] }),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-base text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
               renderActions()
             ] }),
             renderSteps

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

@@ -100,23 +100,11 @@ interface ProcessStickyStepsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
-    /**
-     * @deprecated Use `heading` instead
-     */
-    title?: string;
-    /**
-     * @deprecated Use `actions` instead
-     */
-    ctaText?: string;
-    /**
-     * @deprecated Use `actions` instead
-     */
-    ctaUrl?: string;
 }
 /**
  * ProcessStickySteps - A process section with sticky sidebar containing heading,
  * description, and CTA, with scrollable steps on the right side.
  */
-declare function ProcessStickySteps({ heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, title, ctaText, ctaUrl, }: ProcessStickyStepsProps): React.JSX.Element;
+declare function ProcessStickySteps({ heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, }: ProcessStickyStepsProps): React.JSX.Element;
 
 export { ProcessStickySteps, type ProcessStickyStepsProps };

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

@@ -100,23 +100,11 @@ interface ProcessStickyStepsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
-    /**
-     * @deprecated Use `heading` instead
-     */
-    title?: string;
-    /**
-     * @deprecated Use `actions` instead
-     */
-    ctaText?: string;
-    /**
-     * @deprecated Use `actions` instead
-     */
-    ctaUrl?: string;
 }
 /**
  * ProcessStickySteps - A process section with sticky sidebar containing heading,
  * description, and CTA, with scrollable steps on the right side.
  */
-declare function ProcessStickySteps({ heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, title, ctaText, ctaUrl, }: ProcessStickyStepsProps): React.JSX.Element;
+declare function ProcessStickySteps({ heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, }: ProcessStickyStepsProps): React.JSX.Element;
 
 export { ProcessStickySteps, type ProcessStickyStepsProps };

package/dist/process-sticky-steps.js

@@ -990,63 +990,46 @@ function ProcessStickySteps({
   stepsClassName,
   stepItemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
-  patternOpacity,
-  // Backwards compatibility
-  title,
-  ctaText,
-  ctaUrl
+  patternOpacity
 }) {
-  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: "text-primary"
-        }
-      )
-    }
-  ] : []);
   const renderActions = useMemo(() => {
     return () => {
       if (actionsSlot) return actionsSlot;
-      if (!resolvedActions?.length) return null;
-      return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
-        const {
-          label,
-          icon,
-          iconAfter,
-          children,
-          className: actionClassName,
-          ...pressableProps
-        } = action;
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: cn(
-              "flex items-center justify-start gap-2",
-              actionClassName
-            ),
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-              icon,
+      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,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }) });
+              icon,
+              iconAfter,
+              children,
+              className: actionClassName,
+              ...pressableProps
+            } = action;
+            return /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                asButton: true,
+                className: cn(actionClassName),
+                ...pressableProps,
+                children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  icon,
+                  label,
+                  iconAfter
+                ] })
+              },
+              index
+            );
+          })
+        }
+      );
     };
-  }, [actionsSlot, resolvedActions, actionsClassName]);
+  }, [actionsSlot, actions, actionsClassName]);
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
@@ -1059,15 +1042,21 @@ function ProcessStickySteps({
           step.className
         ),
         children: [
-          /* @__PURE__ */ jsx(CornerIllustration, { className: "absolute top-4 right-0 text-primary" }),
-          /* @__PURE__ */ jsx("div", { className: cn(
-            "flex size-12 items-center justify-center px-4 py-1 tracking-tighter",
-            getNestedCardBg(background, "muted"),
-            getNestedCardTextColor(background)
-          ), children: step.step ?? `0${index + 1}` }),
+          /* @__PURE__ */ jsx(CornerIllustration, { className: "absolute top-4 right-0" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex size-12 items-center justify-center px-4 py-1 tracking-tighter",
+                getNestedCardBg(background, "muted"),
+                getNestedCardTextColor(background)
+              ),
+              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: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: step.description }))
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "", children: step.description }))
           ] })
         ]
       },
@@ -1092,26 +1081,17 @@ 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: [
-                resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: "lucide/asterisk",
                     size: 40,
-                    className: "absolute -top-2 -right-2 text-primary md:size-10 lg:-right-14"
+                    className: "absolute -top-2 -right-2 md:size-10 lg:-right-14"
                   }
                 )
               ] }),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-base text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
               renderActions()
             ] }),
             renderSteps