@videojs/react 10.0.0-beta.11 → 10.0.0-beta.12

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

@@ -1,8 +1,13 @@
 import { Container, usePlayer } from "../../player/context.js";
 import { isRenderProp } from "../../utils/use-render.js";
+import { AlertDialogClose } from "../../ui/alert-dialog/alert-dialog-close.js";
+import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
+import { AlertDialogTitle } from "../../ui/alert-dialog/alert-dialog-title.js";
 import { BufferingIndicator } from "../../ui/buffering-indicator/buffering-indicator.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
 import { ControlsRoot } from "../../ui/controls/controls-root.js";
+import { ErrorDialogDescription } from "../../ui/error-dialog/error-dialog-description.js";
+import { ErrorDialogRoot } from "../../ui/error-dialog/error-dialog-root.js";
 import { FullscreenButton } from "../../ui/fullscreen-button/fullscreen-button.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
 import { PiPButton } from "../../ui/pip-button/pip-button.js";
@@ -19,7 +24,6 @@ import { SliderThumb as SliderThumb$1 } from "../../ui/slider/slider-thumb.js";
 import { SliderThumbnail } from "../../ui/slider/slider-thumbnail.js";
 import { SliderTrack as SliderTrack$1 } from "../../ui/slider/slider-track.js";
 import { SliderValue } from "../../ui/slider/slider-value.js";
-import { Group } from "../../ui/time/time-group.js";
 import { Value } from "../../ui/time/time-value.js";
 import { TimeSliderRoot } from "../../ui/time-slider/time-slider-root.js";
 import { TooltipPopup } from "../../ui/tooltip/tooltip-popup.js";
@@ -27,13 +31,11 @@ import { TooltipProvider } from "../../ui/tooltip/tooltip-provider.js";
 import { TooltipRoot } from "../../ui/tooltip/tooltip-root.js";
 import { TooltipTrigger } from "../../ui/tooltip/tooltip-trigger.js";
 import { VolumeSliderRoot } from "../../ui/volume-slider/volume-slider-root.js";
-import { ErrorDialog } from "../error-dialog.js";
 import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
 import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
-import { time } from "../../skins/dist/default/default/tailwind/components/time.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";
@@ -50,23 +52,13 @@ import VolumeLowIcon from "../../icons/dist/react/default/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
 import { overlay } from "../../skins/dist/default/default/tailwind/components/overlay.js";
 import { poster } from "../../skins/dist/default/default/tailwind/components/poster.js";
-import { bufferingIndicator, controls, error, popup, preview, root, slider } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
+import { bufferingIndicator, buttonGroupEnd, buttonGroupStart, controls, error, popup, preview, root, slider, time } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
 import { forwardRef } from "react";
 import { isString } from "@videojs/utils/predicate";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-
 //#region src/presets/video/skin.tailwind.tsx
 const SEEK_TIME = 10;
-const ERROR_CLASSNAMES = {
-	root: error.root,
-	dialog: error.dialog,
-	content: error.content,
-	title: error.title,
-	description: error.description,
-	actions: error.actions,
-	close: cn(button.base, button.primary)
-};
 const Button = forwardRef(function Button({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("button", {
 		ref,
@@ -178,71 +170,92 @@ function VideoSkinTailwind(props) {
 					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: icon })
 				})
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx(ErrorDialogRoot, { children: /* @__PURE__ */ jsx(AlertDialogPopup, {
+				className: error.root,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: error.dialog,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: error.content,
+						children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
+							className: error.title,
+							children: "Something went wrong."
+						}), /* @__PURE__ */ jsx(ErrorDialogDescription, { className: error.description })]
+					}), /* @__PURE__ */ jsx("div", {
+						className: error.actions,
+						children: /* @__PURE__ */ jsx(AlertDialogClose, {
+							className: cn(button.base, button.primary),
+							children: "OK"
+						})
+					})]
+				})
+			}) }),
 			/* @__PURE__ */ jsx(ControlsRoot, {
 				"data-controls": "",
 				className: controls,
 				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PlayButton, {
-							className: iconState.play.button,
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [
-								/* @__PURE__ */ jsx(RestartIcon, { className: cn(icon, iconState.play.restart) }),
-								/* @__PURE__ */ jsx(PlayIcon, { className: cn(icon, iconState.play.play) }),
-								/* @__PURE__ */ jsx(PauseIcon, { className: cn(icon, iconState.play.pause) })
-							]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: /* @__PURE__ */ jsx(PlayLabel, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
-							seconds: -SEEK_TIME,
-							className: seek.button,
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: /* @__PURE__ */ jsxs("span", {
-								className: iconContainer,
-								children: [/* @__PURE__ */ jsx(SeekIcon, { className: cn(icon, iconFlipped) }), /* @__PURE__ */ jsx("span", {
-									className: cn(seek.label, seek.labelBackward),
-									children: SEEK_TIME
+					/* @__PURE__ */ jsxs("div", {
+						className: buttonGroupStart,
+						children: [
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PlayButton, {
+									className: iconState.play.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [
+										/* @__PURE__ */ jsx(RestartIcon, { className: cn(icon, iconState.play.restart) }),
+										/* @__PURE__ */ jsx(PlayIcon, { className: cn(icon, iconState.play.play) }),
+										/* @__PURE__ */ jsx(PauseIcon, { className: cn(icon, iconState.play.pause) })
+									]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: /* @__PURE__ */ jsx(PlayLabel, {})
 								})]
-							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: [
-								"Seek backward ",
-								SEEK_TIME,
-								" seconds"
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
-							seconds: SEEK_TIME,
-							className: seek.button,
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: /* @__PURE__ */ jsxs("span", {
-								className: iconContainer,
-								children: [/* @__PURE__ */ jsx(SeekIcon, { className: icon }), /* @__PURE__ */ jsx("span", {
-									className: cn(seek.label, seek.labelForward),
-									children: SEEK_TIME
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+									seconds: -SEEK_TIME,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: /* @__PURE__ */ jsxs("span", {
+										className: iconContainer,
+										children: [/* @__PURE__ */ jsx(SeekIcon, { className: cn(icon, iconFlipped) }), /* @__PURE__ */ jsx("span", {
+											className: cn(seek.label, seek.labelBackward),
+											children: SEEK_TIME
+										})]
+									})
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: [
+										"Seek backward ",
+										SEEK_TIME,
+										" seconds"
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+									seconds: SEEK_TIME,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: /* @__PURE__ */ jsxs("span", {
+										className: iconContainer,
+										children: [/* @__PURE__ */ jsx(SeekIcon, { className: icon }), /* @__PURE__ */ jsx("span", {
+											className: cn(seek.label, seek.labelForward),
+											children: SEEK_TIME
+										})]
+									})
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: [
+										"Seek forward ",
+										SEEK_TIME,
+										" seconds"
+									]
 								})]
 							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: [
-								"Seek forward ",
-								SEEK_TIME,
-								" seconds"
-							]
-						})]
+						]
 					}),
-					/* @__PURE__ */ jsxs(Group, {
+					/* @__PURE__ */ jsxs("div", {
 						className: time.group,
 						children: [
 							/* @__PURE__ */ jsx(Value, {
@@ -263,7 +276,7 @@ function VideoSkinTailwind(props) {
 											/* @__PURE__ */ jsx(SliderThumbnail, { className: preview.thumbnail }),
 											/* @__PURE__ */ jsx(SliderValue, {
 												type: "pointer",
-												className: preview.timestamp
+												className: preview.time
 											}),
 											/* @__PURE__ */ jsx(SpinnerIcon, { className: cn(icon, preview.spinner) })
 										]
@@ -276,49 +289,54 @@ function VideoSkinTailwind(props) {
 							})
 						]
 					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, {
-							className: playbackRate.button,
-							render: /* @__PURE__ */ jsx(Button, {})
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: "Toggle playback rate"
-						})]
-					}),
-					/* @__PURE__ */ jsx(VolumePopover, {}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CaptionsButton, {
-							className: iconState.captions.button,
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: cn(icon, iconState.captions.off) }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: cn(icon, iconState.captions.on) })]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: /* @__PURE__ */ jsx(CaptionsLabel, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PiPButton, {
-							className: iconState.pip.button,
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: cn(icon, iconState.pip.off) }), /* @__PURE__ */ jsx(PipExitIcon, { className: cn(icon, iconState.pip.on) })]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: /* @__PURE__ */ jsx(PiPLabel, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(FullscreenButton, {
-							className: iconState.fullscreen.button,
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: cn(icon, iconState.fullscreen.enter) }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: cn(icon, iconState.fullscreen.exit) })]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: /* @__PURE__ */ jsx(FullscreenLabel, {})
-						})]
+					/* @__PURE__ */ jsxs("div", {
+						className: buttonGroupEnd,
+						children: [
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, {
+									className: playbackRate.button,
+									render: /* @__PURE__ */ jsx(Button, {})
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: "Toggle playback rate"
+								})]
+							}),
+							/* @__PURE__ */ jsx(VolumePopover, {}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CaptionsButton, {
+									className: iconState.captions.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: cn(icon, iconState.captions.off) }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: cn(icon, iconState.captions.on) })]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: /* @__PURE__ */ jsx(CaptionsLabel, {})
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PiPButton, {
+									className: iconState.pip.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: cn(icon, iconState.pip.off) }), /* @__PURE__ */ jsx(PipExitIcon, { className: cn(icon, iconState.pip.on) })]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: /* @__PURE__ */ jsx(PiPLabel, {})
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(FullscreenButton, {
+									className: iconState.fullscreen.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: cn(icon, iconState.fullscreen.enter) }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: cn(icon, iconState.fullscreen.exit) })]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: /* @__PURE__ */ jsx(FullscreenLabel, {})
+								})]
+							})
+						]
 					})
 				] })
 			}),
@@ -326,7 +344,7 @@ function VideoSkinTailwind(props) {
 		]
 	});
 }
-
 //#endregion
 export { VideoSkinTailwind };
+
 //# sourceMappingURL=skin.tailwind.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/skin.tailwind.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipEnterIcon,\n  PipExitIcon,\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  poster,\n  preview,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { isString } from '@videojs/utils/predicate';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } 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 { Poster } from '@/ui/poster';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { isRenderProp } from '@/utils/use-render';\nimport { ErrorDialog } from '../error-dialog';\nimport type { VideoSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\nconst ERROR_CLASSNAMES = {\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.primary),\n};\n\n/* --------------------------------------- Components ---------------------------------------- */\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button ref={ref} type=\"button\" className={cn(button.base, button.subtle, button.icon, className)} {...props} />\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 SliderBuffer = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderBuffer(props, ref) {\n  return <SliderFill type=\"buffer\" ref={ref} {...props} />;\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\nfunction PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\n}\n\nfunction CaptionsLabel(): string {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? 'Disable captions' : 'Enable captions';\n}\n\nfunction PiPLabel(): string {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';\n}\n\nfunction FullscreenLabel(): string {\n  const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n  return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';\n}\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className={iconState.mute.button} render={<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    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className={cn(popup.popover, popup.volume)}>\n        <VolumeSlider.Root orientation=\"vertical\" thumbAlignment=\"edge\" render={<SliderRoot />}>\n          <VolumeSlider.Track render={<SliderTrack />}>\n            <VolumeSlider.Fill render={<SliderFill />} />\n          </VolumeSlider.Track>\n          <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n        </VolumeSlider.Root>\n      </Popover.Popup>\n    </Popover.Root>\n  );\n}\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function VideoSkinTailwind(props: VideoSkinProps): ReactNode {\n  const { children, className, poster: posterProp, ...rest } = props;\n\n  return (\n    <Container className={cn(root(false), className)} {...rest}>\n      {children}\n\n      {posterProp && (\n        <Poster\n          src={isString(posterProp) ? posterProp : undefined}\n          render={isRenderProp(posterProp) ? posterProp : undefined}\n          className={poster(false)}\n        />\n      )}\n\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 classNames={ERROR_CLASSNAMES} />\n\n      <Controls.Root\n        data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n        className={controls}\n      >\n        <Tooltip.Provider>\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <PlayButton className={iconState.play.button} render={<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                </PlayButton>\n              }\n            />\n            <Tooltip.Popup className={cn(popup.tooltip)}>\n              <PlayLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <SeekButton seconds={-SEEK_TIME} className={seek.button} render={<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                </SeekButton>\n              }\n            />\n            <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <SeekButton seconds={SEEK_TIME} className={seek.button} render={<Button />}>\n                  <span className={iconContainer}>\n                    <SeekIcon className={icon} />\n                    <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n                  </span>\n                </SeekButton>\n              }\n            />\n            <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Time.Group className={time.group}>\n            <Time.Value type=\"current\" className={time.current} />\n            <TimeSlider.Root render={<SliderRoot />}>\n              <TimeSlider.Track render={<SliderTrack />}>\n                <TimeSlider.Fill render={<SliderFill />} />\n                <TimeSlider.Buffer render={<SliderBuffer />} />\n              </TimeSlider.Track>\n              <TimeSlider.Thumb render={<SliderThumb />} />\n              <div className={preview.root}>\n                <Slider.Thumbnail className={preview.thumbnail} />\n                <TimeSlider.Value type=\"pointer\" className={preview.timestamp} />\n                <SpinnerIcon className={cn(icon, preview.spinner)} />\n              </div>\n            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className={time.duration} />\n          </Time.Group>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger render={<PlaybackRateButton className={playbackRate.button} render={<Button />} />} />\n            <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <VolumePopover />\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <CaptionsButton className={iconState.captions.button} render={<Button />}>\n                  <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n                  <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n                </CaptionsButton>\n              }\n            />\n            <Tooltip.Popup className={cn(popup.tooltip)}>\n              <CaptionsLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <PiPButton className={iconState.pip.button} render={<Button />}>\n                  <PipEnterIcon className={cn(icon, iconState.pip.off)} />\n                  <PipExitIcon className={cn(icon, iconState.pip.on)} />\n                </PiPButton>\n              }\n            />\n            <Tooltip.Popup className={cn(popup.tooltip)}>\n              <PiPLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <FullscreenButton className={iconState.fullscreen.button} render={<Button />}>\n                  <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n                  <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n                </FullscreenButton>\n              }\n            />\n            <Tooltip.Popup className={cn(popup.tooltip)}>\n              <FullscreenLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className={overlay} />\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.tailwind.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/skin.tailwind.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipEnterIcon,\n  PipExitIcon,\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  buttonGroupEnd,\n  buttonGroupStart,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  poster,\n  preview,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { isString } from '@videojs/utils/predicate';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } 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 { Poster } from '@/ui/poster';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { isRenderProp } from '@/utils/use-render';\nimport type { VideoSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- */\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button ref={ref} type=\"button\" className={cn(button.base, button.subtle, button.icon, className)} {...props} />\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 SliderBuffer = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderBuffer(props, ref) {\n  return <SliderFill type=\"buffer\" ref={ref} {...props} />;\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\nfunction PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\n}\n\nfunction CaptionsLabel(): string {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? 'Disable captions' : 'Enable captions';\n}\n\nfunction PiPLabel(): string {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';\n}\n\nfunction FullscreenLabel(): string {\n  const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n  return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';\n}\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className={iconState.mute.button} render={<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    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className={cn(popup.popover, popup.volume)}>\n        <VolumeSlider.Root orientation=\"vertical\" thumbAlignment=\"edge\" render={<SliderRoot />}>\n          <VolumeSlider.Track render={<SliderTrack />}>\n            <VolumeSlider.Fill render={<SliderFill />} />\n          </VolumeSlider.Track>\n          <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n        </VolumeSlider.Root>\n      </Popover.Popup>\n    </Popover.Root>\n  );\n}\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function VideoSkinTailwind(props: VideoSkinProps): ReactNode {\n  const { children, className, poster: posterProp, ...rest } = props;\n\n  return (\n    <Container className={cn(root(false), className)} {...rest}>\n      {children}\n\n      {posterProp && (\n        <Poster\n          src={isString(posterProp) ? posterProp : undefined}\n          render={isRenderProp(posterProp) ? posterProp : undefined}\n          className={poster(false)}\n        />\n      )}\n\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.Root>\n        <ErrorDialog.Popup className={error.root}>\n          <div className={error.dialog}>\n            <div className={error.content}>\n              <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>\n              <ErrorDialog.Description className={error.description} />\n            </div>\n            <div className={error.actions}>\n              <ErrorDialog.Close className={cn(button.base, button.primary)}>OK</ErrorDialog.Close>\n            </div>\n          </div>\n        </ErrorDialog.Popup>\n      </ErrorDialog.Root>\n\n      <Controls.Root\n        data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n        className={controls}\n      >\n        <Tooltip.Provider>\n          <div className={buttonGroupStart}>\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PlayButton className={iconState.play.button} render={<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                  </PlayButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>\n                <PlayLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={-SEEK_TIME} render={<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                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={SEEK_TIME} render={<Button />}>\n                    <span className={iconContainer}>\n                      <SeekIcon className={icon} />\n                      <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div className={time.group}>\n            <Time.Value type=\"current\" className={time.current} />\n            <TimeSlider.Root render={<SliderRoot />}>\n              <TimeSlider.Track render={<SliderTrack />}>\n                <TimeSlider.Fill render={<SliderFill />} />\n                <TimeSlider.Buffer render={<SliderBuffer />} />\n              </TimeSlider.Track>\n              <TimeSlider.Thumb render={<SliderThumb />} />\n              <div className={preview.root}>\n                <Slider.Thumbnail className={preview.thumbnail} />\n                <TimeSlider.Value type=\"pointer\" className={preview.time} />\n                <SpinnerIcon className={cn(icon, preview.spinner)} />\n              </div>\n            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className={time.duration} />\n          </div>\n\n          <div className={buttonGroupEnd}>\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger render={<PlaybackRateButton className={playbackRate.button} render={<Button />} />} />\n              <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <VolumePopover />\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <CaptionsButton className={iconState.captions.button} render={<Button />}>\n                    <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n                    <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n                  </CaptionsButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>\n                <CaptionsLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PiPButton className={iconState.pip.button} render={<Button />}>\n                    <PipEnterIcon className={cn(icon, iconState.pip.off)} />\n                    <PipExitIcon className={cn(icon, iconState.pip.on)} />\n                  </PiPButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>\n                <PiPLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <FullscreenButton className={iconState.fullscreen.button} render={<Button />}>\n                    <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n                    <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n                  </FullscreenButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>\n                <FullscreenLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className={overlay} />\n    </Container>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,21 +1,20 @@
-import { iconState } from "../../shared/tailwind/icon-state.js";
+import "../../shared/tailwind/icon-state.js";
 import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
 import { controls as controls$1 } from "./components/controls.js";
 import { error as error$1 } from "./components/error.js";
 import { popup as popup$1 } from "./components/popup.js";
 import { root as root$1 } from "./components/root.js";
 import { slider as slider$1 } from "./components/slider.js";
-import { surface as surface$1 } from "./components/surface.js";
-import { button } from "./components/button.js";
-import { icon, iconContainer, iconFlipped } from "./components/icon.js";
-import { playbackRate } from "./components/playback-rate.js";
-import { seek } from "./components/seek.js";
-import { time } from "./components/time.js";
+import { surface } from "./components/surface.js";
+import "./components/button.js";
+import "./components/button-group.js";
+import "./components/icon.js";
+import "./components/playback-rate.js";
+import "./components/seek.js";
+import "./components/time.js";
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/audio.tailwind.js
-const root = cn(root$1, "[--media-text-color:var(--media-color-primary,oklch(0_0_0))]", "[--media-error-dialog-transition-duration:250ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]");
-const surface = cn(surface$1, "bg-white/50 dark:bg-black/40", "backdrop-blur-lg backdrop-saturate-150", "ring-black/5 shadow-sm shadow-black/15", "after:ring-white/10", "[@media(prefers-reduced-transparency:reduce)]:bg-white/70 dark:[@media(prefers-reduced-transparency:reduce)]:bg-black/70", "contrast-more:bg-white/90 dark:contrast-more:bg-black/90");
+const root = cn(root$1, "[--media-text-color:var(--media-color-primary,oklch(0_0_0))]", "[--media-surface-background-color:oklch(1_0_0/0.5)]", "[--media-surface-inner-border-color:oklch(1_0_0/0.1)]", "[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "[--media-surface-shadow-color:oklch(0_0_0/0.15)]", "[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]", "[--media-error-dialog-transition-duration:250ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "[--media-tooltip-side-offset:0.75rem]", "[--media-popover-side-offset:0.75rem]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "dark:[--media-surface-background-color:oklch(0_0_0/0.4)]", "dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]", "[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(1_0_0)]", "contrast-more:[--media-surface-background-color:oklch(1_0_0)]", "[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "contrast-more:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]", "dark:contrast-more:[--media-surface-background-color:oklch(0_0_0)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]", "dark:contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]", "dark:contrast-more:[--media-surface-outer-border-color:transparent]");
 const controls = cn(controls$1, surface, "text-(--media-text-color)", "peer-data-open/error:[&_*]:invisible");
 const slider = {
 	...slider$1,
@@ -26,16 +25,13 @@ const popup = {
 	popover: cn(surface, popup$1.popover),
 	tooltip: cn(surface, popup$1.tooltip)
 };
-const bufferingIndicator = {
-	...bufferingIndicator$1,
-	container: cn(bufferingIndicator$1.container, surface)
-};
+({ ...bufferingIndicator$1 }), cn(bufferingIndicator$1.container, surface);
 const error = {
 	...error$1,
-	dialog: cn("absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5", "bg-(--media-surface-background-color) text-(--media-text-color)", "backdrop-blur-lg backdrop-saturate-150", "transition-[opacity,filter] ease-out", "duration-(--media-error-dialog-transition-duration)", "delay-(--media-error-dialog-transition-delay)", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]", "group-data-ending-style/error:delay-0"),
+	dialog: cn("absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5", "bg-(--media-surface-background-color) text-(--media-text-color)", "backdrop-blur-lg backdrop-saturate-150", "transition-[opacity,filter] ease-out", "duration-(--media-error-dialog-transition-duration)", "delay-(--media-error-dialog-transition-delay)", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs", "group-data-ending-style/error:delay-0"),
 	content: "flex flex-1 items-center gap-2"
 };
-
 //#endregion
 export { controls, error, popup, root, slider };
+
 //# sourceMappingURL=audio.tailwind.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-text-color:var(--media-color-primary,oklch(0_0_0))]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]\");\nconst surface = cn(surface$1, \"bg-white/50 dark:bg-black/40\", \"backdrop-blur-lg backdrop-saturate-150\", \"ring-black/5 shadow-sm shadow-black/15\", \"after:ring-white/10\", \"[@media(prefers-reduced-transparency:reduce)]:bg-white/70 dark:[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-white/90 dark:contrast-more:bg-black/90\");\nconst controls = cn(controls$1, surface, \"text-(--media-text-color)\", \"peer-data-open/error:[&_*]:invisible\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:ring-1 dark:ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(\"absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5\", \"bg-(--media-surface-background-color) text-(--media-text-color)\", \"backdrop-blur-lg backdrop-saturate-150\", \"transition-[opacity,filter] ease-out\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-1 items-center gap-2\"\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,GAAG,QAAQ,gEAAgE,oDAAoD,iDAAiD,6CAA6C,uDAAuD,iEAAiE,6DAA6D,yDAAyD,oEAAoE;AAC5hB,MAAM,UAAU,GAAG,WAAW,gCAAgC,0CAA0C,0CAA0C,uBAAuB,4HAA4H,2DAA2D;AAChW,MAAM,WAAW,GAAG,YAAY,SAAS,6BAA6B,uCAAuC;AAC7G,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,iDAAiD;CAC1F;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0EAA0E,mEAAmE,0CAA0C,wCAAwC,uDAAuD,iDAAiD,wFAAwF,oFAAoF,wCAAwC;CACtiB,SAAS;CACT"}
+{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-text-color:var(--media-color-primary,oklch(0_0_0))]\", \"[--media-surface-background-color:oklch(1_0_0/0.5)]\", \"[--media-surface-inner-border-color:oklch(1_0_0/0.1)]\", \"[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"[--media-surface-shadow-color:oklch(0_0_0/0.15)]\", \"[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"[--media-tooltip-side-offset:0.75rem]\", \"[--media-popover-side-offset:0.75rem]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"dark:[--media-surface-background-color:oklch(0_0_0/0.4)]\", \"dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(1_0_0)]\", \"contrast-more:[--media-surface-background-color:oklch(1_0_0)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"contrast-more:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]\", \"dark:contrast-more:[--media-surface-background-color:oklch(0_0_0)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]\", \"dark:contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]\", \"dark:contrast-more:[--media-surface-outer-border-color:transparent]\");\nconst controls = cn(controls$1, surface, \"text-(--media-text-color)\", \"peer-data-open/error:[&_*]:invisible\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:ring-1 dark:ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(\"absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5\", \"bg-(--media-surface-background-color) text-(--media-text-color)\", \"backdrop-blur-lg backdrop-saturate-150\", \"transition-[opacity,filter] ease-out\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-1 items-center gap-2\"\n};\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, time, tooltipState };\n\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,GAAG,QAAQ,gEAAgE,uDAAuD,yDAAyD,0DAA0D,oDAAoD,8DAA8D,oDAAoD,iDAAiD,6CAA6C,uDAAuD,yCAAyC,yCAAyC,iEAAiE,6DAA6D,yDAAyD,4DAA4D,qEAAqE,iGAAiG,iEAAiE,wGAAwG,wEAAwE,sGAAsG,sEAAsE,4GAA4G,4EAA4E,uGAAuG,sEAAsE;AAC1yD,MAAM,WAAW,GAAG,YAAY,SAAS,6BAA6B,uCAAuC;AAC7G,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,iDAAiD;CAC1F;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;CAGA,EADA,GAAG,sBACmD,GAA3C,GAAG,qBAAqB,WAAW,QAAQ;AAEvD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0EAA0E,mEAAmE,0CAA0C,wCAAwC,uDAAuD,iDAAiD,qFAAqF,iFAAiF,wCAAwC;CAChiB,SAAS;CACT"}

package/dist/dev/skins/dist/default/default/tailwind/components/buffering.js

@@ -3,7 +3,7 @@ const bufferingIndicator = {
 	root: "absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex",
 	container: "p-1 rounded-full"
 };
-
 //#endregion
 export { bufferingIndicator };
+
 //# sourceMappingURL=buffering.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/buffering.js.map

@@ -1 +1 @@
-{"version":3,"file":"buffering.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/buffering.js"],"sourcesContent":["//#region src/default/tailwind/components/buffering.ts\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex\",\n\tcontainer: \"p-1 rounded-full\"\n};\n\n//#endregion\nexport { bufferingIndicator };\n//# sourceMappingURL=buffering.js.map"],"mappings":";AACA,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW;CACX"}
+{"version":3,"file":"buffering.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/buffering.js"],"sourcesContent":["//#region src/default/tailwind/components/buffering.ts\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex\",\n\tcontainer: \"p-1 rounded-full\"\n};\n//#endregion\nexport { bufferingIndicator };\n\n//# sourceMappingURL=buffering.js.map"],"mappings":";AACA,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW;CACX"}

package/dist/dev/skins/dist/default/default/tailwind/components/button-group.js

@@ -0,0 +1,7 @@
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/default/tailwind/components/button-group.js
+const buttonGroup = cn("flex items-center gap-[0.075rem]", "@2xl/media-root:gap-0.5");
+//#endregion
+export { buttonGroup };
+
+//# sourceMappingURL=button-group.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/button-group.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/button-group.ts\nconst buttonGroup = cn(\"flex items-center gap-[0.075rem]\", \"@2xl/media-root:gap-0.5\");\n//#endregion\nexport { buttonGroup };\n\n//# sourceMappingURL=button-group.js.map"],"mappings":";;AAEA,MAAM,cAAc,GAAG,oCAAoC,0BAA0B"}

package/dist/dev/skins/dist/default/default/tailwind/components/button.js

@@ -1,13 +1,12 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/components/button.js
 const button = {
-	base: cn("flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation", "py-2 px-4 rounded-full", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,outline-offset,scale] duration-150 ease-out", "active:scale-[0.98]", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "focus-visible:outline-current focus-visible:outline-offset-2", "data-[availability=unavailable]:hidden"),
+	base: cn("flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation", "py-2 px-4 rounded-full", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out", "active:scale-[0.98]", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "focus-visible:outline-current focus-visible:outline-offset-2", "data-[availability=unavailable]:hidden"),
 	primary: "bg-white text-black font-medium text-shadow-none",
 	subtle: cn("bg-transparent text-inherit text-shadow-inherit", "hover:bg-current/10 hover:no-underline", "focus-visible:bg-current/10", "aria-expanded:bg-current/10"),
-	icon: cn("grid w-[2.125rem] aspect-square p-0", "active:scale-90")
+	icon: cn("grid w-9 aspect-square p-0", "active:scale-90")
 };
-
 //#endregion
 export { button };
+
 //# sourceMappingURL=button.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/button.ts\nconst button = {\n\tbase: cn(\"flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation\", \"py-2 px-4 rounded-full\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,outline-offset,scale] duration-150 ease-out\", \"active:scale-[0.98]\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[availability=unavailable]:hidden\"),\n\tprimary: \"bg-white text-black font-medium text-shadow-none\",\n\tsubtle: cn(\"bg-transparent text-inherit text-shadow-inherit\", \"hover:bg-current/10 hover:no-underline\", \"focus-visible:bg-current/10\", \"aria-expanded:bg-current/10\"),\n\ticon: cn(\"grid w-[2.125rem] aspect-square p-0\", \"active:scale-90\")\n};\n\n//#endregion\nexport { button };\n//# sourceMappingURL=button.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,mHAAmH,0BAA0B,mDAAmD,4EAA4E,uBAAuB,sEAAsE,gEAAgE,yCAAyC;CAC3d,SAAS;CACT,QAAQ,GAAG,mDAAmD,0CAA0C,+BAA+B,8BAA8B;CACrK,MAAM,GAAG,uCAAuC,kBAAkB;CAClE"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/button.ts\nconst button = {\n\tbase: cn(\"flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation\", \"py-2 px-4 rounded-full\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out\", \"active:scale-[0.98]\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[availability=unavailable]:hidden\"),\n\tprimary: \"bg-white text-black font-medium text-shadow-none\",\n\tsubtle: cn(\"bg-transparent text-inherit text-shadow-inherit\", \"hover:bg-current/10 hover:no-underline\", \"focus-visible:bg-current/10\", \"aria-expanded:bg-current/10\"),\n\ticon: cn(\"grid w-9 aspect-square p-0\", \"active:scale-90\")\n};\n//#endregion\nexport { button };\n\n//# sourceMappingURL=button.js.map"],"mappings":";;AAEA,MAAM,SAAS;CACd,MAAM,GAAG,mHAAmH,0BAA0B,mDAAmD,gGAAgG,uBAAuB,sEAAsE,gEAAgE,yCAAyC;CAC/e,SAAS;CACT,QAAQ,GAAG,mDAAmD,0CAA0C,+BAA+B,8BAA8B;CACrK,MAAM,GAAG,8BAA8B,kBAAkB;CACzD"}

package/dist/dev/skins/dist/default/default/tailwind/components/controls.js

@@ -1,8 +1,7 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/components/controls.js
-const controls = cn("peer/controls", "@container/media-controls", "p-[0.175rem] flex items-center gap-[0.075rem]", "rounded-full", "[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]", "[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "text-shadow-[0_1px_0_var(--media-controls-current-shadow-color)]", "@2xl/media-root:p-1 @2xl/media-root:gap-0.5");
-
+const controls = cn("peer/controls", "@container/media-controls", "p-[0.375rem] flex items-center gap-x-[0.075rem]", "rounded-3xl", "[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]", "[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "text-shadow-2xs text-shadow-(color:--media-controls-current-shadow-color)");
 //#endregion
 export { controls };
+
 //# sourceMappingURL=controls.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/controls.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/controls.ts\nconst controls = cn(\"peer/controls\", \"@container/media-controls\", \"p-[0.175rem] flex items-center gap-[0.075rem]\", \"rounded-full\", \"[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]\", \"[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]\", \"text-shadow-[0_1px_0_var(--media-controls-current-shadow-color)]\", \"@2xl/media-root:p-1 @2xl/media-root:gap-0.5\");\n\n//#endregion\nexport { controls };\n//# sourceMappingURL=controls.js.map"],"mappings":";;;AAGA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,iDAAiD,gBAAgB,0GAA0G,+HAA+H,oEAAoE,8CAA8C"}
+{"version":3,"file":"controls.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/controls.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/controls.ts\nconst controls = cn(\"peer/controls\", \"@container/media-controls\", \"p-[0.375rem] flex items-center gap-x-[0.075rem]\", \"rounded-3xl\", \"[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]\", \"[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]\", \"text-shadow-2xs text-shadow-(color:--media-controls-current-shadow-color)\");\n//#endregion\nexport { controls };\n\n//# sourceMappingURL=controls.js.map"],"mappings":";;AAEA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,mDAAmD,eAAe,0GAA0G,+HAA+H,4EAA4E"}