@opensite/ui 3.3.8 → 3.3.9

package/dist/hero-video-background-dark.cjs

@@ -6,9 +6,9 @@ var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var pressable = require('@page-speed/pressable');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
-var pressable = require('@page-speed/pressable');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -532,16 +532,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     pressable.Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon,

package/dist/hero-video-background-dark.js

@@ -4,9 +4,9 @@ import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { Pressable } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-video-background-dark.tsx
 function cn(...inputs) {
@@ -526,16 +526,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,

package/dist/hero-video-dialog-gradient.cjs

@@ -525,16 +525,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     pressable.Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon,

package/dist/hero-video-dialog-gradient.js

@@ -10,7 +10,7 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Icon } from '@page-speed/icon';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-video-dialog-gradient.tsx
 function cn(...inputs) {
@@ -502,16 +502,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,

package/dist/hero-video-overlay-stars.cjs

@@ -467,16 +467,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     pressable.Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon,

package/dist/hero-video-overlay-stars.js

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import { Video } from '@page-speed/video';
 import { Icon } from '@page-speed/icon';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-video-overlay-stars.tsx
 function cn(...inputs) {
@@ -446,16 +446,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,

package/dist/hero-welcome-asymmetric-images.cjs

@@ -437,16 +437,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     pressable.Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon,

package/dist/hero-welcome-asymmetric-images.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-welcome-asymmetric-images.tsx
 function cn(...inputs) {
@@ -431,16 +431,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,

package/dist/index.cjs

@@ -2024,16 +2024,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     pressable.Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon,

package/dist/index.js

@@ -2002,16 +2002,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,

package/dist/process-sticky-steps.cjs

@@ -466,16 +466,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     pressable.Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon,
@@ -546,11 +557,11 @@ function ProcessStickySteps({
   const renderSteps = React.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("relative col-span-4 w-full lg:pl-22", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("relative w-full min-w-0", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
         className: cn(
-          "relative flex flex-col justify-between gap-10 border-t py-8 md:flex-row lg:py-10",
+          "relative grid grid-cols-1 gap-6 border-t py-8 md:grid-cols-[auto_minmax(0,1fr)] md:gap-10 lg:py-10",
           stepItemClassName,
           step.className
         ),
@@ -574,7 +585,7 @@ function ProcessStickySteps({
               children: step.step ?? `0${index + 1}`
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 pr-10", children: [
             step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
             step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: step.description }) : step.description)
           ] })
@@ -597,13 +608,22 @@ function ProcessStickySteps({
         "div",
         {
           className: cn(
-            "grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20",
+            "grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.35fr)] lg:gap-16 xl:gap-24",
             contentClassName
           ),
           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 }) : heading),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "top-10 h-fit min-w-0 max-w-full space-y-7 py-8 lg:sticky", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative max-w-full text-5xl font-semibold tracking-tight lg:text-6xl xl:text-7xl", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "max-w-[12ch] text-balance break-words",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : heading),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {

package/dist/process-sticky-steps.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 import { Icon } from '@page-speed/icon';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
@@ -445,16 +445,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,
@@ -525,11 +536,11 @@ function ProcessStickySteps({
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
-    return /* @__PURE__ */ jsx("ul", { className: cn("relative col-span-4 w-full lg:pl-22", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("ul", { className: cn("relative w-full min-w-0", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: cn(
-          "relative flex flex-col justify-between gap-10 border-t py-8 md:flex-row lg:py-10",
+          "relative grid grid-cols-1 gap-6 border-t py-8 md:grid-cols-[auto_minmax(0,1fr)] md:gap-10 lg:py-10",
           stepItemClassName,
           step.className
         ),
@@ -553,7 +564,7 @@ function ProcessStickySteps({
               children: step.step ?? `0${index + 1}`
             }
           ),
-          /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 pr-10", children: [
             step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsx(Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
             step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { children: step.description }) : step.description)
           ] })
@@ -576,13 +587,22 @@ function ProcessStickySteps({
         "div",
         {
           className: cn(
-            "grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20",
+            "grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.35fr)] lg:gap-16 xl:gap-24",
             contentClassName
           ),
           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 }) : heading),
+            /* @__PURE__ */ jsxs("div", { className: "top-10 h-fit min-w-0 max-w-full space-y-7 py-8 lg:sticky", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative max-w-full text-5xl font-semibold tracking-tight lg:text-6xl xl:text-7xl", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "max-w-[12ch] text-balance break-words",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : heading),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {

package/dist/registry.cjs

@@ -7,11 +7,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var react = require('motion/react');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
+var pressable = require('@page-speed/pressable');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var icon = require('@page-speed/icon');
-var pressable = require('@page-speed/pressable');
 var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var integration = require('@page-speed/forms/integration');
@@ -1758,16 +1758,27 @@ function ActionComponent({ action }) {
     children,
     href,
     onClick,
+    asButton,
+    variant,
+    size,
     className: actionClassName,
     ...pressableProps
   } = action;
+  const shouldStyleAsButton = asButton ?? true;
+  const resolvedVariant = shouldStyleAsButton ? variant ?? "default" : void 0;
+  const resolvedSize = shouldStyleAsButton ? size ?? "default" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     pressable.Pressable,
     {
       href,
       onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
+      asButton: shouldStyleAsButton,
+      variant: resolvedVariant,
+      size: resolvedSize,
+      className: cn(
+        shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
+        actionClassName
+      ),
       ...pressableProps,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon,
@@ -78312,11 +78323,11 @@ function ProcessStickySteps({
   const renderSteps = React30.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("relative col-span-4 w-full lg:pl-22", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("relative w-full min-w-0", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
         className: cn(
-          "relative flex flex-col justify-between gap-10 border-t py-8 md:flex-row lg:py-10",
+          "relative grid grid-cols-1 gap-6 border-t py-8 md:grid-cols-[auto_minmax(0,1fr)] md:gap-10 lg:py-10",
           stepItemClassName,
           step.className
         ),
@@ -78340,7 +78351,7 @@ function ProcessStickySteps({
               children: step.step ?? `0${index + 1}`
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 pr-10", children: [
             step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) }) : /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: step.href, className: "mb-4 block", children: step.title })),
             step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: step.description }) : step.description)
           ] })
@@ -78363,13 +78374,22 @@ function ProcessStickySteps({
         "div",
         {
           className: cn(
-            "grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20",
+            "grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.35fr)] lg:gap-16 xl:gap-24",
             contentClassName
           ),
           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 }) : heading),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "top-10 h-fit min-w-0 max-w-full space-y-7 py-8 lg:sticky", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative max-w-full text-5xl font-semibold tracking-tight lg:text-6xl xl:text-7xl", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "max-w-[12ch] text-balance break-words",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : heading),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {