@apple-pie/slice 0.1.60 → 0.2.0

package/dist/cjs/chunks/ButtonBar-DDupZZ_u.js

@@ -0,0 +1,96 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-PmT7cZzC.js"), theme_corners = require("../theme/corners.js");
+
+require("./resolveColor-DkYThq2J.js"), require("./broadcastChannel-DdPZ3LUB.js"), 
+require("./files-RYD9L_pI.js");
+
+var resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), Icon = require("./Icon-COY7IZkK.js"), sharedTypes = require("./sharedTypes-BDMIewR9.js"), css_wrapper = "ButtonBar-module_wrapper__FYZ3s", css_button = "ButtonBar-module_button__bMR3h", css_icon = "ButtonBar-module_icon__xEaGM";
+
+const sizes = sharedTypes.buttonStyleDefaults.sizes, ButtonBar = React.memo(function(rawProps) {
+    const props = resolveColorProps.resolveColorProps(rawProps), {buttons: buttons = [], selectedIndex: selectedIndex, defaultSelectedIndex: defaultSelectedIndex = null, toggle: toggle = !1, buttonSize: buttonSize = "m", buttonGap: buttonGap = -2, padding: padding, selectionRadius: selectionRadius = "50%", iconSize: iconSize = 20, borderWidth: borderWidth = 0, borderRadius: borderRadius = theme_corners.corners["corner-round"], borderColor: borderColor = "var(--core-outline-primary)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-outline-primary)", backgroundColorSelected: backgroundColorSelected = "var(--core-outline-primary)", onClick: onClick, onChange: onChange, onToolTip: onToolTip} = props, divAttributes = tslib_es6.__rest(props, [ "buttons", "selectedIndex", "defaultSelectedIndex", "toggle", "buttonSize", "buttonGap", "padding", "selectionRadius", "iconSize", "borderWidth", "borderRadius", "borderColor", "backgroundColor", "backgroundColorHover", "backgroundColorSelected", "onClick", "onChange", "onToolTip" ]), {className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "className", "style" ]), [localSelected, setLocalSelected] = React.useState(defaultSelectedIndex), controlled = void 0 !== selectedIndex, candidate = controlled ? selectedIndex : localSelected, activeIndex = "number" == typeof candidate && Number.isInteger(candidate) && candidate >= 0 && candidate < buttons.length ? candidate : null, cssVars = {
+        "--bb-border-width": `${borderWidth}px`,
+        "--bb-border-radius": misc.setStyle(borderRadius),
+        "--bb-border-color": borderColor,
+        "--bb-bg-color": backgroundColor,
+        "--bb-bg-color-hover": backgroundColorHover,
+        "--bb-bg-color-selected": backgroundColorSelected,
+        "--bb-button-size": (() => {
+            var _a;
+            if ("number" == typeof buttonSize && Number.isFinite(buttonSize) && buttonSize > 0) return `${buttonSize}px`;
+            return `max(0px, calc(${null !== (_a = sizes[buttonSize]) && void 0 !== _a ? _a : sizes.m}px - 2 * var(--spacing-xs) - 2 * var(--bb-border-width)))`;
+        })(),
+        "--bb-icon-size": `${iconSize}px`,
+        "--bb-button-gap": `${buttonGap}px`,
+        "--bb-padding": void 0 === padding ? "var(--spacing-xs)" : misc.setStyle(padding),
+        "--bb-selection-radius": misc.setStyle(selectionRadius)
+    };
+    return jsxRuntime.jsx("div", Object.assign({
+        role: "group",
+        "aria-label": "Actions",
+        className: `${css_wrapper}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, cssVars), style)
+    }, rest, {
+        children: buttons.map((button, index) => {
+            var _a;
+            return jsxRuntime.jsx(BarButton, {
+                icon: button.icon,
+                iconSize: iconSize,
+                toolTip: button.tip,
+                pressed: toggle ? activeIndex === index : void 0,
+                onToolTip: onToolTip,
+                onClick: () => {
+                    toggle && activeIndex !== index ? (controlled || setLocalSelected(index), null == onClick || onClick(button), 
+                    null == onChange || onChange(button)) : null == onClick || onClick(button);
+                }
+            }, `button-bar-${null !== (_a = button.action) && void 0 !== _a ? _a : button.icon}-${index}`);
+        })
+    }));
+}), BarButton = React.memo(function({icon: icon, iconSize: iconSize, toolTip: toolTip, pressed: pressed, onClick: onClick, onToolTip: onToolTip}) {
+    const ref = React.useRef(null), hovered = React.useRef(!1), focused = React.useRef(!1), name = toolTip || "Button", showTooltip = event => {
+        null == onToolTip || onToolTip({
+            type: sharedTypes.ToolTipType.button,
+            payload: {
+                label: name
+            },
+            ref: ref,
+            event: event
+        });
+    };
+    return jsxRuntime.jsx("button", {
+        ref: ref,
+        type: "button",
+        className: css_button,
+        "aria-label": name,
+        "aria-pressed": pressed,
+        onMouseEnter: event => {
+            hovered.current = !0, showTooltip(event);
+        },
+        onMouseLeave: () => {
+            hovered.current = !1, focused.current || null == onToolTip || onToolTip(null);
+        },
+        onFocus: () => {
+            focused.current = !0, showTooltip();
+        },
+        onBlur: () => {
+            focused.current = !1, hovered.current || null == onToolTip || onToolTip(null);
+        },
+        onClick: () => {
+            null == onClick || onClick(), null == onToolTip || onToolTip(null);
+        },
+        children: jsxRuntime.jsx("span", {
+            "aria-hidden": "true",
+            className: css_icon,
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: icon,
+                size: iconSize,
+                strokeColor: "currentColor",
+                pointer: !1,
+                tabIndex: -1
+            })
+        })
+    });
+});
+
+exports.ButtonBar = ButtonBar;

package/dist/cjs/chunks/Camera-bjjzmzar.js

@@ -0,0 +1,560 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../theme/type.js"), require("./resolveColor-DkYThq2J.js"), 
+require("./breakpoints-BDw1OJh9.js");
+
+var misc = require("./misc-PmT7cZzC.js"), colors = require("./colors-hDzzq_Dk.js");
+
+require("./broadcastChannel-DdPZ3LUB.js"), require("./files-RYD9L_pI.js"), require("./webRTCStore-OGkXAovD.js"), 
+require("./microphoneStore-D7DuvQeX.js"), require("./volumeStore-BoEoo9wA.js");
+
+var resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), Avatar = require("./Avatar-a2GHmu1o.js"), Icon = require("./Icon-COY7IZkK.js"), ToggleButton = require("./ToggleButton-De8_kkMd.js"), 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 tslib_es6.__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 tslib_es6.__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 tslib_es6.__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 tslib_es6.__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 tslib_es6.__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 tslib_es6.__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.resolveColorProps(rawProps), videoElement = React.useRef(null), containerElement = React.useRef(null), controlsTimer = React.useRef(null), controlsElement = React.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 = tslib_es6.__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 = hooks_useTheme.useTheme(), [hovered, setHovered] = React.useState(!1), [focused, setFocused] = React.useState(!1), [snapshot, setSnapshot] = React.useState(), snapshotURL = React.useRef(void 0), updateSnapshot = React.useCallback(url => {
+        snapshotURL.current && URL.revokeObjectURL(snapshotURL.current), snapshotURL.current = url, 
+        setSnapshot(url);
+    }, []), [settings, setSettings] = React.useState(!1), [profile, setProfile] = React.useState(!1), [media, setMedia] = React.useState({
+        cameraOn: !1,
+        micMuted: startAudioMuted,
+        audioAvailable: !1,
+        supported: !0,
+        devices: []
+    }), callbacks = React.useRef({
+        audio: audio,
+        startAudioMuted: startAudioMuted,
+        playLocalAudio: playLocalAudio,
+        sessionSettings: sessionSettings,
+        onVideoStream: onVideoStream,
+        onNoAudio: onNoAudio,
+        onNoVideo: onNoVideo
+    });
+    React.useEffect(() => {
+        callbacks.current = {
+            audio: audio,
+            startAudioMuted: startAudioMuted,
+            playLocalAudio: playLocalAudio,
+            sessionSettings: sessionSettings,
+            onVideoStream: onVideoStream,
+            onNoAudio: onNoAudio,
+            onNoVideo: onNoVideo
+        };
+    });
+    const [session] = React.useState(() => new CameraSession(() => videoElement.current, () => callbacks.current, setMedia)), {cameraOn: cameraOn, micMuted: micMuted, devices: deviceList, error: cameraError, supported: cameraSupport} = media;
+    React.useEffect(() => (session.activate(), () => session.dispose()), [ session ]), 
+    React.useEffect(() => {
+        startCameraOff ? session.stop() : session.start();
+    }, [ session, startCameraOff ]), React.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 = React.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 = React.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 = React.useMemo(() => !cameraError && (!1 === cameraSupport || !cameraOn), [ cameraError, cameraSupport, cameraOn ]), showError = React.useMemo(() => Boolean(cameraError), [ cameraError ]), controlsBg = React.useMemo(() => {
+        if (!media.cameraOn) return backgroundColor;
+        const bgColor = theme.current.colors["core-surface-secondary"];
+        return colors.addOpacity(bgColor, .5);
+    }, [ media.cameraOn, backgroundColor, theme.current ]), setControlBarVisible = React.useMemo(() => showControlBar && (!autoHideControlBar || focused || hovered) ? "translateY(0%)" : "translateY(100%)", [ autoHideControlBar, hovered, showControlBar, focused ]), cssVars = React.useMemo(() => ({
+        "--camera-width": misc.setStyle(width),
+        "--camera-background-color": backgroundColor,
+        "--camera-border-color": borderColor,
+        "--camera-border-width": misc.setStyle(borderWidth),
+        "--camera-border-radius": misc.setStyle(borderRadius),
+        "--camera-height": misc.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 React.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 ]), React.useEffect(() => {
+        videoElement.current && (videoElement.current.muted = !playLocalAudio);
+    }, [ playLocalAudio ]), React.useEffect(() => () => {
+        controlsTimer.current && clearTimeout(controlsTimer.current);
+    }, []), React.useEffect(() => () => {
+        snapshotURL.current && URL.revokeObjectURL(snapshotURL.current), snapshotURL.current = void 0;
+    }, []), jsxRuntime.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 && jsxRuntime.jsxs("div", {
+            className: css.snapshotFrame,
+            children: [ jsxRuntime.jsx("div", {
+                className: css.clear,
+                children: jsxRuntime.jsx(Icon.Icon, {
+                    name: "basic.cross",
+                    pointer: !0,
+                    actionName: "Clear snapshot",
+                    onClick: () => updateSnapshot()
+                })
+            }), jsxRuntime.jsx("img", {
+                className: css.snapshot,
+                src: snapshot,
+                alt: "Snapshot"
+            }) ]
+        }), !1 !== cameraSupport && jsxRuntime.jsx("video", {
+            ref: videoElement,
+            className: css.video,
+            style: {
+                visibility: cameraOn ? "visible" : "hidden"
+            },
+            autoPlay: !0,
+            playsInline: !0,
+            muted: !playLocalAudio,
+            children: jsxRuntime.jsx("track", {
+                kind: "captions",
+                src: void 0
+            })
+        }), showPoster && jsxRuntime.jsx("div", {
+            className: css.poster,
+            children: null != noVideoPoster ? noVideoPoster : jsxRuntime.jsx(DefaultNoVideoPoster, {
+                user: userProfile
+            })
+        }), showError && jsxRuntime.jsx("div", {
+            className: css.error,
+            children: cameraError
+        }), showControlBar && jsxRuntime.jsxs("div", {
+            ref: controlsElement,
+            className: css.controls,
+            onMouseEnter: () => {
+                canAutoHide && (controlsTimer.current && clearTimeout(controlsTimer.current), setHovered(!0));
+            },
+            onMouseLeave: revealControls,
+            children: [ jsxRuntime.jsx("div", {
+                className: css.controlsLeft,
+                children: showProfileButton && jsxRuntime.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);
+                    }
+                })
+            }), jsxRuntime.jsxs("div", {
+                className: css.controlsCenter,
+                children: [ jsxRuntime.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 && jsxRuntime.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()
+                }), jsxRuntime.jsx(ToolbarButton, {
+                    borderWidth: media.cameraOn ? 0 : 1,
+                    icon: "images.camera",
+                    iconActive: "images.camera",
+                    active: !!snapshot,
+                    label: "Photo",
+                    disabled: !cameraOn,
+                    onClick: () => cameraOn && handleSnapshot({
+                        toggle: !0
+                    })
+                }) ]
+            }), jsxRuntime.jsx("div", {
+                className: css.controlsRight,
+                children: showSettingsButton && jsxRuntime.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 jsxRuntime.jsx(ToggleButton.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 ? jsxRuntime.jsx(Avatar.Avatar, {
+        image: null == user ? void 0 : user.avatar,
+        name: user.name,
+        email: `${null == user ? void 0 : user.email}`,
+        size: "50%",
+        textSize: "xl"
+    }) : jsxRuntime.jsxs("span", {
+        className: css.offMessage,
+        children: [ jsxRuntime.jsx(Icon.Icon, {
+            name: "media.video-camera-slash",
+            size: 20,
+            strokeColor: "currentColor",
+            decorative: !0
+        }), message ]
+    });
+}
+
+exports.Camera = Camera;