@opensite/ui 3.3.9 → 3.4.1

package/dist/registry.cjs

@@ -1775,6 +1775,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName
@@ -58377,7 +58380,7 @@ function HeroBusinessOperationsMosaic({
   actionsSlot,
   actionsClassName,
   background,
-  spacing = "xl",
+  spacing = "hero",
   pattern,
   patternOpacity,
   className,
@@ -58439,13 +58442,13 @@ function HeroBusinessOperationsMosaic({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-166.5", mosaicClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.815177479 / 1, children: renderMosaic }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "flex w-full max-w-125 flex-col gap-6 md:gap-14 lg:max-w-full",
+              "flex w-full max-w-full flex-col gap-6",
               contentClassName
             ),
             children: [
@@ -58453,13 +58456,22 @@ function HeroBusinessOperationsMosaic({
                 "h1",
                 {
                   className: cn(
-                    "text-6xl lg:text-7xl xl:text-[5rem] font-semibold",
+                    "text-4xl md:text-5xl lg:text-6xl font-semibold text-pretty leading-tight",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-lg md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {
@@ -58471,7 +58483,7 @@ function HeroBusinessOperationsMosaic({
             ]
           }
         )
-      ] }) })
+      ] })
     }
   );
 }
@@ -78323,11 +78335,11 @@ function ProcessStickySteps({
   const renderSteps = React30.useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("relative w-full min-w-0", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("relative col-span-4 w-full lg:pl-28", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
         className: cn(
-          "relative grid grid-cols-1 gap-6 border-t py-8 md:grid-cols-[auto_minmax(0,1fr)] md:gap-10 lg:py-10",
+          "relative flex flex-col justify-between gap-10 border-t py-8 md:flex-row lg:py-10",
           stepItemClassName,
           step.className
         ),
@@ -78351,7 +78363,7 @@ function ProcessStickySteps({
               children: step.step ?? `0${index + 1}`
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 pr-10", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { 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)
           ] })
@@ -78374,28 +78386,19 @@ function ProcessStickySteps({
         "div",
         {
           className: cn(
-            "grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.35fr)] lg:gap-16 xl:gap-24",
+            "grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-24",
             contentClassName
           ),
           children: [
-            /* @__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.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.jsx(
                   DynamicIcon,
                   {
                     name: "lucide/asterisk",
                     size: 40,
-                    className: "absolute -top-2 -right-2 md:size-10 lg:-right-14"
+                    className: "absolute -top-2 -right-2 md:size-10 lg:-right-10"
                   }
                 )
               ] }),

package/dist/registry.js

@@ -1735,6 +1735,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName
@@ -58337,7 +58340,7 @@ function HeroBusinessOperationsMosaic({
   actionsSlot,
   actionsClassName,
   background,
-  spacing = "xl",
+  spacing = "hero",
   pattern,
   patternOpacity,
   className,
@@ -58399,13 +58402,13 @@ function HeroBusinessOperationsMosaic({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-between gap-14 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-166.5", mosaicClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 0.815177479 / 1, children: renderMosaic }) }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex w-full max-w-125 flex-col gap-6 md:gap-14 lg:max-w-full",
+              "flex w-full max-w-full flex-col gap-6",
               contentClassName
             ),
             children: [
@@ -58413,13 +58416,22 @@ function HeroBusinessOperationsMosaic({
                 "h1",
                 {
                   className: cn(
-                    "text-6xl lg:text-7xl xl:text-[5rem] font-semibold",
+                    "text-4xl md:text-5xl lg:text-6xl font-semibold text-pretty leading-tight",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-lg md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {
@@ -58431,7 +58443,7 @@ function HeroBusinessOperationsMosaic({
             ]
           }
         )
-      ] }) })
+      ] })
     }
   );
 }
@@ -78283,11 +78295,11 @@ function ProcessStickySteps({
   const renderSteps = useMemo(() => {
     if (stepsSlot) return stepsSlot;
     if (!steps?.length) return null;
-    return /* @__PURE__ */ jsx("ul", { className: cn("relative w-full min-w-0", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("ul", { className: cn("relative col-span-4 w-full lg:pl-28", stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: cn(
-          "relative grid grid-cols-1 gap-6 border-t py-8 md:grid-cols-[auto_minmax(0,1fr)] md:gap-10 lg:py-10",
+          "relative flex flex-col justify-between gap-10 border-t py-8 md:flex-row lg:py-10",
           stepItemClassName,
           step.className
         ),
@@ -78311,7 +78323,7 @@ function ProcessStickySteps({
               children: step.step ?? `0${index + 1}`
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 pr-10", children: [
+          /* @__PURE__ */ jsxs("div", { 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)
           ] })
@@ -78334,28 +78346,19 @@ function ProcessStickySteps({
         "div",
         {
           className: cn(
-            "grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.35fr)] lg:gap-16 xl:gap-24",
+            "grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-24",
             contentClassName
           ),
           children: [
-            /* @__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__ */ 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__ */ jsx(
                   DynamicIcon,
                   {
                     name: "lucide/asterisk",
                     size: 40,
-                    className: "absolute -top-2 -right-2 md:size-10 lg:-right-14"
+                    className: "absolute -top-2 -right-2 md:size-10 lg:-right-10"
                   }
                 )
               ] }),

package/dist/social-link-icon.d.cts

@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
  * />
  * ```
  */
-declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
+declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
 
 export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };

package/dist/social-link-icon.d.ts

@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
  * />
  * ```
  */
-declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
+declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
 
 export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };

package/dist/stats-growth-timeline.cjs

@@ -517,6 +517,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/stats-growth-timeline.js

@@ -496,6 +496,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-grid-add-review.cjs

@@ -570,6 +570,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-grid-add-review.js

@@ -548,6 +548,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-masonry-grid.cjs

@@ -518,6 +518,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-masonry-grid.js

@@ -493,6 +493,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-simple-grid.cjs

@@ -528,6 +528,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-simple-grid.js

@@ -503,6 +503,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-stats-header.cjs

@@ -570,6 +570,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-stats-header.js

@@ -548,6 +548,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-twitter-cards.cjs

@@ -661,6 +661,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-twitter-cards.js

@@ -639,6 +639,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-wall-compact.cjs

@@ -552,6 +552,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && pressable.buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/dist/testimonials-wall-compact.js

@@ -527,6 +527,9 @@ function ActionComponent({ action }) {
       asButton: shouldStyleAsButton,
       variant: resolvedVariant,
       size: resolvedSize,
+      "data-slot": shouldStyleAsButton ? "button" : void 0,
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
       className: cn(
         shouldStyleAsButton && buttonVariants({ variant: resolvedVariant, size: resolvedSize }),
         actionClassName

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.3.9",
+  "version": "3.4.1",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",