@opensite/ui 3.0.8 → 3.1.0

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

@@ -4,6 +4,7 @@ import React__default, { useState, useMemo, Fragment } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -633,7 +634,15 @@ function HeroVideoDialogGradient({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]

package/dist/hero-video-overlay-stars.cjs

@@ -4,6 +4,7 @@
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var video = require('@page-speed/video');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 var pressable = require('@page-speed/pressable');
@@ -513,7 +514,7 @@ function HeroVideoOverlayStars({
   const renderVideo = React.useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 size-full before:absolute brightness-50", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
+      video.Video,
       {
         src: videoSrc,
         muted: true,

package/dist/hero-video-overlay-stars.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Video } from '@page-speed/video';
 import { Icon } from '@page-speed/icon';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Pressable } from '@page-speed/pressable';
@@ -492,7 +493,7 @@ function HeroVideoOverlayStars({
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 size-full before:absolute brightness-50", children: /* @__PURE__ */ jsx(
-      "video",
+      Video,
       {
         src: videoSrc,
         muted: true,

package/dist/image-slider.cjs

@@ -191,7 +191,7 @@ var ImageSlider = ({
                       activeImage.className
                     ),
                     optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    eager: true
+                    loading: "eager"
                   }
                 )
               },

package/dist/image-slider.js

@@ -169,7 +169,7 @@ var ImageSlider = ({
                       activeImage.className
                     ),
                     optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    eager: true
+                    loading: "eager"
                   }
                 )
               },

package/dist/index.cjs

@@ -957,7 +957,7 @@ var ImageSlider = ({
                       activeImage.className
                     ),
                     optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    eager: true
+                    loading: "eager"
                   }
                 )
               },

package/dist/index.js

@@ -935,7 +935,7 @@ var ImageSlider = ({
                       activeImage.className
                     ),
                     optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    eager: true
+                    loading: "eager"
                   }
                 )
               },

package/dist/link-tree-block.cjs

@@ -10,6 +10,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 var lightbox = require('@page-speed/lightbox');
 
@@ -871,7 +872,7 @@ function LinkTreeBlock({
               "aria-label": `View ${item.alt || item.type} in lightbox`,
               children: [
                 item.type === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "video",
+                  video.Video,
                   {
                     src: item.src,
                     poster: item.poster,

package/dist/link-tree-block.js

@@ -9,6 +9,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import { Lightbox } from '@page-speed/lightbox';
 
@@ -850,7 +851,7 @@ function LinkTreeBlock({
               "aria-label": `View ${item.alt || item.type} in lightbox`,
               children: [
                 item.type === "video" ? /* @__PURE__ */ jsx(
-                  "video",
+                  Video,
                   {
                     src: item.src,
                     poster: item.poster,

package/dist/project-detail-architecture-carousel.cjs

@@ -4,6 +4,7 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -923,7 +924,7 @@ function ProjectDetailArchitectureCarousel(props) {
               transition: { duration: 0.6, delay: 0.2 },
               className: "mb-16",
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "video",
+                video.Video,
                 {
                   src: videoUrl,
                   poster: videoPoster,

package/dist/project-detail-architecture-carousel.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import React__default, { useState, useMemo, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -902,7 +903,7 @@ function ProjectDetailArchitectureCarousel(props) {
               transition: { duration: 0.6, delay: 0.2 },
               className: "mb-16",
               children: /* @__PURE__ */ jsx("div", { className: "relative aspect-video overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsx(
-                "video",
+                Video,
                 {
                   src: videoUrl,
                   poster: videoPoster,

package/dist/project-video-carousel.cjs

@@ -3,6 +3,7 @@
 
 var React4 = require('react');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
@@ -657,19 +658,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-carousel.js

@@ -2,6 +2,7 @@
 import * as React4 from 'react';
 import React4__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -633,19 +634,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-bento.cjs

@@ -3,6 +3,7 @@
 
 var React = require('react');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
@@ -463,19 +464,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-bento.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -442,19 +443,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-grid.cjs

@@ -3,6 +3,7 @@
 
 var React = require('react');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
@@ -463,19 +464,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-grid.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -442,19 +443,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-rounded.cjs

@@ -3,6 +3,7 @@
 
 var React = require('react');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
@@ -463,19 +464,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-rounded.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -442,19 +443,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-stack.cjs

@@ -3,6 +3,7 @@
 
 var React = require('react');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
@@ -463,19 +464,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-stack.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -442,19 +443,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-two-by-two.cjs

@@ -3,6 +3,7 @@
 
 var React = require('react');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
@@ -464,19 +465,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),

package/dist/project-video-hover-two-by-two.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -443,19 +444,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "video",
+        /* @__PURE__ */ jsx(
+          Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),