@apple-pie/slice 0.1.36 → 0.1.37

package/dist/cjs/chunks/{TextArea-C3DehkDw.js → TextArea-WyrsKhiI.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Button = require("./Button-COMAPFWV.js"), css_wrapper = "TextArea-module_wrapper__O0sWP flexBox-module_columnStart__C7P44", css_textarea = "TextArea-module_textarea__-R2n0", css_send = "TextArea-module_send__Cub13", css_xs = "TextArea-module_xs__5e748 type-module_body-xs-regular__ZAFft", css_s = "TextArea-module_s__Ac-fq type-module_body-s-regular__vRHSP", css_m = "TextArea-module_m__dod4R type-module_body-m-regular__LuQBA", css_l = "TextArea-module_l__-uLCG type-module_body-l-regular__lOYbg";
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Button = require("./Button-CFBYcMYb.js"), css_wrapper = "TextArea-module_wrapper__O0sWP flexBox-module_columnStart__C7P44", css_textarea = "TextArea-module_textarea__-R2n0", css_send = "TextArea-module_send__Cub13", css_xs = "TextArea-module_xs__5e748 type-module_body-xs-regular__ZAFft", css_s = "TextArea-module_s__Ac-fq type-module_body-s-regular__vRHSP", css_m = "TextArea-module_m__dod4R type-module_body-m-regular__LuQBA", css_l = "TextArea-module_l__-uLCG type-module_body-l-regular__lOYbg";
 
 const TextArea = React.memo(props => {
     const {value: value = "", name: name = "text_area", width: width = "100%", focused: focused = !1, placeholder: placeholder = "Enter text here...", rows: rows = 6, border: border = !0, borderRadius: borderRadius = 4, padding: padding = "16px 4px 16px 16px", error: error = !1, resizable: resizable = !0, hasSend: hasSend = !1, sendOffset: sendOffset = {

package/dist/cjs/chunks/{TextField-BkZlrRfY.js → TextField-D9lA6MqD.js}

@@ -1,15 +1,16 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var misc = require("./misc-CGesOGlL.js");
+var misc = require("./misc-BKCSnz7i.js");
 
-require("./microphoneStore-V2mYQFa4.js"), require("../hooks/useWindow.js");
+require("./webRTCStore-BO-7A2lW.js"), require("./microphoneStore-BM-XC3HM.js"), 
+require("./volumeStore-Cq7cBiVC.js"), require("../hooks/useWindow.js");
 
-var Button = require("./Button-COMAPFWV.js"), Icon = require("./Icon-g039RSWl.js"), IconButton = require("./IconButton-DZBikqIA.js"), css = {
+var Button = require("./Button-CFBYcMYb.js"), Icon = require("./Icon-D-RerGRq.js"), IconButton = require("./IconButton-D-vS9cTS.js"), css = {
     wrapper: "TextField-module_wrapper__qZ-p- flexBox-module_rowStart__4tcxS",
     container: "TextField-module_container__5U9yK flexBox-module_rowStart__4tcxS",
     label: "TextField-module_label__jD8MR flexBox-module_rowStart__4tcxS",

package/dist/cjs/chunks/{Tip-CEvYKuL1.js → Tip-B9-eEo1W.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-CGesOGlL.js"), css = {
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-BKCSnz7i.js"), css = {
     wrapper: "Tip-module_wrapper__D7ACT flexBox-module_rowStart__4tcxS",
     xs: "Tip-module_xs__wsz9y type-module_body-xs-regular__ZAFft",
     s: "Tip-module_s__Wvz3q type-module_body-s-regular__vRHSP",

package/dist/cjs/chunks/{Toast-BoCExCrT.js → Toast-RKrXrBM_.js}

@@ -1,15 +1,16 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var misc = require("./misc-CGesOGlL.js");
+var misc = require("./misc-BKCSnz7i.js");
 
-require("./microphoneStore-V2mYQFa4.js"), require("../hooks/useWindow.js");
+require("./webRTCStore-BO-7A2lW.js"), require("./microphoneStore-BM-XC3HM.js"), 
+require("./volumeStore-Cq7cBiVC.js"), require("../hooks/useWindow.js");
 
-var ToastType, Icon = require("./Icon-g039RSWl.js"), ProgressIndicator = require("./ProgressIndicator-BqAJgdQp.js"), css = {
+var ToastType, Icon = require("./Icon-D-RerGRq.js"), ProgressIndicator = require("./ProgressIndicator-D5wkRI9I.js"), css = {
     wrapper: "Toast-module_wrapper__1uj9O flexBox-module_rowBetween__5FEvi",
     close: "Toast-module_close__i10-s flexBox-module_row__z24tF",
     message: "Toast-module_message__3dP0P flexBox-module_rowStart__4tcxS",

package/dist/cjs/chunks/{ToggleButton-CBQt8Ii8.js → ToggleButton-CT_lqOtJ.js}

@@ -1,9 +1,10 @@
+'use client';
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), IconButton = require("./IconButton-DZBikqIA.js"), Label = require("./Label-BLCGQli-.js"), css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), IconButton = require("./IconButton-D-vS9cTS.js"), Label = require("./Label-B593UMZN.js"), css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 
 exports.ToggleButton = function(props) {
-    const {label: label, textSize: textSize, icon: icon, iconOn: iconOn, selected: selected = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-surface-primary)", bgColor: bgColor = "var(--core-surface-secondary)", bgColorOn: bgColorOn = "var(--core-text-special)", iconSize: iconSize = 20, buttonSize: buttonSize = "m", tooltip: tooltip, gap: gap = 4, unselect: unselect = !0, fill: fill = !1, disabled: disabled = !1, border: border = !1, onChange: onChange, onSelect: onSelect, onToolTip: onToolTip, children: children, presetAnimations: presetAnimations, customAnimations: customAnimations} = props, handleClick = () => {
+    const {label: label, textSize: textSize, icon: icon, iconOn: iconOn, selected: selected = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-surface-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-surface-secondary)", bgColorOn: bgColorOn = "var(--core-text-special)", iconSize: iconSize = 20, buttonSize: buttonSize = "m", tooltip: tooltip, gap: gap = 4, unselect: unselect = !0, fill: fill = !1, disabled: disabled = !1, border: border = !1, onChange: onChange, onSelect: onSelect, onToolTip: onToolTip, children: children, presetAnimations: presetAnimations, customAnimations: customAnimations} = props, handleClick = () => {
         if (!unselect && selected) return;
         const newState = !selected;
         null == onChange || onChange(newState), newState && (null == onSelect || onSelect());
@@ -20,9 +21,11 @@ exports.ToggleButton = function(props) {
             toggle: !selected,
             isToggled: selected,
             bgColorOn: bgColorOn,
+            bgColorHover: bgColorHover,
             bgColor: bgColor,
             iconColor: iconColor,
             iconColorOn: iconColorOn,
+            iconColorHover: iconColorHover,
             onClick: handleClick,
             iconSize: iconSize,
             iconFill: fill,

package/dist/cjs/chunks/{UploadArea-D3I4J8B7.js → UploadArea-BzeMdfWX.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-CGesOGlL.js"), Icon = require("./Icon-g039RSWl.js"), ProgressIndicator = require("./ProgressIndicator-BqAJgdQp.js"), FileList = require("./FileList-CnsmD5Y7.js"), css = {
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BKCSnz7i.js"), Icon = require("./Icon-D-RerGRq.js"), ProgressIndicator = require("./ProgressIndicator-D5wkRI9I.js"), FileList = require("./FileList-TVRpzdus.js"), css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",
     icon: "UploadArea-module_icon__M7n-m flexBox-module_row__z24tF",
     title: "UploadArea-module_title__VbNGq type-module_body-l-bold__Fh2dt",

package/dist/cjs/chunks/Video-tMdl2sgI.js

@@ -0,0 +1,285 @@
+'use client';
+"use strict";
+
+var PlayState, tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BKCSnz7i.js"), IconButton = require("./IconButton-D-vS9cTS.js"), Slider = require("./Slider-Ba951T1H.js"), ToggleButton = require("./ToggleButton-CT_lqOtJ.js"), css_wrapper = "Video-module_wrapper__a9iH8", css_video = "Video-module_video__hxKME", css_controls = "Video-module_controls__X4yt6", css_controlsHeader = "Video-module_controlsHeader__dD64-", css_controlsFooter = "Video-module_controlsFooter__qJNTa", css_controlsBody = "Video-module_controlsBody__2GbQz", css_right = "Video-module_right__UMhfW", css_left = "Video-module_left__XC33m", css_progress = "Video-module_progress__UTWtq";
+
+!function(PlayState) {
+    PlayState.Playing = "playing", PlayState.Paused = "paused", PlayState.Stopped = "stopped", 
+    PlayState.Ended = "ended";
+}(PlayState || (PlayState = {}));
+
+const BaseVideo = React.forwardRef((props, ref) => {
+    const {children: children, src: src, playing: playing, loop: loop = !1, muted: muted = !0, playsInline: playsInline = !0, controls: controls = "simple", volume: volume = 1, poster: poster, captionsSrc: captionsSrc, playRate: playRate = 1, width: width = "100%", height: height = "auto", borderRadius: borderRadius, borderSize: borderSize, borderColor: borderColor, backgroundColor: backgroundColor, objectFit: objectFit = "contain", customControls: customControls = {
+        play: !1,
+        progress: !0,
+        volume: !0,
+        fullscreen: !0
+    }, onPlay: onPlay, onPause: onPause, onEnd: onEnd, onProgress: onProgress, onLoadProgress: onLoadProgress, onPlaybackRateChange: onPlaybackRateChange, onCanPlayThrough: onCanPlayThrough, onPlayStateChange: onPlayStateChange, onLoadMetaData: onLoadMetaData, onFullScreenChange: onFullScreenChange, onVolumeChange: onVolumeChange, onLoadedFrameData: onLoadedFrameData} = props, divAttributes = tslib_es6.__rest(props, [ "children", "src", "playing", "loop", "muted", "playsInline", "controls", "volume", "poster", "captionsSrc", "playRate", "width", "height", "borderRadius", "borderSize", "borderColor", "backgroundColor", "objectFit", "customControls", "onPlay", "onPause", "onEnd", "onProgress", "onLoadProgress", "onPlaybackRateChange", "onCanPlayThrough", "onPlayStateChange", "onLoadMetaData", "onFullScreenChange", "onVolumeChange", "onLoadedFrameData" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", videoRef = React.useRef(null), containerRef = React.useRef(null), progress = React.useRef(null), wasPlaying = React.useRef(null != playing && playing), playState = React.useRef(PlayState.Stopped), [isPlaying, setIsPlaying] = React.useState(null != playing && playing), [isMuted, setIsMuted] = React.useState(null != muted && muted), [currentVolume, setCurrentVolume] = React.useState(null != volume ? volume : 1), [currentProgress, setCurrentProgress] = React.useState(0), [hovered, setHovered] = React.useState(!1), timer = React.useRef(null), handleLoadProgress = React.useCallback(event => {
+        const target = event.target;
+        if (target.buffered.length > 0) {
+            const bufferedEnd = target.buffered.end(target.buffered.length - 1), duration = target.duration;
+            if (duration > 0) {
+                null == onLoadProgress || onLoadProgress(bufferedEnd / duration);
+            }
+        }
+    }, [ onLoadProgress ]), handlePlayProgress = React.useCallback(event => {
+        var _a, _b, _c;
+        const target = event.target, percentPlayed = target.currentTime / target.duration;
+        if (setCurrentProgress(percentPlayed), progress.current !== percentPlayed) {
+            null == onProgress || onProgress(percentPlayed), progress.current = percentPlayed;
+            const isAtZero = 0 === (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.currentTime), isAtEnd = (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.currentTime) === (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.duration);
+            isAtZero && target.paused ? (playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+            playState.current = PlayState.Stopped) : isAtEnd ? (playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+            playState.current = PlayState.Ended) : target.paused && playState.current !== PlayState.Paused ? (null == onPlayStateChange || onPlayStateChange(PlayState.Paused), 
+            playState.current = PlayState.Paused) : target.paused || playState.current === PlayState.Playing || (null == onPlayStateChange || onPlayStateChange(PlayState.Playing), 
+            playState.current = PlayState.Playing);
+        }
+    }, [ onProgress, onPlayStateChange ]), handleCanPlayThrough = React.useCallback(() => {
+        null == onCanPlayThrough || onCanPlayThrough();
+    }, [ onCanPlayThrough ]), handlePlay = React.useCallback(() => {
+        var _a, _b, _c;
+        (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.paused) && videoRef.current.play().then(() => null), 
+        null == onPlay || onPlay(), setIsPlaying(!0);
+        (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.currentTime) === (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.duration) ? (playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+        playState.current = PlayState.Ended) : playState.current !== PlayState.Playing && (null == onPlayStateChange || onPlayStateChange(PlayState.Playing), 
+        playState.current = PlayState.Playing);
+    }, [ onPlay, onPlayStateChange ]), handlePause = React.useCallback(() => {
+        var _a, _b, _c;
+        null == onPause || onPause(), setIsPlaying(!1);
+        const isAtZero = 0 === (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.currentTime);
+        (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.currentTime) === (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.duration) || isAtZero || playState.current !== PlayState.Paused && (null == onPlayStateChange || onPlayStateChange(PlayState.Paused), 
+        playState.current = PlayState.Paused);
+    }, [ onPause, onPlayStateChange ]), handleEnd = React.useCallback(() => {
+        null == onEnd || onEnd();
+    }, [ onEnd ]), handleLoadMetadata = React.useCallback(event => {
+        const target = event.target;
+        null == onLoadMetaData || onLoadMetaData(target.duration);
+    }, [ onLoadMetaData ]), handlePlaybackRate = React.useCallback(event => {
+        const playbackRate = event.target.playbackRate;
+        null == onPlaybackRateChange || onPlaybackRateChange(playbackRate);
+    }, [ onPlaybackRateChange ]), handlePlayClick = React.useCallback(play => {
+        const video = videoRef.current;
+        if (!video) return;
+        let setPlaying = video.paused;
+        void 0 !== play && (setPlaying = play), setPlaying ? video.play().then(() => null).catch(() => null) : video.pause();
+    }, []), handleMouseOver = React.useCallback(() => {
+        setHovered(!0), timer.current && clearTimeout(timer.current), timer.current = setTimeout(() => {
+            setHovered(!1);
+        }, 2e3);
+    }, []), handleMouseOut = React.useCallback(() => {
+        timer.current && clearTimeout(timer.current), setHovered(!1);
+    }, []), handleFullScreen = React.useCallback((state = !0) => {
+        const video = videoRef.current;
+        video && (state ? video.requestFullscreen().catch(() => null) : document.fullscreenElement === video && document.exitFullscreen().catch(() => null));
+    }, []), handleMute = React.useCallback(state => {
+        if (!videoRef.current) return;
+        let nextMuted = !videoRef.current.muted;
+        void 0 !== state && (nextMuted = state), videoRef.current.muted = nextMuted, setIsMuted(nextMuted);
+    }, []), handleRateChange = React.useCallback((rate = 1) => {
+        if (!videoRef.current) return;
+        let nextRate = rate;
+        rate < .5 && (nextRate = .5), rate > 3 && (nextRate = 3), videoRef.current.playbackRate = nextRate;
+    }, []), handleRestart = React.useCallback(() => {
+        videoRef.current && (videoRef.current.pause(), videoRef.current.currentTime = 0, 
+        videoRef.current.play().then(() => null));
+    }, []), handleVolumeChange = React.useCallback((volume = 1) => {
+        if (!videoRef.current) return;
+        let nextVolume = volume;
+        volume < 0 && (nextVolume = 0), volume > 1 && (nextVolume = 1), videoRef.current.volume = nextVolume, 
+        setCurrentVolume(nextVolume), null == onVolumeChange || onVolumeChange(nextVolume);
+    }, [ onVolumeChange ]), handleSetProgress = React.useCallback(progress => {
+        videoRef.current && (wasPlaying.current || (wasPlaying.current = !videoRef.current.paused), 
+        videoRef.current.pause(), videoRef.current.currentTime = progress * videoRef.current.duration);
+    }, []), handleSeekEnd = React.useCallback(() => {
+        wasPlaying.current && (handlePlayClick(!0), wasPlaying.current = !1);
+    }, [ handlePlayClick ]), handleFullScreenChange = React.useCallback(() => {
+        const isFullscreen = document.fullscreenElement === videoRef.current;
+        null == onFullScreenChange || onFullScreenChange(isFullscreen);
+    }, [ onFullScreenChange ]), handleLoadedFrame = React.useCallback(() => {
+        null == onLoadedFrameData || onLoadedFrameData();
+    }, [ onLoadedFrameData ]);
+    React.useImperativeHandle(ref, () => ({
+        play: () => tslib_es6.__awaiter(void 0, void 0, void 0, function*() {
+            handlePlayClick(!0);
+        }),
+        stop: () => tslib_es6.__awaiter(void 0, void 0, void 0, function*() {
+            handlePlayClick(!1);
+        }),
+        restart: () => tslib_es6.__awaiter(void 0, void 0, void 0, function*() {
+            handleRestart();
+        }),
+        setVolume: volume => {
+            handleVolumeChange(volume);
+        },
+        mute: mute => {
+            handleMute(mute);
+        },
+        fullscreen: state => {
+            handleFullScreen(state);
+        },
+        playbackRate: rate => {
+            handleRateChange(rate);
+        },
+        get videoElement() {
+            var _a;
+            return null !== (_a = videoRef.current) && void 0 !== _a ? _a : void 0;
+        }
+    }), [ handlePlayClick, handleRestart, handleMute, handleFullScreen, handleRateChange, handleVolumeChange ]);
+    const showCustomControls = React.useMemo(() => "default" !== controls && "none" !== controls, [ controls ]), cssVars = React.useMemo(() => ({
+        "--video-width": misc.setStyle(width, "unset"),
+        "--video-height": misc.setStyle(height, "unset"),
+        "--video-border-radius": misc.setStyle(borderRadius, 0),
+        "--video-border-size": misc.setStyle(borderSize, 0),
+        "--video-border-color": misc.setStyle(borderColor, "transparent"),
+        "--video-bg-color": misc.setStyle(backgroundColor, "transparent"),
+        "--video-object-fit": null != objectFit ? objectFit : "contain",
+        "--video-controls-pointer-events": hovered ? "auto" : "none",
+        "--video-controls-opacity": hovered ? 1 : 0
+    }), [ width, height, borderRadius, borderSize, borderColor, backgroundColor, objectFit, hovered ]), speakerIcon = React.useMemo(() => isMuted || 0 === currentVolume ? "speaker muted" : "speaker", [ isMuted, currentVolume ]);
+    return React.useEffect(() => handleRateChange(playRate), [ playRate, handleRateChange ]), 
+    React.useEffect(() => {
+        void 0 !== playing && handlePlayClick(playing);
+    }, [ playing, handlePlayClick ]), React.useEffect(() => handleMute(muted), [ muted, handleMute ]), 
+    React.useEffect(() => handleVolumeChange(volume), [ volume, handleVolumeChange ]), 
+    React.useEffect(() => {
+        var _a, _b;
+        return null === (_a = videoRef.current) || void 0 === _a || _a.addEventListener("seeked", handleSeekEnd), 
+        null === (_b = videoRef.current) || void 0 === _b || _b.addEventListener("loadeddata", handleLoadedFrame), 
+        document.addEventListener("fullscreenchange", handleFullScreenChange), () => {
+            var _a, _b;
+            null === (_a = videoRef.current) || void 0 === _a || _a.removeEventListener("seeked", handleSeekEnd), 
+            null === (_b = videoRef.current) || void 0 === _b || _b.removeEventListener("loadeddata", handleLoadedFrame), 
+            document.removeEventListener("fullscreenchange", handleFullScreenChange);
+        };
+    }, [ handleSeekEnd, handleFullScreenChange, handleLoadedFrame ]), jsxRuntime.jsxs("div", Object.assign({
+        id: divId,
+        ref: containerRef,
+        className: `${css_wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, cssVars), divStyle),
+        onMouseEnter: handleMouseOver,
+        onMouseLeave: handleMouseOut,
+        onBlur: handleMouseOut,
+        onFocus: handleMouseOver,
+        onMouseMove: handleMouseOver
+    }, rest, {
+        children: [ showCustomControls && jsxRuntime.jsxs("div", {
+            className: css_controls,
+            children: [ !children && "simple" === controls && jsxRuntime.jsxs("div", {
+                className: css_controls,
+                children: [ jsxRuntime.jsxs("div", {
+                    className: css_controlsHeader,
+                    children: [ customControls.fullscreen && jsxRuntime.jsx("div", {
+                        className: css_left,
+                        children: jsxRuntime.jsx(IconButton.IconButton, {
+                            icon: "fullscreen",
+                            iconFill: !0,
+                            buttonSize: "m",
+                            iconSize: 18,
+                            bgColor: "rgba(255,255,255,0.05)",
+                            bgColorHover: "rgba(0,0,0,0.7)",
+                            iconColor: "var(--core-text-light)",
+                            iconColorHover: "var(--core-text-light)",
+                            onClick: () => handleFullScreen(!0)
+                        })
+                    }), customControls.volume && jsxRuntime.jsxs("div", {
+                        className: css_right,
+                        children: [ jsxRuntime.jsx(IconButton.IconButton, {
+                            icon: speakerIcon,
+                            iconFill: !0,
+                            buttonSize: "m",
+                            iconSize: 20,
+                            bgColor: "rgba(255,255,255,0.05)",
+                            bgColorHover: "rgba(0,0,0,0.7)",
+                            bgColorOn: "rgba(0,0,0,0.5)",
+                            iconColor: "var(--core-text-light)",
+                            iconColorHover: "var(--core-text-light)",
+                            onClick: () => handleMute()
+                        }), jsxRuntime.jsx(Slider.Slider, {
+                            trackColor: "rgba(0,0,0,0.5)",
+                            progressColor: "var(--core-text-light)",
+                            trackHeadSize: 16,
+                            trackHeadBorderSize: 0,
+                            scaleMax: 1,
+                            scaleMin: 0,
+                            value: currentVolume,
+                            onChange: value => handleVolumeChange(value)
+                        }) ]
+                    }) ]
+                }), jsxRuntime.jsx("div", {
+                    className: css_controlsBody,
+                    children: customControls.play && jsxRuntime.jsx(ToggleButton.ToggleButton, {
+                        selected: isPlaying,
+                        icon: "play",
+                        iconOn: "pause",
+                        iconSize: 48,
+                        buttonSize: "xl",
+                        bgColor: "rgba(0,0,0,0.5)",
+                        bgColorHover: "rgba(0,0,0,0.7)",
+                        bgColorOn: "rgba(0,0,0,0.5)",
+                        iconColor: "var(--core-text-light)",
+                        iconColorOn: "var(--core-text-light)",
+                        iconColorHover: "var(--core-text-light)",
+                        onChange: () => handlePlayClick()
+                    })
+                }), jsxRuntime.jsx("div", {
+                    className: css_controlsFooter,
+                    children: customControls.progress && jsxRuntime.jsxs("div", {
+                        className: css_progress,
+                        children: [ jsxRuntime.jsx(ToggleButton.ToggleButton, {
+                            selected: isPlaying,
+                            icon: "play",
+                            iconOn: "pause",
+                            buttonSize: "m",
+                            iconSize: 28,
+                            bgColor: "rgba(255,255,255,0.05)",
+                            bgColorHover: "rgba(0,0,0,0.7)",
+                            bgColorOn: "rgba(255,255,255,0.05)",
+                            iconColor: "var(--core-text-light)",
+                            iconColorHover: "var(--core-text-light)",
+                            iconColorOn: "var(--core-text-light)",
+                            onChange: () => handlePlayClick()
+                        }), jsxRuntime.jsx(Slider.Slider, {
+                            trackColor: "rgba(0,0,0,0.5)",
+                            progressColor: "var(--core-text-light)",
+                            trackHeadSize: 16,
+                            trackHeadBorderSize: 0,
+                            scaleMax: 1,
+                            scaleMin: 0,
+                            value: currentProgress,
+                            onChange: handleSetProgress,
+                            width: "100%"
+                        }) ]
+                    })
+                }) ]
+            }), "custom" === controls && children ]
+        }), jsxRuntime.jsx("video", {
+            ref: videoRef,
+            src: src,
+            autoPlay: !1,
+            playsInline: playsInline,
+            loop: loop,
+            muted: isMuted,
+            controls: "default" === controls,
+            poster: poster,
+            onCanPlayThrough: handleCanPlayThrough,
+            onPlay: handlePlay,
+            onPause: handlePause,
+            onEnded: handleEnd,
+            onProgress: handleLoadProgress,
+            onTimeUpdate: handlePlayProgress,
+            onRateChange: handlePlaybackRate,
+            onLoadedMetadata: handleLoadMetadata,
+            className: css_video,
+            children: jsxRuntime.jsx("track", {
+                kind: "captions",
+                src: captionsSrc
+            })
+        }) ]
+    }));
+});
+
+BaseVideo.displayName = "Video";
+
+const Video = React.memo(BaseVideo);
+
+exports.Video = Video;

package/dist/cjs/chunks/VideoController-ClgopggU.js

@@ -0,0 +1,90 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react");
+
+require("./microphoneStore-BM-XC3HM.js"), require("./volumeStore-Cq7cBiVC.js"), 
+require("./webRTCStore-BO-7A2lW.js");
+
+var misc = require("./misc-BKCSnz7i.js"), IconButton = require("./IconButton-D-vS9cTS.js"), Overlay = require("./Overlay-BAPCjL1R.js"), videoStore = require("./videoStore-uqxnwumS.js"), css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
+
+const defaultTransition = {
+    ease: "easeOut",
+    duration: .25,
+    delay: .1
+}, defaultVariants = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1
+    },
+    exit: {
+        opacity: 0
+    }
+};
+
+exports.VideoController = function(props) {
+    var _a;
+    const {dragConstraintsRef: dragConstraintsRef, transition: transition = defaultTransition, variants: variants = defaultVariants, initial: initial = "initial", animate: animate = "animate", exit: exit = "exit", draggable: draggable = !0, overlayOpacity: overlayOpacity = .7, overlayColor: overlayColor = "rgb(0,0,0)", padding: padding = 64, borderRadius: borderRadius = 8} = props, controls = react.useDragControls(), video = videoStore.useVideo(), hide = videoStore.useVideoActions().clear, VideoComponent = null == video ? void 0 : video.component, _b = null !== (_a = null == video ? void 0 : video.props) && void 0 !== _a ? _a : {}, {onLoadedFrameData: onLoadedFrameData, borderRadius: videoBorderRadius} = _b, videoProps = tslib_es6.__rest(_b, [ "onLoadedFrameData", "borderRadius" ]), ref = React.useRef(null), constraints = null != dragConstraintsRef ? dragConstraintsRef : ref, [ready, setReady] = React.useState(!1);
+    React.useEffect(() => {
+        (null == video ? void 0 : video.id) && setReady(!1);
+    }, [ null == video ? void 0 : video.id ]);
+    const handleHide = () => {
+        setReady(!1), hide();
+    }, cssVars = React.useMemo(() => ({
+        "--overlay-padding": misc.setStyle(padding, 64),
+        "--video-visibility": ready ? "visible" : "hidden",
+        "--video-border-radius": misc.setStyle(borderRadius, 8)
+    }), [ padding, ready, borderRadius ]);
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx(Overlay.Overlay, {
+            show: !!video,
+            type: "dark",
+            opacity: overlayOpacity,
+            color: overlayColor,
+            onClick: handleHide
+        }), jsxRuntime.jsx(react.AnimatePresence, {
+            initial: !1,
+            children: video && VideoComponent && jsxRuntime.jsx("div", {
+                className: css_container,
+                ref: ref,
+                style: cssVars,
+                children: jsxRuntime.jsx("div", {
+                    className: css_box,
+                    children: jsxRuntime.jsxs(react.motion.div, {
+                        className: css_wrapper,
+                        variants: variants,
+                        initial: initial,
+                        animate: animate,
+                        exit: exit,
+                        transition: transition,
+                        drag: draggable,
+                        dragListener: !draggable && void 0,
+                        dragControls: draggable ? controls : void 0,
+                        dragConstraints: draggable ? constraints : void 0,
+                        dragElastic: draggable ? 0 : void 0,
+                        dragMomentum: !draggable && void 0,
+                        children: [ jsxRuntime.jsx("div", {
+                            className: css_video,
+                            children: jsxRuntime.jsx(VideoComponent, Object.assign({}, videoProps, {
+                                borderRadius: null != borderRadius ? borderRadius : videoBorderRadius,
+                                onLoadedFrameData: () => {
+                                    setReady(!0), null == onLoadedFrameData || onLoadedFrameData();
+                                }
+                            }))
+                        }), jsxRuntime.jsx(IconButton.IconButton, {
+                            icon: "x",
+                            buttonSize: "l",
+                            onClick: handleHide,
+                            bgColor: "rgba(255,255,255,0.05)",
+                            bgColorHover: "rgba(255,255,255,0.25)",
+                            iconColor: "var(--core-text-light)",
+                            iconColorHover: "var(--core-text-light)"
+                        }) ]
+                    })
+                })
+            })
+        }) ]
+    });
+};

package/dist/cjs/chunks/{WSConnection-D6rZfnAf.js → WSConnection-Dqb47OS8.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js");
 
 /**
  * Manage a WebSocket connection with optional unified events, retries, and keep-alive pings.

package/dist/cjs/chunks/{WebRTCConnection-C_IDgzdx.js → WebRTCConnection-hG9FYZwt.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js");
 
 exports.WebRTCConnection = class {
     /**

package/dist/cjs/chunks/{_types-Cq4h0y4u.js → _types-DEt5va_v.js}

@@ -43,7 +43,11 @@ exports.SliceIcons = {
         speaker: "speaker",
         speakerMuted: "speaker muted",
         speakerHigh: "speaker high",
-        speakerLow: "speaker low"
+        speakerLow: "speaker low",
+        play: "play",
+        playCircle: "play circle",
+        pause: "pause",
+        pauseCircle: "pause circle"
     },
     files: {
         document: "document",
@@ -128,6 +132,7 @@ exports.SliceIcons = {
         sidebar: "sidebar",
         sidebarSplit: "sidebar split",
         keyboard: "keyboard",
-        x: "x"
+        x: "x",
+        fullscreen: "fullscreen"
     }
 };

package/dist/cjs/chunks/{localDBStore-CmeqEYMi.js → localDBStore-DTF2I86l.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js"), React = require("react"), zustand = require("zustand"), shallow = require("zustand/react/shallow"), IndexedDB = require("./IndexedDB-DW-NDU8i.js");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), React = require("react"), zustand = require("zustand"), shallow = require("zustand/react/shallow"), IndexedDB = require("./IndexedDB-D7vMzi1C.js");
 
 function isValidIDBKey(key) {
     return "string" == typeof key || "number" == typeof key || key instanceof Date || key instanceof ArrayBuffer || (Array.isArray(key) ? key.every(entry => isValidIDBKey(entry)) : ArrayBuffer.isView(key));

package/dist/cjs/chunks/{microphoneStore-V2mYQFa4.js → microphoneStore-BM-XC3HM.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js"), React = require("react"), zustand = require("zustand");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), React = require("react"), zustand = require("zustand");
 
 const emptyMicStreamRef = {
     current: null

package/dist/cjs/chunks/{misc-CGesOGlL.js → misc-BKCSnz7i.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js");
 
 /**
  * Remove scripts, invisible characters, and optional HTML tags from a string.

package/dist/cjs/chunks/{sseStore-Bql9biBI.js → sseStore-CTJstD-J.js}

@@ -2,9 +2,9 @@
 
 var zustand = require("zustand");
 
-require("./tslib.es6-CjqORQO8.js");
+require("./tslib.es6-BiEkm1EG.js");
 
-var SSEConnection = require("./SSEConnection-CYqfVBs1.js");
+var SSEConnection = require("./SSEConnection-j9n8tDd-.js");
 
 const useSSEStore = zustand.create((set, get) => ({
     connections: [],

package/dist/cjs/chunks/{uploads-worker-CpdqGKrs.js → uploads-worker-C3qvQXla.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var FileUploadStatus, UploadError, WorkerStatus, tslib_es6 = require("./tslib.es6-CjqORQO8.js");
+var FileUploadStatus, UploadError, WorkerStatus, tslib_es6 = require("./tslib.es6-BiEkm1EG.js");
 
 !function(FileUploadStatus) {
     FileUploadStatus.queued = "pending", FileUploadStatus.uploading = "uploading", FileUploadStatus.completed = "completed", 

package/dist/cjs/chunks/{uploadsStore-DWM1E-GX.js → uploadsStore-DLjRL7bJ.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var zustand = require("zustand"), uploadsWorker$1 = require("./uploads-worker-CpdqGKrs.js"), _documentCurrentScript = "undefined" != typeof document ? document.currentScript : null;
+var zustand = require("zustand"), uploadsWorker$1 = require("./uploads-worker-C3qvQXla.js"), _documentCurrentScript = "undefined" != typeof document ? document.currentScript : null;
 
 let uploadsWorker = null;
 
@@ -64,7 +64,7 @@ function handleWorkerMessage(event) {
 const uploadsActions = useUploadsStore.getState().actions;
 
 exports.createUploadsWorker = function(workerUrl) {
-    return new Worker(null != workerUrl ? workerUrl : new URL("../../workers/uploads/uploads.ts", "undefined" == typeof document ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && "SCRIPT" === _documentCurrentScript.tagName.toUpperCase() && _documentCurrentScript.src || new URL("chunks/uploadsStore-DWM1E-GX.js", document.baseURI).href), {
+    return new Worker(null != workerUrl ? workerUrl : new URL("../../workers/uploads/uploads.ts", "undefined" == typeof document ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && "SCRIPT" === _documentCurrentScript.tagName.toUpperCase() && _documentCurrentScript.src || new URL("chunks/uploadsStore-DLjRL7bJ.js", document.baseURI).href), {
         type: "module"
     });
 }, exports.getUploads = () => useUploadsStore.getState().uploads, exports.getUploadsError = () => useUploadsStore.getState().error, 

package/dist/cjs/chunks/videoStore-uqxnwumS.js

@@ -0,0 +1,21 @@
+"use strict";
+
+const useVideoStore = require("zustand").create((set, get) => ({
+    video: null,
+    actions: {
+        show: video => {
+            get().video !== video && set({
+                video: video
+            });
+        },
+        clear: () => {
+            set({
+                video: null
+            });
+        }
+    }
+})), videoActions = useVideoStore.getState().actions;
+
+exports.getVideo = () => useVideoStore.getState().video, exports.useVideo = () => useVideoStore(state => state.video), 
+exports.useVideoActions = () => useVideoStore(state => state.actions), exports.useVideoStore = useVideoStore, 
+exports.videoActions = videoActions;

package/dist/cjs/chunks/{volumeStore-CpxXslLu.js → volumeStore-Cq7cBiVC.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js");
 
 const useVolumeStore = require("zustand").create((set, get) => ({
     volume: 1,

package/dist/cjs/chunks/{webRTCStore-C9e5XlzB.js → webRTCStore-BO-7A2lW.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CjqORQO8.js"), zustand = require("zustand"), WebRTCConnection = require("./WebRTCConnection-C_IDgzdx.js");
+var tslib_es6 = require("./tslib.es6-BiEkm1EG.js"), zustand = require("zustand"), WebRTCConnection = require("./WebRTCConnection-hG9FYZwt.js");
 
 const useWebRTCStore = zustand.create((set, get) => ({
     connections: [],