@videojs/react 10.0.0-alpha.7 → 10.0.0-alpha.9

package/dist/dev/presets/video/skin.css

@@ -175,12 +175,12 @@
   }
 }
 .media-default-skin .media-controls[data-visible] ~ .media-overlay,
-.media-default-skin .media-error[data-visible] ~ .media-overlay {
+.media-default-skin .media-error[data-open] ~ .media-overlay {
   opacity: 1;
   transition-duration: 150ms;
   transition-delay: 0ms;
 }
-.media-default-skin .media-error[data-visible] ~ .media-overlay {
+.media-default-skin .media-error[data-open] ~ .media-overlay {
   backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);
 }
 
@@ -211,9 +211,6 @@
    ========================================================================== */
 
 .media-default-skin .media-error {
-  display: none;
-}
-.media-default-skin .media-error[data-visible] {
   position: absolute;
   inset: 0;
   z-index: 20;
@@ -223,11 +220,20 @@
   pointer-events: none;
 }
 .media-default-skin .media-error__dialog {
-  display: none;
-  transition-property: display, opacity, transform;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 18rem;
+  padding: 0.75rem;
+  border-radius: 1.75rem;
+  color: oklch(1 0 0);
+  font-size: 0.875rem;
+  pointer-events: auto;
+  opacity: 1;
+  transform: scale(1);
+  transition-property: opacity, transform;
   transition-duration: 500ms;
   transition-delay: 100ms;
-  transition-behavior: allow-discrete;
   transition-timing-function: linear(
     0,
     0.034 1.5%,
@@ -240,23 +246,10 @@
     1
   );
 }
-.media-default-skin .media-error[data-visible] .media-error__dialog {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  max-width: 18rem;
-  padding: 0.75rem;
-  border-radius: 1.75rem;
-  color: oklch(1 0 0);
-  font-size: 0.875rem;
-  pointer-events: auto;
-  transform: scale(1);
-  opacity: 1;
-
-  @starting-style {
-    transform: scale(0.5);
-    opacity: 0;
-  }
+.media-default-skin .media-error[data-starting-style] .media-error__dialog,
+.media-default-skin .media-error[data-ending-style] .media-error__dialog {
+  opacity: 0;
+  transform: scale(0.5);
 }
 .media-default-skin .media-error__content {
   display: flex;

package/dist/dev/presets/video/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tsx"],"mappings":";;;;KAoCY,cAAA,GAAiB,aAAA;AAAA,iBAMb,SAAA,CAAU,KAAA,EAAO,cAAA,GAAiB,SAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tsx"],"mappings":";;;;KAoCY,cAAA,GAAiB,aAAA;AAAA,iBAgBb,SAAA,CAAU,KAAA,EAAO,cAAA,GAAiB,SAAA"}

package/dist/dev/presets/video/skin.js

@@ -19,7 +19,7 @@ import { Value } from "../../ui/time/time-value.js";
 import { TimeSliderRoot } from "../../ui/time-slider/time-slider-root.js";
 import { VolumeSliderRoot } from "../../ui/volume-slider/volume-slider-root.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
-import { ErrorDialog } from "../../ui/error-dialog/error-dialog.js";
+import { ErrorDialog } from "./error-dialog.js";
 import CaptionsOffIcon from "../../icons/dist/react/default/captions-off.js";
 import CaptionsOnIcon from "../../icons/dist/react/default/captions-on.js";
 import FullscreenEnterIcon from "../../icons/dist/react/default/fullscreen-enter.js";
@@ -47,6 +47,15 @@ const Button = forwardRef(function Button({ className, ...props }, ref) {
 		...props
 	});
 });
+const errorClasses = {
+	root: "media-error",
+	dialog: "media-error__dialog media-surface",
+	content: "media-error__content",
+	title: "media-error__title",
+	description: "media-error__description",
+	actions: "media-error__actions",
+	close: "media-button"
+};
 function VideoSkin(props) {
 	const { children, className, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Container, {
@@ -61,35 +70,7 @@ function VideoSkin(props) {
 					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
 				})
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, {
-				"aria-labelledby": "media-error-title",
-				"aria-describedby": "media-error-description",
-				render: (props, { onDismiss }) => /* @__PURE__ */ jsx("div", {
-					...props,
-					className: "media-error",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "media-error__dialog media-surface",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "media-error__content",
-							children: [/* @__PURE__ */ jsx("p", {
-								id: "media-error-title",
-								className: "media-error__title",
-								children: "Something went wrong."
-							}), /* @__PURE__ */ jsx("p", {
-								id: "media-error-description",
-								className: "media-error__description",
-								children: "An error occurred while trying to play the video. Please try again."
-							})]
-						}), /* @__PURE__ */ jsx("div", {
-							className: "media-error__actions",
-							children: /* @__PURE__ */ jsx(Button, {
-								onClick: onDismiss,
-								children: "OK"
-							})
-						})]
-					})
-				})
-			}),
+			/* @__PURE__ */ jsx(ErrorDialog, { classes: errorClasses }),
 			/* @__PURE__ */ jsxs(ControlsRoot, {
 				className: "media-surface media-controls",
 				children: [

package/dist/dev/presets/video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["Controls.Root","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb"],"sources":["../../../../src/presets/video/skin.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type VideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\n});\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin', className)} {...rest}>\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className=\"media-buffering-indicator\">\n            <div className=\"media-surface\">\n              <SpinnerIcon className=\"media-icon\" />\n            </div>\n          </div>\n        )}\n      />\n\n      <ErrorDialog\n        aria-labelledby=\"media-error-title\"\n        aria-describedby=\"media-error-description\"\n        render={(props, { onDismiss }) => (\n          <div {...props} className=\"media-error\">\n            <div className=\"media-error__dialog media-surface\">\n              <div className=\"media-error__content\">\n                <p id=\"media-error-title\" className=\"media-error__title\">\n                  Something went wrong.\n                </p>\n                <p id=\"media-error-description\" className=\"media-error__description\">\n                  An error occurred while trying to play the video. Please try again.\n                </p>\n              </div>\n              <div className=\"media-error__actions\">\n                <Button onClick={onDismiss}>OK</Button>\n              </div>\n            </div>\n          </div>\n        )}\n      />\n\n      <Controls.Root className=\"media-surface media-controls\">\n        <PlayButton\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--play\">\n              <RestartIcon className=\"media-icon media-icon--restart\" />\n              <PlayIcon className=\"media-icon media-icon--play\" />\n              <PauseIcon className=\"media-icon media-icon--pause\" />\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={-SEEK_TIME}\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--seek\">\n              <span className=\"media-icon__container\">\n                <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                <span className=\"media-icon__label\">{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={SEEK_TIME}\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--seek\">\n              <span className=\"media-icon__container\">\n                <SeekIcon className=\"media-icon media-icon--seek\" />\n                <span className=\"media-icon__label\">{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <Time.Group className=\"media-time\">\n          <Time.Value type=\"current\" className=\"media-time__value\" />\n          <TimeSlider.Root className=\"media-slider\">\n            <TimeSlider.Track className=\"media-slider__track\">\n              <TimeSlider.Fill className=\"media-slider__fill\" />\n              <TimeSlider.Buffer className=\"media-slider__buffer\" />\n            </TimeSlider.Track>\n            <TimeSlider.Thumb className=\"media-slider__thumb\" />\n          </TimeSlider.Root>\n          <Time.Value type=\"duration\" className=\"media-time__value\" />\n        </Time.Group>\n\n        <PlaybackRateButton\n          render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n        />\n\n        <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n          <Popover.Trigger\n            render={\n              <MuteButton\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon media-button--mute\">\n                    <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n                    <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n                    <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Popover.Popup className=\"media-surface media-popup media-popup--volume media-popup-animation\">\n            <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n              <VolumeSlider.Track className=\"media-slider__track\">\n                <VolumeSlider.Fill className=\"media-slider__fill\" />\n              </VolumeSlider.Track>\n              <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n            </VolumeSlider.Root>\n          </Popover.Popup>\n        </Popover.Root>\n\n        <CaptionsButton\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--captions\">\n              <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n              <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n            </Button>\n          )}\n        />\n\n        <PiPButton\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon\">\n              <PipIcon className=\"media-icon\" />\n            </Button>\n          )}\n        />\n\n        <FullscreenButton\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--fullscreen\">\n              <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n              <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n            </Button>\n          )}\n        />\n      </Controls.Root>\n\n      {/* <div className=\"media-captions\">\n        <div className=\"media-captions__container\">\n          <span className=\"media-captions__text\">An example cue</span>\n          <span className=\"media-captions__text\">\n            <p>Another example cue with HTML</p>\n          </span>\n        </div>\n      </div> */}\n\n      <div className=\"media-overlay\" />\n\n      {children}\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.js","names":["Controls.Root","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb"],"sources":["../../../../src/presets/video/skin.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\nimport { ErrorDialog } from './error-dialog';\n\nconst SEEK_TIME = 10;\n\nexport type VideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\n});\n\nconst errorClasses = {\n  root: 'media-error',\n  dialog: 'media-error__dialog media-surface',\n  content: 'media-error__content',\n  title: 'media-error__title',\n  description: 'media-error__description',\n  actions: 'media-error__actions',\n  close: 'media-button',\n};\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin', className)} {...rest}>\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className=\"media-buffering-indicator\">\n            <div className=\"media-surface\">\n              <SpinnerIcon className=\"media-icon\" />\n            </div>\n          </div>\n        )}\n      />\n\n      <ErrorDialog classes={errorClasses} />\n\n      <Controls.Root className=\"media-surface media-controls\">\n        <PlayButton\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--play\">\n              <RestartIcon className=\"media-icon media-icon--restart\" />\n              <PlayIcon className=\"media-icon media-icon--play\" />\n              <PauseIcon className=\"media-icon media-icon--pause\" />\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={-SEEK_TIME}\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--seek\">\n              <span className=\"media-icon__container\">\n                <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                <span className=\"media-icon__label\">{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={SEEK_TIME}\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--seek\">\n              <span className=\"media-icon__container\">\n                <SeekIcon className=\"media-icon media-icon--seek\" />\n                <span className=\"media-icon__label\">{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <Time.Group className=\"media-time\">\n          <Time.Value type=\"current\" className=\"media-time__value\" />\n          <TimeSlider.Root className=\"media-slider\">\n            <TimeSlider.Track className=\"media-slider__track\">\n              <TimeSlider.Fill className=\"media-slider__fill\" />\n              <TimeSlider.Buffer className=\"media-slider__buffer\" />\n            </TimeSlider.Track>\n            <TimeSlider.Thumb className=\"media-slider__thumb\" />\n          </TimeSlider.Root>\n          <Time.Value type=\"duration\" className=\"media-time__value\" />\n        </Time.Group>\n\n        <PlaybackRateButton\n          render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n        />\n\n        <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n          <Popover.Trigger\n            render={\n              <MuteButton\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon media-button--mute\">\n                    <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n                    <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n                    <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Popover.Popup className=\"media-surface media-popup media-popup--volume media-popup-animation\">\n            <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n              <VolumeSlider.Track className=\"media-slider__track\">\n                <VolumeSlider.Fill className=\"media-slider__fill\" />\n              </VolumeSlider.Track>\n              <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n            </VolumeSlider.Root>\n          </Popover.Popup>\n        </Popover.Root>\n\n        <CaptionsButton\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--captions\">\n              <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n              <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n            </Button>\n          )}\n        />\n\n        <PiPButton\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon\">\n              <PipIcon className=\"media-icon\" />\n            </Button>\n          )}\n        />\n\n        <FullscreenButton\n          render={(props) => (\n            <Button {...props} className=\"media-button--icon media-button--fullscreen\">\n              <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n              <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n            </Button>\n          )}\n        />\n      </Controls.Root>\n\n      {/* <div className=\"media-captions\">\n        <div className=\"media-captions__container\">\n          <span className=\"media-captions__text\">An example cue</span>\n          <span className=\"media-captions__text\">\n            <p>Another example cue with HTML</p>\n          </span>\n        </div>\n      </div> */}\n\n      <div className=\"media-overlay\" />\n\n      {children}\n    </Container>\n  );\n}\n"],"mappings":"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"}

package/dist/dev/presets/video/skin.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tailwind.tsx"],"mappings":";;;;iBA4GgB,iBAAA,CAAkB,KAAA,EAAO,cAAA,GAAiB,SAAA"}
+{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tailwind.tsx"],"mappings":";;;;iBAsHgB,iBAAA,CAAkB,KAAA,EAAO,cAAA,GAAiB,SAAA"}

package/dist/dev/presets/video/skin.tailwind.js

@@ -19,7 +19,7 @@ import { Value } from "../../ui/time/time-value.js";
 import { TimeSliderRoot } from "../../ui/time-slider/time-slider-root.js";
 import { VolumeSliderRoot } from "../../ui/volume-slider/volume-slider-root.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
-import { ErrorDialog } from "../../ui/error-dialog/error-dialog.js";
+import { ErrorDialog } from "./error-dialog.js";
 import { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconState, overlay, playbackRate, popup, root, seek, slider, time } from "../../skins/dist/default/video/default.tailwind.js";
 import CaptionsOffIcon from "../../icons/dist/react/default/captions-off.js";
 import CaptionsOnIcon from "../../icons/dist/react/default/captions-on.js";
@@ -76,6 +76,15 @@ const SliderThumb = forwardRef(function SliderThumb({ persistent, className, ...
 		...props
 	});
 });
+const errorClasses = {
+	root: error.root,
+	dialog: error.dialog,
+	content: error.content,
+	title: error.title,
+	description: error.description,
+	actions: error.actions,
+	close: cn(button.base, button.default)
+};
 function VideoSkinTailwind(props) {
 	const { children, className, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Container, {
@@ -90,35 +99,7 @@ function VideoSkinTailwind(props) {
 					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: icon })
 				})
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, {
-				"aria-labelledby": "media-error-title",
-				"aria-describedby": "media-error-description",
-				render: (props, { onDismiss }) => /* @__PURE__ */ jsx("div", {
-					...props,
-					className: error.root,
-					children: /* @__PURE__ */ jsxs("div", {
-						className: error.dialog,
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: error.content,
-							children: [/* @__PURE__ */ jsx("p", {
-								id: "media-error-title",
-								className: error.title,
-								children: "Something went wrong."
-							}), /* @__PURE__ */ jsx("p", {
-								id: "media-error-description",
-								className: error.description,
-								children: "An error occurred while trying to play the video. Please try again."
-							})]
-						}), /* @__PURE__ */ jsx("div", {
-							className: error.actions,
-							children: /* @__PURE__ */ jsx(Button, {
-								onClick: onDismiss,
-								children: "OK"
-							})
-						})]
-					})
-				})
-			}),
+			/* @__PURE__ */ jsx(ErrorDialog, { classes: errorClasses }),
 			/* @__PURE__ */ jsxs(ControlsRoot, {
 				"data-controls": "",
 				className: controls,

package/dist/dev/presets/video/skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":["Controls.Root","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb"],"sources":["../../../../src/presets/video/skin.tailwind.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/video/default.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { VideoSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- */\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n  { className, variant, ...props },\n  ref\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n  return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n  { className, ...props },\n  ref\n) {\n  return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(\n  { type = 'fill', className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n  { persistent, className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}\n      {...props}\n    />\n  );\n});\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function VideoSkinTailwind(props: VideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn(root, className)} {...rest}>\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className={bufferingIndicator.root}>\n            <div className={bufferingIndicator.container}>\n              <SpinnerIcon className={icon} />\n            </div>\n          </div>\n        )}\n      />\n\n      <ErrorDialog\n        aria-labelledby=\"media-error-title\"\n        aria-describedby=\"media-error-description\"\n        render={(props, { onDismiss }) => (\n          <div {...props} className={error.root}>\n            <div className={error.dialog}>\n              <div className={error.content}>\n                <p id=\"media-error-title\" className={error.title}>\n                  Something went wrong.\n                </p>\n                <p id=\"media-error-description\" className={error.description}>\n                  An error occurred while trying to play the video. Please try again.\n                </p>\n              </div>\n              <div className={error.actions}>\n                <Button onClick={onDismiss}>OK</Button>\n              </div>\n            </div>\n          </div>\n        )}\n      />\n\n      <Controls.Root\n        data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n        className={controls}\n      >\n        <PlayButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={iconState.play.button}>\n              <RestartIcon className={cn(icon, iconState.play.restart)} />\n              <PlayIcon className={cn(icon, iconState.play.play)} />\n              <PauseIcon className={cn(icon, iconState.play.pause)} />\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={-SEEK_TIME}\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={seek.button}>\n              <span className={iconContainer}>\n                <SeekIcon className={cn(icon, iconFlipped)} />\n                <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={SEEK_TIME}\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={seek.button}>\n              <span className={iconContainer}>\n                <SeekIcon className={icon} />\n                <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <Time.Group className={time.group}>\n          <Time.Value type=\"current\" className={time.current} />\n          <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n            <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n              <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n              <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n            </TimeSlider.Track>\n            <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n          </TimeSlider.Root>\n          <Time.Value type=\"duration\" className={time.duration} />\n        </Time.Group>\n\n        <PlaybackRateButton render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />} />\n\n        <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n          <Popover.Trigger\n            render={\n              <MuteButton\n                render={(props) => (\n                  <Button variant=\"icon\" {...props} className={iconState.mute.button}>\n                    <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n                    <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n                    <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Popover.Popup className={cn(popup.base, popup.volume)}>\n            <VolumeSlider.Root\n              orientation=\"vertical\"\n              thumbAlignment=\"edge\"\n              render={(props) => <SliderRoot {...props} />}\n            >\n              <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n                <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n              </VolumeSlider.Track>\n              <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n            </VolumeSlider.Root>\n          </Popover.Popup>\n        </Popover.Root>\n\n        <CaptionsButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={iconState.captions.button}>\n              <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n              <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n            </Button>\n          )}\n        />\n\n        <PiPButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props}>\n              <PipIcon className={icon} />\n            </Button>\n          )}\n        />\n\n        <FullscreenButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={iconState.fullscreen.button}>\n              <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n              <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n            </Button>\n          )}\n        />\n      </Controls.Root>\n\n      {/* <div className={captions.root}>\n        <div className={captions.container}>\n          <span className={captions.cue}>\n            An example cue\n          </span>\n        </div>\n      </div> */}\n\n      <div className={overlay} />\n\n      {children}\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.tailwind.js","names":["Controls.Root","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb"],"sources":["../../../../src/presets/video/skin.tailwind.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/video/default.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { ErrorDialog } from './error-dialog';\nimport type { VideoSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- */\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n  { className, variant, ...props },\n  ref\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n  return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n  { className, ...props },\n  ref\n) {\n  return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(\n  { type = 'fill', className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n  { persistent, className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}\n      {...props}\n    />\n  );\n});\n\nconst errorClasses = {\n  root: error.root,\n  dialog: error.dialog,\n  content: error.content,\n  title: error.title,\n  description: error.description,\n  actions: error.actions,\n  close: cn(button.base, button.default),\n};\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function VideoSkinTailwind(props: VideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn(root, className)} {...rest}>\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className={bufferingIndicator.root}>\n            <div className={bufferingIndicator.container}>\n              <SpinnerIcon className={icon} />\n            </div>\n          </div>\n        )}\n      />\n\n      <ErrorDialog classes={errorClasses} />\n\n      <Controls.Root\n        data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n        className={controls}\n      >\n        <PlayButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={iconState.play.button}>\n              <RestartIcon className={cn(icon, iconState.play.restart)} />\n              <PlayIcon className={cn(icon, iconState.play.play)} />\n              <PauseIcon className={cn(icon, iconState.play.pause)} />\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={-SEEK_TIME}\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={seek.button}>\n              <span className={iconContainer}>\n                <SeekIcon className={cn(icon, iconFlipped)} />\n                <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={SEEK_TIME}\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={seek.button}>\n              <span className={iconContainer}>\n                <SeekIcon className={icon} />\n                <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <Time.Group className={time.group}>\n          <Time.Value type=\"current\" className={time.current} />\n          <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n            <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n              <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n              <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n            </TimeSlider.Track>\n            <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n          </TimeSlider.Root>\n          <Time.Value type=\"duration\" className={time.duration} />\n        </Time.Group>\n\n        <PlaybackRateButton render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />} />\n\n        <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n          <Popover.Trigger\n            render={\n              <MuteButton\n                render={(props) => (\n                  <Button variant=\"icon\" {...props} className={iconState.mute.button}>\n                    <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n                    <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n                    <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Popover.Popup className={cn(popup.base, popup.volume)}>\n            <VolumeSlider.Root\n              orientation=\"vertical\"\n              thumbAlignment=\"edge\"\n              render={(props) => <SliderRoot {...props} />}\n            >\n              <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n                <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n              </VolumeSlider.Track>\n              <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n            </VolumeSlider.Root>\n          </Popover.Popup>\n        </Popover.Root>\n\n        <CaptionsButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={iconState.captions.button}>\n              <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n              <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n            </Button>\n          )}\n        />\n\n        <PiPButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props}>\n              <PipIcon className={icon} />\n            </Button>\n          )}\n        />\n\n        <FullscreenButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className={iconState.fullscreen.button}>\n              <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n              <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n            </Button>\n          )}\n        />\n      </Controls.Root>\n\n      {/* <div className={captions.root}>\n        <div className={captions.container}>\n          <span className={captions.cue}>\n            An example cue\n          </span>\n        </div>\n      </div> */}\n\n      <div className={overlay} />\n\n      {children}\n    </Container>\n  );\n}\n"],"mappings":"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"}

package/dist/dev/skins/dist/default/video/default.tailwind.js

@@ -26,14 +26,14 @@ const slider = {
 };
 const root = cn("block relative isolate overflow-clip @container/media-root", "rounded-(--media-border-radius,2rem) bg-black", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]", "before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10", "before:inset-px before:ring-1 before:ring-inset before:ring-white/15", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/10", "[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", "[&_video::-webkit-media-text-track-container]:transition-transform", "[&_video::-webkit-media-text-track-container]:duration-150", "[&_video::-webkit-media-text-track-container]:ease-out", "[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)", "[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)", "[&_video::-webkit-media-text-track-container]:scale-98", "[&_video::-webkit-media-text-track-container]:z-1", "[&_video::-webkit-media-text-track-container]:font-[inherit]", "motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50", "[&:fullscreen]:rounded-none");
 const controls = cn("peer/controls", surface, "absolute @container/media-controls bottom-3 inset-x-3", "p-[0.175rem] flex items-center gap-[0.075rem]", "text-white rounded-full z-10", "will-change-[scale,transform,filter,opacity]", "transition-[scale,transform,filter,opacity] ease-out", "delay-0 duration-100 origin-bottom", "not-data-visible:pointer-events-none not-data-visible:blur-sm", "not-data-visible:scale-90 not-data-visible:opacity-0", "not-data-visible:delay-500 not-data-visible:duration-300", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:blur-none", "motion-reduce:not-data-visible:scale-100", "@2xl/media-root:p-1 @2xl/media-root:gap-0.5");
-const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-visible/error:opacity-100", "peer-data-visible/error:duration-150", "peer-data-visible/error:delay-0", "peer-data-visible/error:backdrop-blur-sm", "motion-reduce:duration-100");
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-sm", "motion-reduce:duration-100");
 const bufferingIndicator = {
 	root: "absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex",
 	container: cn("p-1 rounded-full", surface)
 };
 const error = {
-	root: "peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-[visible]:flex",
-	dialog: cn("hidden flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto", "group-data-visible/error:flex", "transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete", "starting:opacity-0 starting:scale-50", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]", surface),
+	root: "peer/error group/error absolute inset-0 z-20 flex items-center justify-center pointer-events-none",
+	dialog: cn("flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto", "transition-[opacity,transform] duration-500 delay-100", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]", "group-data-[starting-style]/error:opacity-0 group-data-[starting-style]/error:scale-50", "group-data-[ending-style]/error:opacity-0 group-data-[ending-style]/error:scale-50", surface),
 	content: "flex flex-col gap-2 px-2 pt-2 pb-1.5",
 	title: "font-semibold leading-tight",
 	description: "opacity-70",

package/dist/dev/skins/dist/default/video/default.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/default.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/default.tailwind.ts\nconst surface = cn(\"bg-white/10\", \"backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150\", \"ring ring-white/5 ring-inset shadow-sm shadow-black/15\", \"after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20\", \"contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20\");\nconst icon = cn(\"block [grid-area:1/1] size-4.5 shrink-0\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"font-medium\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\"),\n\ticon: cn(\"grid w-[2.125rem] aspect-square bg-transparent rounded-full\", \"text-white/90\", \"text-shadow-2xs text-shadow-black/25\", \"hover:bg-white/10 hover:text-white hover:no-underline\", \"focus-visible:bg-white/10 focus-visible:text-white\", \"aria-expanded:bg-white/10 aria-expanded:text-white\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-full\", \"text-black\")\n};\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-20\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1\", \"data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-white\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill)\"),\n\t\tbuffer: cn(\"bg-white/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute -translate-x-1/2 -translate-y-1/2\", \"bg-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]\"),\n\t\tpersistent: \"size-3\",\n\t\tinteractive: cn(\"size-2.5\", \"opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100\", \"group-active/slider:size-3\")\n\t}\n};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,2rem) bg-black\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10\", \"before:inset-px before:ring-1 before:ring-inset before:ring-white/15\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_video::-webkit-media-text-track-container]:ease-out\", \"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\", \"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\", \"[&_video::-webkit-media-text-track-container]:scale-98\", \"[&_video::-webkit-media-text-track-container]:z-1\", \"[&_video::-webkit-media-text-track-container]:font-[inherit]\", \"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\", \"[&:fullscreen]:rounded-none\");\nconst controls = cn(\"peer/controls\", surface, \"absolute @container/media-controls bottom-3 inset-x-3\", \"p-[0.175rem] flex items-center gap-[0.075rem]\", \"text-white rounded-full z-10\", \"will-change-[scale,transform,filter,opacity]\", \"transition-[scale,transform,filter,opacity] ease-out\", \"delay-0 duration-100 origin-bottom\", \"not-data-visible:pointer-events-none not-data-visible:blur-sm\", \"not-data-visible:scale-90 not-data-visible:opacity-0\", \"not-data-visible:delay-500 not-data-visible:duration-300\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\", \"@2xl/media-root:p-1 @2xl/media-root:gap-0.5\");\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-visible/error:opacity-100\", \"peer-data-visible/error:duration-150\", \"peer-data-visible/error:delay-0\", \"peer-data-visible/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\",\n\tcontainer: cn(\"p-1 rounded-full\", surface)\n};\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-[visible]:flex\",\n\tdialog: cn(\"hidden flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto\", \"group-data-visible/error:flex\", \"transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete\", \"starting:opacity-0 starting:scale-50\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\", surface),\n\tcontent: \"flex flex-col gap-2 px-2 pt-2 pb-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tdescription: \"opacity-70\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst time = {\n\tgroup: \"@container/media-time flex items-center flex-1 gap-3 px-2\",\n\tcurrent: \"hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums\",\n\tduration: \"text-shadow-2xs text-shadow-black/25 tabular-nums\"\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 [--media-popover-side-offset:0.5rem]\", surface, \"opacity-100 scale-100 origin-bottom blur-none\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\"),\n\tvolume: \"py-2.5 px-1 rounded-full\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-12 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, root, seek, slider, time };\n//# sourceMappingURL=default.tailwind.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,eAAe,kEAAkE,0DAA0D,4HAA4H,wLAAwL,uFAAuF;AACziB,MAAM,OAAO,GAAG,2CAA2C,0EAA0E,yEAAyE;AAE9M,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,eAAe,mDAAmD,4EAA4E,sEAAsE,gEAAgE;CACxX,MAAM,GAAG,+DAA+D,iBAAiB,wCAAwC,yDAAyD,sDAAsD,qDAAqD;CACrS,SAAS,GAAG,wCAAwC,aAAa;CACjE;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,mEAAmE;CACxR,OAAO,GAAG,kEAAkE,oDAAoD,0EAA0E,qEAAqE;CAC/Q,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,yDAAyD,8EAA8E,sDAAsD;EAClS,QAAQ,GAAG,qCAAqC,gFAAgF,4GAA4G,8EAA8E,wGAAwG;EACla;CACD,OAAO;EACN,MAAM,GAAG,mDAAmD,yBAAyB,gDAAgD,sFAAsF,mDAAmD,iEAAiE,kGAAkG,6GAA6G;EAC9hB,YAAY;EACZ,aAAa,GAAG,YAAY,sEAAsE,6BAA6B;EAC/H;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,iDAAiD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,mFAAmF,wEAAwE,+EAA+E,mEAAmE,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AACvyD,MAAM,WAAW,GAAG,iBAAiB,SAAS,yDAAyD,iDAAiD,gCAAgC,gDAAgD,wDAAwD,sCAAsC,iEAAiE,wDAAwD,4DAA4D,+CAA+C,4CAA4C,4CAA4C,8CAA8C;AAChrB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,uCAAuC,wCAAwC,mCAAmC,4CAA4C,6BAA6B;AACvnB,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW,GAAG,oBAAoB,QAAQ;CAC1C;AACD,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,+FAA+F,iCAAiC,2FAA2F,wCAAwC,wGAAwG,QAAQ;CAC9X,SAAS;CACT,OAAO;CACP,aAAa;CACb,SAAS;CACT;AACD,MAAM,OAAO;CACZ,OAAO;CACP,SAAS;CACT,UAAU;CACV;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,qDAAqD,SAAS,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAC1X,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,eAAe,EAAE,QAAQ,wEAAwE;AACvG,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}
+{"version":3,"file":"default.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/default.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/default.tailwind.ts\nconst surface = cn(\"bg-white/10\", \"backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150\", \"ring ring-white/5 ring-inset shadow-sm shadow-black/15\", \"after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20\", \"contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20\");\nconst icon = cn(\"block [grid-area:1/1] size-4.5 shrink-0\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"font-medium\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\"),\n\ticon: cn(\"grid w-[2.125rem] aspect-square bg-transparent rounded-full\", \"text-white/90\", \"text-shadow-2xs text-shadow-black/25\", \"hover:bg-white/10 hover:text-white hover:no-underline\", \"focus-visible:bg-white/10 focus-visible:text-white\", \"aria-expanded:bg-white/10 aria-expanded:text-white\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-full\", \"text-black\")\n};\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-20\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1\", \"data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-white\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill)\"),\n\t\tbuffer: cn(\"bg-white/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute -translate-x-1/2 -translate-y-1/2\", \"bg-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]\"),\n\t\tpersistent: \"size-3\",\n\t\tinteractive: cn(\"size-2.5\", \"opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100\", \"group-active/slider:size-3\")\n\t}\n};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,2rem) bg-black\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10\", \"before:inset-px before:ring-1 before:ring-inset before:ring-white/15\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_video::-webkit-media-text-track-container]:ease-out\", \"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\", \"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\", \"[&_video::-webkit-media-text-track-container]:scale-98\", \"[&_video::-webkit-media-text-track-container]:z-1\", \"[&_video::-webkit-media-text-track-container]:font-[inherit]\", \"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\", \"[&:fullscreen]:rounded-none\");\nconst controls = cn(\"peer/controls\", surface, \"absolute @container/media-controls bottom-3 inset-x-3\", \"p-[0.175rem] flex items-center gap-[0.075rem]\", \"text-white rounded-full z-10\", \"will-change-[scale,transform,filter,opacity]\", \"transition-[scale,transform,filter,opacity] ease-out\", \"delay-0 duration-100 origin-bottom\", \"not-data-visible:pointer-events-none not-data-visible:blur-sm\", \"not-data-visible:scale-90 not-data-visible:opacity-0\", \"not-data-visible:delay-500 not-data-visible:duration-300\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\", \"@2xl/media-root:p-1 @2xl/media-root:gap-0.5\");\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\",\n\tcontainer: cn(\"p-1 rounded-full\", surface)\n};\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 flex items-center justify-center pointer-events-none\",\n\tdialog: cn(\"flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto\", \"transition-[opacity,transform] duration-500 delay-100\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\", \"group-data-[starting-style]/error:opacity-0 group-data-[starting-style]/error:scale-50\", \"group-data-[ending-style]/error:opacity-0 group-data-[ending-style]/error:scale-50\", surface),\n\tcontent: \"flex flex-col gap-2 px-2 pt-2 pb-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tdescription: \"opacity-70\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst time = {\n\tgroup: \"@container/media-time flex items-center flex-1 gap-3 px-2\",\n\tcurrent: \"hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums\",\n\tduration: \"text-shadow-2xs text-shadow-black/25 tabular-nums\"\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 [--media-popover-side-offset:0.5rem]\", surface, \"opacity-100 scale-100 origin-bottom blur-none\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\"),\n\tvolume: \"py-2.5 px-1 rounded-full\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-12 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, root, seek, slider, time };\n//# sourceMappingURL=default.tailwind.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,eAAe,kEAAkE,0DAA0D,4HAA4H,wLAAwL,uFAAuF;AACziB,MAAM,OAAO,GAAG,2CAA2C,0EAA0E,yEAAyE;AAE9M,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,eAAe,mDAAmD,4EAA4E,sEAAsE,gEAAgE;CACxX,MAAM,GAAG,+DAA+D,iBAAiB,wCAAwC,yDAAyD,sDAAsD,qDAAqD;CACrS,SAAS,GAAG,wCAAwC,aAAa;CACjE;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,mEAAmE;CACxR,OAAO,GAAG,kEAAkE,oDAAoD,0EAA0E,qEAAqE;CAC/Q,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,yDAAyD,8EAA8E,sDAAsD;EAClS,QAAQ,GAAG,qCAAqC,gFAAgF,4GAA4G,8EAA8E,wGAAwG;EACla;CACD,OAAO;EACN,MAAM,GAAG,mDAAmD,yBAAyB,gDAAgD,sFAAsF,mDAAmD,iEAAiE,kGAAkG,6GAA6G;EAC9hB,YAAY;EACZ,aAAa,GAAG,YAAY,sEAAsE,6BAA6B;EAC/H;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,iDAAiD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,mFAAmF,wEAAwE,+EAA+E,mEAAmE,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AACvyD,MAAM,WAAW,GAAG,iBAAiB,SAAS,yDAAyD,iDAAiD,gCAAgC,gDAAgD,wDAAwD,sCAAsC,iEAAiE,wDAAwD,4DAA4D,+CAA+C,4CAA4C,4CAA4C,8CAA8C;AAChrB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,yCAAyC,6BAA6B;AAC3mB,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW,GAAG,oBAAoB,QAAQ;CAC1C;AACD,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,6FAA6F,yDAAyD,wGAAwG,0FAA0F,sFAAsF,QAAQ;CACjc,SAAS;CACT,OAAO;CACP,aAAa;CACb,SAAS;CACT;AACD,MAAM,OAAO;CACZ,OAAO;CACP,SAAS;CACT,UAAU;CACV;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,qDAAqD,SAAS,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAC1X,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,eAAe,EAAE,QAAQ,wEAAwE;AACvG,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}

package/dist/dev/skins/dist/default/video/minimal.tailwind.js

@@ -24,11 +24,11 @@ const slider = {
 };
 const root = cn("block relative isolate overflow-clip @container/media-root", "rounded-(--media-border-radius,0.75rem) bg-black", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15", "dark:after:ring-white/15", "[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", "[&_video::-webkit-media-text-track-container]:transition-transform", "[&_video::-webkit-media-text-track-container]:duration-150", "[&_video::-webkit-media-text-track-container]:ease-out", "[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)", "[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)", "[&_video::-webkit-media-text-track-container]:scale-98", "[&_video::-webkit-media-text-track-container]:z-1", "[&_video::-webkit-media-text-track-container]:font-[inherit]", "motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50", "[&:fullscreen]:rounded-none");
 const controls = cn("peer/controls", "absolute @container/media-controls bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 flex items-center gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:translate-y-full", "not-data-visible:blur-sm not-data-visible:pointer-events-none", "not-data-visible:delay-500 not-data-visible:duration-500", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
-const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-visible/error:opacity-100", "peer-data-visible/error:duration-150", "peer-data-visible/error:delay-0", "peer-data-visible/error:backdrop-blur-sm", "motion-reduce:duration-100");
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-sm", "motion-reduce:duration-100");
 const bufferingIndicator = "absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex";
 const error = {
-	root: "peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-visible:flex",
-	dialog: cn("hidden flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto", "group-data-visible/error:flex", "text-shadow-2xs text-shadow-black/50", "transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete", "starting:opacity-0 starting:scale-50", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]"),
+	root: "peer/error group/error absolute inset-0 z-20 flex items-center justify-center pointer-events-none",
+	dialog: cn("flex flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto", "text-shadow-2xs text-shadow-black/50", "transition-[opacity,transform] duration-500 delay-100", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]", "group-data-[starting-style]/error:opacity-0 group-data-[starting-style]/error:scale-50", "group-data-[ending-style]/error:opacity-0 group-data-[ending-style]/error:scale-50"),
 	content: "flex flex-col gap-2 py-1.5",
 	title: "font-semibold leading-tight",
 	actions: "flex gap-2 *:flex-1"

package/dist/dev/skins/dist/default/video/minimal.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/minimal.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/minimal.tailwind.ts\nconst icon = cn(\"block [grid-area:1/1] size-4.5\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"outline-2 outline-transparent -outline-offset-2\", \"font-medium\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\"),\n\ticon: cn(\"grid w-[2.375rem] aspect-square bg-transparent rounded-md\", \"text-white\", \"hover:text-white/80 hover:no-underline\", \"focus-visible:text-white/80\", \"aria-expanded:text-white/80\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-lg\", \"text-black\")\n};\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-white\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-white/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,0.75rem) bg-black\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_video::-webkit-media-text-track-container]:ease-out\", \"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\", \"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\", \"[&_video::-webkit-media-text-track-container]:scale-98\", \"[&_video::-webkit-media-text-track-container]:z-1\", \"[&_video::-webkit-media-text-track-container]:font-[inherit]\", \"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\", \"[&:fullscreen]:rounded-none\");\nconst controls = cn(\"peer/controls\", \"absolute @container/media-controls bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 flex items-center gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-visible/error:opacity-100\", \"peer-data-visible/error:duration-150\", \"peer-data-visible/error:delay-0\", \"peer-data-visible/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\";\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-visible:flex\",\n\tdialog: cn(\"hidden flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto\", \"group-data-visible/error:flex\", \"text-shadow-2xs text-shadow-black/50\", \"transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete\", \"starting:opacity-0 starting:scale-50\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\"),\n\tcontent: \"flex flex-col gap-2 py-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst buttonGroup = cn(\"flex items-center gap-[0.075rem]\", \"@2xl/media-root:gap-0.5\");\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:text-white/50\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 bg-transparent [--media-popover-side-offset:0.5rem]\", \"opacity-100 scale-100 origin-bottom blur-none\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\"),\n\tvolume: \"p-1\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time };\n//# sourceMappingURL=minimal.tailwind.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,kCAAkC,0EAA0E,yEAAyE;AAErM,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,mDAAmD,eAAe,4EAA4E,8DAA8D,qEAAqE;CACrX,MAAM,GAAG,6DAA6D,cAAc,0CAA0C,+BAA+B,8BAA8B;CAC3L,SAAS,GAAG,sCAAsC,aAAa;CAC/D;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,OAAO,GAAG,kEAAkE,oDAAoD,6EAA6E,wEAAwE;CACrR,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACtS,QAAQ,GAAG,qCAAqC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACpa;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,yBAAyB,gDAAgD,+EAA+E,mDAAmD,8DAA8D,oGAAoG,+GAA+G;EAC/hB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,oDAAoD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,+EAA+E,mEAAmE,4BAA4B,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AAC3qD,MAAM,WAAW,GAAG,iBAAiB,yDAAyD,8CAA8C,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC5tB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,uCAAuC,wCAAwC,mCAAmC,4CAA4C,6BAA6B;AACpoB,MAAM,qBAAqB;AAC3B,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,6EAA6E,iCAAiC,wCAAwC,2FAA2F,wCAAwC,uGAAuG;CAC3Y,SAAS;CACT,OAAO;CACP,SAAS;CACT;AACD,MAAM,cAAc,GAAG,oCAAoC,0BAA0B;AACrF,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,4DAA4D,4BAA4B;CACpG,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,qDAAqD,mCAAmC;CACrG,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,oEAAoE,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAChY,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}
+{"version":3,"file":"minimal.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/minimal.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/minimal.tailwind.ts\nconst icon = cn(\"block [grid-area:1/1] size-4.5\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"outline-2 outline-transparent -outline-offset-2\", \"font-medium\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\"),\n\ticon: cn(\"grid w-[2.375rem] aspect-square bg-transparent rounded-md\", \"text-white\", \"hover:text-white/80 hover:no-underline\", \"focus-visible:text-white/80\", \"aria-expanded:text-white/80\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-lg\", \"text-black\")\n};\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-white\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-white/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,0.75rem) bg-black\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_video::-webkit-media-text-track-container]:ease-out\", \"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\", \"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\", \"[&_video::-webkit-media-text-track-container]:scale-98\", \"[&_video::-webkit-media-text-track-container]:z-1\", \"[&_video::-webkit-media-text-track-container]:font-[inherit]\", \"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\", \"[&:fullscreen]:rounded-none\");\nconst controls = cn(\"peer/controls\", \"absolute @container/media-controls bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 flex items-center gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\";\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 flex items-center justify-center pointer-events-none\",\n\tdialog: cn(\"flex flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto\", \"text-shadow-2xs text-shadow-black/50\", \"transition-[opacity,transform] duration-500 delay-100\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\", \"group-data-[starting-style]/error:opacity-0 group-data-[starting-style]/error:scale-50\", \"group-data-[ending-style]/error:opacity-0 group-data-[ending-style]/error:scale-50\"),\n\tcontent: \"flex flex-col gap-2 py-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst buttonGroup = cn(\"flex items-center gap-[0.075rem]\", \"@2xl/media-root:gap-0.5\");\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:text-white/50\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 bg-transparent [--media-popover-side-offset:0.5rem]\", \"opacity-100 scale-100 origin-bottom blur-none\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\"),\n\tvolume: \"p-1\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time };\n//# sourceMappingURL=minimal.tailwind.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,kCAAkC,0EAA0E,yEAAyE;AAErM,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,mDAAmD,eAAe,4EAA4E,8DAA8D,qEAAqE;CACrX,MAAM,GAAG,6DAA6D,cAAc,0CAA0C,+BAA+B,8BAA8B;CAC3L,SAAS,GAAG,sCAAsC,aAAa;CAC/D;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,OAAO,GAAG,kEAAkE,oDAAoD,6EAA6E,wEAAwE;CACrR,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACtS,QAAQ,GAAG,qCAAqC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACpa;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,yBAAyB,gDAAgD,+EAA+E,mDAAmD,8DAA8D,oGAAoG,+GAA+G;EAC/hB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,oDAAoD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,+EAA+E,mEAAmE,4BAA4B,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AAC3qD,MAAM,WAAW,GAAG,iBAAiB,yDAAyD,8CAA8C,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC5tB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,yCAAyC,6BAA6B;AACxnB,MAAM,qBAAqB;AAC3B,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,2EAA2E,wCAAwC,yDAAyD,wGAAwG,0FAA0F,qFAAqF;CAC9c,SAAS;CACT,OAAO;CACP,SAAS;CACT;AACD,MAAM,cAAc,GAAG,oCAAoC,0BAA0B;AACrF,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,4DAA4D,4BAA4B;CACpG,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,qDAAqD,mCAAmC;CACrG,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,oEAAoE,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAChY,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}

package/dist/dev/ui/alert-dialog/alert-dialog-close.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { AlertDialogCore } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-close.d.ts
+interface AlertDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}
+declare const AlertDialogClose: react.ForwardRefExoticComponent<Omit<AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace AlertDialogClose {
+  type Props = AlertDialogCloseProps;
+  type State = AlertDialogCore.State;
+}
+//#endregion
+export { AlertDialogClose, AlertDialogCloseProps };
+//# sourceMappingURL=alert-dialog-close.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-close.tsx"],"mappings":";;;;;UASiB,qBAAA,SAA8B,gBAAA,WAA2B,eAAA,CAAgB,KAAA;AAAA,cAE7E,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAsBZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,eAAA,CAAgB,KAAA;AAAA"}

package/dist/dev/ui/alert-dialog/alert-dialog-close.js

@@ -0,0 +1,31 @@
+'use client';
+
+import { useAlertDialogContext } from "./context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef, useCallback } from "react";
+
+//#region src/ui/alert-dialog/alert-dialog-close.tsx
+const AlertDialogClose = forwardRef(function AlertDialogClose({ render, className, style, disabled, ...elementProps }, forwardedRef) {
+	const { dialog, state } = useAlertDialogContext();
+	const handleClick = useCallback(() => {
+		if (disabled) return;
+		dialog.close();
+	}, [dialog, disabled]);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef],
+		props: [{
+			type: "button",
+			disabled,
+			onClick: handleClick
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { AlertDialogClose };
+//# sourceMappingURL=alert-dialog-close.js.map

package/dist/dev/ui/alert-dialog/alert-dialog-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-close.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}\n\nexport const AlertDialogClose = forwardRef<HTMLButtonElement, AlertDialogCloseProps>(function AlertDialogClose(\n  { render, className, style, disabled, ...elementProps },\n  forwardedRef\n) {\n  const { dialog, state } = useAlertDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    dialog.close();\n  }, [dialog, disabled]);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ type: 'button' as const, disabled, onClick: handleClick }, elementProps],\n    }\n  );\n});\n\nexport namespace AlertDialogClose {\n  export type Props = AlertDialogCloseProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,QAAQ,UAAU,uBAAuB;CAEjD,MAAM,cAAc,kBAAkB;AACpC,MAAI,SAAU;AACd,SAAO,OAAO;IACb,CAAC,QAAQ,SAAS,CAAC;AAEtB,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,EAAE,aAAa;EACnF,CACF;EACD"}