@apple-pie/slice 0.1.59 → 0.2.0

package/dist/esm/chunks/UploadArea-D_ytxxSf.mjs

@@ -1,142 +0,0 @@
-'use client';
-import { jsxs, jsx } from "react/jsx-runtime";
-
-import React, { useState, useRef, useId, useCallback, useMemo } from "react";
-
-import { corners } from "../theme/corners.mjs";
-
-import { s as setStyle, a as accessibleKeyDown } from "./misc-DBIXjc2Q.mjs";
-
-import { F as FileList } from "./FileList-Bv9yn2QS.mjs";
-
-import { I as Icon } from "./Icon-He4S-Q8N.mjs";
-
-import { P as ProgressIndicator } from "./ProgressIndicator-DBf_bLtr.mjs";
-
-var 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",
-    message: "UploadArea-module_message__U1ZVM flexBox-module_row__z24tF",
-    files: "UploadArea-module_files__Q796x flexBox-module_column__ezvMq",
-    xs: "UploadArea-module_xs__-AoM7 type-module_body-xs-regular__ZAFft",
-    s: "UploadArea-module_s__wy1zN type-module_body-s-regular__vRHSP",
-    m: "UploadArea-module_m__bKuFN type-module_body-m-regular__LuQBA",
-    l: "UploadArea-module_l__KG9YN type-module_body-l-regular__lOYbg",
-    xl: "UploadArea-module_xl__xmTtW type-module_body-xl-regular__pF2kC"
-};
-
-const imageTypes = [ "png", "jpg", "jpeg", "gif", "svg", "heic", "heif" ], videoTypes = [ "mp4", "avi", "mov", "wmv", "flv" ], documentTypes = [ "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx" ], audioTypes = [ "mp3", "wav", "ogg", "aac", "flac" ], textTypes = [ "txt", "rtf", "md", "csv", "json", "xml" ], allTypes = [ ...imageTypes, ...videoTypes, ...documentTypes, ...audioTypes, ...textTypes ];
-
-var FileTypes;
-
-!function(FileTypes) {
-    FileTypes.images = "images", FileTypes.videos = "videos", FileTypes.documents = "documents", 
-    FileTypes.audio = "audio", FileTypes.text = "text", FileTypes.all = "all", FileTypes.custom = "custom";
-}(FileTypes || (FileTypes = {}));
-
-const UploadAreaBase = React.forwardRef((props, ref) => {
-    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", borderWidth: borderWidth, border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", borderRadius: borderRadius, radius: radius = corners["corner-m"], padding: padding = "var(--spacing-xl)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], onUpload: onUpload} = props, [hovered, setHovered] = useState(!1), inputRef = useRef(null), dragDepth = useRef(0), inputId = useId(), titleId = useId(), messageId = useId(), isInteractive = !busy && files.length < 1, resolvedBorderWidth = null != borderWidth ? borderWidth : border, resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, handleClickUpload = useCallback(() => {
-        var _a;
-        isInteractive && (null == inputRef ? void 0 : inputRef.current) && (inputRef.current.value = "", 
-        null === (_a = inputRef.current) || void 0 === _a || _a.click());
-    }, [ isInteractive ]), handleFileInputChange = useCallback(e => {
-        busy || e.target.files && (null == onUpload || onUpload(Array.from(e.target.files)));
-    }, [ busy, onUpload ]), hasFilesInDrag = useCallback(e => {
-        var _a, _b;
-        return Array.from(null !== (_b = null === (_a = e.dataTransfer) || void 0 === _a ? void 0 : _a.types) && void 0 !== _b ? _b : []).includes("Files");
-    }, []), handleDragEnter = useCallback(e => {
-        e.preventDefault(), !busy && hasFilesInDrag(e) && (dragDepth.current += 1, 1 === dragDepth.current && setHovered(!0));
-    }, [ busy, hasFilesInDrag ]), handleDragLeave = useCallback(e => {
-        e.preventDefault(), busy || (dragDepth.current = Math.max(0, dragDepth.current - 1), 
-        0 === dragDepth.current && setHovered(!1));
-    }, [ busy ]), handleDrop = useCallback(e => {
-        var _a, _b;
-        if (e.preventDefault(), busy) return;
-        dragDepth.current = 0, setHovered(!1);
-        const files = Array.from(null !== (_b = null === (_a = e.dataTransfer) || void 0 === _a ? void 0 : _a.files) && void 0 !== _b ? _b : []);
-        null == onUpload || onUpload(files);
-    }, [ busy, onUpload ]), iconStrokeColor = useMemo(() => hovered ? iconColorHover : iconColor, [ hovered, iconColor, iconColorHover ]), cssVars = useMemo(() => ({
-        "--ua-border": `${resolvedBorderWidth}px`,
-        "--ua-border-style": borderStyle,
-        "--ua-border-color": hovered || busy ? borderColorHover : borderColor,
-        "--ua-radius": setStyle(resolvedBorderRadius),
-        "--ua-padding": setStyle(padding),
-        "--ua-bg-color": hovered ? resolvedBackgroundColorHover : resolvedBackgroundColor,
-        "--ua-icon-size": `${iconSize}px`,
-        "--ua-cursor": busy || files.length > 0 ? "default" : "pointer",
-        "--ua-width": setStyle(width),
-        "--ua-height": setStyle(height)
-    }), [ resolvedBorderWidth, borderStyle, borderColor, borderColorHover, resolvedBorderRadius, padding, resolvedBackgroundColor, resolvedBackgroundColorHover, iconSize, busy, hovered, height, files.length, width ]);
-    return jsxs("div", {
-        className: css.wrapper,
-        style: cssVars,
-        ref: ref,
-        role: isInteractive ? "button" : void 0,
-        "aria-label": isInteractive ? "Click to upload files" : void 0,
-        "aria-describedby": `${titleId} ${messageId}`,
-        "aria-disabled": !isInteractive,
-        tabIndex: isInteractive ? 0 : -1,
-        onClick: isInteractive ? handleClickUpload : void 0,
-        onKeyDown: isInteractive ? e => accessibleKeyDown(e, () => handleClickUpload()) : void 0,
-        onDragEnter: handleDragEnter,
-        onDragOver: e => {
-            e.preventDefault();
-        },
-        onDragLeave: handleDragLeave,
-        onDrop: handleDrop,
-        children: [ jsx("div", {
-            className: css.icon,
-            children: jsx(Icon, {
-                size: iconSize,
-                name: icon,
-                strokeColor: iconStrokeColor,
-                pointer: !1
-            })
-        }), jsx("div", {
-            id: titleId,
-            className: css.title,
-            children: title
-        }), jsxs("div", {
-            id: messageId,
-            className: `${css.message} ${css[textSize]}`,
-            children: [ busy && showProgress && jsx(ProgressIndicator, {
-                show: !0,
-                size: 20,
-                inline: !0,
-                color: iconStrokeColor
-            }), busy ? busyMessage : message ]
-        }), files.length > 0 && jsx("div", {
-            className: css.files,
-            children: jsx(FileList, {
-                files: files,
-                backgroundColor: "var(--core-surface-primary)",
-                textSize: "m",
-                direction: "column",
-                gap: 8,
-                iconSize: 24,
-                style: {
-                    "--file-row-vertical": "var(--spacing-s)",
-                    "--file-row-horizontal": "var(--spacing-m)",
-                    "--file-row-adjustment": "var(--spacing-xs)"
-                },
-                canRemove: canRemove
-            })
-        }), jsx("input", {
-            id: inputId,
-            ref: inputRef,
-            type: "file",
-            hidden: !0,
-            disabled: busy,
-            multiple: multiple,
-            accept: acceptedTypes ? acceptedTypes.join(", ") : void 0,
-            onChange: handleFileInputChange
-        }) ]
-    });
-});
-
-UploadAreaBase.displayName = "UploadArea";
-
-const UploadArea = React.memo(UploadAreaBase);
-
-export { UploadArea as U, allTypes as a, audioTypes as b, documentTypes as d, imageTypes as i, textTypes as t, videoTypes as v };

package/dist/esm/chunks/Video-BHSzz3Wx.mjs

@@ -1,316 +0,0 @@
-'use client';
-import { a as __rest, _ as __awaiter } from "./tslib.es6-DatKI43-.mjs";
-
-import { jsxs, jsx } from "react/jsx-runtime";
-
-import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
-
-import { corners } from "../theme/corners.mjs";
-
-import { s as setStyle } from "./misc-DBIXjc2Q.mjs";
-
-import { I as IconButton } from "./IconButton-BGL-_8VW.mjs";
-
-import { P as ProgressIndicator } from "./ProgressIndicator-DBf_bLtr.mjs";
-
-import { S as Slider } from "./Slider-2Q6yVb8H.mjs";
-
-import { T as ToggleButton } from "./ToggleButton-KAplYW5q.mjs";
-
-var PlayState, 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
-    }, showProgressIndicator: showProgressIndicator = !0, onPlay: onPlay, onPause: onPause, onEnd: onEnd, onProgress: onProgress, onLoadProgress: onLoadProgress, onPlaybackRateChange: onPlaybackRateChange, onCanPlayThrough: onCanPlayThrough, onCanPlay: onCanPlay, onPlayStateChange: onPlayStateChange, onLoadMetaData: onLoadMetaData, onFullScreenChange: onFullScreenChange, onVolumeChange: onVolumeChange, onLoadedFrameData: onLoadedFrameData, onQuit: onQuit} = props, divAttributes = __rest(props, [ "children", "src", "playing", "loop", "muted", "playsInline", "controls", "volume", "poster", "captionsSrc", "playRate", "width", "height", "borderRadius", "borderSize", "borderColor", "backgroundColor", "objectFit", "customControls", "showProgressIndicator", "onPlay", "onPause", "onEnd", "onProgress", "onLoadProgress", "onPlaybackRateChange", "onCanPlayThrough", "onCanPlay", "onPlayStateChange", "onLoadMetaData", "onFullScreenChange", "onVolumeChange", "onLoadedFrameData", "onQuit" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", videoRef = useRef(null), containerRef = useRef(null), progress = useRef(null), wasPlaying = useRef(null != playing && playing), playState = useRef(PlayState.Stopped), [isPlaying, setIsPlaying] = useState(null != playing && playing), [isMuted, setIsMuted] = useState(null != muted && muted), [currentVolume, setCurrentVolume] = useState(null != volume ? volume : 1), [currentProgress, setCurrentProgress] = useState(0), [hovered, setHovered] = useState(!1), [canPlay, setCanPlay] = useState(!1), timer = useRef(null), handleLoadProgress = 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 = 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 = useCallback(() => {
-        null == onCanPlayThrough || onCanPlayThrough();
-    }, [ onCanPlayThrough ]), handleCanPlay = useCallback(() => {
-        setCanPlay(!0), null == onCanPlay || onCanPlay();
-    }, [ onCanPlay ]), handlePlay = useCallback(() => {
-        var _a, _b;
-        null == onPlay || onPlay(), setIsPlaying(!0);
-        (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.currentTime) === (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.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 = 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 = useCallback(() => {
-        null == onEnd || onEnd();
-    }, [ onEnd ]), handleLoadMetadata = useCallback(event => {
-        const target = event.target;
-        null == onLoadMetaData || onLoadMetaData(target.duration);
-    }, [ onLoadMetaData ]), handlePlaybackRate = useCallback(event => {
-        const playbackRate = event.target.playbackRate;
-        null == onPlaybackRateChange || onPlaybackRateChange(playbackRate);
-    }, [ onPlaybackRateChange ]), handlePlayClick = 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 = useCallback(() => {
-        setHovered(!0), timer.current && clearTimeout(timer.current), timer.current = setTimeout(() => {
-            setHovered(!1);
-        }, 2e3);
-    }, []), handleMouseOut = useCallback(() => {
-        timer.current && clearTimeout(timer.current), setHovered(!1);
-    }, []), handleFullScreen = useCallback((state = !0) => {
-        const video = videoRef.current;
-        video && (state ? video.requestFullscreen().catch(() => null) : document.fullscreenElement === video && document.exitFullscreen().catch(() => null));
-    }, []), handleMute = useCallback(state => {
-        if (!videoRef.current) return;
-        let nextMuted = !videoRef.current.muted;
-        void 0 !== state && (nextMuted = state), videoRef.current.muted = nextMuted, setIsMuted(nextMuted);
-    }, []), handleRateChange = useCallback((rate = 1) => {
-        if (!videoRef.current) return;
-        let nextRate = rate;
-        rate < .5 && (nextRate = .5), rate > 3 && (nextRate = 3), videoRef.current.playbackRate = nextRate;
-    }, []), handleRestart = useCallback(() => {
-        videoRef.current && (videoRef.current.pause(), videoRef.current.currentTime = 0, 
-        handlePlayClick(!0));
-    }, [ handlePlayClick ]), handleVolumeChange = 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 = useCallback(progress => {
-        videoRef.current && (wasPlaying.current || (wasPlaying.current = !videoRef.current.paused), 
-        videoRef.current.pause(), videoRef.current.currentTime = progress * videoRef.current.duration);
-    }, []), handleSeekEnd = useCallback(() => {
-        wasPlaying.current && (handlePlayClick(!0), wasPlaying.current = !1);
-    }, [ handlePlayClick ]), handleFullScreenChange = useCallback(() => {
-        const isFullscreen = document.fullscreenElement === videoRef.current;
-        null == onFullScreenChange || onFullScreenChange(isFullscreen);
-    }, [ onFullScreenChange ]), handleLoadedFrame = useCallback(() => {
-        null == onLoadedFrameData || onLoadedFrameData();
-    }, [ onLoadedFrameData ]);
-    React.useImperativeHandle(ref, () => ({
-        play: () => __awaiter(void 0, void 0, void 0, function*() {
-            handlePlayClick(!0);
-        }),
-        stop: () => __awaiter(void 0, void 0, void 0, function*() {
-            handlePlayClick(!1);
-        }),
-        restart: () => __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 = useMemo(() => "default" !== controls && "none" !== controls, [ controls ]), cssVars = useMemo(() => ({
-        "--video-width": setStyle(width, "unset"),
-        "--video-height": setStyle(height, "unset"),
-        "--video-border-radius": setStyle(borderRadius, corners["corner-none"]),
-        "--video-border-size": setStyle(borderSize, 0),
-        "--video-border-color": setStyle(borderColor, "transparent"),
-        "--video-bg-color": setStyle(backgroundColor, "transparent"),
-        "--video-object-fit": null != objectFit ? objectFit : "contain",
-        "--video-controls-pointer-events": hovered ? "auto" : "none",
-        "--video-controls-opacity": hovered ? 1 : 0,
-        "--video-progress-padding-left": customControls.quit ? "var(--spacing-s)" : "var(--spacing-m)"
-    }), [ width, height, borderRadius, borderSize, borderColor, backgroundColor, objectFit, hovered, customControls.quit ]), speakerIcon = useMemo(() => isMuted || 0 === currentVolume ? "speaker muted" : "speaker", [ isMuted, currentVolume ]);
-    return useEffect(() => handleRateChange(playRate), [ playRate, handleRateChange ]), 
-    useEffect(() => {
-        void 0 !== playing && handlePlayClick(playing);
-    }, [ playing, handlePlayClick ]), useEffect(() => handleMute(muted), [ muted, handleMute ]), 
-    useEffect(() => handleVolumeChange(volume), [ volume, handleVolumeChange ]), 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 ]), 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 && jsxs("div", {
-            className: css_controls,
-            children: [ !children && "simple" === controls && jsxs("div", {
-                className: css_controls,
-                children: [ jsxs("div", {
-                    className: css_controlsHeader,
-                    children: [ customControls.fullscreen && jsx("div", {
-                        className: css_left,
-                        children: jsx(IconButton, {
-                            icon: "fullscreen",
-                            iconFill: !0,
-                            buttonSize: "m",
-                            iconSize: 18,
-                            backgroundColor: "rgba(255,255,255,0.05)",
-                            backgroundColorHover: "rgba(0,0,0,0.7)",
-                            iconColor: "var(--core-text-light)",
-                            iconColorHover: "var(--core-text-light)",
-                            onClick: () => handleFullScreen(!0)
-                        })
-                    }), customControls.volume && jsxs("div", {
-                        className: css_right,
-                        children: [ jsx(IconButton, {
-                            icon: speakerIcon,
-                            iconFill: !0,
-                            buttonSize: "m",
-                            iconSize: 20,
-                            backgroundColor: "rgba(255,255,255,0.05)",
-                            backgroundColorHover: "rgba(0,0,0,0.7)",
-                            backgroundColorOn: "rgba(0,0,0,0.5)",
-                            iconColor: "var(--core-text-light)",
-                            iconColorHover: "var(--core-text-light)",
-                            onClick: () => handleMute()
-                        }), jsx(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)
-                        }) ]
-                    }) ]
-                }), jsx("div", {
-                    className: css_controlsBody,
-                    children: customControls.play && jsx(ToggleButton, {
-                        selected: isPlaying,
-                        icon: "play",
-                        iconOn: "pause",
-                        iconSize: 48,
-                        buttonSize: "xl",
-                        backgroundColor: "rgba(0,0,0,0.5)",
-                        backgroundColorHover: "rgba(0,0,0,0.7)",
-                        backgroundColorOn: "rgba(0,0,0,0.5)",
-                        iconColor: "var(--core-text-light)",
-                        iconColorOn: "var(--core-text-light)",
-                        iconColorHover: "var(--core-text-light)",
-                        onChange: () => handlePlayClick()
-                    })
-                }), jsx("div", {
-                    className: css_controlsFooter,
-                    children: customControls.progress && jsxs("div", {
-                        className: css_progress,
-                        children: [ jsx(ToggleButton, {
-                            selected: isPlaying,
-                            icon: "play",
-                            iconOn: "pause",
-                            buttonSize: "m",
-                            iconSize: 28,
-                            backgroundColor: "rgba(255,255,255,0.05)",
-                            backgroundColorHover: "rgba(0,0,0,0.7)",
-                            backgroundColorOn: "rgba(255,255,255,0.05)",
-                            iconColor: "var(--core-text-light)",
-                            iconColorHover: "var(--core-text-light)",
-                            iconColorOn: "var(--core-text-light)",
-                            onChange: () => handlePlayClick()
-                        }), jsx(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%"
-                        }), customControls.quit && jsx(IconButton, {
-                            toggle: !1,
-                            icon: "x",
-                            buttonSize: "m",
-                            backgroundColor: "rgba(255,255,255,0.05)",
-                            backgroundColorHover: "rgba(0,0,0,0.7)",
-                            backgroundColorOn: "rgba(255,255,255,0.05)",
-                            iconColor: "var(--core-text-light)",
-                            iconColorHover: "var(--core-text-light)",
-                            iconColorOn: "var(--core-text-light)",
-                            onClick: () => null == onQuit ? void 0 : onQuit()
-                        }) ]
-                    })
-                }) ]
-            }), "custom" === controls && children ]
-        }), jsx("video", {
-            ref: videoRef,
-            src: src,
-            autoPlay: !1,
-            playsInline: playsInline,
-            loop: loop,
-            muted: isMuted,
-            controls: "default" === controls,
-            poster: poster,
-            onCanPlayThrough: handleCanPlayThrough,
-            onCanPlay: handleCanPlay,
-            onPlay: handlePlay,
-            onPause: handlePause,
-            onEnded: handleEnd,
-            onProgress: handleLoadProgress,
-            onTimeUpdate: handlePlayProgress,
-            onRateChange: handlePlaybackRate,
-            onLoadedMetadata: handleLoadMetadata,
-            className: css_video,
-            children: jsx("track", {
-                kind: "captions",
-                src: captionsSrc
-            })
-        }), !canPlay && showProgressIndicator && jsx(ProgressIndicator, {
-            show: !0
-        }) ]
-    }));
-});
-
-BaseVideo.displayName = "Video";
-
-const Video = React.memo(BaseVideo);
-
-export { Video as V };

package/dist/esm/chunks/VideoController-D9ihYFYq.mjs

@@ -1,114 +0,0 @@
-'use client';
-import { a as __rest } from "./tslib.es6-DatKI43-.mjs";
-
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-
-import { useDragControls, AnimatePresence, motion } from "motion/react";
-
-import { useRef, useState, useEffect, useMemo } from "react";
-
-import "./microphoneStore-D8VxjdFZ.mjs";
-
-import "./volumeStore-hrteUkB-.mjs";
-
-import "./webRTCStore-B2ri-_li.mjs";
-
-import { corners } from "../theme/corners.mjs";
-
-import { s as setStyle } from "./misc-DBIXjc2Q.mjs";
-
-import { I as IconButton } from "./IconButton-BGL-_8VW.mjs";
-
-import { O as Overlay } from "./Overlay-D5cMQSvL.mjs";
-
-import { u as useVideo, a as useVideoActions } from "./videoStore-CiDDAB4E.mjs";
-
-var 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
-    }
-};
-
-function VideoController(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 = "var(--spacing-xxl)", borderRadius: borderRadius = corners["corner-m"], quit: quit = "inline", showProgressIndicator: showProgressIndicator = !0, onQuit: onQuit} = props, controls = useDragControls(), video = useVideo(), hide = 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 = __rest(_b, [ "onLoadedFrameData", "borderRadius" ]), ref = useRef(null), constraints = null != dragConstraintsRef ? dragConstraintsRef : ref, [ready, setReady] = useState(!1);
-    useEffect(() => {
-        (null == video ? void 0 : video.id) && setReady(!1);
-    }, [ null == video ? void 0 : video.id ]);
-    const handleHide = () => {
-        setReady(!1), hide(), null == onQuit || onQuit();
-    }, cssVars = useMemo(() => ({
-        "--overlay-padding": setStyle(padding, "var(--spacing-xxl)"),
-        "--video-visibility": ready ? "visible" : "hidden",
-        "--video-border-radius": setStyle(borderRadius, corners["corner-m"])
-    }), [ padding, ready, borderRadius ]);
-    return jsxs(Fragment, {
-        children: [ jsx(Overlay, {
-            show: !!video,
-            type: "dark",
-            opacity: overlayOpacity,
-            color: overlayColor,
-            onClick: handleHide
-        }), jsx(AnimatePresence, {
-            initial: !1,
-            children: video && VideoComponent && jsx("div", {
-                className: css_container,
-                ref: ref,
-                style: cssVars,
-                children: jsx("div", {
-                    className: css_box,
-                    children: jsxs(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: [ jsx("div", {
-                            className: css_video,
-                            children: jsx(VideoComponent, Object.assign({}, videoProps, {
-                                showProgressIndicator: showProgressIndicator,
-                                borderRadius: null != borderRadius ? borderRadius : videoBorderRadius,
-                                onLoadedFrameData: () => {
-                                    setReady(!0), null == onLoadedFrameData || onLoadedFrameData();
-                                },
-                                customControls: Object.assign(Object.assign({}, videoProps.customControls), {
-                                    quit: "inside" === quit
-                                }),
-                                onQuit: () => handleHide()
-                            }))
-                        }), "outside" === quit && jsx(IconButton, {
-                            icon: "x",
-                            buttonSize: "l",
-                            onClick: handleHide,
-                            backgroundColor: "rgba(255,255,255,0.05)",
-                            backgroundColorHover: "rgba(255,255,255,0.25)",
-                            iconColor: "var(--core-text-light)",
-                            iconColorHover: "var(--core-text-light)"
-                        }) ]
-                    })
-                })
-            })
-        }) ]
-    });
-}
-
-export { VideoController as V };