@opensite/ui 3.3.7 → 3.3.9

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/link-page-bento-layout.cjs

@@ -835,7 +835,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(
@@ -843,7 +843,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/link-page-bento-layout.js

@@ -814,7 +814,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(
@@ -822,7 +822,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/link-page-grid-cards.cjs

@@ -567,7 +567,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(
@@ -575,7 +575,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
                 }
               )

package/dist/link-page-grid-cards.js

@@ -546,7 +546,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(
@@ -554,7 +554,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
                 }
               )

package/dist/link-page-minimal-profile.cjs

@@ -564,7 +564,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(
@@ -572,7 +572,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
                 }
               )

package/dist/link-page-minimal-profile.js

@@ -543,7 +543,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(
@@ -551,7 +551,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
                 }
               )

package/dist/link-page-newsletter-social.cjs

@@ -594,7 +594,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(
@@ -602,7 +602,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
                 }
               )

package/dist/link-page-newsletter-social.js

@@ -573,7 +573,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(
@@ -581,7 +581,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
                 }
               )

package/dist/link-tree-block.cjs

@@ -649,7 +649,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(
@@ -657,7 +657,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
                   }
                 )

package/dist/link-tree-block.js

@@ -628,7 +628,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(
@@ -636,7 +636,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
                   }
                 )

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,
                   {