@opensite/ui 3.3.7 → 3.3.9

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

@@ -525,16 +525,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,
@@ -576,10 +587,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

@@ -10,7 +10,7 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Icon } from '@page-speed/icon';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-creative-studio-stacked.tsx
 function cn(...inputs) {
@@ -502,16 +502,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,
@@ -553,10 +564,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-crm-streamlined.cjs

@@ -437,16 +437,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/hero-crm-streamlined.js

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // lib/utils.ts
 function cn(...inputs) {
@@ -431,16 +431,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/hero-customer-support-layered.cjs

@@ -437,16 +437,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/hero-customer-support-layered.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-customer-support-layered.tsx
 function cn(...inputs) {
@@ -431,16 +431,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/hero-design-carousel-portfolio.cjs

@@ -604,16 +604,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/hero-design-carousel-portfolio.js

@@ -9,7 +9,7 @@ import { Icon } from '@page-speed/icon';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import useEmblaCarousel from 'embla-carousel-react';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-design-carousel-portfolio.tsx
 function cn(...inputs) {
@@ -578,16 +578,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/hero-design-showcase-logos.cjs

@@ -437,16 +437,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/hero-design-showcase-logos.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-design-showcase-logos.tsx
 function cn(...inputs) {
@@ -431,16 +431,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/hero-design-system-3d.cjs

@@ -467,16 +467,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/hero-design-system-3d.js

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-design-system-3d.tsx
 function cn(...inputs) {
@@ -446,16 +446,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/hero-developer-tools-code.cjs

@@ -500,16 +500,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/hero-developer-tools-code.js

@@ -7,7 +7,7 @@ import { Icon } from '@page-speed/icon';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-developer-tools-code.tsx
 function cn(...inputs) {
@@ -479,16 +479,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/hero-digital-agency-fullscreen.cjs

@@ -437,16 +437,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/hero-digital-agency-fullscreen.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Pressable } from '@page-speed/pressable';
+import { Pressable, buttonVariants } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-digital-agency-fullscreen.tsx
 function cn(...inputs) {
@@ -431,16 +431,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,