@opensite/ui 0.4.1 → 0.4.3

package/dist/process-roadmap-timeline.js

@@ -440,6 +440,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -459,7 +460,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -476,7 +477,10 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var StatusBadge = ({ status, className }) => {
+var StatusBadge = ({
+  status,
+  className
+}) => {
   const config = {
     completed: {
       label: "Completed",
@@ -624,11 +628,37 @@ function ProcessRoadmapTimeline({
       patternOpacity,
       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", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-lg text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                headingClassName
+              ),
+              children: resolvedHeading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-lg text-foreground/50",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-4xl", timelineClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: cn("absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border", timelineLineClassName) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border",
+                timelineLineClassName
+              )
+            }
+          ),
           renderMilestones()
         ] })
       ] })

package/dist/process-scroll-image.cjs

@@ -882,6 +882,7 @@ var Section = React6__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -901,7 +902,7 @@ var Section = React6__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -927,7 +928,12 @@ var usePrevious = (value) => {
   }, [value]);
   return prev;
 };
-var ProcessCard = ({ step, index, setActive, itemClassName }) => {
+var ProcessCard = ({
+  step,
+  index,
+  setActive,
+  itemClassName
+}) => {
   const ref = React6__namespace.useRef(null);
   const itemInView = framerMotion.useInView(ref, {
     amount: 0,
@@ -986,17 +992,41 @@ function ProcessScrollImage({
   const [active, setActive] = React6__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: "text-primary" }) }] : []);
+  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 = () => {
     if (actionsSlot) return actionsSlot;
     if (!resolvedActions || resolvedActions.length === 0) 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;
+      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),
+          className: cn(
+            "flex items-center justify-start gap-2",
+            actionClassName
+          ),
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
@@ -1033,48 +1063,93 @@ function ProcessScrollImage({
       className,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-20", contentClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("top-10 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", sidebarClassName), children: [
-          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative h-90 overflow-hidden border", imageContainerClassName), children: [
-            previousActive !== void 0 && steps && steps[previousActive] && steps[previousActive].image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-20",
+            contentClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                src: steps[previousActive].image,
-                alt: getStepTitle(steps[previousActive]),
-                className: "h-full w-full object-cover",
-                optixFlowConfig
+                className: cn(
+                  "top-10 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky",
+                  sidebarClassName
+                ),
+                children: [
+                  resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl",
+                        headingClassName
+                      ),
+                      children: resolvedHeading
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-base text-foreground/50",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "relative h-90 overflow-hidden border",
+                        imageContainerClassName
+                      ),
+                      children: [
+                        previousActive !== void 0 && steps && steps[previousActive] && steps[previousActive].image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          img.Img,
+                          {
+                            src: steps[previousActive].image,
+                            alt: getStepTitle(steps[previousActive]),
+                            className: "h-full w-full object-cover",
+                            optixFlowConfig
+                          }
+                        ) }),
+                        steps && steps[active] && steps[active].image && /* @__PURE__ */ jsxRuntime.jsx(
+                          framerMotion.motion.div,
+                          {
+                            initial: { clipPath: "inset(100% 100% 0% 0%)" },
+                            animate: { clipPath: "inset(0% 0% 0% 0%)" },
+                            transition: {
+                              type: "spring",
+                              stiffness: 150,
+                              damping: 20
+                            },
+                            className: "h-full w-full",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              img.Img,
+                              {
+                                src: steps[active].image,
+                                alt: getStepTitle(steps[active]),
+                                className: "h-full w-full object-cover",
+                                optixFlowConfig
+                              }
+                            )
+                          },
+                          active
+                        )
+                      ]
+                    }
+                  ),
+                  renderActions()
+                ]
               }
-            ) }),
-            steps && steps[active] && steps[active].image && /* @__PURE__ */ jsxRuntime.jsx(
-              framerMotion.motion.div,
-              {
-                initial: { clipPath: "inset(100% 100% 0% 0%)" },
-                animate: { clipPath: "inset(0% 0% 0% 0%)" },
-                transition: {
-                  type: "spring",
-                  stiffness: 150,
-                  damping: 20
-                },
-                className: "h-full w-full",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: steps[active].image,
-                    alt: getStepTitle(steps[active]),
-                    className: "h-full w-full object-cover",
-                    optixFlowConfig
-                  }
-                )
-              },
-              active
-            )
-          ] }),
-          renderActions()
-        ] }),
-        renderSteps()
-      ] })
+            ),
+            renderSteps()
+          ]
+        }
+      )
     }
   );
 }

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -105,7 +104,7 @@ interface ProcessScrollImageProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -105,7 +104,7 @@ interface ProcessScrollImageProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/process-scroll-image.js

@@ -861,6 +861,7 @@ var Section = React6__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -880,7 +881,7 @@ var Section = React6__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -906,7 +907,12 @@ var usePrevious = (value) => {
   }, [value]);
   return prev;
 };
-var ProcessCard = ({ step, index, setActive, itemClassName }) => {
+var ProcessCard = ({
+  step,
+  index,
+  setActive,
+  itemClassName
+}) => {
   const ref = React6.useRef(null);
   const itemInView = useInView(ref, {
     amount: 0,
@@ -965,17 +971,41 @@ function ProcessScrollImage({
   const [active, setActive] = React6.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: "text-primary" }) }] : []);
+  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 = () => {
     if (actionsSlot) return actionsSlot;
     if (!resolvedActions || resolvedActions.length === 0) 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;
+      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),
+          className: cn(
+            "flex items-center justify-start gap-2",
+            actionClassName
+          ),
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
@@ -1012,48 +1042,93 @@ function ProcessScrollImage({
       className,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-20", contentClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("top-10 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", sidebarClassName), children: [
-          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsxs("div", { className: cn("relative h-90 overflow-hidden border", imageContainerClassName), children: [
-            previousActive !== void 0 && steps && steps[previousActive] && steps[previousActive].image && /* @__PURE__ */ jsx("div", { className: "absolute top-0 h-full w-full", children: /* @__PURE__ */ jsx(
-              Img,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-20",
+            contentClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                src: steps[previousActive].image,
-                alt: getStepTitle(steps[previousActive]),
-                className: "h-full w-full object-cover",
-                optixFlowConfig
+                className: cn(
+                  "top-10 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky",
+                  sidebarClassName
+                ),
+                children: [
+                  resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl",
+                        headingClassName
+                      ),
+                      children: resolvedHeading
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-base text-foreground/50",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "relative h-90 overflow-hidden border",
+                        imageContainerClassName
+                      ),
+                      children: [
+                        previousActive !== void 0 && steps && steps[previousActive] && steps[previousActive].image && /* @__PURE__ */ jsx("div", { className: "absolute top-0 h-full w-full", children: /* @__PURE__ */ jsx(
+                          Img,
+                          {
+                            src: steps[previousActive].image,
+                            alt: getStepTitle(steps[previousActive]),
+                            className: "h-full w-full object-cover",
+                            optixFlowConfig
+                          }
+                        ) }),
+                        steps && steps[active] && steps[active].image && /* @__PURE__ */ jsx(
+                          motion.div,
+                          {
+                            initial: { clipPath: "inset(100% 100% 0% 0%)" },
+                            animate: { clipPath: "inset(0% 0% 0% 0%)" },
+                            transition: {
+                              type: "spring",
+                              stiffness: 150,
+                              damping: 20
+                            },
+                            className: "h-full w-full",
+                            children: /* @__PURE__ */ jsx(
+                              Img,
+                              {
+                                src: steps[active].image,
+                                alt: getStepTitle(steps[active]),
+                                className: "h-full w-full object-cover",
+                                optixFlowConfig
+                              }
+                            )
+                          },
+                          active
+                        )
+                      ]
+                    }
+                  ),
+                  renderActions()
+                ]
               }
-            ) }),
-            steps && steps[active] && steps[active].image && /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                initial: { clipPath: "inset(100% 100% 0% 0%)" },
-                animate: { clipPath: "inset(0% 0% 0% 0%)" },
-                transition: {
-                  type: "spring",
-                  stiffness: 150,
-                  damping: 20
-                },
-                className: "h-full w-full",
-                children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: steps[active].image,
-                    alt: getStepTitle(steps[active]),
-                    className: "h-full w-full object-cover",
-                    optixFlowConfig
-                  }
-                )
-              },
-              active
-            )
-          ] }),
-          renderActions()
-        ] }),
-        renderSteps()
-      ] })
+            ),
+            renderSteps()
+          ]
+        }
+      )
     }
   );
 }

package/dist/process-steps-grid.cjs

@@ -461,6 +461,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -480,7 +481,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -521,28 +522,43 @@ function ProcessStepsGrid({
   const renderSteps = () => {
     if (stepsSlot) return stepsSlot;
     if (!steps || steps.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", stepsGridClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cn(
-          "group relative overflow-hidden rounded-lg border bg-card p-8 transition-all hover:border-primary/50 hover:shadow-lg",
-          stepCardClassName,
-          step.className
+          "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          stepsGridClassName
         ),
-        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.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",
-              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-foreground/50 leading-relaxed", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50 leading-relaxed", children: step.description }))
-          ] })
-        ]
-      },
-      index
-    )) });
+        children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "group relative overflow-hidden rounded-lg border bg-card p-8 transition-all hover:border-primary/50 hover:shadow-lg",
+              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.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",
+                      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-foreground/50 leading-relaxed", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50 leading-relaxed", children: step.description }))
+              ] })
+            ]
+          },
+          index
+        ))
+      }
+    );
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -554,8 +570,26 @@ function ProcessStepsGrid({
       patternOpacity,
       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", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-lg text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                headingClassName
+              ),
+              children: resolvedHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-lg text-foreground/50",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         renderSteps()
       ] })

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -93,7 +92,7 @@ interface ProcessStepsGridProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */