@opensite/ui 3.3.7 → 3.3.9

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,
@@ -12576,10 +12587,19 @@ function CtaVideoBackgroundHero({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleOpenModal = () => {
     setIsModalOpen(true);
@@ -49674,7 +49694,7 @@ function HeroFloatingImages({
           "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
           zoomIndicatorClassName
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-background/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: zoomIconName, size: 20 }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: zoomIconName, size: 20 }) })
       }
     ),
     [zoomIconName, zoomIndicatorClassName]
@@ -49819,7 +49839,7 @@ function HeroFloatingImages({
             ),
             children: [
               hasContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-center", contentClassName), children: [
-                (badge || badgeIcon) && /* @__PURE__ */ jsxRuntime.jsxs(
+                badge && /* @__PURE__ */ jsxRuntime.jsxs(
                   Badge,
                   {
                     variant: "secondary",
@@ -49839,17 +49859,14 @@ function HeroFloatingImages({
                     ),
                     children: heading
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                ) : heading),
                 description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "p",
                   {
-                    className: cn(
-                      "mb-8 max-w-lg text-lg text-muted-foreground",
-                      descriptionClassName
-                    ),
+                    className: cn("mb-8 max-w-lg text-lg", descriptionClassName),
                     children: description
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                ) : description),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   BlockActions,
                   {
@@ -55138,10 +55155,19 @@ function HeroSoftwareGrowthVideoDialog({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -55320,10 +55346,19 @@ function HeroConversionVideoPlay({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const renderActions = React30.useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -57127,10 +57162,19 @@ function HeroVideoDialogGradient({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -58130,10 +58174,19 @@ function HeroMentorshipVideoSplit({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const renderAction = React30.useMemo(() => {
     if (actionSlot) return actionSlot;
@@ -59031,10 +59084,19 @@ function HeroCreativeStudioStacked({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -78261,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
         ),
@@ -78289,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)
           ] })
@@ -78312,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,
                   {
@@ -101335,7 +101406,7 @@ function LinkTreeBlock({
               "div",
               {
                 className: cn(
-                  "h-24 w-24 overflow-hidden rounded-full border-4 border-background bg-muted shadow-xl",
+                  "flex h-24 w-full max-w-72 items-center justify-center",
                   avatarClassName
                 ),
                 children: resolvedAvatar && /* @__PURE__ */ jsxRuntime.jsx(
@@ -101343,7 +101414,7 @@ function LinkTreeBlock({
                   {
                     src: resolvedAvatar.src,
                     alt: resolvedAvatar.alt,
-                    className: "h-full w-full object-cover",
+                    className: "h-auto max-h-24 w-auto max-w-full object-contain",
                     optixFlowConfig
                   }
                 )
@@ -101796,7 +101867,7 @@ function LinkPageMinimalProfile({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -101804,7 +101875,7 @@ function LinkPageMinimalProfile({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )
@@ -102068,7 +102139,7 @@ function LinkPageNewsletterSocial({
             "div",
             {
               className: cn(
-                "h-24 w-24 overflow-hidden rounded-full bg-muted ring-4 ring-background shadow-lg",
+                "flex h-24 w-full max-w-72 items-center justify-center",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -102076,7 +102147,7 @@ function LinkPageNewsletterSocial({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-24 w-auto max-w-full object-contain",
                   optixFlowConfig
                 }
               )
@@ -102392,7 +102463,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-primary",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -102400,7 +102471,7 @@ function LinkPageGridCards({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )
@@ -102954,7 +103025,7 @@ function LinkPageBentoLayout({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full ring-2 ring-neutral-200",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -102962,7 +103033,7 @@ function LinkPageBentoLayout({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )

package/dist/registry.js

@@ -6,11 +6,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { motion as motion$1, AnimatePresence as AnimatePresence$1 } from 'motion/react';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Icon } from '@page-speed/icon';
-import { Pressable } from '@page-speed/pressable';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { FormEngine, useFileUpload, useContactForm, DynamicFormField, submitPageSpeedForm, PageSpeedFormSubmissionError, isValidEmail } from '@page-speed/forms/integration';
@@ -1718,16 +1718,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,
@@ -12536,10 +12547,19 @@ function CtaVideoBackgroundHero({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleOpenModal = () => {
     setIsModalOpen(true);
@@ -49634,7 +49654,7 @@ function HeroFloatingImages({
           "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
           zoomIndicatorClassName
         ),
-        children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-background/90 shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: zoomIconName, size: 20 }) })
+        children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: zoomIconName, size: 20 }) })
       }
     ),
     [zoomIconName, zoomIndicatorClassName]
@@ -49779,7 +49799,7 @@ function HeroFloatingImages({
             ),
             children: [
               hasContent ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-center", contentClassName), children: [
-                (badge || badgeIcon) && /* @__PURE__ */ jsxs(
+                badge && /* @__PURE__ */ jsxs(
                   Badge,
                   {
                     variant: "secondary",
@@ -49799,17 +49819,14 @@ function HeroFloatingImages({
                     ),
                     children: heading
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                ) : heading),
                 description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                   "p",
                   {
-                    className: cn(
-                      "mb-8 max-w-lg text-lg text-muted-foreground",
-                      descriptionClassName
-                    ),
+                    className: cn("mb-8 max-w-lg text-lg", descriptionClassName),
                     children: description
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                ) : description),
                 /* @__PURE__ */ jsx(
                   BlockActions,
                   {
@@ -55098,10 +55115,19 @@ function HeroSoftwareGrowthVideoDialog({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -55280,10 +55306,19 @@ function HeroConversionVideoPlay({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -57087,10 +57122,19 @@ function HeroVideoDialogGradient({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -58090,10 +58134,19 @@ function HeroMentorshipVideoSplit({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
@@ -58991,10 +59044,19 @@ function HeroCreativeStudioStacked({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -78221,11 +78283,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
         ),
@@ -78249,7 +78311,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)
           ] })
@@ -78272,13 +78334,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,
                   {
@@ -101295,7 +101366,7 @@ function LinkTreeBlock({
               "div",
               {
                 className: cn(
-                  "h-24 w-24 overflow-hidden rounded-full border-4 border-background bg-muted shadow-xl",
+                  "flex h-24 w-full max-w-72 items-center justify-center",
                   avatarClassName
                 ),
                 children: resolvedAvatar && /* @__PURE__ */ jsx(
@@ -101303,7 +101374,7 @@ function LinkTreeBlock({
                   {
                     src: resolvedAvatar.src,
                     alt: resolvedAvatar.alt,
-                    className: "h-full w-full object-cover",
+                    className: "h-auto max-h-24 w-auto max-w-full object-contain",
                     optixFlowConfig
                   }
                 )
@@ -101756,7 +101827,7 @@ function LinkPageMinimalProfile({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -101764,7 +101835,7 @@ function LinkPageMinimalProfile({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )
@@ -102028,7 +102099,7 @@ function LinkPageNewsletterSocial({
             "div",
             {
               className: cn(
-                "h-24 w-24 overflow-hidden rounded-full bg-muted ring-4 ring-background shadow-lg",
+                "flex h-24 w-full max-w-72 items-center justify-center",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -102036,7 +102107,7 @@ function LinkPageNewsletterSocial({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-24 w-auto max-w-full object-contain",
                   optixFlowConfig
                 }
               )
@@ -102352,7 +102423,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-primary",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -102360,7 +102431,7 @@ function LinkPageGridCards({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )
@@ -102914,7 +102985,7 @@ function LinkPageBentoLayout({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full ring-2 ring-neutral-200",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -102922,7 +102993,7 @@ function LinkPageBentoLayout({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )