@apple-pie/slice 0.1.60 → 0.2.0

package/dist/esm/chunks/Camera-DWmX5FZ-.mjs

@@ -0,0 +1,585 @@
+'use client';
+import { _ as __awaiter, a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useRef, useState, useCallback, useEffect, useMemo } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../theme/type.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./breakpoints-Dn9DgpJe.mjs";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { a as addOpacity } from "./colors-DZ9xpMoE.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import "./webRTCStore-BepH2O9l.mjs";
+
+import "./microphoneStore-BzSEbtfK.mjs";
+
+import "./volumeStore-mqWIRL0J.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { A as Avatar } from "./Avatar-C4JzdLTW.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { T as ToggleButton } from "./ToggleButton-CGHa458C.mjs";
+
+var css = {
+    wrapper: "Camera-module_wrapper__GOsKp flexBox-module_column__ezvMq",
+    video: "Camera-module_video__Q2r9B",
+    controls: "Camera-module_controls__qXYoL flexBox-module_rowBetween__5FEvi",
+    controlsRight: "Camera-module_controlsRight__VcIz7 flexBox-module_rowEnd__rVdVm",
+    controlsCenter: "Camera-module_controlsCenter__e-erq flexBox-module_row__z24tF",
+    controlsLeft: "Camera-module_controlsLeft__bR4TN flexBox-module_rowStart__4tcxS",
+    error: "Camera-module_error__t0w-d flexBox-module_row__z24tF type-module_body-m-regular__LuQBA",
+    poster: "Camera-module_poster__Gun-v flexBox-module_row__z24tF type-module_body-m-regular__LuQBA",
+    snapshotFrame: "Camera-module_snapshotFrame__YM6Eu flexBox-module_row__z24tF",
+    clear: "Camera-module_clear__aaCfT",
+    snapshot: "Camera-module_snapshot__odQH0",
+    offMessage: "Camera-module_offMessage__FYila"
+};
+
+const stopTracks = stream => {
+    for (const track of stream.getTracks()) track.stop();
+}, isError = reason => reason instanceof Error || "undefined" != typeof DOMException && reason instanceof DOMException, asError = reason => isError(reason) ? reason : new Error("Could not access the camera. Ensure permissions are correct"), constraintFailure = reason => isError(reason) && [ "NotFoundError", "OverconstrainedError" ].includes(reason.name), cancelled = () => new Error("Camera request was cancelled");
+
+/** Owns only streams acquired by this Camera. Generation checks release stale results. */
+class CameraSession {
+    constructor(video, options, publish) {
+        this.video = video, this.options = options, this.publish = publish, this.active = !1, 
+        this.generation = 0, this.videoEnabled = !0, this.emptyDevices = [], this.devices = this.emptyDevices;
+    }
+    get stream() {
+        return this.ownedStream;
+    }
+    get videoTrack() {
+        var _a;
+        return null === (_a = this.stream) || void 0 === _a ? void 0 : _a.getVideoTracks()[0];
+    }
+    get audioTrack() {
+        var _a;
+        return null === (_a = this.stream) || void 0 === _a ? void 0 : _a.getAudioTracks()[0];
+    }
+    key(options = this.options()) {
+        const {audio: audio, sessionSettings: sessionSettings} = options;
+        return JSON.stringify([ audio, null == sessionSettings ? void 0 : sessionSettings.videoDeviceId, audio ? null == sessionSettings ? void 0 : sessionSettings.micDeviceId : void 0 ]);
+    }
+    activate() {
+        this.active = !0;
+    }
+    emit(error, supported = !0) {
+        if (!this.active) return;
+        const video = this.videoTrack, audio = this.audioTrack, next = {
+            cameraOn: Boolean("live" === (null == video ? void 0 : video.readyState) && video.enabled),
+            micMuted: audio ? !audio.enabled : this.options().startAudioMuted,
+            audioAvailable: "live" === (null == audio ? void 0 : audio.readyState),
+            error: error,
+            supported: supported,
+            devices: this.devices
+        }, previous = this.lastState;
+        previous && previous.cameraOn === next.cameraOn && previous.micMuted === next.micMuted && previous.audioAvailable === next.audioAvailable && previous.supported === next.supported && previous.error === next.error && previous.devices === next.devices || (this.lastState = next, 
+        this.publish(next));
+    }
+    release() {
+        var _a;
+        null === (_a = this.unlisten) || void 0 === _a || _a.call(this), this.unlisten = void 0;
+        const stream = this.ownedStream;
+        if (this.ownedStream = void 0, this.streamKey = void 0, this.devices = this.emptyDevices, 
+        stream) {
+            const video = this.video();
+            (null == video ? void 0 : video.srcObject) === stream && (video.srcObject = null), 
+            stopTracks(stream);
+        }
+    }
+    dispose() {
+        this.active = !1, this.generation++, this.pending = void 0, this.release();
+    }
+    stop() {
+        return __awaiter(this, void 0, void 0, function*() {
+            const hadMedia = Boolean(this.ownedStream || this.pending);
+            return this.generation++, this.pending = void 0, this.release(), this.muted = void 0, 
+            this.videoEnabled = !0, this.emit(), !!hadMedia || new Error("No media stream to stop");
+        });
+    }
+    refreshDevices(valid) {
+        return __awaiter(this, void 0, void 0, function*() {
+            const devices = yield this.devicesList();
+            valid() && (this.devices = Array.isArray(devices) && 0 === devices.length ? this.emptyDevices : devices, 
+            this.emit());
+        });
+    }
+    devicesList() {
+        return __awaiter(this, void 0, void 0, function*() {
+            var _a;
+            if ("undefined" == typeof navigator || !(null === (_a = navigator.mediaDevices) || void 0 === _a ? void 0 : _a.enumerateDevices)) return new Error("Media devices not supported");
+            try {
+                return yield navigator.mediaDevices.enumerateDevices();
+            } catch (reason) {
+                return reason instanceof Error ? reason : new Error("Unknown error enumerating devices. Please try again.");
+            }
+        });
+    }
+    request(options, valid) {
+        return __awaiter(this, void 0, void 0, function*() {
+            var _a, _b;
+            const videoId = null === (_a = options.sessionSettings) || void 0 === _a ? void 0 : _a.videoDeviceId, micId = null === (_b = options.sessionSettings) || void 0 === _b ? void 0 : _b.micDeviceId, video = !videoId || {
+                deviceId: {
+                    exact: videoId
+                }
+            }, audio = options.audio && (!micId || {
+                deviceId: {
+                    exact: micId
+                }
+            });
+            let failure;
+            try {
+                return {
+                    stream: yield navigator.mediaDevices.getUserMedia({
+                        video: video,
+                        audio: audio
+                    })
+                };
+            } catch (error) {
+                failure = error;
+            }
+            if (!valid()) throw cancelled();
+            if (constraintFailure(failure)) try {
+                return {
+                    stream: yield navigator.mediaDevices.getUserMedia({
+                        video: !0,
+                        audio: options.audio
+                    })
+                };
+            } catch (error) {
+                failure = error;
+            }
+            if (!valid()) throw cancelled();
+            if (!options.audio) throw failure;
+            try {
+                return {
+                    stream: yield navigator.mediaDevices.getUserMedia({
+                        video: video,
+                        audio: !1
+                    }),
+                    audioError: asError(failure)
+                };
+            } catch (error) {
+                if (!valid()) throw cancelled();
+                if (!constraintFailure(error)) throw error;
+                return {
+                    stream: yield navigator.mediaDevices.getUserMedia({
+                        video: !0,
+                        audio: !1
+                    }),
+                    audioError: asError(failure)
+                };
+            }
+        });
+    }
+    start(preserveTrackState = !1) {
+        var _a, _b, _c;
+        if (!this.active) return Promise.resolve(cancelled());
+        const key = this.key();
+        if ((null === (_a = this.pending) || void 0 === _a ? void 0 : _a.key) === key) return this.pending.promise;
+        if (this.ownedStream && this.streamKey === key && "live" === (null === (_b = this.videoTrack) || void 0 === _b ? void 0 : _b.readyState)) return this.enableVideo(), 
+        Promise.resolve(this.ownedStream);
+        const options = this.options();
+        preserveTrackState || (this.videoEnabled = !0), null !== (_c = this.muted) && void 0 !== _c || (this.muted = options.startAudioMuted);
+        const captureOptions = Object.assign(Object.assign({}, options), {
+            startAudioMuted: this.muted
+        }), generation = ++this.generation;
+        this.release(), this.emit();
+        const promise = this.acquire(captureOptions, key, () => this.active && this.generation === generation).finally(() => {
+            var _a;
+            (null === (_a = this.pending) || void 0 === _a ? void 0 : _a.promise) === promise && (this.pending = void 0);
+        });
+        return this.pending = {
+            key: key,
+            promise: promise
+        }, promise;
+    }
+    /** Device changes replace active/pending capture, without undoing manual video-off state. */    reconfigure(options = this.options()) {
+        var _a, _b;
+        (this.ownedStream || this.pending) && (null !== (_b = null === (_a = this.pending) || void 0 === _a ? void 0 : _a.key) && void 0 !== _b ? _b : this.streamKey) !== this.key(options) && this.start(!0);
+    }
+    acquire(options, key, valid) {
+        return __awaiter(this, void 0, void 0, function*() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            let candidate;
+            try {
+                if ("undefined" == typeof navigator || !(null === (_a = navigator.mediaDevices) || void 0 === _a ? void 0 : _a.getUserMedia)) {
+                    const error = new Error("Camera not supported");
+                    return this.emit(error.message, !1), null === (_c = (_b = this.options()).onNoVideo) || void 0 === _c || _c.call(_b, error), 
+                    valid() && options.audio && (null === (_e = (_d = this.options()).onNoAudio) || void 0 === _e || _e.call(_d, error)), 
+                    error;
+                }
+                const result = yield this.request(options, valid);
+                if (candidate = result.stream, !valid()) return stopTracks(candidate), cancelled();
+                const videoTrack = candidate.getVideoTracks()[0];
+                if (!videoTrack || "live" !== videoTrack.readyState) throw new Error("No video track available");
+                const video = this.video();
+                if (!video) throw new Error("Video element not found");
+                const audio = candidate.getAudioTracks()[0];
+                if (audio && (audio.enabled = !options.startAudioMuted), videoTrack.enabled = this.videoEnabled, 
+                this.ownedStream = candidate, this.streamKey = key, video.muted = !this.options().playLocalAudio, 
+                video.srcObject = candidate, yield video.play(), !valid()) return cancelled();
+                const changed = () => this.emit();
+                for (const track of candidate.getTracks()) track.addEventListener("ended", changed);
+                const attached = candidate;
+                return this.unlisten = () => {
+                    for (const track of attached.getTracks()) track.removeEventListener("ended", changed);
+                }, this.emit(), valid() ? (!options.audio || audio && !result.audioError || null === (_g = (_f = this.options()).onNoAudio) || void 0 === _g || _g.call(_f, null !== (_h = result.audioError) && void 0 !== _h ? _h : new Error("No audio track available")), 
+                valid() ? (null === (_k = (_j = this.options()).onVideoStream) || void 0 === _k || _k.call(_j, candidate), 
+                valid() ? (this.refreshDevices(valid), candidate) : cancelled()) : cancelled()) : cancelled();
+            } catch (reason) {
+                if (!valid()) return candidate && candidate !== this.ownedStream && stopTracks(candidate), 
+                cancelled();
+                candidate === this.ownedStream ? this.release() : candidate && stopTracks(candidate);
+                const error = asError(reason);
+                return this.emit(error.message), null === (_m = (_l = this.options()).onNoVideo) || void 0 === _m || _m.call(_l, error), 
+                valid() && options.audio && (null === (_p = (_o = this.options()).onNoAudio) || void 0 === _p || _p.call(_o, error)), 
+                error;
+            }
+        });
+    }
+    disableVideo() {
+        const track = this.videoTrack;
+        return track ? (this.videoEnabled = !1, track.enabled = !1, this.emit(), !0) : new Error("No video track found");
+    }
+    enableVideo() {
+        if (!this.stream) return new Error("No media stream found");
+        const track = this.videoTrack;
+        return track ? "live" !== track.readyState ? (this.emit(), new Error("Video track is no longer live")) : (this.videoEnabled = !0, 
+        track.enabled = !0, this.emit(), this.stream) : new Error("No video track found");
+    }
+    muteMic() {
+        return this.setMuted(!0);
+    }
+    unmuteMic() {
+        return this.setMuted(!1);
+    }
+    setMuted(muted) {
+        const track = this.audioTrack;
+        return track && "live" === track.readyState ? (this.muted = muted, track.enabled = !muted, 
+        this.emit(), !0) : new Error("No audio track found");
+    }
+    toggleMic() {
+        var _a;
+        return (null === (_a = this.audioTrack) || void 0 === _a ? void 0 : _a.enabled) ? this.muteMic() : this.unmuteMic();
+    }
+    toggleVideo() {
+        return __awaiter(this, void 0, void 0, function*() {
+            var _a;
+            return this.stream && "live" === (null === (_a = this.videoTrack) || void 0 === _a ? void 0 : _a.readyState) ? this.videoTrack.enabled ? this.disableVideo() : this.enableVideo() : this.start();
+        });
+    }
+}
+
+const Camera = React.memo(React.forwardRef((rawProps, ref) => {
+    const props = resolveColorProps(rawProps), videoElement = useRef(null), containerElement = useRef(null), controlsTimer = useRef(null), controlsElement = useRef(null), {noVideoPoster: noVideoPoster, backgroundColor: backgroundColor = "var(--core-surface-secondary)", borderColor: borderColor = "var(--core-fill-primary)", borderWidth: borderWidth = 1, borderRadius: borderRadius = "var(--corner-xxl)", audio: audio = !0, width: width, height: height, showControlBar: showControlBar = !0, showProfileButton: showProfileButton = !1, showSettingsButton: showSettingsButton = !1, autoHideControlBar: autoHideControlBar = !0, startCameraOff: startCameraOff = !1, startAudioMuted: startAudioMuted = !1, playLocalAudio: playLocalAudio = !1, pipSnapshot: pipSnapshot = !0, userProfile: userProfile, sessionSettings: sessionSettings, onChangeProfile: onChangeProfile, onChangeSettings: onChangeSettings, onSnapshot: onSnapshot, onVideoStream: onVideoStream, onNoVideo: onNoVideo, onNoAudio: onNoAudio, className: className, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, onClick: onClick, onFocusCapture: onFocusCapture, onBlurCapture: onBlurCapture} = props, divAttributes = __rest(props, [ "noVideoPoster", "backgroundColor", "borderColor", "borderWidth", "borderRadius", "audio", "width", "height", "showControlBar", "showProfileButton", "showSettingsButton", "autoHideControlBar", "startCameraOff", "startAudioMuted", "playLocalAudio", "pipSnapshot", "userProfile", "sessionSettings", "onChangeProfile", "onChangeSettings", "onSnapshot", "onVideoStream", "onNoVideo", "onNoAudio", "className", "style", "onMouseEnter", "onMouseLeave", "onMouseMove", "onClick", "onFocusCapture", "onBlurCapture" ]), theme = useTheme(), [hovered, setHovered] = useState(!1), [focused, setFocused] = useState(!1), [snapshot, setSnapshot] = useState(), snapshotURL = useRef(void 0), updateSnapshot = useCallback(url => {
+        snapshotURL.current && URL.revokeObjectURL(snapshotURL.current), snapshotURL.current = url, 
+        setSnapshot(url);
+    }, []), [settings, setSettings] = useState(!1), [profile, setProfile] = useState(!1), [media, setMedia] = useState({
+        cameraOn: !1,
+        micMuted: startAudioMuted,
+        audioAvailable: !1,
+        supported: !0,
+        devices: []
+    }), callbacks = useRef({
+        audio: audio,
+        startAudioMuted: startAudioMuted,
+        playLocalAudio: playLocalAudio,
+        sessionSettings: sessionSettings,
+        onVideoStream: onVideoStream,
+        onNoAudio: onNoAudio,
+        onNoVideo: onNoVideo
+    });
+    useEffect(() => {
+        callbacks.current = {
+            audio: audio,
+            startAudioMuted: startAudioMuted,
+            playLocalAudio: playLocalAudio,
+            sessionSettings: sessionSettings,
+            onVideoStream: onVideoStream,
+            onNoAudio: onNoAudio,
+            onNoVideo: onNoVideo
+        };
+    });
+    const [session] = useState(() => new CameraSession(() => videoElement.current, () => callbacks.current, setMedia)), {cameraOn: cameraOn, micMuted: micMuted, devices: deviceList, error: cameraError, supported: cameraSupport} = media;
+    useEffect(() => (session.activate(), () => session.dispose()), [ session ]), useEffect(() => {
+        startCameraOff ? session.stop() : session.start();
+    }, [ session, startCameraOff ]), useEffect(() => {
+        session.reconfigure({
+            audio: audio,
+            sessionSettings: {
+                videoDeviceId: null == sessionSettings ? void 0 : sessionSettings.videoDeviceId,
+                micDeviceId: null == sessionSettings ? void 0 : sessionSettings.micDeviceId
+            }
+        });
+    }, [ session, audio, null == sessionSettings ? void 0 : sessionSettings.videoDeviceId, null == sessionSettings ? void 0 : sessionSettings.micDeviceId ]);
+    const takeSnapshot = useCallback(options => {
+        var _a, _b, _c, _d;
+        if (!videoElement.current) return;
+        const width = null !== (_a = null == options ? void 0 : options.width) && void 0 !== _a ? _a : videoElement.current.videoWidth, height = null !== (_b = null == options ? void 0 : options.height) && void 0 !== _b ? _b : videoElement.current.videoHeight;
+        if (!width || !height) return;
+        const canvas = document.createElement("canvas");
+        canvas.width = width, canvas.height = height;
+        const context = canvas.getContext("2d");
+        if (!context) return;
+        context.drawImage(videoElement.current, 0, 0, canvas.width, canvas.height);
+        const url = canvas.toDataURL("image/png"), [header, data] = url.split(",");
+        if (!header || !data) return;
+        const mimeType = null !== (_d = null === (_c = new RegExp(/data:(.*?);base64/).exec(header)) || void 0 === _c ? void 0 : _c[1]) && void 0 !== _d ? _d : "image/png", binary = atob(data), bytes = new Uint8Array(binary.length);
+        for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.codePointAt(index);
+        return new Blob([ bytes ], {
+            type: mimeType
+        });
+    }, []), handleSnapshot = useCallback(options => {
+        if ((null == options ? void 0 : options.toggle) && snapshotURL.current) return void updateSnapshot();
+        const photo = takeSnapshot(options);
+        return null == onSnapshot || onSnapshot(photo), updateSnapshot(photo ? URL.createObjectURL(photo) : void 0), 
+        photo;
+    }, [ onSnapshot, takeSnapshot, updateSnapshot ]);
+    React.useImperativeHandle(ref, () => ({
+        get video() {
+            var _a;
+            return null !== (_a = videoElement.current) && void 0 !== _a ? _a : void 0;
+        },
+        get container() {
+            var _a;
+            return null !== (_a = containerElement.current) && void 0 !== _a ? _a : void 0;
+        },
+        get stream() {
+            return session.stream;
+        },
+        get videoTrack() {
+            return session.videoTrack;
+        },
+        get audioTrack() {
+            return session.audioTrack;
+        },
+        snapshot: options => handleSnapshot(options),
+        startCamera: () => session.start(),
+        stopCamera: () => session.stop(),
+        enableVideo: () => session.enableVideo(),
+        disableVideo: () => session.disableVideo(),
+        muteMic: () => session.muteMic(),
+        unmuteMic: () => session.unmuteMic(),
+        toggleMic: () => session.toggleMic(),
+        devices: () => session.devicesList(),
+        toggleVideo: () => session.toggleVideo()
+    }), [ session, handleSnapshot ]);
+    const showPoster = useMemo(() => !cameraError && (!1 === cameraSupport || !cameraOn), [ cameraError, cameraSupport, cameraOn ]), showError = useMemo(() => Boolean(cameraError), [ cameraError ]), controlsBg = useMemo(() => {
+        if (!media.cameraOn) return backgroundColor;
+        const bgColor = theme.current.colors["core-surface-secondary"];
+        return addOpacity(bgColor, .5);
+    }, [ media.cameraOn, backgroundColor, theme.current ]), setControlBarVisible = useMemo(() => showControlBar && (!autoHideControlBar || focused || hovered) ? "translateY(0%)" : "translateY(100%)", [ autoHideControlBar, hovered, showControlBar, focused ]), cssVars = useMemo(() => ({
+        "--camera-width": setStyle(width),
+        "--camera-background-color": backgroundColor,
+        "--camera-border-color": borderColor,
+        "--camera-border-width": setStyle(borderWidth),
+        "--camera-border-radius": setStyle(borderRadius),
+        "--camera-height": setStyle(height),
+        "--camera-controls-bg": controlsBg,
+        "--camera-controls-transform": setControlBarVisible
+    }), [ controlsBg, height, setControlBarVisible, width, backgroundColor, borderColor, borderWidth, borderRadius ]), canAutoHide = showControlBar && autoHideControlBar, revealControls = () => {
+        canAutoHide && (setHovered(!0), controlsTimer.current && clearTimeout(controlsTimer.current), 
+        controlsTimer.current = setTimeout(() => {
+            var _a, _b;
+            (null === (_a = controlsElement.current) || void 0 === _a ? void 0 : _a.contains(document.activeElement)) || (null === (_b = controlsElement.current) || void 0 === _b ? void 0 : _b.matches(":hover")) || setHovered(!1);
+        }, 3e3));
+    }, leaveControls = () => {
+        canAutoHide && (controlsTimer.current && clearTimeout(controlsTimer.current), setHovered(!1));
+    };
+    return useEffect(() => {
+        var _a;
+        controlsTimer.current && clearTimeout(controlsTimer.current), canAutoHide ? setFocused(Boolean(null === (_a = containerElement.current) || void 0 === _a ? void 0 : _a.contains(document.activeElement))) : (setHovered(!1), 
+        setFocused(!1));
+    }, [ canAutoHide ]), useEffect(() => {
+        videoElement.current && (videoElement.current.muted = !playLocalAudio);
+    }, [ playLocalAudio ]), useEffect(() => () => {
+        controlsTimer.current && clearTimeout(controlsTimer.current);
+    }, []), useEffect(() => () => {
+        snapshotURL.current && URL.revokeObjectURL(snapshotURL.current), snapshotURL.current = void 0;
+    }, []), jsxs("div", Object.assign({}, divAttributes, {
+        ref: containerElement,
+        className: [ css.wrapper, className ].filter(Boolean).join(" "),
+        style: Object.assign(Object.assign({}, cssVars), style),
+        onMouseEnter: event => {
+            null == onMouseEnter || onMouseEnter(event), revealControls();
+        },
+        onMouseMove: event => {
+            null == onMouseMove || onMouseMove(event), revealControls();
+        },
+        onMouseLeave: event => {
+            null == onMouseLeave || onMouseLeave(event), leaveControls();
+        },
+        onClick: onClick,
+        onFocusCapture: event => {
+            null == onFocusCapture || onFocusCapture(event), canAutoHide && (setFocused(!0), 
+            revealControls());
+        },
+        onBlurCapture: event => {
+            null == onBlurCapture || onBlurCapture(event), canAutoHide && (event.currentTarget.contains(event.relatedTarget) || (setFocused(!1), 
+            leaveControls()));
+        },
+        children: [ pipSnapshot && snapshot && jsxs("div", {
+            className: css.snapshotFrame,
+            children: [ jsx("div", {
+                className: css.clear,
+                children: jsx(Icon, {
+                    name: "basic.cross",
+                    pointer: !0,
+                    actionName: "Clear snapshot",
+                    onClick: () => updateSnapshot()
+                })
+            }), jsx("img", {
+                className: css.snapshot,
+                src: snapshot,
+                alt: "Snapshot"
+            }) ]
+        }), !1 !== cameraSupport && jsx("video", {
+            ref: videoElement,
+            className: css.video,
+            style: {
+                visibility: cameraOn ? "visible" : "hidden"
+            },
+            autoPlay: !0,
+            playsInline: !0,
+            muted: !playLocalAudio,
+            children: jsx("track", {
+                kind: "captions",
+                src: void 0
+            })
+        }), showPoster && jsx("div", {
+            className: css.poster,
+            children: null != noVideoPoster ? noVideoPoster : jsx(DefaultNoVideoPoster, {
+                user: userProfile
+            })
+        }), showError && jsx("div", {
+            className: css.error,
+            children: cameraError
+        }), showControlBar && jsxs("div", {
+            ref: controlsElement,
+            className: css.controls,
+            onMouseEnter: () => {
+                canAutoHide && (controlsTimer.current && clearTimeout(controlsTimer.current), setHovered(!0));
+            },
+            onMouseLeave: revealControls,
+            children: [ jsx("div", {
+                className: css.controlsLeft,
+                children: showProfileButton && jsx(ToolbarButton, {
+                    borderWidth: media.cameraOn ? 0 : 1,
+                    icon: "users.user",
+                    iconActive: "users.user",
+                    active: profile,
+                    label: "User Info",
+                    disabled: !1,
+                    onClick: () => {
+                        setProfile(!profile), null == onChangeProfile || onChangeProfile(userProfile);
+                    }
+                })
+            }), jsxs("div", {
+                className: css.controlsCenter,
+                children: [ jsx(ToolbarButton, {
+                    borderWidth: media.cameraOn ? 0 : 1,
+                    icon: "media.video-camera",
+                    iconActive: "media.video-camera-slash",
+                    active: !cameraOn,
+                    label: cameraOn ? "Video" : "Off",
+                    onClick: () => {
+                        session.toggleVideo();
+                    }
+                }), audio && jsx(ToolbarButton, {
+                    borderWidth: media.cameraOn ? 0 : 1,
+                    icon: "media.mic",
+                    iconActive: "media.mic-slash",
+                    active: micMuted,
+                    label: micMuted ? "Muted" : "Mic",
+                    disabled: !media.audioAvailable,
+                    onClick: () => session.toggleMic()
+                }), jsx(ToolbarButton, {
+                    borderWidth: media.cameraOn ? 0 : 1,
+                    icon: "images.camera",
+                    iconActive: "images.camera",
+                    active: !!snapshot,
+                    label: "Photo",
+                    disabled: !cameraOn,
+                    onClick: () => cameraOn && handleSnapshot({
+                        toggle: !0
+                    })
+                }) ]
+            }), jsx("div", {
+                className: css.controlsRight,
+                children: showSettingsButton && jsx(ToolbarButton, {
+                    borderWidth: media.cameraOn ? 0 : 1,
+                    icon: "basic.more-horiz-fill",
+                    iconActive: "basic.more-horiz-fill",
+                    active: settings,
+                    label: "Settings",
+                    disabled: !1,
+                    onClick: () => {
+                        setSettings(!settings), null == onChangeSettings || onChangeSettings(sessionSettings, deviceList);
+                    }
+                })
+            }) ]
+        }) ]
+    }));
+}));
+
+/** Shared Slice control with the Camera action's controlled state. */ function ToolbarButton(props) {
+    const {borderWidth: borderWidth = 1, icon: icon, iconActive: iconActive, active: active, label: label, disabled: disabled, onClick: onClick, onMouseOver: onMouseOver} = props;
+    return jsx(ToggleButton, {
+        icon: icon,
+        iconSize: 20,
+        iconStrokeWidth: 1.5,
+        iconSelected: iconActive,
+        selected: active,
+        label: label,
+        labelOutside: !0,
+        labelPosition: "bottom",
+        disabled: disabled,
+        onFocus: onMouseOver,
+        onMouseOver: onMouseOver,
+        onClick: onClick,
+        borderRadius: 100,
+        textSize: "xs",
+        borderWidth: active ? 0 : borderWidth
+    });
+}
+
+/**
+ * the default poster image when no video is available
+ */ function DefaultNoVideoPoster(props) {
+    const {user: user, message: message = "Video is off"} = props;
+    return user ? jsx(Avatar, {
+        image: null == user ? void 0 : user.avatar,
+        name: user.name,
+        email: `${null == user ? void 0 : user.email}`,
+        size: "50%",
+        textSize: "xl"
+    }) : jsxs("span", {
+        className: css.offMessage,
+        children: [ jsx(Icon, {
+            name: "media.video-camera-slash",
+            size: 20,
+            strokeColor: "currentColor",
+            decorative: !0
+        }), message ]
+    });
+}
+
+export { Camera as C };

package/dist/esm/chunks/CheckBox-CjmPDfLi.mjs

@@ -0,0 +1,76 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useState, useId, useEffect } from "react";
+
+import { b as accessibleKeyDown } from "./misc-DI5GSqkt.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+var css = {
+    wrapper: "CheckBox-module_wrapper__uRsjI",
+    icon: "CheckBox-module_icon__FoDJN",
+    label: "CheckBox-module_label__0AiBp",
+    xs: "CheckBox-module_xs__8HP4h type-module_body-xs-regular__ZAFft",
+    s: "CheckBox-module_s__qWZbK type-module_body-s-regular__vRHSP",
+    m: "CheckBox-module_m__cOkhr type-module_body-m-regular__LuQBA",
+    l: "CheckBox-module_l__wz2rr type-module_body-l-regular__lOYbg",
+    xl: "CheckBox-module_xl__exBbQ type-module_body-xl-regular__pF2kC"
+};
+
+const CheckBox = React.memo(rawProps => {
+    var _a;
+    const props = resolveColorProps(rawProps), {align: align = "middle", children: children, label: label, checked: checked = !1, disabled: disabled = !1, iconChecked: iconChecked = "system.checkbox-checked", iconUnChecked: iconUnChecked = "system.checkbox", iconPartial: iconPartial = "system.checkbox-partial", iconColor: iconColor, iconColorSelected: iconColorSelected, iconSize: iconSize = 20, gap: gap = 6, textColor: textColor, textSize: textSize = "m", textTopOffset: textTopOffset = 0, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, tabIndex: tabIndex = 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: className, style: style} = props, rest = __rest(props, [ "align", "children", "label", "checked", "disabled", "iconChecked", "iconUnChecked", "iconPartial", "iconColor", "iconColorSelected", "iconSize", "gap", "textColor", "textSize", "textTopOffset", "onChange", "onClick", "onKeyDown", "tabIndex", "aria-label", "aria-labelledby", "className", "style" ]), [state, setState] = useState(checked), contentId = useId(), content = null != label ? label : children, hasContent = null != content && !1 !== content;
+    useEffect(() => setState(checked), [ checked ]);
+    const iconName = !0 === state ? iconChecked : "mixed" === state ? iconPartial : iconUnChecked, selectedIconColor = !1 !== state ? iconColorSelected : void 0, resolvedIconColor = null !== (_a = null != selectedIconColor ? selectedIconColor : iconColor) && void 0 !== _a ? _a : disabled ? "var(--core-icon-disabled)" : "mixed" === state ? "var(--core-icon-primary)" : state ? "var(--core-text-special)" : "var(--core-icon-secondary)", resolvedTextColor = null != textColor ? textColor : disabled ? "var(--core-text-disabled)" : "var(--core-text-primary)", offset = Number.isFinite(textTopOffset) ? textTopOffset : 0, textShift = "top" === align ? Math.min(offset, 0) : "bottom" === align ? Math.max(offset, 0) : offset / 2, cssVars = {
+        "--cb-align": "top" === align ? "flex-start" : "bottom" === align ? "flex-end" : "center",
+        "--cb-icon-size": `${iconSize}px`,
+        "--cb-gap": `${gap}px`,
+        "--cb-text-color": resolvedTextColor,
+        "--cb-text-padding-top": `${Math.max(offset, 0)}px`,
+        "--cb-text-padding-bottom": `${Math.max(-offset, 0)}px`,
+        "--cb-text-shift": `${textShift}px`,
+        "--cb-cursor": disabled ? "default" : "pointer"
+    }, handleToggle = () => {
+        if (disabled) return;
+        const next = !0 !== state;
+        setState(next), null == onChange || onChange(next);
+    };
+    return jsxs("div", Object.assign({}, rest, {
+        className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        role: "checkbox",
+        "aria-checked": state,
+        "aria-disabled": disabled,
+        "aria-label": null != ariaLabel ? ariaLabel : ariaLabelledBy ? void 0 : label,
+        "aria-labelledby": null != ariaLabelledBy ? ariaLabelledBy : void 0 === ariaLabel && void 0 === label && hasContent ? contentId : void 0,
+        tabIndex: disabled ? -1 : tabIndex,
+        onClick: event => {
+            null == onClick || onClick(event), event.defaultPrevented || handleToggle();
+        },
+        onKeyDown: event => {
+            null == onKeyDown || onKeyDown(event), event.defaultPrevented || accessibleKeyDown(event, handleToggle);
+        },
+        children: [ jsx("span", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsx(Icon, {
+                name: iconName,
+                strokeColor: resolvedIconColor,
+                size: iconSize,
+                pointer: !1,
+                tabIndex: -1
+            })
+        }), hasContent && jsx("span", {
+            id: contentId,
+            className: `${css.label} ${css[textSize]}`,
+            children: content
+        }) ]
+    }));
+});
+
+export { CheckBox as C };