@opensite/ui 2.4.9 → 2.5.1

package/dist/process-expandable-timeline.cjs

@@ -32,88 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
-function getBorderColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "border-foreground/20";
-      case "muted":
-        return "border-foreground/10";
-      case "accent":
-        return "border-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "border-border";
-      case "muted":
-        return "border-muted";
-      case "accent":
-        return "border-primary";
-    }
-  }
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -428,7 +346,8 @@ var spacingStyles = {
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
@@ -544,14 +463,12 @@ function ProcessExpandableTimeline({
   stepBadgeClassName,
   expandedContentClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
-  // Backwards compatibility
-  title
+  spacing = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const [expandedIndex, setExpandedIndex] = React__namespace.useState(null);
-  const resolvedHeading = title ?? heading;
   const toggleExpand = (index) => {
     setExpandedIndex(expandedIndex === index ? null : index);
   };
@@ -564,37 +481,50 @@ function ProcessExpandableTimeline({
         {
           onClick: () => toggleExpand(index),
           className: cn(
-            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors",
-            `hover:${getNestedCardBg(background, "muted")}/30`,
+            "group relative flex w-full items-start gap-6 border-b p-6 text-left transition-colors",
+            `hover:bg-card hover:text-card-foreground`,
             stepItemClassName
           ),
           children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CornerConnector,
+              {
+                className: cn("absolute right-4 top-4", "opacity-30")
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: cn(
-                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
-                  getNestedCardBg(background, "card"),
-                  expandedIndex === index ? cn(getBorderColor(background, "accent"), "bg-primary text-primary-foreground") : cn(getBorderColor(background, "default"), getTextColor(background, "muted"), `group-hover:${getBorderColor(background, "accent")}`),
+                  "shrink-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
+                  expandedIndex === index ? cn("bg-primary text-primary-foreground") : cn(
+                    `group-hover:bg-primary group-hover:text-primary-foreground`
+                  ),
                   stepBadgeClassName
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: String(index + 1).padStart(2, "0") })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(CornerConnector, { className: cn("absolute right-4 top-4", getTextColor(background, "muted"), "opacity-30") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pr-12", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pr-8 md:pr-12", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title })),
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "text-xl font-semibold tracking-tight transition-colors"
+                    ),
+                    children: step.title
+                  }
+                ) : step.title),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
                     name: expandedIndex === index ? "lucide/chevron-up" : "lucide/chevron-down",
-                    size: 20,
-                    className: getTextColor(background, "muted")
+                    size: 20
                   }
                 )
               ] }),
-              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }))
+              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: step.description }) : step.description)
             ] })
           ]
         }
@@ -611,18 +541,26 @@ function ProcessExpandableTimeline({
             "div",
             {
               className: cn(
-                "border-b py-6 pl-16 pr-6",
-                getNestedCardBg(background, "muted"),
-                getNestedCardTextColor(background),
+                "border-b p-6",
+                "bg-card text-bg-foreground",
                 expandedContentClassName
               ),
-              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: step.expandedContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: step.expandedContent })
+              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: step.expandedContent }) : step.expandedContent
             }
           )
         }
       ) })
     ] }, index)) });
-  }, [stepsSlot, steps, background, stepItemClassName, stepBadgeClassName, expandedContentClassName, expandedIndex, toggleExpand]);
+  }, [
+    stepsSlot,
+    steps,
+    background,
+    stepItemClassName,
+    stepBadgeClassName,
+    expandedContentClassName,
+    expandedIndex,
+    toggleExpand
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -631,29 +569,29 @@ function ProcessExpandableTimeline({
       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(
-            "h1",
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 max-w-2xl space-y-2", headerClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
             {
               className: cn(
-                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                "text-4xl font-semibold tracking-tight lg:text-5xl text-balance",
                 headingClassName
               ),
-              children: resolvedHeading
+              children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
               className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
+                "text-lg opacity-75 text-balance",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ) : description)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", timelineClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -661,7 +599,7 @@ function ProcessExpandableTimeline({
             {
               className: cn(
                 "absolute left-6 top-0 bottom-0 w-px",
-                getBorderColor(background, "default"),
+                "border-2 border-dashed",
                 timelineLineClassName
               )
             }

package/dist/process-expandable-timeline.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DcLp6ycJ.cjs';
-import { O as OptixFlowConfig } from './blocks-C1EhIN1e.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-B658AD6n.cjs';
+import { O as OptixFlowConfig } from './blocks-DUr75v0S.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -106,13 +106,13 @@ interface ProcessExpandableTimelineProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
+    containerClassName?: string;
 }
 /**
  * ProcessExpandableTimeline - A process section with expandable timeline steps.
  */
-declare function ProcessExpandableTimeline({ heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, stepItemClassName, stepBadgeClassName, expandedContentClassName, background, spacing, pattern, patternOpacity, title, }: ProcessExpandableTimelineProps): React.JSX.Element;
+declare function ProcessExpandableTimeline({ heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, stepItemClassName, stepBadgeClassName, expandedContentClassName, background, pattern, patternOpacity, spacing, containerClassName, }: ProcessExpandableTimelineProps): React.JSX.Element;
 
 export { ProcessExpandableTimeline, type ProcessExpandableTimelineProps };

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-C2nDtDDs.js';
-import { O as OptixFlowConfig } from './blocks-Y0T7PIol.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BphRfrhZ.js';
+import { O as OptixFlowConfig } from './blocks-BzFuQGP0.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -106,13 +106,13 @@ interface ProcessExpandableTimelineProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
+    containerClassName?: string;
 }
 /**
  * ProcessExpandableTimeline - A process section with expandable timeline steps.
  */
-declare function ProcessExpandableTimeline({ heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, stepItemClassName, stepBadgeClassName, expandedContentClassName, background, spacing, pattern, patternOpacity, title, }: ProcessExpandableTimelineProps): React.JSX.Element;
+declare function ProcessExpandableTimeline({ heading, description, steps, stepsSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, timelineClassName, timelineLineClassName, stepItemClassName, stepBadgeClassName, expandedContentClassName, background, pattern, patternOpacity, spacing, containerClassName, }: ProcessExpandableTimelineProps): React.JSX.Element;
 
 export { ProcessExpandableTimeline, type ProcessExpandableTimelineProps };

package/dist/process-expandable-timeline.js

@@ -11,88 +11,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";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -407,7 +325,8 @@ var spacingStyles = {
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
@@ -523,14 +442,12 @@ function ProcessExpandableTimeline({
   stepBadgeClassName,
   expandedContentClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
-  // Backwards compatibility
-  title
+  spacing = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const [expandedIndex, setExpandedIndex] = React.useState(null);
-  const resolvedHeading = title ?? heading;
   const toggleExpand = (index) => {
     setExpandedIndex(expandedIndex === index ? null : index);
   };
@@ -543,37 +460,50 @@ function ProcessExpandableTimeline({
         {
           onClick: () => toggleExpand(index),
           className: cn(
-            "group relative flex w-full items-start gap-6 border-b py-6 pl-16 text-left transition-colors",
-            `hover:${getNestedCardBg(background, "muted")}/30`,
+            "group relative flex w-full items-start gap-6 border-b p-6 text-left transition-colors",
+            `hover:bg-card hover:text-card-foreground`,
             stepItemClassName
           ),
           children: [
+            /* @__PURE__ */ jsx(
+              CornerConnector,
+              {
+                className: cn("absolute right-4 top-4", "opacity-30")
+              }
+            ),
             /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
-                  "absolute left-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
-                  getNestedCardBg(background, "card"),
-                  expandedIndex === index ? cn(getBorderColor(background, "accent"), "bg-primary text-primary-foreground") : cn(getBorderColor(background, "default"), getTextColor(background, "muted"), `group-hover:${getBorderColor(background, "accent")}`),
+                  "shrink-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
+                  expandedIndex === index ? cn("bg-primary text-primary-foreground") : cn(
+                    `group-hover:bg-primary group-hover:text-primary-foreground`
+                  ),
                   stepBadgeClassName
                 ),
                 children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: String(index + 1).padStart(2, "0") })
               }
             ),
-            /* @__PURE__ */ jsx(CornerConnector, { className: cn("absolute right-4 top-4", getTextColor(background, "muted"), "opacity-30") }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 pr-12", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 pr-8 md:pr-12", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-xl font-semibold tracking-tight transition-colors", `group-hover:${getAccentColor(background)}`), children: step.title })),
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "text-xl font-semibold tracking-tight transition-colors"
+                    ),
+                    children: step.title
+                  }
+                ) : step.title),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: expandedIndex === index ? "lucide/chevron-up" : "lucide/chevron-down",
-                    size: 20,
-                    className: getTextColor(background, "muted")
+                    size: 20
                   }
                 )
               ] }),
-              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1", getTextColor(background, "muted")), children: step.description }))
+              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg", children: step.description }) : step.description)
             ] })
           ]
         }
@@ -590,18 +520,26 @@ function ProcessExpandableTimeline({
             "div",
             {
               className: cn(
-                "border-b py-6 pl-16 pr-6",
-                getNestedCardBg(background, "muted"),
-                getNestedCardTextColor(background),
+                "border-b p-6",
+                "bg-card text-bg-foreground",
                 expandedContentClassName
               ),
-              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: step.expandedContent }) : /* @__PURE__ */ jsx("div", { className: getTextColor(background, "muted"), children: step.expandedContent })
+              children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg", children: step.expandedContent }) : step.expandedContent
             }
           )
         }
       ) })
     ] }, index)) });
-  }, [stepsSlot, steps, background, stepItemClassName, stepBadgeClassName, expandedContentClassName, expandedIndex, toggleExpand]);
+  }, [
+    stepsSlot,
+    steps,
+    background,
+    stepItemClassName,
+    stepBadgeClassName,
+    expandedContentClassName,
+    expandedIndex,
+    toggleExpand
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -610,29 +548,29 @@ function ProcessExpandableTimeline({
       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(
-            "h1",
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-16 max-w-2xl space-y-2", headerClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
             {
               className: cn(
-                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                "text-4xl font-semibold tracking-tight lg:text-5xl text-balance",
                 headingClassName
               ),
-              children: resolvedHeading
+              children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
               className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
+                "text-lg opacity-75 text-balance",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          ) : description)
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn("relative", timelineClassName), children: [
           /* @__PURE__ */ jsx(
@@ -640,7 +578,7 @@ function ProcessExpandableTimeline({
             {
               className: cn(
                 "absolute left-6 top-0 bottom-0 w-px",
-                getBorderColor(background, "default"),
+                "border-2 border-dashed",
                 timelineLineClassName
               )
             }