@opensite/ui 3.0.9 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/cta-video-background-hero.cjs +13 -4
  2. package/dist/cta-video-background-hero.js +13 -4
  3. package/dist/faq-split-hero.cjs +5 -4
  4. package/dist/faq-split-hero.js +2 -1
  5. package/dist/hero-conversion-video-play.cjs +10 -1
  6. package/dist/hero-conversion-video-play.js +10 -1
  7. package/dist/hero-creative-studio-stacked.cjs +10 -1
  8. package/dist/hero-creative-studio-stacked.js +10 -1
  9. package/dist/hero-mentorship-video-split.cjs +10 -1
  10. package/dist/hero-mentorship-video-split.js +10 -1
  11. package/dist/hero-presentation-platform-video.cjs +4 -3
  12. package/dist/hero-presentation-platform-video.js +4 -3
  13. package/dist/hero-productivity-launcher-video.cjs +2 -1
  14. package/dist/hero-productivity-launcher-video.js +2 -1
  15. package/dist/hero-software-growth-video-dialog.cjs +10 -1
  16. package/dist/hero-software-growth-video-dialog.js +10 -1
  17. package/dist/hero-video-background-dark.cjs +5 -4
  18. package/dist/hero-video-background-dark.js +5 -4
  19. package/dist/hero-video-dialog-gradient.cjs +10 -1
  20. package/dist/hero-video-dialog-gradient.js +10 -1
  21. package/dist/hero-video-overlay-stars.cjs +2 -1
  22. package/dist/hero-video-overlay-stars.js +2 -1
  23. package/dist/link-tree-block.cjs +2 -1
  24. package/dist/link-tree-block.js +2 -1
  25. package/dist/project-detail-architecture-carousel.cjs +2 -1
  26. package/dist/project-detail-architecture-carousel.js +2 -1
  27. package/dist/project-video-carousel.cjs +5 -7
  28. package/dist/project-video-carousel.js +5 -7
  29. package/dist/project-video-hover-bento.cjs +5 -7
  30. package/dist/project-video-hover-bento.js +5 -7
  31. package/dist/project-video-hover-grid.cjs +5 -7
  32. package/dist/project-video-hover-grid.js +5 -7
  33. package/dist/project-video-hover-rounded.cjs +5 -7
  34. package/dist/project-video-hover-rounded.js +5 -7
  35. package/dist/project-video-hover-stack.cjs +5 -7
  36. package/dist/project-video-hover-stack.js +5 -7
  37. package/dist/project-video-hover-two-by-two.cjs +5 -7
  38. package/dist/project-video-hover-two-by-two.js +5 -7
  39. package/dist/registry.cjs +98 -67
  40. package/dist/registry.js +95 -64
  41. package/dist/services-list-video-showcase.cjs +2 -1
  42. package/dist/services-list-video-showcase.js +2 -1
  43. package/dist/social-link-icon.d.cts +1 -1
  44. package/dist/social-link-icon.d.ts +1 -1
  45. package/package.json +3 -1
package/dist/project-video-carousel.cjs CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var React4 = require('react');
5
5
  var img = require('@page-speed/img');
6
+ var video = require('@page-speed/video');
6
7
  var clsx = require('clsx');
7
8
  var tailwindMerge = require('tailwind-merge');
8
9
  var icon = require('@page-speed/icon');
@@ -657,19 +658,16 @@ var VideoSection = ({
657
658
  optixFlowConfig
658
659
  }
659
660
  ),
660
- /* @__PURE__ */ jsxRuntime.jsxs(
661
- "video",
661
+ /* @__PURE__ */ jsxRuntime.jsx(
662
+ video.Video,
662
663
  {
663
664
  ref: videoRef,
665
+ src: videoSrc,
664
666
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
665
667
  muted: true,
666
668
  loop: true,
667
669
  playsInline: true,
668
- preload: "metadata",
669
- children: [
670
- /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
671
- "Your browser does not support the video tag."
672
- ]
670
+ preload: "metadata"
673
671
  }
674
672
  ),
675
673
  /* @__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 CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as React4 from 'react';
3
3
  import React4__default, { useMemo, useRef, useState, useEffect } from 'react';
4
4
  import { Img } from '@page-speed/img';
5
+ import { Video } from '@page-speed/video';
5
6
  import { clsx } from 'clsx';
6
7
  import { twMerge } from 'tailwind-merge';
7
8
  import { Icon } from '@page-speed/icon';
@@ -633,19 +634,16 @@ var VideoSection = ({
633
634
  optixFlowConfig
634
635
  }
635
636
  ),
636
- /* @__PURE__ */ jsxs(
637
- "video",
637
+ /* @__PURE__ */ jsx(
638
+ Video,
638
639
  {
639
640
  ref: videoRef,
641
+ src: videoSrc,
640
642
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
641
643
  muted: true,
642
644
  loop: true,
643
645
  playsInline: true,
644
- preload: "metadata",
645
- children: [
646
- /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
647
- "Your browser does not support the video tag."
648
- ]
646
+ preload: "metadata"
649
647
  }
650
648
  ),
651
649
  /* @__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 CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var React = require('react');
5
5
  var img = require('@page-speed/img');
6
+ var video = require('@page-speed/video');
6
7
  var clsx = require('clsx');
7
8
  var tailwindMerge = require('tailwind-merge');
8
9
  var icon = require('@page-speed/icon');
@@ -463,19 +464,16 @@ var VideoSection = ({
463
464
  optixFlowConfig
464
465
  }
465
466
  ),
466
- /* @__PURE__ */ jsxRuntime.jsxs(
467
- "video",
467
+ /* @__PURE__ */ jsxRuntime.jsx(
468
+ video.Video,
468
469
  {
469
470
  ref: videoRef,
471
+ src: videoSrc,
470
472
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
471
473
  muted: true,
472
474
  loop: true,
473
475
  playsInline: true,
474
- preload: "metadata",
475
- children: [
476
- /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
477
- "Your browser does not support the video tag."
478
- ]
476
+ preload: "metadata"
479
477
  }
480
478
  ),
481
479
  /* @__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 CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as React from 'react';
3
3
  import React__default, { useMemo, useRef, useState, useEffect } from 'react';
4
4
  import { Img } from '@page-speed/img';
5
+ import { Video } from '@page-speed/video';
5
6
  import { clsx } from 'clsx';
6
7
  import { twMerge } from 'tailwind-merge';
7
8
  import { Icon } from '@page-speed/icon';
@@ -442,19 +443,16 @@ var VideoSection = ({
442
443
  optixFlowConfig
443
444
  }
444
445
  ),
445
- /* @__PURE__ */ jsxs(
446
- "video",
446
+ /* @__PURE__ */ jsx(
447
+ Video,
447
448
  {
448
449
  ref: videoRef,
450
+ src: videoSrc,
449
451
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
450
452
  muted: true,
451
453
  loop: true,
452
454
  playsInline: true,
453
- preload: "metadata",
454
- children: [
455
- /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
456
- "Your browser does not support the video tag."
457
- ]
455
+ preload: "metadata"
458
456
  }
459
457
  ),
460
458
  /* @__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 CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var React = require('react');
5
5
  var img = require('@page-speed/img');
6
+ var video = require('@page-speed/video');
6
7
  var clsx = require('clsx');
7
8
  var tailwindMerge = require('tailwind-merge');
8
9
  var icon = require('@page-speed/icon');
@@ -463,19 +464,16 @@ var VideoSection = ({
463
464
  optixFlowConfig
464
465
  }
465
466
  ),
466
- /* @__PURE__ */ jsxRuntime.jsxs(
467
- "video",
467
+ /* @__PURE__ */ jsxRuntime.jsx(
468
+ video.Video,
468
469
  {
469
470
  ref: videoRef,
471
+ src: videoSrc,
470
472
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
471
473
  muted: true,
472
474
  loop: true,
473
475
  playsInline: true,
474
- preload: "metadata",
475
- children: [
476
- /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
477
- "Your browser does not support the video tag."
478
- ]
476
+ preload: "metadata"
479
477
  }
480
478
  ),
481
479
  /* @__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 CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as React from 'react';
3
3
  import React__default, { useMemo, useRef, useState, useEffect } from 'react';
4
4
  import { Img } from '@page-speed/img';
5
+ import { Video } from '@page-speed/video';
5
6
  import { clsx } from 'clsx';
6
7
  import { twMerge } from 'tailwind-merge';
7
8
  import { Icon } from '@page-speed/icon';
@@ -442,19 +443,16 @@ var VideoSection = ({
442
443
  optixFlowConfig
443
444
  }
444
445
  ),
445
- /* @__PURE__ */ jsxs(
446
- "video",
446
+ /* @__PURE__ */ jsx(
447
+ Video,
447
448
  {
448
449
  ref: videoRef,
450
+ src: videoSrc,
449
451
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
450
452
  muted: true,
451
453
  loop: true,
452
454
  playsInline: true,
453
- preload: "metadata",
454
- children: [
455
- /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
456
- "Your browser does not support the video tag."
457
- ]
455
+ preload: "metadata"
458
456
  }
459
457
  ),
460
458
  /* @__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 CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var React = require('react');
5
5
  var img = require('@page-speed/img');
6
+ var video = require('@page-speed/video');
6
7
  var clsx = require('clsx');
7
8
  var tailwindMerge = require('tailwind-merge');
8
9
  var icon = require('@page-speed/icon');
@@ -463,19 +464,16 @@ var VideoSection = ({
463
464
  optixFlowConfig
464
465
  }
465
466
  ),
466
- /* @__PURE__ */ jsxRuntime.jsxs(
467
- "video",
467
+ /* @__PURE__ */ jsxRuntime.jsx(
468
+ video.Video,
468
469
  {
469
470
  ref: videoRef,
471
+ src: videoSrc,
470
472
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
471
473
  muted: true,
472
474
  loop: true,
473
475
  playsInline: true,
474
- preload: "metadata",
475
- children: [
476
- /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
477
- "Your browser does not support the video tag."
478
- ]
476
+ preload: "metadata"
479
477
  }
480
478
  ),
481
479
  /* @__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 CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as React from 'react';
3
3
  import React__default, { useMemo, useRef, useState, useEffect } from 'react';
4
4
  import { Img } from '@page-speed/img';
5
+ import { Video } from '@page-speed/video';
5
6
  import { clsx } from 'clsx';
6
7
  import { twMerge } from 'tailwind-merge';
7
8
  import { Icon } from '@page-speed/icon';
@@ -442,19 +443,16 @@ var VideoSection = ({
442
443
  optixFlowConfig
443
444
  }
444
445
  ),
445
- /* @__PURE__ */ jsxs(
446
- "video",
446
+ /* @__PURE__ */ jsx(
447
+ Video,
447
448
  {
448
449
  ref: videoRef,
450
+ src: videoSrc,
449
451
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
450
452
  muted: true,
451
453
  loop: true,
452
454
  playsInline: true,
453
- preload: "metadata",
454
- children: [
455
- /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
456
- "Your browser does not support the video tag."
457
- ]
455
+ preload: "metadata"
458
456
  }
459
457
  ),
460
458
  /* @__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 CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var React = require('react');
5
5
  var img = require('@page-speed/img');
6
+ var video = require('@page-speed/video');
6
7
  var clsx = require('clsx');
7
8
  var tailwindMerge = require('tailwind-merge');
8
9
  var icon = require('@page-speed/icon');
@@ -463,19 +464,16 @@ var VideoSection = ({
463
464
  optixFlowConfig
464
465
  }
465
466
  ),
466
- /* @__PURE__ */ jsxRuntime.jsxs(
467
- "video",
467
+ /* @__PURE__ */ jsxRuntime.jsx(
468
+ video.Video,
468
469
  {
469
470
  ref: videoRef,
471
+ src: videoSrc,
470
472
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
471
473
  muted: true,
472
474
  loop: true,
473
475
  playsInline: true,
474
- preload: "metadata",
475
- children: [
476
- /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
477
- "Your browser does not support the video tag."
478
- ]
476
+ preload: "metadata"
479
477
  }
480
478
  ),
481
479
  /* @__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 CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as React from 'react';
3
3
  import React__default, { useMemo, useRef, useState, useEffect } from 'react';
4
4
  import { Img } from '@page-speed/img';
5
+ import { Video } from '@page-speed/video';
5
6
  import { clsx } from 'clsx';
6
7
  import { twMerge } from 'tailwind-merge';
7
8
  import { Icon } from '@page-speed/icon';
@@ -442,19 +443,16 @@ var VideoSection = ({
442
443
  optixFlowConfig
443
444
  }
444
445
  ),
445
- /* @__PURE__ */ jsxs(
446
- "video",
446
+ /* @__PURE__ */ jsx(
447
+ Video,
447
448
  {
448
449
  ref: videoRef,
450
+ src: videoSrc,
449
451
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
450
452
  muted: true,
451
453
  loop: true,
452
454
  playsInline: true,
453
- preload: "metadata",
454
- children: [
455
- /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
456
- "Your browser does not support the video tag."
457
- ]
455
+ preload: "metadata"
458
456
  }
459
457
  ),
460
458
  /* @__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 CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var React = require('react');
5
5
  var img = require('@page-speed/img');
6
+ var video = require('@page-speed/video');
6
7
  var clsx = require('clsx');
7
8
  var tailwindMerge = require('tailwind-merge');
8
9
  var icon = require('@page-speed/icon');
@@ -464,19 +465,16 @@ var VideoSection = ({
464
465
  optixFlowConfig
465
466
  }
466
467
  ),
467
- /* @__PURE__ */ jsxRuntime.jsxs(
468
- "video",
468
+ /* @__PURE__ */ jsxRuntime.jsx(
469
+ video.Video,
469
470
  {
470
471
  ref: videoRef,
472
+ src: videoSrc,
471
473
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
472
474
  muted: true,
473
475
  loop: true,
474
476
  playsInline: true,
475
- preload: "metadata",
476
- children: [
477
- /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
478
- "Your browser does not support the video tag."
479
- ]
477
+ preload: "metadata"
480
478
  }
481
479
  ),
482
480
  /* @__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 CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as React from 'react';
3
3
  import React__default, { useMemo, useRef, useState, useEffect } from 'react';
4
4
  import { Img } from '@page-speed/img';
5
+ import { Video } from '@page-speed/video';
5
6
  import { clsx } from 'clsx';
6
7
  import { twMerge } from 'tailwind-merge';
7
8
  import { Icon } from '@page-speed/icon';
@@ -443,19 +444,16 @@ var VideoSection = ({
443
444
  optixFlowConfig
444
445
  }
445
446
  ),
446
- /* @__PURE__ */ jsxs(
447
- "video",
447
+ /* @__PURE__ */ jsx(
448
+ Video,
448
449
  {
449
450
  ref: videoRef,
451
+ src: videoSrc,
450
452
  className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
451
453
  muted: true,
452
454
  loop: true,
453
455
  playsInline: true,
454
- preload: "metadata",
455
- children: [
456
- /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" }),
457
- "Your browser does not support the video tag."
458
- ]
456
+ preload: "metadata"
459
457
  }
460
458
  ),
461
459
  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),