@opensite/ui 3.3.7 → 3.3.8

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

@@ -453,10 +453,19 @@ function CtaVideoBackgroundHero({
   const [skinClasses, setSkinClasses] = React.useState(null);
   const [skinStyle, setSkinStyle] = React.useState(null);
   React.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);

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

@@ -432,10 +432,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);

package/dist/hero-conversion-video-play.cjs

@@ -684,10 +684,19 @@ function HeroConversionVideoPlay({
   const [skinClasses, setSkinClasses] = React2.useState(null);
   const [skinStyle, setSkinStyle] = React2.useState(null);
   React2.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 = React2.useMemo(() => {
     if (actionsSlot) return actionsSlot;

package/dist/hero-conversion-video-play.js

@@ -657,10 +657,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;

package/dist/hero-creative-studio-stacked.cjs

@@ -576,10 +576,19 @@ function HeroCreativeStudioStacked({
   const [skinClasses, setSkinClasses] = React.useState(null);
   const [skinStyle, setSkinStyle] = React.useState(null);
   React.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) {

package/dist/hero-creative-studio-stacked.js

@@ -553,10 +553,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) {

package/dist/hero-floating-images.cjs

@@ -600,7 +600,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]
@@ -745,7 +745,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",
@@ -765,17 +765,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,
                   {

package/dist/hero-floating-images.js

@@ -579,7 +579,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]
@@ -724,7 +724,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",
@@ -744,17 +744,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,
                   {

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

@@ -547,10 +547,19 @@ function HeroMentorshipVideoSplit({
   const [skinClasses, setSkinClasses] = React.useState(null);
   const [skinStyle, setSkinStyle] = React.useState(null);
   React.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 = React.useMemo(() => {
     if (actionSlot) return actionSlot;

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

@@ -524,10 +524,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;

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

@@ -571,10 +571,19 @@ function HeroSoftwareGrowthVideoDialog({
   const [skinClasses, setSkinClasses] = React.useState(null);
   const [skinStyle, setSkinStyle] = React.useState(null);
   React.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) {

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

@@ -548,10 +548,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) {

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

@@ -572,10 +572,19 @@ function HeroVideoDialogGradient({
   const [skinClasses, setSkinClasses] = React.useState(null);
   const [skinStyle, setSkinStyle] = React.useState(null);
   React.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) {

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

@@ -549,10 +549,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) {

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/registry.cjs

@@ -12576,10 +12576,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 +49683,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 +49828,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 +49848,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 +55144,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 +55335,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 +57151,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 +58163,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 +59073,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) {
@@ -101335,7 +101386,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 +101394,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 +101847,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 +101855,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 +102119,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 +102127,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 +102443,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 +102451,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 +103005,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 +103013,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

@@ -12536,10 +12536,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 +49643,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 +49788,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 +49808,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 +55104,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 +55295,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 +57111,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 +58123,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 +59033,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) {
@@ -101295,7 +101346,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 +101354,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 +101807,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 +101815,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 +102079,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 +102087,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 +102403,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 +102411,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 +102965,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 +102973,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/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/package.json

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