@opensite/ui 3.7.5 → 3.7.6

package/dist/hero-event-registration.cjs

@@ -725,7 +725,8 @@ function HeroEventRegistration({
               src: image.src,
               alt: image.alt,
               className: cn("aspect-square w-full object-cover", image.className),
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           )
         }

package/dist/hero-event-registration.js

@@ -704,7 +704,8 @@ function HeroEventRegistration({
               src: image.src,
               alt: image.alt,
               className: cn("aspect-square w-full object-cover", image.className),
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           )
         }

package/dist/hero-gradient-avatars-rating.cjs

@@ -657,7 +657,8 @@ function HeroGradientAvatarsRating({
                     "h-full w-full object-cover transition-transform duration-300 hover:scale-105",
                     images[0].className
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               )
             }
@@ -677,7 +678,8 @@ function HeroGradientAvatarsRating({
                     "h-full w-full object-cover transition-transform duration-300 hover:scale-105",
                     images[1].className
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               )
             }

package/dist/hero-gradient-avatars-rating.js

@@ -635,7 +635,8 @@ function HeroGradientAvatarsRating({
                     "h-full w-full object-cover transition-transform duration-300 hover:scale-105",
                     images[0].className
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               )
             }
@@ -655,7 +656,8 @@ function HeroGradientAvatarsRating({
                     "h-full w-full object-cover transition-transform duration-300 hover:scale-105",
                     images[1].className
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               )
             }

package/dist/hero-mental-health-team.cjs

@@ -488,7 +488,7 @@ function HeroMentalHealthTeam({
   pattern,
   patternOpacity,
   className,
-  spacing = "xl",
+  spacing = "hero",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
@@ -508,7 +508,8 @@ function HeroMentalHealthTeam({
             "block h-full w-full object-cover object-center",
             smallImages[0].className
           ),
-          optixFlowConfig
+          optixFlowConfig,
+          loading: "eager"
         }
       ) }) }),
       smallImages[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[2/3] row-[1/2] w-full md:col-[2/3] md:row-[1/2]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full max-h-77.5 w-full overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -520,7 +521,8 @@ function HeroMentalHealthTeam({
             "block h-full w-full object-cover object-center",
             smallImages[1].className
           ),
-          optixFlowConfig
+          optixFlowConfig,
+          loading: "eager"
         }
       ) }) })
     ] });
@@ -542,16 +544,17 @@ function HeroMentalHealthTeam({
               src: avatarSrc,
               alt: testimonial.avatar?.alt ?? "",
               className: "h-full w-full object-cover object-center",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2 opacity-70", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-medium", children: [
               '"',
               testimonial.quote,
               '"'
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "", children: testimonial.author })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: testimonial.author })
           ] })
         ]
       }
@@ -569,7 +572,8 @@ function HeroMentalHealthTeam({
           "block h-full w-full object-cover object-center",
           featureImage.className
         ),
-        optixFlowConfig
+        optixFlowConfig,
+        loading: "eager"
       }
     ) }) });
   }, [featureImageSlot, featureImage, optixFlowConfig]);
@@ -601,16 +605,7 @@ function HeroMentalHealthTeam({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              )),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
@@ -620,7 +615,7 @@ function HeroMentalHealthTeam({
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {

package/dist/hero-mental-health-team.js

@@ -482,7 +482,7 @@ function HeroMentalHealthTeam({
   pattern,
   patternOpacity,
   className,
-  spacing = "xl",
+  spacing = "hero",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
@@ -502,7 +502,8 @@ function HeroMentalHealthTeam({
             "block h-full w-full object-cover object-center",
             smallImages[0].className
           ),
-          optixFlowConfig
+          optixFlowConfig,
+          loading: "eager"
         }
       ) }) }),
       smallImages[1] && /* @__PURE__ */ jsx("div", { className: "col-[2/3] row-[1/2] w-full md:col-[2/3] md:row-[1/2]", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-77.5 w-full overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsx(
@@ -514,7 +515,8 @@ function HeroMentalHealthTeam({
             "block h-full w-full object-cover object-center",
             smallImages[1].className
           ),
-          optixFlowConfig
+          optixFlowConfig,
+          loading: "eager"
         }
       ) }) })
     ] });
@@ -536,16 +538,17 @@ function HeroMentalHealthTeam({
               src: avatarSrc,
               alt: testimonial.avatar?.alt ?? "",
               className: "h-full w-full object-cover object-center",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2 opacity-70", children: [
             /* @__PURE__ */ jsxs("p", { className: "text-lg font-medium", children: [
               '"',
               testimonial.quote,
               '"'
             ] }),
-            /* @__PURE__ */ jsx("p", { className: "", children: testimonial.author })
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: testimonial.author })
           ] })
         ]
       }
@@ -563,7 +566,8 @@ function HeroMentalHealthTeam({
           "block h-full w-full object-cover object-center",
           featureImage.className
         ),
-        optixFlowConfig
+        optixFlowConfig,
+        loading: "eager"
       }
     ) }) });
   }, [featureImageSlot, featureImage, optixFlowConfig]);
@@ -595,16 +599,7 @@ function HeroMentalHealthTeam({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              )),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
@@ -614,7 +609,7 @@ function HeroMentalHealthTeam({
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {

package/dist/hero-mentorship-video-split.cjs

@@ -590,7 +590,7 @@ function HeroMentorshipVideoSplit({
         {
           onClick: () => setIsVideoOpen(true),
           className: cn(
-            "group relative flex overflow-hidden rounded-lg p-0",
+            "group relative flex overflow-hidden rounded-lg p-0 cursor-pointer",
             videoAspectRatio === "vertical" ? "h-36 w-20" : "h-20 w-36"
           ),
           children: /* @__PURE__ */ jsxRuntime.jsxs(AspectRatio, { ratio: aspectRatio, className: "flex h-full w-full", children: [
@@ -606,14 +606,7 @@ function HeroMentorshipVideoSplit({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-auto aspect-square z-10 bg-card text-card-foreground p-2 rounded-xl shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
-              DynamicIcon,
-              {
-                name: "lucide/play",
-                size: 24,
-                className: "transition-transform group-hover:scale-125"
-              }
-            ) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-auto aspect-square z-10 bg-card text-card-foreground p-2 rounded-xl ring-4 ring-card flex items-center justify-center opacity-80 hover:opacity-100 transition-all duration-500", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 24 }) })
           ] })
         }
       )
@@ -678,7 +671,7 @@ function HeroMentorshipVideoSplit({
                     "p",
                     {
                       className: cn(
-                        "text-lg font-medium md:text-xl",
+                        "text-lg font-normal md:text-xl text-pretty",
                         descriptionClassName
                       ),
                       children: description

package/dist/hero-mentorship-video-split.js

@@ -567,7 +567,7 @@ function HeroMentorshipVideoSplit({
         {
           onClick: () => setIsVideoOpen(true),
           className: cn(
-            "group relative flex overflow-hidden rounded-lg p-0",
+            "group relative flex overflow-hidden rounded-lg p-0 cursor-pointer",
             videoAspectRatio === "vertical" ? "h-36 w-20" : "h-20 w-36"
           ),
           children: /* @__PURE__ */ jsxs(AspectRatio, { ratio: aspectRatio, className: "flex h-full w-full", children: [
@@ -583,14 +583,7 @@ function HeroMentorshipVideoSplit({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "m-auto aspect-square z-10 bg-card text-card-foreground p-2 rounded-xl shadow-xl", children: /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/play",
-                size: 24,
-                className: "transition-transform group-hover:scale-125"
-              }
-            ) })
+            /* @__PURE__ */ jsx("div", { className: "m-auto aspect-square z-10 bg-card text-card-foreground p-2 rounded-xl ring-4 ring-card flex items-center justify-center opacity-80 hover:opacity-100 transition-all duration-500", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 24 }) })
           ] })
         }
       )
@@ -655,7 +648,7 @@ function HeroMentorshipVideoSplit({
                     "p",
                     {
                       className: cn(
-                        "text-lg font-medium md:text-xl",
+                        "text-lg font-normal md:text-xl text-pretty",
                         descriptionClassName
                       ),
                       children: description

package/dist/hero-product-showcase-floating.cjs

@@ -670,7 +670,8 @@ function HeroProductShowcaseFloating({
             "size-8 rounded-full border-2 border-background object-cover",
             avatar.className
           ),
-          optixFlowConfig
+          optixFlowConfig,
+          loading: "eager"
         },
         idx
       )) }),
@@ -693,7 +694,8 @@ function HeroProductShowcaseFloating({
             "h-full w-full rounded-lg object-cover shadow-2xl",
             productImage.className
           ),
-          optixFlowConfig
+          optixFlowConfig,
+          loading: "eager"
         }
       ) }),
       renderFloatingStat,

package/dist/hero-product-showcase-floating.js

@@ -649,7 +649,8 @@ function HeroProductShowcaseFloating({
             "size-8 rounded-full border-2 border-background object-cover",
             avatar.className
           ),
-          optixFlowConfig
+          optixFlowConfig,
+          loading: "eager"
         },
         idx
       )) }),
@@ -672,7 +673,8 @@ function HeroProductShowcaseFloating({
             "h-full w-full rounded-lg object-cover shadow-2xl",
             productImage.className
           ),
-          optixFlowConfig
+          optixFlowConfig,
+          loading: "eager"
         }
       ) }),
       renderFloatingStat,

package/dist/hero-saas-dashboard-preview.cjs

@@ -651,7 +651,8 @@ function HeroSaasDashboardPreview({
                 src: browserPreview.image.src,
                 alt: browserPreview.image.alt,
                 className: cn("w-full", browserPreview.image.className),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             )
           ]

package/dist/hero-saas-dashboard-preview.js

@@ -630,7 +630,8 @@ function HeroSaasDashboardPreview({
                 src: browserPreview.image.src,
                 alt: browserPreview.image.alt,
                 className: cn("w-full", browserPreview.image.className),
-                optixFlowConfig
+                optixFlowConfig,
+                loading: "eager"
               }
             )
           ]

package/dist/hero-software-growth-video-dialog.cjs

@@ -690,7 +690,8 @@ function HeroSoftwareGrowthVideoDialog({
               "size-full object-cover object-center rounded-xl shadow-xl",
               showcaseImages[index].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }) }, index))
       }

package/dist/hero-software-growth-video-dialog.js

@@ -667,7 +667,8 @@ function HeroSoftwareGrowthVideoDialog({
               "size-full object-cover object-center rounded-xl shadow-xl",
               showcaseImages[index].className
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }) }, index))
       }

package/dist/hero-split-icon-cards.cjs

@@ -33,36 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
@@ -543,30 +513,19 @@ function HeroSplitIconCards({
     if (cardsSlot) return cardsSlot;
     if (!cardItems || cardItems.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4", children: cardItems.map((item, idx) => {
-      const card = /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4 p-6", children: [
+      const card = /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full border-border/60 px-0 py-0 hover:shadow-xl duration-500 transition-all", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4 p-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "flex h-14 w-14 items-center justify-center rounded-xl",
-              `${getAccentColor(background)}/10`,
-              getAccentColor(background)
+              "flex h-14 w-14 items-center justify-center rounded-xl bg-primary text-primary-foreground"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold ", children: item.title }),
-          item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "mt-2 text-sm",
-                getTextColor(background, "muted")
-              ),
-              children: item.subtitle
-            }
-          ) : null
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-card-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold", children: item.title }),
+          item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm opacity-70"), children: item.subtitle }) : null
         ] })
       ] }) });
       return item.href ? /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: item.href, className: "block", children: card }, idx) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: card }, idx);
@@ -588,8 +547,7 @@ function HeroSplitIconCards({
             "p",
             {
               className: cn(
-                "text-xs font-semibold uppercase tracking-[0.25em]",
-                getAccentColor(background)
+                "text-xs font-semibold uppercase tracking-[0.25em]"
               ),
               children: eyebrow
             }
@@ -614,17 +572,7 @@ function HeroSplitIconCards({
               children: heading
             }
           )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         renderCards

package/dist/hero-split-icon-cards.js

@@ -12,36 +12,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
@@ -522,30 +492,19 @@ function HeroSplitIconCards({
     if (cardsSlot) return cardsSlot;
     if (!cardItems || cardItems.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4", children: cardItems.map((item, idx) => {
-      const card = /* @__PURE__ */ jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-6", children: [
+      const card = /* @__PURE__ */ jsx(Card, { className: "h-full border-border/60 px-0 py-0 hover:shadow-xl duration-500 transition-all", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-6", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "flex h-14 w-14 items-center justify-center rounded-xl",
-              `${getAccentColor(background)}/10`,
-              getAccentColor(background)
+              "flex h-14 w-14 items-center justify-center rounded-xl bg-primary text-primary-foreground"
             ),
             children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 24 })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold ", children: item.title }),
-          item.subtitle ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mt-2 text-sm",
-                getTextColor(background, "muted")
-              ),
-              children: item.subtitle
-            }
-          ) : null
+        /* @__PURE__ */ jsxs("div", { className: "text-card-foreground", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: item.title }),
+          item.subtitle ? /* @__PURE__ */ jsx("p", { className: cn("text-sm opacity-70"), children: item.subtitle }) : null
         ] })
       ] }) });
       return item.href ? /* @__PURE__ */ jsx(Pressable, { href: item.href, className: "block", children: card }, idx) : /* @__PURE__ */ jsx("div", { children: card }, idx);
@@ -567,8 +526,7 @@ function HeroSplitIconCards({
             "p",
             {
               className: cn(
-                "text-xs font-semibold uppercase tracking-[0.25em]",
-                getAccentColor(background)
+                "text-xs font-semibold uppercase tracking-[0.25em]"
               ),
               children: eyebrow
             }
@@ -593,17 +551,7 @@ function HeroSplitIconCards({
               children: heading
             }
           )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         renderCards