@opensite/ui 3.2.6 → 3.2.8

package/dist/process-numbered-services.d.ts

@@ -121,15 +121,15 @@ interface ProcessNumberedServicesProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessNumberedServices - A numbered services section with capabilities grid.
  */
-declare function ProcessNumberedServices({ sectionId, heading, description, services, servicesSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, background, spacing, pattern, patternOpacity, title, }: ProcessNumberedServicesProps): React.JSX.Element;
+declare function ProcessNumberedServices({ sectionId, heading, description, services, servicesSlot, className, contentClassName, headerClassName, headingClassName, descriptionClassName, servicesClassName, serviceItemClassName, serviceBadgeClassName, capabilitiesClassName, background, spacing, pattern, patternOpacity, containerClassName, }: ProcessNumberedServicesProps): React.JSX.Element;
 
 export { ProcessNumberedServices, type ProcessNumberedServicesProps };

package/dist/process-numbered-services.js

@@ -11,88 +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" : "";
-}
-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,
@@ -493,13 +411,12 @@ function ProcessNumberedServices({
   serviceBadgeClassName,
   capabilitiesClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "md",
   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 renderServiceAction = useMemo(() => {
     return (service) => {
       if (service.actionSlot) return service.actionSlot;
@@ -517,11 +434,19 @@ function ProcessNumberedServices({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: cn(actionClassName), ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon,
-        label,
-        iconAfter && iconAfter
-      ] }) });
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn(actionClassName, "mt-4"),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter && iconAfter
+          ] })
+        }
+      );
     };
   }, []);
   const renderServices = useMemo(() => {
@@ -540,9 +465,7 @@ function ProcessNumberedServices({
             "div",
             {
               className: cn(
-                "flex size-16 items-center justify-center rounded-full border-2 text-xl font-bold transition-colors",
-                getBorderColor(background, "accent"),
-                getAccentColor(background),
+                "flex size-16 items-center justify-center rounded-full border-2 border-primary text-primary text-xl font-bold transition-colors",
                 "bg-primary/5 group-hover:bg-primary group-hover:text-primary-foreground",
                 serviceBadgeClassName
               ),
@@ -550,8 +473,8 @@ function ProcessNumberedServices({
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "lg:col-span-4", children: [
-            service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title })),
-            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: service.description })),
+            service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : service.title),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed"), children: service.description }) : service.description),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsx(
@@ -566,18 +489,10 @@ function ProcessNumberedServices({
                 {
                   className: cn(
                     "flex items-center gap-3 rounded-lg px-4 py-3",
-                    getNestedCardBg(background, "muted"),
-                    getNestedCardTextColor(background)
+                    "bg-muted text-muted-foreground"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/check-circle-2",
-                        size: 18,
-                        className: getAccentColor(background)
-                      }
-                    ),
+                    /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 18 }),
                     /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: capability })
                   ]
                 },
@@ -608,6 +523,7 @@ function ProcessNumberedServices({
       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(
@@ -620,17 +536,7 @@ function ProcessNumberedServices({
               children: resolvedHeading
             }
           ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : description)
         ] }),
         renderServices
       ] })

package/dist/process-scroll-image.cjs

@@ -1,13 +1,12 @@
 "use client";
 'use strict';
 
-var React4 = require('react');
+var React3 = require('react');
 var framerMotion = require('framer-motion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
 var pressable = require('@page-speed/pressable');
-var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,50 +27,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // components/blocks/process/process-scroll-image.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-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";
-}
-var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-var DynamicIcon = React4__namespace.memo(function DynamicIcon2({
-  apiKey,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-});
-DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -81,7 +42,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React4__namespace.default.forwardRef(
+var Container = React3__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -387,7 +348,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React4__namespace.default.forwardRef(
+var Section = React3__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -449,9 +410,9 @@ var Section = React4__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 var usePrevious = (value) => {
-  const [prev, setPrev] = React4__namespace.useState(void 0);
-  const ref = React4__namespace.useRef(value);
-  React4__namespace.useEffect(() => {
+  const [prev, setPrev] = React3__namespace.useState(void 0);
+  const ref = React3__namespace.useRef(value);
+  React3__namespace.useEffect(() => {
     setPrev(ref.current);
     ref.current = value;
   }, [value]);
@@ -464,12 +425,12 @@ var ProcessCard = ({
   itemClassName,
   background
 }) => {
-  const ref = React4__namespace.useRef(null);
+  const ref = React3__namespace.useRef(null);
   const itemInView = framerMotion.useInView(ref, {
     amount: 0,
     margin: "0px 0px -60% 0px"
   });
-  React4__namespace.useEffect(() => {
+  React3__namespace.useEffect(() => {
     if (itemInView) {
       setActive(index);
     }
@@ -484,10 +445,10 @@ var ProcessCard = ({
         step.className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-9xl tracking-tighter", children: step.step ?? `0${index + 1}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-5xl md:text-7xl tracking-tighter", 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: getTextColor(background, "muted"), children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: step.description }))
+          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: step.description }) : step.description)
         ] })
       ]
     }
@@ -515,30 +476,13 @@ function ProcessScrollImage({
   pattern,
   patternOpacity,
   optixFlowConfig,
-  // Backwards compatibility
-  title,
-  ctaText,
-  ctaUrl
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const [active, setActive] = React4__namespace.useState(0);
+  const [active, setActive] = React3__namespace.useState(0);
   const previousActive = usePrevious(active);
-  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: getAccentColor(background)
-        }
-      )
-    }
-  ] : []);
-  const renderActions = React4.useMemo(() => {
+  const resolvedHeading = heading;
+  const resolvedActions = actions || [];
+  const renderActions = React3.useMemo(() => {
     return () => {
       if (actionsSlot) return actionsSlot;
       if (!resolvedActions?.length) return null;
@@ -577,7 +521,7 @@ function ProcessScrollImage({
       );
     };
   }, [actionsSlot, resolvedActions, actionsClassName]);
-  const renderSteps = React4.useMemo(() => {
+  const renderSteps = React3.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("relative w-full lg:pl-22", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -606,6 +550,7 @@ function ProcessScrollImage({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -631,18 +576,8 @@ function ProcessScrollImage({
                       ),
                       children: resolvedHeading
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "text-base",
-                        getTextColor(background, "muted"),
-                        descriptionClassName
-                      ),
-                      children: description
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                  ) : resolvedHeading),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base", descriptionClassName), children: description }) : description),
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {

package/dist/process-scroll-image.d.cts

@@ -113,23 +113,15 @@ interface ProcessScrollImageProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
-    /**
-     * @deprecated Use `actions` instead
-     */
-    ctaText?: string;
-    /**
-     * @deprecated Use `actions` instead
-     */
-    ctaUrl?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessScrollImage - A process section with scroll-triggered image transitions.
  */
-declare function ProcessScrollImage({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, sidebarClassName, headingClassName, descriptionClassName, imageContainerClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, title, ctaText, ctaUrl, }: ProcessScrollImageProps): React.JSX.Element;
+declare function ProcessScrollImage({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, sidebarClassName, headingClassName, descriptionClassName, imageContainerClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, containerClassName, }: ProcessScrollImageProps): React.JSX.Element;
 
 export { ProcessScrollImage, type ProcessScrollImageProps };

package/dist/process-scroll-image.d.ts

@@ -113,23 +113,15 @@ interface ProcessScrollImageProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * @deprecated Use `heading` instead
+     * Additional CSS classes for the container
      */
-    title?: string;
-    /**
-     * @deprecated Use `actions` instead
-     */
-    ctaText?: string;
-    /**
-     * @deprecated Use `actions` instead
-     */
-    ctaUrl?: string;
+    containerClassName?: string;
     /** Optional Section ID */
     sectionId?: string;
 }
 /**
  * ProcessScrollImage - A process section with scroll-triggered image transitions.
  */
-declare function ProcessScrollImage({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, sidebarClassName, headingClassName, descriptionClassName, imageContainerClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, title, ctaText, ctaUrl, }: ProcessScrollImageProps): React.JSX.Element;
+declare function ProcessScrollImage({ sectionId, heading, description, actions, actionsSlot, steps, stepsSlot, className, contentClassName, sidebarClassName, headingClassName, descriptionClassName, imageContainerClassName, actionsClassName, stepsClassName, stepItemClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, containerClassName, }: ProcessScrollImageProps): React.JSX.Element;
 
 export { ProcessScrollImage, type ProcessScrollImageProps };

package/dist/process-scroll-image.js

@@ -1,56 +1,17 @@
 "use client";
-import * as React4 from 'react';
-import React4__default, { useMemo } from 'react';
+import * as React3 from 'react';
+import React3__default, { useMemo } from 'react';
 import { motion, useInView } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { Pressable } from '@page-speed/pressable';
-import { Icon } from '@page-speed/icon';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // components/blocks/process/process-scroll-image.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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";
-}
-var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-var DynamicIcon = React4.memo(function DynamicIcon2({
-  apiKey,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-});
-DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -60,7 +21,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React4__default.forwardRef(
+var Container = React3__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -366,7 +327,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React4__default.forwardRef(
+var Section = React3__default.forwardRef(
   ({
     id,
     title,
@@ -428,9 +389,9 @@ var Section = React4__default.forwardRef(
 );
 Section.displayName = "Section";
 var usePrevious = (value) => {
-  const [prev, setPrev] = React4.useState(void 0);
-  const ref = React4.useRef(value);
-  React4.useEffect(() => {
+  const [prev, setPrev] = React3.useState(void 0);
+  const ref = React3.useRef(value);
+  React3.useEffect(() => {
     setPrev(ref.current);
     ref.current = value;
   }, [value]);
@@ -443,12 +404,12 @@ var ProcessCard = ({
   itemClassName,
   background
 }) => {
-  const ref = React4.useRef(null);
+  const ref = React3.useRef(null);
   const itemInView = useInView(ref, {
     amount: 0,
     margin: "0px 0px -60% 0px"
   });
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (itemInView) {
       setActive(index);
     }
@@ -463,10 +424,10 @@ var ProcessCard = ({
         step.className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-9xl tracking-tighter", children: step.step ?? `0${index + 1}` }),
+        /* @__PURE__ */ jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-5xl md:text-7xl tracking-tighter", 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: getTextColor(background, "muted"), children: step.description }) : /* @__PURE__ */ jsx("div", { className: getTextColor(background, "muted"), children: step.description }))
+          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { children: step.description }) : step.description)
         ] })
       ]
     }
@@ -494,29 +455,12 @@ function ProcessScrollImage({
   pattern,
   patternOpacity,
   optixFlowConfig,
-  // Backwards compatibility
-  title,
-  ctaText,
-  ctaUrl
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
-  const [active, setActive] = React4.useState(0);
+  const [active, setActive] = React3.useState(0);
   const previousActive = usePrevious(active);
-  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: getAccentColor(background)
-        }
-      )
-    }
-  ] : []);
+  const resolvedHeading = heading;
+  const resolvedActions = actions || [];
   const renderActions = useMemo(() => {
     return () => {
       if (actionsSlot) return actionsSlot;
@@ -585,6 +529,7 @@ function ProcessScrollImage({
       className,
       pattern,
       patternOpacity,
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -610,18 +555,8 @@ function ProcessScrollImage({
                       ),
                       children: resolvedHeading
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "text-base",
-                        getTextColor(background, "muted"),
-                        descriptionClassName
-                      ),
-                      children: description
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                  ) : resolvedHeading),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base", descriptionClassName), children: description }) : description),
                   /* @__PURE__ */ jsxs(
                     "div",
                     {