@opensite/ui 3.2.5 → 3.2.7

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,
@@ -501,7 +471,8 @@ function ProcessStickySteps({
   background,
   spacing = "py-6 md:py-32",
   pattern,
-  patternOpacity
+  patternOpacity,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const renderActions = React.useMemo(() => {
     return () => {
@@ -557,8 +528,7 @@ function ProcessStickySteps({
             {
               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}`
             }
@@ -581,6 +551,7 @@ function ProcessStickySteps({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -591,7 +562,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,7 +572,7 @@ 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 })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
               renderActions()
             ] }),
             renderSteps

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

@@ -100,6 +100,10 @@ interface ProcessStickyStepsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
@@ -107,6 +111,6 @@ interface ProcessStickyStepsProps {
  * ProcessStickySteps - A process section with sticky sidebar containing heading,
  * description, and CTA, with scrollable steps on the right side.
  */
-declare function ProcessStickySteps({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, }: ProcessStickyStepsProps): React.JSX.Element;
+declare function ProcessStickySteps({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessStickyStepsProps): React.JSX.Element;
 
 export { ProcessStickySteps, type ProcessStickyStepsProps };

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

@@ -100,6 +100,10 @@ interface ProcessStickyStepsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
@@ -107,6 +111,6 @@ interface ProcessStickyStepsProps {
  * ProcessStickySteps - A process section with sticky sidebar containing heading,
  * description, and CTA, with scrollable steps on the right side.
  */
-declare function ProcessStickySteps({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, }: ProcessStickyStepsProps): React.JSX.Element;
+declare function ProcessStickySteps({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessStickyStepsProps): React.JSX.Element;
 
 export { ProcessStickySteps, type ProcessStickyStepsProps };

package/dist/process-sticky-steps.js

@@ -11,36 +11,6 @@ import { jsx, jsxs, Fragment } 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" : "";
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
@@ -480,7 +450,8 @@ function ProcessStickySteps({
   background,
   spacing = "py-6 md:py-32",
   pattern,
-  patternOpacity
+  patternOpacity,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const renderActions = useMemo(() => {
     return () => {
@@ -536,8 +507,7 @@ function ProcessStickySteps({
             {
               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}`
             }
@@ -560,6 +530,7 @@ function ProcessStickySteps({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -570,7 +541,7 @@ function ProcessStickySteps({
           children: [
             /* @__PURE__ */ jsxs("div", { className: "top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", children: [
               /* @__PURE__ */ jsxs("div", { className: "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: heading }) : heading),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
@@ -580,7 +551,7 @@ function ProcessStickySteps({
                   }
                 )
               ] }),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base ", descriptionClassName), children: description }) : description),
               renderActions()
             ] }),
             renderSteps