@videojs/react 10.0.0-beta.21 → 10.0.0-beta.23

package/dist/default/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","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 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)}></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)}></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)}></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)}></Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className={overlay} />\n    </Container>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,YAAY;AAIlB,MAAM,SAAS,WAAwD,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;AACnH,QACE,oBAAC,UAAD;EAAa;EAAK,MAAK;EAAS,WAAW,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU;EAAE,GAAI;EAAS,CAAA;EAElH;AAEF,MAAM,aAAa,WAAkD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;AACrH,QAAO,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,GAAI;EAAS,CAAA;EAC1E;AAEF,MAAM,cAAc,WAAkD,SAAS,YAC7E,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,OAAO,OAAO,UAAU;EAAE,GAAI;EAAS,CAAA;EAC3E;AAEF,MAAM,aAAa,WAAiF,SAAS,WAC3G,EAAE,OAAO,QAAQ,WAAW,GAAG,SAC/B,KACA;AACA,QACE,oBAAC,OAAD;EACO;EACL,WAAW,GAAG,OAAO,KAAK,MAAM,SAAS,SAAS,OAAO,KAAK,OAAO,OAAO,KAAK,QAAQ,UAAU;EACnG,GAAI;EACJ,CAAA;EAEJ;AAEF,MAAM,eAAe,WAAkD,SAAS,aAAa,OAAO,KAAK;AACvG,QAAO,oBAAC,YAAD;EAAY,MAAK;EAAc;EAAK,GAAI;EAAS,CAAA;EACxD;AAEF,MAAM,cAAc,WAA6E,SAAS,YACxG,EAAE,YAAY,WAAW,GAAG,SAC5B,KACA;AACA,QACE,oBAAC,OAAD;EACO;EACL,WAAW,GAAG,OAAO,MAAM,MAAM,aAAa,OAAO,MAAM,aAAa,OAAO,MAAM,aAAa,UAAU;EAC5G,GAAI;EACJ,CAAA;EAEJ;AAEF,SAAS,gBAA2B;CAClC,MAAM,oBAAoB,WAAW,MAAM,EAAE,uBAAuB,cAAc;CAElF,MAAM,aACJ,qBAAC,YAAD;EAAY,WAAW,UAAU,KAAK;EAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;YAAhE;GACE,oBAAC,eAAD,EAAe,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,EAAI,CAAA;GAChE,oBAAC,eAAD,EAAe,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,EAAI,CAAA;GAChE,oBAAC,gBAAD,EAAgB,WAAW,GAAG,MAAM,UAAU,KAAK,WAAW,EAAI,CAAA;GACvD;;AAGf,KAAI,kBAAmB,QAAO;AAE9B,QACE,qBAACA,aAAD;EAAc,aAAA;EAAY,OAAO;EAAK,YAAY;EAAK,MAAK;YAA5D,CACE,oBAACC,gBAAD,EAAiB,QAAQ,YAAc,CAAA,EACvC,oBAACC,cAAD;GAAe,WAAW,GAAG,MAAM,SAAS,MAAM,OAAO;aACvD,qBAACC,kBAAD;IAAmB,aAAY;IAAW,gBAAe;IAAO,QAAQ,oBAAC,YAAD,EAAc,CAAA;cAAtF,CACE,oBAACC,eAAD;KAAoB,QAAQ,oBAAC,aAAD,EAAe,CAAA;eACzC,oBAACC,cAAD,EAAmB,QAAQ,oBAAC,YAAD,EAAc,CAAA,EAAI,CAAA;KAC1B,CAAA,EACrB,oBAACC,eAAD,EAAoB,SAAS,UAAU,oBAAC,aAAD;KAAa,YAAA;KAAW,GAAI;KAAS,CAAA,EAAI,CAAA,CAC9D;;GACN,CAAA,CACH;;;AAMnB,SAAgB,kBAAkB,OAAkC;CAClE,MAAM,EAAE,UAAU,WAAW,QAAQ,YAAY,GAAG,SAAS;AAE7D,QACE,qBAAC,WAAD;EAAW,WAAW,GAAG,KAAK,MAAM,EAAE,UAAU;EAAE,GAAI;YAAtD;GACG;GAEA,cACC,oBAAC,QAAD;IACE,KAAK,SAAS,WAAW,GAAG,aAAa,KAAA;IACzC,QAAQ,aAAa,WAAW,GAAG,aAAa,KAAA;IAChD,WAAW,OAAO,MAAM;IACxB,CAAA;GAGJ,oBAAC,oBAAD,EACE,SAAS,UACP,oBAAC,OAAD;IAAK,GAAI;IAAO,WAAW,mBAAmB;cAC5C,oBAAC,OAAD;KAAK,WAAW,mBAAmB;eACjC,oBAAC,aAAD,EAAa,WAAW,MAAQ,CAAA;KAC5B,CAAA;IACF,CAAA,EAER,CAAA;GAEF,oBAACC,iBAAD,EAAA,UACE,oBAACC,kBAAD;IAAmB,WAAW,MAAM;cAClC,qBAAC,OAAD;KAAK,WAAW,MAAM;eAAtB,CACE,qBAAC,OAAD;MAAK,WAAW,MAAM;gBAAtB,CACE,oBAACC,kBAAD;OAAmB,WAAW,MAAM;iBAAO;OAAyC,CAAA,EACpF,oBAACC,wBAAD,EAAyB,WAAW,MAAM,aAAe,CAAA,CACrD;SACN,oBAAC,OAAD;MAAK,WAAW,MAAM;gBACpB,oBAACC,kBAAD;OAAmB,WAAW,GAAG,OAAO,MAAM,OAAO,QAAQ;iBAAE;OAAsB,CAAA;MACjF,CAAA,CACF;;IACY,CAAA,EACH,CAAA;GAEnB,oBAACC,cAAD;IACE,iBAAc;IACd,WAAW;cAEX,qBAACC,iBAAD,EAAA,UAAA;KACE,qBAAC,OAAD;MAAK,WAAW;gBAAhB;OACE,qBAACC,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,qBAAC,YAAD;SAAY,WAAW,UAAU,KAAK;SAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBAAhE;UACE,oBAAC,aAAD,EAAa,WAAW,GAAG,MAAM,UAAU,KAAK,QAAQ,EAAI,CAAA;UAC5D,oBAAC,UAAD,EAAU,WAAW,GAAG,MAAM,UAAU,KAAK,KAAK,EAAI,CAAA;UACtD,oBAAC,WAAD,EAAW,WAAW,GAAG,MAAM,UAAU,KAAK,MAAM,EAAI,CAAA;UAC7C;YAEf,CAAA,EACF,oBAACC,cAAD,EAAe,WAAW,GAAG,MAAM,QAAQ,EAAkB,CAAA,CAChD;;OAEf,qBAACF,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,oBAAC,YAAD;SAAY,SAAS,CAAC;SAAW,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBACjD,qBAAC,QAAD;UAAM,WAAW;oBAAjB,CACE,oBAAC,UAAD,EAAU,WAAW,GAAG,MAAM,YAAY,EAAI,CAAA,EAC9C,oBAAC,QAAD;WAAM,WAAW,GAAG,KAAK,OAAO,KAAK,cAAc;qBAAG;WAAiB,CAAA,CAClE;;SACI,CAAA,EAEf,CAAA,EACF,qBAACC,cAAD;SAAe,WAAW,GAAG,MAAM,QAAQ;mBAA3C;UAA6C;UAAe;UAAU;UAAwB;WACjF;;OAEf,qBAACF,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,oBAAC,YAAD;SAAY,SAAS;SAAW,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBAChD,qBAAC,QAAD;UAAM,WAAW;oBAAjB,CACE,oBAAC,UAAD,EAAU,WAAW,MAAQ,CAAA,EAC7B,oBAAC,QAAD;WAAM,WAAW,GAAG,KAAK,OAAO,KAAK,aAAa;qBAAG;WAAiB,CAAA,CACjE;;SACI,CAAA,EAEf,CAAA,EACF,qBAACC,cAAD;SAAe,WAAW,GAAG,MAAM,QAAQ;mBAA3C;UAA6C;UAAc;UAAU;UAAwB;WAChF;;OACX;;KAEN,qBAAC,OAAD;MAAK,WAAW,KAAK;gBAArB;OACE,oBAACC,OAAD;QAAY,MAAK;QAAU,WAAW,KAAK;QAAW,CAAA;OACtD,qBAACC,gBAAD;QAAiB,QAAQ,oBAAC,YAAD,EAAc,CAAA;kBAAvC;SACE,qBAACC,eAAD;UAAkB,QAAQ,oBAAC,aAAD,EAAe,CAAA;oBAAzC,CACE,oBAACC,cAAD,EAAiB,QAAQ,oBAAC,YAAD,EAAc,CAAA,EAAI,CAAA,EAC3C,oBAACC,gBAAD,EAAmB,QAAQ,oBAAC,cAAD,EAAgB,CAAA,EAAI,CAAA,CAC9B;;SACnB,oBAACC,eAAD,EAAkB,QAAQ,oBAAC,aAAD,EAAe,CAAA,EAAI,CAAA;SAC7C,qBAAC,OAAD;UAAK,WAAW,QAAQ;oBAAxB;WACE,oBAACC,iBAAD,EAAkB,WAAW,QAAQ,WAAa,CAAA;WAClD,oBAACC,aAAD;YAAkB,MAAK;YAAU,WAAW,QAAQ;YAAQ,CAAA;WAC5D,oBAAC,aAAD,EAAa,WAAW,GAAG,MAAM,QAAQ,QAAQ,EAAI,CAAA;WACjD;;SACU;;OAClB,oBAACP,OAAD;QAAY,MAAK;QAAW,WAAW,KAAK;QAAY,CAAA;OACpD;;KAEN,qBAAC,OAAD;MAAK,WAAW;gBAAhB;OACE,qBAACH,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EAAiB,QAAQ,oBAAC,oBAAD;SAAoB,WAAW,aAAa;SAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;SAAI,CAAA,EAAI,CAAA,EACvG,oBAACC,cAAD;SAAe,WAAW,GAAG,MAAM,QAAQ;mBAAE;SAAoC,CAAA,CACpE;;OAEf,oBAAC,eAAD,EAAiB,CAAA;OAEjB,qBAACF,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,qBAAC,gBAAD;SAAgB,WAAW,UAAU,SAAS;SAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBAAxE,CACE,oBAAC,iBAAD,EAAiB,WAAW,GAAG,MAAM,UAAU,SAAS,IAAI,EAAI,CAAA,EAChE,oBAAC,gBAAD,EAAgB,WAAW,GAAG,MAAM,UAAU,SAAS,GAAG,EAAI,CAAA,CAC/C;YAEnB,CAAA,EACF,oBAACC,cAAD,EAAe,WAAW,GAAG,MAAM,QAAQ,EAAkB,CAAA,CAChD;;OAEf,qBAACF,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,qBAAC,WAAD;SAAW,WAAW,UAAU,IAAI;SAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBAA9D,CACE,oBAAC,cAAD,EAAc,WAAW,GAAG,MAAM,UAAU,IAAI,IAAI,EAAI,CAAA,EACxD,oBAAC,aAAD,EAAa,WAAW,GAAG,MAAM,UAAU,IAAI,GAAG,EAAI,CAAA,CAC5C;YAEd,CAAA,EACF,oBAACC,cAAD,EAAe,WAAW,GAAG,MAAM,QAAQ,EAAkB,CAAA,CAChD;;OAEf,qBAACF,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,qBAAC,kBAAD;SAAkB,WAAW,UAAU,WAAW;SAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBAA5E,CACE,oBAAC,qBAAD,EAAqB,WAAW,GAAG,MAAM,UAAU,WAAW,MAAM,EAAI,CAAA,EACxE,oBAAC,oBAAD,EAAoB,WAAW,GAAG,MAAM,UAAU,WAAW,KAAK,EAAI,CAAA,CACrD;YAErB,CAAA,EACF,oBAACC,cAAD,EAAe,WAAW,GAAG,MAAM,QAAQ,EAAkB,CAAA,CAChD;;OACX;;KACW,EAAA,CAAA;IACL,CAAA;GAEhB,oBAAC,OAAD,EAAK,WAAW,SAAW,CAAA;GACjB"}
+{"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  CastEnterIcon,\n  CastExitIcon,\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 { CastButton } from '@/ui/cast-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 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)}></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)}></Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <CastButton className={iconState.cast.button} render={<Button />}>\n                    <CastEnterIcon className={cn(icon, iconState.cast.enter)} />\n                    <CastExitIcon className={cn(icon, iconState.cast.exit)} />\n                  </CastButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}></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)}></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)}></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/default/skins/dist/default/default/tailwind/components/button.js

@@ -1,7 +1,7 @@
 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] 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"),
+	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", "data-[availability=unsupported]: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-9 aspect-square p-0", "active:scale-90")

package/dist/default/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//#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"}
+{"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\", \"data-[availability=unsupported]: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,0CAA0C,yCAAyC;CACzhB,SAAS;CACT,QAAQ,GAAG,mDAAmD,0CAA0C,+BAA+B,8BAA8B;CACrK,MAAM,GAAG,8BAA8B,kBAAkB;CACzD"}

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

@@ -1,7 +1,7 @@
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/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-lg", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out", "focus-visible:outline-current focus-visible:outline-offset-2", "active:scale-[0.98]", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "supports-[corner-shape:squircle]:rounded-[1rem]", "supports-[corner-shape:squircle]:[corner-shape:squircle]", "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-lg", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out", "focus-visible:outline-current focus-visible:outline-offset-2", "active:scale-[0.98]", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "supports-[corner-shape:squircle]:rounded-[1rem]", "supports-[corner-shape:squircle]:[corner-shape:squircle]", "data-[availability=unavailable]:hidden", "data-[availability=unsupported]:hidden"),
 	primary: "bg-white text-black font-medium text-shadow-none",
 	subtle: cn("bg-transparent text-inherit text-shadow-inherit", "hover:bg-current/10", "focus-visible:bg-current/10", "aria-expanded:bg-current/10"),
 	icon: cn("grid w-[2.375rem] aspect-square p-0", "active:scale-90")

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/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-lg\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"active:scale-[0.98]\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"supports-[corner-shape:squircle]:rounded-[1rem]\", \"supports-[corner-shape:squircle]:[corner-shape:squircle]\", \"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\", \"focus-visible:bg-current/10\", \"aria-expanded:bg-current/10\"),\n\ticon: cn(\"grid w-[2.375rem] 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,wBAAwB,mDAAmD,gGAAgG,gEAAgE,uBAAuB,sEAAsE,mDAAmD,4DAA4D,yCAAyC;CAC5lB,SAAS;CACT,QAAQ,GAAG,mDAAmD,uBAAuB,+BAA+B,8BAA8B;CAClJ,MAAM,GAAG,uCAAuC,kBAAkB;CAClE"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/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-lg\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"active:scale-[0.98]\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"supports-[corner-shape:squircle]:rounded-[1rem]\", \"supports-[corner-shape:squircle]:[corner-shape:squircle]\", \"data-[availability=unavailable]:hidden\", \"data-[availability=unsupported]: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\", \"focus-visible:bg-current/10\", \"aria-expanded:bg-current/10\"),\n\ticon: cn(\"grid w-[2.375rem] 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,wBAAwB,mDAAmD,gGAAgG,gEAAgE,uBAAuB,sEAAsE,mDAAmD,4DAA4D,0CAA0C,yCAAyC;CACtoB,SAAS;CACT,QAAQ,GAAG,mDAAmD,uBAAuB,+BAA+B,8BAA8B;CAClJ,MAAM,GAAG,uCAAuC,kBAAkB;CAClE"}

package/dist/default/skins/dist/default/shared/tailwind/icon-state.js

@@ -26,6 +26,11 @@ const iconState = {
 		button: "group",
 		off: "hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100",
 		on: "hidden opacity-0 group-data-pip:block group-data-pip:opacity-100"
+	},
+	cast: {
+		button: "group",
+		enter: "hidden opacity-0 group-not-data-[cast-state=connected]:block group-not-data-[cast-state=connected]:opacity-100",
+		exit: "hidden opacity-0 group-data-[cast-state=connected]:block group-data-[cast-state=connected]:opacity-100"
 	}
 };
 //#endregion

package/dist/default/skins/dist/default/shared/tailwind/icon-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\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\tpip: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-pip:block group-data-pip:opacity-100\"\n\t}\n};\n//#endregion\nexport { iconState };\n\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,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,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD"}
+{"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\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\tpip: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-pip:block group-data-pip:opacity-100\"\n\t},\n\tcast: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-[cast-state=connected]:block group-not-data-[cast-state=connected]:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-[cast-state=connected]:block group-data-[cast-state=connected]:opacity-100\"\n\t}\n};\n//#endregion\nexport { iconState };\n\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,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,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD,MAAM;EACL,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD"}

package/dist/default/ui/cast-button/cast-button.js

@@ -0,0 +1,17 @@
+"use client";
+import { createMediaButton } from "../create-media-button.js";
+import { selectRemotePlayback } from "@videojs/core/dom";
+import { CastButtonCore, CastButtonDataAttrs } from "@videojs/core";
+//#region src/ui/cast-button/cast-button.tsx
+/** A button that toggles casting to a remote device. */
+const CastButton = createMediaButton({
+	displayName: "CastButton",
+	core: CastButtonCore,
+	stateAttrMap: CastButtonDataAttrs,
+	selector: selectRemotePlayback,
+	action: (core, state) => core.toggle(state)
+});
+//#endregion
+export { CastButton };
+
+//# sourceMappingURL=cast-button.js.map

package/dist/default/ui/cast-button/cast-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cast-button.js","names":[],"sources":["../../../../src/ui/cast-button/cast-button.tsx"],"sourcesContent":["'use client';\n\nimport { CastButtonCore, CastButtonDataAttrs } from '@videojs/core';\nimport { selectRemotePlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CastButtonProps extends UIComponentProps<'button', CastButtonCore.State>, CastButtonCore.Props {}\n\n/** A button that toggles casting to a remote device. */\nexport const CastButton = createMediaButton<CastButtonCore, CastButtonProps>({\n  displayName: 'CastButton',\n  core: CastButtonCore,\n  stateAttrMap: CastButtonDataAttrs,\n  selector: selectRemotePlayback,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace CastButton {\n  export type Props = CastButtonProps;\n  export type State = CastButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

package/dist/default/ui/cast-button/index.js

@@ -0,0 +1,2 @@
+import { CastButton } from "./cast-button.js";
+export { CastButton };

package/dist/default/ui/gesture/{media-gesture.js → gesture.js}

@@ -2,8 +2,8 @@
 import { useContainer, usePlayer } from "../../player/context.js";
 import { createDoubleTapGesture, createTapGesture, resolveGestureAction } from "@videojs/core/dom";
 import { useEffect } from "react";
-//#region src/ui/gesture/media-gesture.tsx
-function MediaGesture({ type, action, value, pointer, region, disabled }) {
+//#region src/ui/gesture/gesture.tsx
+function Gesture({ type, action, value, pointer, region, disabled }) {
 	const store = usePlayer();
 	const container = useContainer();
 	useEffect(() => {
@@ -36,7 +36,9 @@ function MediaGesture({ type, action, value, pointer, region, disabled }) {
 	]);
 	return null;
 }
+/** @deprecated Use `Gesture` instead. */
+const MediaGesture = Gesture;
 //#endregion
-export { MediaGesture };
+export { Gesture, MediaGesture };
 
-//# sourceMappingURL=media-gesture.js.map
+//# sourceMappingURL=gesture.js.map

package/dist/default/ui/gesture/gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerStore,\n  createDoubleTapGesture,\n  createTapGesture,\n  type GestureActionName,\n  type GesturePointerType,\n  type GestureRegion,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface GestureProps {\n  type: 'tap' | 'doubletap' | (string & {});\n  action: GestureActionName | (string & {});\n  value?: number;\n  pointer?: GesturePointerType;\n  region?: GestureRegion;\n  disabled?: boolean;\n}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = { pointer, region, action };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    return createTapGesture(container, onActivate, options);\n  }, [container, store, type, action, value, pointer, region, disabled]);\n\n  return null;\n}\n\nexport namespace Gesture {\n  export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. */\nexport type MediaGestureProps = GestureProps;\n\n/** @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":";;;;;AAyBA,SAAgB,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,qBAAqB,OAAO;AAC7C,MAAI,CAAC,SAAU;EAEf,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ;AAE3C,MAAI,SAAS,YACX,QAAO,uBAAuB,WAAW,YAAY,QAAQ;AAG/D,SAAO,iBAAiB,WAAW,YAAY,QAAQ;IACtD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;EAAS,CAAC;AAEtE,QAAO;;;AAWT,MAAa,eAAe"}

package/dist/default/ui/hotkey/{media-hotkey.js → hotkey.js}

@@ -2,8 +2,8 @@
 import { useContainer, usePlayer } from "../../player/context.js";
 import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
 import { useEffect } from "react";
-//#region src/ui/hotkey/media-hotkey.tsx
-function MediaHotkey({ keys, action, value, disabled, target }) {
+//#region src/ui/hotkey/hotkey.tsx
+function Hotkey({ keys, action, value, disabled, target }) {
 	const store = usePlayer();
 	const container = useContainer();
 	useEffect(() => {
@@ -35,7 +35,9 @@ function MediaHotkey({ keys, action, value, disabled, target }) {
 	]);
 	return null;
 }
+/** @deprecated Use `Hotkey` instead. */
+const MediaHotkey = Hotkey;
 //#endregion
-export { MediaHotkey };
+export { Hotkey, MediaHotkey };
 
-//# sourceMappingURL=media-hotkey.js.map
+//# sourceMappingURL=hotkey.js.map

package/dist/default/ui/hotkey/hotkey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerStore,\n  createHotkey,\n  type HotkeyActionName,\n  isHotkeyToggleAction,\n  resolveHotkeyAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps {\n  keys: string;\n  action: HotkeyActionName | (string & {});\n  value?: number;\n  disabled?: boolean;\n  target?: 'player' | 'document';\n}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;;AAsBA,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,oBAAoB,OAAO;AAC5C,MAAI,CAAC,SAAU;AAEf,SAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,OAAO;GACzC,aAAa,QAAQ,QAAQ;AAC3B,aAAS;KAAE;KAAO;KAAK;KAAO,CAAC;;GAElC,CAAC;IACD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;EAAO,CAAC;AAE7D,QAAO;;;AAWT,MAAa,cAAc"}

package/dist/default/utils/use-attach-media.js

@@ -0,0 +1,14 @@
+"use client";
+import { useCallback } from "react";
+//#region src/utils/use-attach-media.ts
+function useAttachMedia(media) {
+	return useCallback((element) => {
+		if (element) media.attach?.(element);
+		else media.detach?.();
+		return () => media.detach?.();
+	}, [media]);
+}
+//#endregion
+export { useAttachMedia };
+
+//# sourceMappingURL=use-attach-media.js.map

package/dist/default/utils/use-attach-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["'use client';\n\nimport type { MediaEngineHost } from '@videojs/core';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;AAMA,SAAgB,eAA2C,OAAwC;AACjG,QAAO,aACJ,YAAsB;AACrB,MAAI,QAAS,OAAM,SAAS,QAAQ;MAC/B,OAAM,UAAU;AACrB,eAAa,MAAM,UAAU;IAE/B,CAAC,MAAM,CACR"}

package/dist/default/utils/use-sync-props.js

@@ -0,0 +1,14 @@
+import { isUndefined } from "@videojs/utils/predicate";
+//#region src/utils/use-sync-props.ts
+function useSyncProps(target, props, defaults) {
+	const rest = {};
+	for (const key in props) if (key in defaults) {
+		const value = isUndefined(props[key]) ? defaults[key] : props[key];
+		if (target[key] !== value) target[key] = value;
+	} else rest[key] = props[key];
+	return rest;
+}
+//#endregion
+export { useSyncProps };
+
+//# sourceMappingURL=use-sync-props.js.map

package/dist/default/utils/use-sync-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-props.js","names":[],"sources":["../../../src/utils/use-sync-props.ts"],"sourcesContent":["import { isUndefined } from '@videojs/utils/predicate';\n\nexport function useSyncProps<Props extends object, Rest extends Record<string, unknown>>(\n  target: Props,\n  props: Partial<Props> & Rest,\n  defaults: Props\n): Omit<Rest, keyof Props> {\n  const rest: Record<string, unknown> = {};\n\n  for (const key in props) {\n    if (key in defaults) {\n      const value = isUndefined(props[key]) ? (defaults as Record<string, unknown>)[key] : props[key];\n      if (target[key as keyof typeof target] !== value) target[key as keyof typeof target] = value as any;\n    } else {\n      rest[key] = props[key];\n    }\n  }\n\n  return rest as Omit<Rest, keyof Props>;\n}\n"],"mappings":";;AAEA,SAAgB,aACd,QACA,OACA,UACyB;CACzB,MAAM,OAAgC,EAAE;AAExC,MAAK,MAAM,OAAO,MAChB,KAAI,OAAO,UAAU;EACnB,MAAM,QAAQ,YAAY,MAAM,KAAK,GAAI,SAAqC,OAAO,MAAM;AAC3F,MAAI,OAAO,SAAgC,MAAO,QAAO,OAA8B;OAEvF,MAAK,OAAO,MAAM;AAItB,QAAO"}

package/dist/dev/icons/dist/react/default/cast-enter.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../icons/dist/react/default/cast-enter.js
+const CastEnterIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	"aria-hidden": "true",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 13.25c1.38 0 2.5 1.085 2.5 2.5V16H.5v-2.75z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 10.25c3.04 0 5.5 2.46 5.5 5.5V16h-2v-.25c0-1.96-1.567-3.5-3.5-3.5H.5v-2z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 7.25a8.5 8.5 0 0 1 8.5 8.5V16h-2v-.25c0-3.611-2.91-6.5-6.5-6.5H.5v-2z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M17.5 14.25c0 .963-.787 1.75-1.75 1.75h-5.5v-2h5.25V4h-13v2.25h-2v-2.5C.5 2.787 1.287 2 2.25 2h13.5c.963 0 1.75.787 1.75 1.75z"
+		})
+	]
+});
+//#endregion
+export { CastEnterIcon as default };
+
+//# sourceMappingURL=cast-enter.js.map

package/dist/dev/icons/dist/react/default/cast-enter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cast-enter.js","names":[],"sources":["../../../../../../../icons/dist/react/default/cast-enter.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst CastEnterIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 13.25c1.38 0 2.5 1.085 2.5 2.5V16H.5v-2.75z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 10.25c3.04 0 5.5 2.46 5.5 5.5V16h-2v-.25c0-1.96-1.567-3.5-3.5-3.5H.5v-2z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 7.25a8.5 8.5 0 0 1 8.5 8.5V16h-2v-.25c0-3.611-2.91-6.5-6.5-6.5H.5v-2z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M17.5 14.25c0 .963-.787 1.75-1.75 1.75h-5.5v-2h5.25V4h-13v2.25h-2v-2.5C.5 2.787 1.287 2 2.25 2h13.5c.963 0 1.75.787 1.75 1.75z\" })\n] });\nexport default CastEnterIcon;\n"],"mappings":";;AACA,MAAM,iBAAiB,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAAU;EAClK,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAoD,CAAC;EAC5F,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAiF,CAAC;EACzH,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAA8E,CAAC;EACtH,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAkI,CAAC;EAC3L;CAAE,CAAC"}

package/dist/dev/icons/dist/react/default/cast-exit.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../icons/dist/react/default/cast-exit.js
+const CastExitIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	"aria-hidden": "true",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 13.25c1.38 0 2.5 1.085 2.5 2.5V16H.5v-2.75z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 10.25c3.04 0 5.5 2.46 5.5 5.5V16h-2v-.25c0-1.96-1.567-3.5-3.5-3.5H.5v-2z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 7.25a8.5 8.5 0 0 1 8.5 8.5V16h-2v-.25c0-3.611-2.91-6.5-6.5-6.5H.5v-2z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M17.5 14.25c0 .963-.787 1.75-1.75 1.75h-5.5v-2h5.25V4h-13v2.25h-2v-2.5C.5 2.787 1.287 2 2.25 2h13.5c.963 0 1.75.787 1.75 1.75z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M4 5.5v1.164c2.143-.021 5.979 3.836 5.979 5.979H14V5.5z"
+		})
+	]
+});
+//#endregion
+export { CastExitIcon as default };
+
+//# sourceMappingURL=cast-exit.js.map

package/dist/dev/icons/dist/react/default/cast-exit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cast-exit.js","names":[],"sources":["../../../../../../../icons/dist/react/default/cast-exit.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst CastExitIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 13.25c1.38 0 2.5 1.085 2.5 2.5V16H.5v-2.75z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 10.25c3.04 0 5.5 2.46 5.5 5.5V16h-2v-.25c0-1.96-1.567-3.5-3.5-3.5H.5v-2z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 7.25a8.5 8.5 0 0 1 8.5 8.5V16h-2v-.25c0-3.611-2.91-6.5-6.5-6.5H.5v-2z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M17.5 14.25c0 .963-.787 1.75-1.75 1.75h-5.5v-2h5.25V4h-13v2.25h-2v-2.5C.5 2.787 1.287 2 2.25 2h13.5c.963 0 1.75.787 1.75 1.75z\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M4 5.5v1.164c2.143-.021 5.979 3.836 5.979 5.979H14V5.5z\" })\n] });\nexport default CastExitIcon;\n"],"mappings":";;AACA,MAAM,gBAAgB,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAAU;EACjK,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAoD,CAAC;EAC5F,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAiF,CAAC;EACzH,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAA8E,CAAC;EACtH,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAkI,CAAC;EAC1K,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAA2D,CAAC;EACpH;CAAE,CAAC"}

package/dist/dev/icons/dist/react/minimal/cast-enter.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../icons/dist/react/minimal/cast-enter.js
+const CastEnterIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	"aria-hidden": "true",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 13.5v2.25H3A2.23 2.23 0 0 0 .75 13.5m0-3V12c2.07 0 3.75 1.65 3.75 3.75H6A5.246 5.246 0 0 0 .75 10.5"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 7.5V9c3.728 0 6.75 3 6.75 6.75H9A8.25 8.25 0 0 0 .75 7.5"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M15.75 2.25H2.25c-.825 0-1.5.675-1.5 1.5V6h1.5V3.75h13.5v10.5H10.5v1.5h5.25c.825 0 1.5-.675 1.5-1.5V3.75c0-.825-.675-1.5-1.5-1.5"
+		})
+	]
+});
+//#endregion
+export { CastEnterIcon as default };
+
+//# sourceMappingURL=cast-enter.js.map

package/dist/dev/icons/dist/react/minimal/cast-enter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cast-enter.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/cast-enter.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst CastEnterIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 13.5v2.25H3A2.23 2.23 0 0 0 .75 13.5m0-3V12c2.07 0 3.75 1.65 3.75 3.75H6A5.246 5.246 0 0 0 .75 10.5\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 7.5V9c3.728 0 6.75 3 6.75 6.75H9A8.25 8.25 0 0 0 .75 7.5\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M15.75 2.25H2.25c-.825 0-1.5.675-1.5 1.5V6h1.5V3.75h13.5v10.5H10.5v1.5h5.25c.825 0 1.5-.675 1.5-1.5V3.75c0-.825-.675-1.5-1.5-1.5\" })\n] });\nexport default CastEnterIcon;\n"],"mappings":";;AACA,MAAM,iBAAiB,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAAU;EAClK,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAA4G,CAAC;EACpJ,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAiE,CAAC;EACzG,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAoI,CAAC;EAC7L;CAAE,CAAC"}

package/dist/dev/icons/dist/react/minimal/cast-exit.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../icons/dist/react/minimal/cast-exit.js
+const CastExitIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 18,
+	height: 18,
+	fill: "none",
+	"aria-hidden": "true",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 13.5v2.25H3A2.23 2.23 0 0 0 .75 13.5m0-3V12c2.07 0 3.75 1.65 3.75 3.75H6A5.246 5.246 0 0 0 .75 10.5"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M.75 7.5V9c3.728 0 6.75 3 6.75 6.75H9A8.25 8.25 0 0 0 .75 7.5"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M15.75 2.25H2.25c-.825 0-1.5.675-1.5 1.5V6h1.5V3.75h13.5v10.5H10.5v1.5h5.25c.825 0 1.5-.675 1.5-1.5V3.75c0-.825-.675-1.5-1.5-1.5"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M3.75 5.25v1.223C6 6.45 10.028 10.5 10.028 12.75h4.222v-7.5z"
+		})
+	]
+});
+//#endregion
+export { CastExitIcon as default };
+
+//# sourceMappingURL=cast-exit.js.map

package/dist/dev/icons/dist/react/minimal/cast-exit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cast-exit.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/cast-exit.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst CastExitIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 13.5v2.25H3A2.23 2.23 0 0 0 .75 13.5m0-3V12c2.07 0 3.75 1.65 3.75 3.75H6A5.246 5.246 0 0 0 .75 10.5\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M.75 7.5V9c3.728 0 6.75 3 6.75 6.75H9A8.25 8.25 0 0 0 .75 7.5\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M15.75 2.25H2.25c-.825 0-1.5.675-1.5 1.5V6h1.5V3.75h13.5v10.5H10.5v1.5h5.25c.825 0 1.5-.675 1.5-1.5V3.75c0-.825-.675-1.5-1.5-1.5\" }),\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M3.75 5.25v1.223C6 6.45 10.028 10.5 10.028 12.75h4.222v-7.5z\" })\n] });\nexport default CastExitIcon;\n"],"mappings":";;AACA,MAAM,gBAAgB,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,GAAG;CAAO,UAAU;EACjK,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAA4G,CAAC;EACpJ,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAiE,CAAC;EACzG,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAoI,CAAC;EAC5K,oBAAI,QAAQ;GAAE,MAAM;GAAgB,GAAG;GAAgE,CAAC;EACzH;CAAE,CAAC"}

package/dist/dev/index.d.ts

@@ -5,18 +5,19 @@ import { HTMLProps, RenderFunction, RenderProp, UIComponentProps } from "./utils
 import { index_parts_d_exports } from "./ui/alert-dialog/index.parts.js";
 import { BufferingIndicator, BufferingIndicatorProps } from "./ui/buffering-indicator/buffering-indicator.js";
 import { CaptionsButton, CaptionsButtonProps } from "./ui/captions-button/captions-button.js";
+import { CastButton, CastButtonProps } from "./ui/cast-button/cast-button.js";
 import { ControlsGroupProps } from "./ui/controls/controls-group.js";
 import { ControlsRootProps } from "./ui/controls/controls-root.js";
 import { index_parts_d_exports as index_parts_d_exports$1 } from "./ui/controls/index.parts.js";
 import { ErrorDialogContextValue, useErrorDialogContext } from "./ui/error-dialog/context.js";
 import { index_parts_d_exports as index_parts_d_exports$2 } from "./ui/error-dialog/index.parts.js";
 import { FullscreenButton, FullscreenButtonProps } from "./ui/fullscreen-button/fullscreen-button.js";
-import { MediaGesture, MediaGestureProps } from "./ui/gesture/media-gesture.js";
+import { Gesture, GestureProps, MediaGesture, MediaGestureProps } from "./ui/gesture/gesture.js";
 import { UseDoubleTapGestureOptions, useDoubleTapGesture } from "./ui/gesture/use-doubletap-gesture.js";
 import { UseTapGestureOptions, useTapGesture } from "./ui/gesture/use-tap-gesture.js";
 import { useButton } from "./ui/hooks/use-button.js";
 import { useSlider } from "./ui/hooks/use-slider.js";
-import { MediaHotkey, MediaHotkeyProps } from "./ui/hotkey/media-hotkey.js";
+import { Hotkey, HotkeyProps, MediaHotkey, MediaHotkeyProps } from "./ui/hotkey/hotkey.js";
 import { useAriaKeyShortcuts } from "./ui/hotkey/use-aria-key-shortcuts.js";
 import { UseHotkeyOptions, useHotkey } from "./ui/hotkey/use-hotkey.js";
 import { MuteButton, MuteButtonProps } from "./ui/mute-button/mute-button.js";
@@ -41,9 +42,8 @@ import { index_parts_d_exports as index_parts_d_exports$6 } from "./ui/time-slid
 import { TooltipContextValue, useTooltipContext } from "./ui/tooltip/context.js";
 import { index_parts_d_exports as index_parts_d_exports$7 } from "./ui/tooltip/index.parts.js";
 import { index_parts_d_exports as index_parts_d_exports$8 } from "./ui/volume-slider/index.parts.js";
-import { attachMediaElement } from "./utils/attach-media-element.js";
-import { mediaProps } from "./utils/media-props.js";
 import { mergeProps } from "./utils/merge-props.js";
+import { useAttachMedia } from "./utils/use-attach-media.js";
 import { composeRefs, useComposedRefs } from "./utils/use-composed-refs.js";
 import { useDestroy } from "./utils/use-destroy.js";
 import { useLatestRef } from "./utils/use-latest-ref.js";
@@ -52,4 +52,4 @@ import { renderElement } from "./utils/use-render.js";
 import { Comparator, Selector, createSelector, shallowEqual } from "@videojs/store";
 import { useSelector, useStore } from "@videojs/store/react";
 export * from "@videojs/core/dom";
-export { index_parts_d_exports as AlertDialog, type AlertDialogContextValue, BufferingIndicator, type BufferingIndicatorProps, CaptionsButton, type CaptionsButtonProps, type Comparator, Container, type ContainerProps, index_parts_d_exports$1 as Controls, type ControlsGroupProps, type ControlsRootProps, type CreatePlayerConfig, type CreatePlayerResult, index_parts_d_exports$2 as ErrorDialog, type ErrorDialogContextValue, FullscreenButton, type FullscreenButtonProps, type HTMLProps, MediaGesture, type MediaGestureProps, MediaHotkey, type MediaHotkeyProps, MuteButton, type MuteButtonProps, PiPButton, type PiPButtonProps, PlayButton, type PlayButtonProps, PlaybackRateButton, type PlaybackRateButtonProps, type PlayerContextValue, index_parts_d_exports$3 as Popover, type PopoverContextValue, Poster, type PosterProps, type ProviderProps, type RenderFunction, type RenderProp, SeekButton, type SeekButtonProps, type Selector, index_parts_d_exports$4 as Slider, type SliderBufferProps, type SliderFillProps, type SliderRootProps, type SliderThumbProps, type SliderThumbnailProps, type SliderTrackProps, type SliderValueProps, Thumbnail, type ThumbnailProps, index_parts_d_exports$5 as Time, index_parts_d_exports$6 as TimeSlider, index_parts_d_exports$7 as Tooltip, type TooltipContextValue, type UIComponentProps, type UseDoubleTapGestureOptions, type UseHotkeyOptions, type UseTapGestureOptions, index_parts_d_exports$8 as VolumeSlider, attachMediaElement, composeRefs, createPlayer, createSelector, mediaProps, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAriaKeyShortcuts, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useOptionalPlayer, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };
+export { index_parts_d_exports as AlertDialog, type AlertDialogContextValue, BufferingIndicator, type BufferingIndicatorProps, CaptionsButton, type CaptionsButtonProps, CastButton, type CastButtonProps, type Comparator, Container, type ContainerProps, index_parts_d_exports$1 as Controls, type ControlsGroupProps, type ControlsRootProps, type CreatePlayerConfig, type CreatePlayerResult, index_parts_d_exports$2 as ErrorDialog, type ErrorDialogContextValue, FullscreenButton, type FullscreenButtonProps, Gesture, type GestureProps, type HTMLProps, Hotkey, type HotkeyProps, MediaGesture, type MediaGestureProps, MediaHotkey, type MediaHotkeyProps, MuteButton, type MuteButtonProps, PiPButton, type PiPButtonProps, PlayButton, type PlayButtonProps, PlaybackRateButton, type PlaybackRateButtonProps, type PlayerContextValue, index_parts_d_exports$3 as Popover, type PopoverContextValue, Poster, type PosterProps, type ProviderProps, type RenderFunction, type RenderProp, SeekButton, type SeekButtonProps, type Selector, index_parts_d_exports$4 as Slider, type SliderBufferProps, type SliderFillProps, type SliderRootProps, type SliderThumbProps, type SliderThumbnailProps, type SliderTrackProps, type SliderValueProps, Thumbnail, type ThumbnailProps, index_parts_d_exports$5 as Time, index_parts_d_exports$6 as TimeSlider, index_parts_d_exports$7 as Tooltip, type TooltipContextValue, type UIComponentProps, type UseDoubleTapGestureOptions, type UseHotkeyOptions, type UseTapGestureOptions, index_parts_d_exports$8 as VolumeSlider, composeRefs, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAriaKeyShortcuts, useAttachMedia, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useOptionalPlayer, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };

package/dist/dev/index.js

@@ -13,15 +13,16 @@ import { useButton } from "./ui/hooks/use-button.js";
 import { useAriaKeyShortcuts } from "./ui/hotkey/use-aria-key-shortcuts.js";
 import { useTooltipContext } from "./ui/tooltip/context.js";
 import { CaptionsButton } from "./ui/captions-button/captions-button.js";
+import { CastButton } from "./ui/cast-button/cast-button.js";
 import { index_parts_exports as index_parts_exports$1 } from "./ui/controls/index.parts.js";
 import { useErrorDialogContext } from "./ui/error-dialog/context.js";
 import { index_parts_exports as index_parts_exports$2 } from "./ui/error-dialog/index.parts.js";
 import { FullscreenButton } from "./ui/fullscreen-button/fullscreen-button.js";
-import { MediaGesture } from "./ui/gesture/media-gesture.js";
+import { Gesture, MediaGesture } from "./ui/gesture/gesture.js";
 import { useDoubleTapGesture } from "./ui/gesture/use-doubletap-gesture.js";
 import { useTapGesture } from "./ui/gesture/use-tap-gesture.js";
 import { useSlider } from "./ui/hooks/use-slider.js";
-import { MediaHotkey } from "./ui/hotkey/media-hotkey.js";
+import { Hotkey, MediaHotkey } from "./ui/hotkey/hotkey.js";
 import { useHotkey } from "./ui/hotkey/use-hotkey.js";
 import { MuteButton } from "./ui/mute-button/mute-button.js";
 import { PiPButton } from "./ui/pip-button/pip-button.js";
@@ -37,10 +38,9 @@ import { index_parts_exports as index_parts_exports$5 } from "./ui/time/index.pa
 import { index_parts_exports as index_parts_exports$6 } from "./ui/time-slider/index.parts.js";
 import { index_parts_exports as index_parts_exports$7 } from "./ui/tooltip/index.parts.js";
 import { index_parts_exports as index_parts_exports$8 } from "./ui/volume-slider/index.parts.js";
-import { attachMediaElement } from "./utils/attach-media-element.js";
-import { mediaProps } from "./utils/media-props.js";
+import { useAttachMedia } from "./utils/use-attach-media.js";
 import { useMediaInstance } from "./utils/use-media-instance.js";
 import { createSelector, shallowEqual } from "@videojs/store";
 import { useSelector, useStore } from "@videojs/store/react";
 export * from "@videojs/core/dom";
-export { index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, MediaGesture, MediaHotkey, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$3 as Popover, Poster, SeekButton, index_parts_exports$4 as Slider, Thumbnail, index_parts_exports$5 as Time, index_parts_exports$6 as TimeSlider, index_parts_exports$7 as Tooltip, index_parts_exports$8 as VolumeSlider, attachMediaElement, composeRefs, createPlayer, createSelector, mediaProps, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAriaKeyShortcuts, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useOptionalPlayer, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };
+export { index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, Gesture, Hotkey, MediaGesture, MediaHotkey, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$3 as Popover, Poster, SeekButton, index_parts_exports$4 as Slider, Thumbnail, index_parts_exports$5 as Time, index_parts_exports$6 as TimeSlider, index_parts_exports$7 as Tooltip, index_parts_exports$8 as VolumeSlider, composeRefs, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAriaKeyShortcuts, useAttachMedia, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useOptionalPlayer, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };

package/dist/dev/media/audio.d.ts

@@ -1,9 +1,9 @@
-import * as react from "react";
+import * as _$react from "react";
 import { AudioHTMLAttributes } from "react";
 
 //#region src/media/audio.d.ts
 interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}
-declare const Audio: react.ForwardRefExoticComponent<AudioProps & react.RefAttributes<HTMLAudioElement>>;
+declare const Audio: _$react.ForwardRefExoticComponent<AudioProps & _$react.RefAttributes<HTMLAudioElement>>;
 declare namespace Audio {
   type Props = AudioProps;
 }

package/dist/dev/media/audio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;;;UAQiB,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,cAE3C,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,UAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAWD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}
+{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;;;UAQiB,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,cAE3C,KAAA,EAAK,OAAA,CAAA,yBAAA,CAAA,UAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAWD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}

package/dist/dev/media/background-video/index.d.ts

@@ -1,9 +1,9 @@
-import * as react from "react";
+import * as _$react from "react";
 import { VideoHTMLAttributes } from "react";
 
 //#region src/media/background-video/index.d.ts
 interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
-declare const BackgroundVideo: react.ForwardRefExoticComponent<BackgroundVideoProps & react.RefAttributes<HTMLVideoElement>>;
+declare const BackgroundVideo: _$react.ForwardRefExoticComponent<BackgroundVideoProps & _$react.RefAttributes<HTMLVideoElement>>;
 declare namespace BackgroundVideo {
   type Props = BackgroundVideoProps;
 }

package/dist/dev/media/background-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/background-video/index.tsx"],"mappings":";;;;UAQiB,oBAAA,SAA6B,mBAAA,CAAoB,gBAAA;AAAA,cAErD,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAsBX,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/background-video/index.tsx"],"mappings":";;;;UAQiB,oBAAA,SAA6B,mBAAA,CAAoB,gBAAA;AAAA,cAErD,eAAA,EAAe,OAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAsBX,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;AAAA"}